System Requirements Document for ujian-online

1. Introduction

ujian-online adalah aplikasi ujian sekolah berbasis link/website untuk siswa SMP Negeri 1 Sukadana, Kabupaten Kayong Utara. Aplikasi ini menghadirkan pengalaman ujian komputer yang profesional, rapi, modern, dan sederhana, terinspirasi dari sistem ujian online seperti Ujian UT — tanpa menyalin logo, warna, atau identitas resmi UT.

Produk ini melayani tiga kelompok pengguna aktif:

• Siswa (Peserta Ujian) — membuka link ujian, login dengan username/NIS/NISN dan password, memasukkan token ujian, lalu mengerjakan soal pilihan ganda dan essay dengan navigasi nomor soal, timer, dan penyimpanan jawaban otomatis.
• Guru — mengelola bank soal, mengatur jumlah soal, waktu dan jadwal ujian, membuat token, mengaktifkan/menonaktifkan ujian, memantau peserta yang sedang ujian, serta melihat hasil dan nilai siswa.
• Admin — mengelola data master (siswa, guru, kelas, mata pelajaran) dan bank soal, mengimpor soal, mengatur konfigurasi ujian, memantau peserta, melihat hasil dan nilai, serta mengekspor hasil ke Excel.

Tujuan produk: menyelenggarakan ujian sekolah secara online melalui satu link yang dapat dibagikan guru kepada siswa, dengan penilaian otomatis, penyimpanan jawaban yang aman, dan hasil ujian yang dapat dipublikasikan sesuai kebijakan guru/admin.

2. System Overview

Aplikasi dijalankan sebagai layanan web yang dapat diakses melalui link online (contoh: https://ujian.smpn1sukadana.sch.id). Alur utama siswa: membuka link → login → memasukkan token → mengikuti ujian → menyelesaikan ujian → melihat status/hasil sesuai kebijakan publikasi nilai.

Aktor:

Perilaku yang diterima (ringkas): login siswa, login admin/guru, halaman ujian dengan header/timer/nomor soal/pilihan A–D/tombol navigasi, panel nomor soal dengan status warna, sistem timer countdown dengan penutupan otomatis, halaman konfirmasi selesai, halaman hasil, dashboard admin/guru, bank soal (pilihan ganda & essay), sistem keamanan ujian, link online, desain responsive, database relasional, dan stack teknologi modern.

Batasan/eksklusi sempit:

• Jangan menyalin logo, warna, atau identitas resmi UT.
• Tidak terlalu banyak animasi.
• Jangan hanya membuat desain/template; aplikasi harus benar-benar berfungsi.
• Siswa tidak boleh dapat mengakses halaman admin.
• Satu akun hanya dapat digunakan pada satu sesi ujian.
• Setelah waktu habis, siswa tidak dapat mengerjakan kembali.

2a. Product Interpretation and Delivery Boundary

Aplikasi ini adalah infrastruktur informasi publik sekolah — bukan produk SaaS komersial. Identitas visual dibangun dari tipografi dan sistem tanda (wayfinding), bukan dari template biru-putih generik. Seluruh antarmuka menggunakan ground kertas hangat, warna sinyal merah transit dan teal, serta tipografi Fira Sans.

Kepemilikan delivery dan akses:

• Aplikasi dimiliki dan dioperasikan oleh sekolah (first-party), di-deploy sebagai link online.
• Identitas aplikasi (akun siswa, guru, admin) dimiliki oleh aplikasi. Akun siswa diprovisikan sebelum login; akun guru dan admin diprovisikan dengan peran yang sesuai sebelum mengakses dashboard.
• Landing page bersifat anonim (tanpa login) dan mengarahkan siswa, guru, serta admin ke akses masing-masing.
• Halaman Login Siswa dan Login Admin/Guru bersifat anonim (belum login) karena merupakan permukaan autentikasi.
• Halaman Ujian, Panel Nomor Soal, dan Halaman Konfirmasi Selesai dibatasi peran (role_restricted) untuk siswa yang telah login dan memiliki sesi ujian aktif.
• Halaman Hasil memerlukan login; siswa melihat hasilnya sendiri, guru/admin melihat hasil siswa sesuai kewenangan.
• Dashboard Admin/Guru dan Bank Soal dibatasi peran (role_restricted) untuk guru dan admin.

Batas current vs future: Seluruh requirement dalam dokumen ini adalah current. Tidak ada requirement future yang didefinisikan dalam sumber otoritatif.

2b. Source Content Inventory

Tidak ada reference directive dengan uses: content_source. Bagian ini tidak disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Penjelasan singkat aplikasi ujian online sekolah; identitas sekolah (SMP Negeri 1 Sukadana, Kabupaten Kayong Utara); tiga jalur akses (Siswa, Guru, Admin); status ujian aktif (jika ada) dengan dot status merah transit.
• Aksi utama: Menuju HALAMAN LOGIN SISWA; menuju Login Admin/Guru.
• Aksi pendukung: Melihat informasi jadwal/waktu ujian yang tersedia.
• Entitas domain: exams (nama ujian, mata pelajaran, kelas, waktu), school identity.
• Tanggung jawab komponen: Hero dua-panel (panel ink gelap berisi identitas sekolah + panel kertas hangat berisi jalur akses); diagram skematik grid nomor soal sebagai band 96px; kartu jalur akses dengan label 12px uppercase.
• State: Loading (skeleton kartu jalur), Empty (tidak ada ujian aktif — tampilkan pesan informatif), Success (kartu jalur tampil), Error (gagal memuat info ujian — tampilkan fallback statis), Recovery (tombol coba lagi).

HALAMAN LOGIN SISWA

• Informasi/state: Logo/nama sekolah; judul UJIAN ONLINE SMP NEGERI 1 SUKADANA; informasi nama ujian, mata pelajaran, kelas, dan waktu ujian; field Username/NIS/NISN; field Password; field Token Ujian; tombol MASUK UJIAN.
• Aksi utama: Memasukkan kredensial dan token, menekan MASUK UJIAN.
• Aksi pendukung: Melihat informasi ujian yang sedang berlangsung.
• Entitas domain: users, students, exams, tokens, exam_sessions.
• Tanggung jawab komponen: Panel ink gelap (45%) berisi identitas sekolah + blok fakta ujian (label/value rows dengan tabular numerals); panel kertas hangat (55%) berisi form login; diagram skematik grid nomor soal; tombol merah transit full-width.
• State: Loading (tombol disabled saat submit), Empty (tidak ada ujian aktif — tampilkan pesan), Success (redirect ke HALAMAN UJIAN), Error (kredensial salah / token tidak valid / akun sudah aktif di sesi lain — pesan error jelas), Recovery (form tetap terisi, siswa dapat memperbaiki input).

Login Admin/Guru

• Informasi/state: Identitas sekolah; judul login admin/guru; field username/email; field password; tombol masuk.
• Aksi utama: Memasukkan kredensial, menekan tombol masuk.
• Aksi pendukung: Tidak ada.
• Entitas domain: users, teachers.
• Tanggung jawab komponen: Form login terpusat pada ground kertas hangat; label 12px uppercase; tombol merah transit.
• State: Loading (tombol disabled saat submit), Empty (N/A), Success (redirect ke DASHBOARD ADMIN/GURU), Error (kredensial salah — pesan error), Recovery (form tetap terisi).

HALAMAN UJIAN

• Informasi/state: Header berisi nama sekolah dan nama ujian; nama siswa dan kelas; mata pelajaran; timer/countdown (misalnya 01:30:00); nomor soal; pertanyaan; pilihan jawaban A, B, C, D; status penyimpanan jawaban.
• Aksi utama: Memilih jawaban A/B/C/D; menekan Sebelumnya; menekan Berikutnya; menekan Simpan Jawaban; menekan Selesai Ujian.
• Aksi pendukung: Berpindah soal melalui panel nomor soal; menandai soal ragu-ragu.
• Entitas domain: exams, exam_questions, questions, options, answers, exam_sessions.
• Tanggung jawab komponen: Header tetap (school name + exam name + student name/class + timer cell dengan countdown ring); question sheet (8 kolom) berisi nomor soal, pertanyaan, pilihan A–D; action bar tetap di bawah dengan empat tombol; timer sebagai angka terbesar di layar (Fira Sans Condensed 700, tabular numerals).
• State: Loading (memuat soal — skeleton), Empty (tidak ada soal — pesan error), Success (soal tampil, jawaban tersimpan), Error (gagal memuat soal / gagal menyimpan jawaban — pesan error + retry), Recovery (jawaban tersimpan tetap aman; refresh tidak menghilangkan jawaban; koneksi terputus — jawaban tersimpan tetap aman).

PANEL NOMOR SOAL

• Informasi/state: Nomor 1 sampai jumlah soal; status warna: abu-abu (#E3DFD6) = belum dijawab, teal (#0E6E5C) = sudah dijawab, ink dengan rule merah atas = soal aktif, outline merah (#C0202B) = ragu-ragu; legenda di bawah panel.
• Aksi utama: Mengklik nomor soal untuk berpindah ke soal tertentu.
• Aksi pendukung: Melihat legenda status.
• Entitas domain: exam_questions, answers.
• Tanggung jawab komponen: Grid chip persegi dengan radius 4px; legenda seperti kunci jalur transit; sticky di kolom kanan (4 kolom) pada desktop; strip horizontal scrollable di bawah header pada 768px.
• State: Loading (skeleton chip), Empty (tidak ada soal), Success (chip tampil dengan status warna), Error (gagal memuat status — chip default abu-abu), Recovery (refresh memuat ulang status dari server).

HALAMAN KONFIRMASI SELESAI

• Informasi/state: Pesan "Apakah Anda yakin ingin mengakhiri ujian?"; jumlah soal; sudah dijawab; belum dijawab.
• Aksi utama: Menekan Kembali ke Ujian; menekan Ya, Selesaikan Ujian.
• Aksi pendukung: Tidak ada.
• Entitas domain: exam_sessions, answers, exam_questions.
• Tanggung jawab komponen: Modal/panel konfirmasi dengan ringkasan tiga angka (tabular numerals); tombol Kembali ke Ujian (outlined) dan Ya, Selesaikan Ujian (merah transit — satu-satunya tombol merah terisi).
• State: Loading (tombol disabled saat submit), Empty (N/A), Success (redirect ke HALAMAN HASIL), Error (gagal menyelesaikan ujian — pesan error + retry), Recovery (kembali ke ujian).

HALAMAN HASIL

• Informasi/state: Nama siswa; kelas; mata pelajaran; jumlah soal; jumlah benar; nilai; status selesai ujian. Jika kebijakan publikasi nilai = disembunyikan, nilai tidak ditampilkan kepada siswa.
• Aksi utama: Siswa melihat status/hasil ujiannya; guru/admin melihat hasil siswa.
• Aksi pendukung: Logout otomatis setelah ujian selesai.
• Entitas domain: results, exam_sessions, students, exams, subjects.
• Tanggung jawab komponen: Kartu hasil dengan ruled label/value rows; status selesai ujian dengan dot status; nilai dalam tabular numerals besar.
• State: Loading (skeleton), Empty (hasil belum tersedia — pesan), Success (hasil tampil), Error (gagal memuat hasil — pesan + retry), Recovery (refresh memuat ulang).

DASHBOARD ADMIN/GURU

• Informasi/state: Left rail bernomor (01 Peserta, 02 Bank Soal, 03 Jadwal, 04 Token, 05 Hasil); area utama tabular padat; data siswa, guru, kelas, mata pelajaran, bank soal, konfigurasi ujian, token, peserta yang sedang ujian, hasil ujian, nilai siswa.
• Aksi utama: Login Admin/Guru; kelola siswa; kelola guru; kelola kelas; kelola mata pelajaran; kelola bank soal; tambah/edit/hapus soal; import soal; atur jumlah soal; atur waktu ujian; atur jadwal ujian; buat token ujian; aktifkan/nonaktifkan ujian; lihat peserta yang sedang ujian; lihat hasil ujian; lihat nilai siswa; export hasil ke Excel.
• Aksi pendukung: Menentukan apakah nilai langsung ditampilkan kepada siswa atau disembunyikan.
• Entitas domain: users, students, teachers, classes, subjects, exams, questions, options, exam_questions, exam_sessions, answers, results, tokens.
• Tanggung jawab komponen: Left rail dengan pictogram SVG inline (kursi untuk peserta, buku untuk bank soal, jam untuk jadwal, kunci untuk token); tabel ruled ledger (1px horizontal rules, header 12px uppercase, tabular numerals right-aligned, row actions sebagai text link); form konfigurasi ujian; tombol export Excel.
• State: Loading (skeleton tabel), Empty (tidak ada data — pesan + CTA tambah), Success (data tampil), Error (gagal memuat/menyimpan — pesan + retry), Recovery (form tetap terisi; data tersimpan tetap aman).

BANK SOAL

• Informasi/state: Mata pelajaran; kelas; materi; pertanyaan; pilihan A; pilihan B; pilihan C; pilihan D; kunci jawaban; bobot soal; tingkat kesulitan; tipe soal (Pilihan Ganda / Essay).
• Aksi utama: Menambah soal; mengedit soal; menghapus soal; mengimpor soal.
• Aksi pendukung: Memfilter soal berdasarkan mata pelajaran, kelas, materi, tingkat kesulitan, tipe soal.
• Entitas domain: questions, options, subjects, classes.
• Tanggung jawab komponen: Tabel ruled ledger daftar soal; form tambah/edit soal dengan field lengkap; form import soal; selector tipe soal (Pilihan Ganda / Essay); field kunci jawaban (untuk pilihan ganda) dan rubrik (untuk essay).
• State: Loading (skeleton tabel), Empty (belum ada soal — pesan + CTA tambah), Success (soal tampil), Error (gagal menyimpan/mengimpor — pesan + retry), Recovery (form tetap terisi).

3. Functional Requirements

FR-01 — Login Siswa

As a Siswa (Peserta Ujian) I should login menggunakan Username/NIS/NISN dan Password pada halaman login siswa so that saya dapat mengakses sesi ujian saya.

• Provenance: explicit
• Trigger/input: Siswa membuka link ujian, mengisi field Username/NIS/NISN dan Password, menekan tombol MASUK UJIAN.
• Observable result: Siswa diarahkan ke HALAMAN UJIAN setelah login berhasil.
• Access state: Halaman login siswa bersifat anonim (belum login).
• Failure/recovery: Kredensial salah — pesan error jelas, form tetap terisi, siswa dapat memperbaiki input.
• Continuation: Setelah login berhasil, siswa memasukkan token ujian dan mengerjakan ujian.

FR-02 — Informasi Ujian pada Halaman Login

As a Siswa (Peserta Ujian) I should melihat informasi nama ujian, mata pelajaran, kelas, dan waktu ujian pada halaman login so that saya mengetahui ujian yang akan saya kerjakan.

• Provenance: explicit
• Trigger/input: Siswa membuka halaman login siswa.
• Observable result: Informasi nama ujian, mata pelajaran, kelas, dan waktu ujian ditampilkan.
• Access state: Anonim.
• Failure/recovery: Gagal memuat info ujian — tampilkan fallback statis.
• Continuation: Siswa melanjutkan login.

FR-03 — Identitas Sekolah pada Halaman Login

As a Siswa (Peserta Ujian) I should melihat logo/nama sekolah dan judul UJIAN ONLINE SMP NEGERI 1 SUKADANA pada halaman login so that saya yakin berada di situs ujian yang benar.

• Provenance: explicit
• Trigger/input: Siswa membuka halaman login siswa.
• Observable result: Logo/nama sekolah dan judul ditampilkan.
• Access state: Anonim.
• Failure/recovery: N/A.
• Continuation: Siswa melanjutkan login.

FR-04 — Memasukkan Token Ujian

As a Siswa (Peserta Ujian) I should memasukkan token ujian setelah login so that saya dapat memulai sesi ujian yang valid.

• Provenance: explicit
• Trigger/input: Siswa memasukkan token ujian pada field token.
• Observable result: Sesi ujian dibuat dengan token valid; siswa dapat mengerjakan ujian.
• Access state: Siswa telah login.
• Failure/recovery: Token tidak valid — pesan error, siswa dapat memasukkan ulang.
• Continuation: Siswa mengerjakan ujian.

FR-05 — Satu Akun Satu Sesi Ujian

As a Sistem I should membatasi satu akun hanya dapat digunakan pada satu sesi ujian so that tidak ada dua sesi aktif untuk akun yang sama.

• Provenance: explicit
• Trigger/input: Siswa login dan memasukkan token saat akun sudah memiliki sesi aktif.
• Observable result: Sesi kedua ditolak atau sesi pertama diakhiri sesuai kebijakan; hanya satu sesi aktif.
• Access state: Siswa telah login.
• Failure/recovery: Pesan error jelas; siswa dapat melanjutkan sesi yang ada atau menghubungi guru/admin.
• Continuation: Siswa melanjutkan sesi aktif.

FR-06 — Tampilan Halaman Ujian

As a Siswa (Peserta Ujian) I should melihat halaman ujian dengan header berisi nama sekolah dan nama ujian, nama siswa dan kelas, mata pelajaran, timer/countdown, nomor soal, pertanyaan, pilihan jawaban A, B, C, D, serta tombol Sebelumnya, Berikutnya, Simpan Jawaban, dan Selesai Ujian so that saya dapat mengerjakan ujian dengan jelas.

• Provenance: explicit
• Trigger/input: Siswa masuk ke HALAMAN UJIAN setelah login dan token valid.
• Observable result: Seluruh elemen halaman ujian ditampilkan.
• Access state: Role-restricted (siswa dengan sesi ujian aktif).
• Failure/recovery: Gagal memuat soal — pesan error + retry.
• Continuation: Siswa mengerjakan soal.

FR-07 — Navigasi Soal

As a Siswa (Peserta Ujian) I should menekan tombol Sebelumnya dan Berikutnya untuk berpindah antar soal so that saya dapat menelusuri seluruh soal ujian.

• Provenance: explicit
• Trigger/input: Siswa menekan Sebelumnya atau Berikutnya.
• Observable result: Soal sebelumnya/berikutnya ditampilkan.
• Access state: Role-restricted.
• Failure/recovery: N/A.
• Continuation: Siswa melanjutkan mengerjakan soal.

FR-08 — Menyimpan Jawaban

As a Siswa (Peserta Ujian) I should menekan tombol Simpan Jawaban untuk menyimpan jawaban saya so that jawaban saya tersimpan di server.

• Provenance: explicit
• Trigger/input: Siswa memilih jawaban dan menekan Simpan Jawaban.
• Observable result: Jawaban tersimpan di server; status nomor soal berubah menjadi sudah dijawab.
• Access state: Role-restricted.
• Failure/recovery: Gagal menyimpan — pesan error + retry; jawaban yang sudah tersimpan tetap aman.
• Continuation: Siswa melanjutkan ke soal berikutnya.

FR-09 — Panel Nomor Soal

As a Siswa (Peserta Ujian) I should melihat panel nomor soal di sebelah kanan dengan nomor 1 sampai jumlah soal so that saya dapat melihat status setiap soal.

• Provenance: explicit
• Trigger/input: Siswa berada di HALAMAN UJIAN.
• Observable result: Panel nomor soal ditampilkan dengan status warna: abu-abu = belum dijawab, warna berbeda = sudah dijawab, nomor aktif = soal yang sedang dikerjakan.
• Access state: Role-restricted.
• Failure/recovery: Gagal memuat status — chip default abu-abu; refresh memuat ulang dari server.
• Continuation: Siswa mengklik nomor untuk berpindah soal.

FR-10 — Berpindah Soal Melalui Panel Nomor

As a Siswa (Peserta Ujian) I should mengklik nomor soal pada panel nomor soal so that saya dapat langsung berpindah ke soal tertentu.

• Provenance: explicit
• Trigger/input: Siswa mengklik nomor soal pada panel.
• Observable result: Soal yang dipilih ditampilkan; nomor aktif berubah.
• Access state: Role-restricted.
• Failure/recovery: N/A.
• Continuation: Siswa mengerjakan soal yang dipilih.

FR-11 — Timer Countdown

As a Siswa (Peserta Ujian) I should melihat timer/countdown otomatis (misalnya 01:30:00) so that saya mengetahui sisa waktu ujian.

• Provenance: explicit
• Trigger/input: Siswa berada di HALAMAN UJIAN.
• Observable result: Timer countdown ditampilkan dan berjalan mundur; timer tersimpan di server.
• Access state: Role-restricted.
• Failure/recovery: Koneksi terputus — timer tetap dihitung dari server saat koneksi pulih.
• Continuation: Siswa mengerjakan ujian hingga waktu habis atau menyelesaikan ujian.

FR-12 — Penutupan Otomatis Saat Waktu Habis

As a Sistem I should menyimpan jawaban otomatis, menutup ujian otomatis, mengarahkan siswa ke halaman selesai, dan mencabut akses pengerjaan ketika waktu habis so that ujian berakhir tepat waktu.

• Provenance: explicit
• Trigger/input: Timer mencapai 00:00:00.
• Observable result: Jawaban otomatis disimpan; ujian ditutup; siswa diarahkan ke halaman selesai; siswa tidak dapat mengerjakan kembali.
• Access state: Role-restricted; akses pengerjaan dicabut setelah penutupan.
• Failure/recovery: Gagal menyimpan — sistem mencoba ulang; jawaban yang sudah tersimpan tetap aman.
• Continuation: Siswa melihat status/hasil ujian.

FR-13 — Konfirmasi Selesai Ujian

As a Siswa (Peserta Ujian) I should melihat konfirmasi "Apakah Anda yakin ingin mengakhiri ujian?" dengan jumlah soal, sudah dijawab, dan belum dijawab, serta tombol Kembali ke Ujian dan Ya, Selesaikan Ujian ketika menekan Selesai Ujian so that saya dapat memastikan keputusan mengakhiri ujian.

• Provenance: explicit
• Trigger/input: Siswa menekan Selesai Ujian.
• Observable result: Halaman konfirmasi selesai ditampilkan dengan ringkasan jumlah soal, sudah dijawab, dan belum dijawab.
• Access state: Role-restricted.
• Failure/recovery: Siswa dapat menekan Kembali ke Ujian untuk membatalkan.
• Continuation: Siswa menekan Ya, Selesaikan Ujian untuk mengakhiri ujian.

FR-14 — Mengakhiri Ujian

As a Siswa (Peserta Ujian) I should menekan Ya, Selesaikan Ujian untuk mengakhiri ujian so that ujian saya selesai dan jawaban saya dinilai.

• Provenance: explicit
• Trigger/input: Siswa menekan Ya, Selesaikan Ujian.
• Observable result: Ujian ditutup final; jawaban disimpan; penilaian otomatis dijalankan; siswa diarahkan ke HALAMAN HASIL.
• Access state: Role-restricted; akses pengerjaan dicabut setelah penutupan.
• Failure/recovery: Gagal menyelesaikan — pesan error + retry; siswa dapat kembali ke ujian.
• Continuation: Siswa melihat status/hasil ujian.

FR-15 — Halaman Hasil

As a Siswa (Peserta Ujian) I should melihat nama siswa, kelas, mata pelajaran, jumlah soal, jumlah benar, nilai, dan status selesai ujian pada halaman hasil so that saya mengetahui hasil ujian saya.

• Provenance: explicit
• Trigger/input: Ujian selesai (manual atau waktu habis).
• Observable result: Halaman hasil menampilkan data hasil ujian.
• Access state: Login.
• Failure/recovery: Gagal memuat hasil — pesan error + retry.
• Continuation: Siswa logout otomatis setelah ujian selesai.

FR-16 — Kebijakan Publikasi Nilai

As a Guru/Admin I should menentukan apakah nilai langsung ditampilkan kepada siswa atau disembunyikan so that publikasi nilai sesuai kebijakan sekolah.

• Provenance: explicit
• Trigger/input: Guru/Admin mengatur kebijakan publikasi nilai pada konfigurasi ujian.
• Observable result: Jika ditampilkan, siswa melihat nilai pada HALAMAN HASIL; jika disembunyikan, nilai tidak ditampilkan kepada siswa.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: N/A.
• Continuation: Siswa melihat status selesai ujian tanpa nilai (jika disembunyikan).

FR-17 — Login Admin/Guru

As a Guru/Admin I should login pada halaman login admin/guru so that saya dapat mengakses dashboard.

• Provenance: explicit
• Trigger/input: Guru/Admin mengisi kredensial dan menekan tombol masuk.
• Observable result: Guru/Admin diarahkan ke DASHBOARD ADMIN/GURU.
• Access state: Halaman login admin/guru bersifat anonim.
• Failure/recovery: Kredensial salah — pesan error, form tetap terisi.
• Continuation: Guru/Admin mengakses dashboard.

FR-18 — Kelola Siswa

As a Admin I should mengelola data siswa so that data siswa akurat dan lengkap.

• Provenance: explicit
• Trigger/input: Admin membuka section kelola siswa pada dashboard.
• Observable result: Data siswa dapat ditambah, diedit, dan dihapus.
• Access state: Role-restricted (admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Admin melanjutkan pengelolaan data lain.

FR-19 — Kelola Guru

As a Admin I should mengelola data guru so that data guru akurat dan lengkap.

• Provenance: explicit
• Trigger/input: Admin membuka section kelola guru pada dashboard.
• Observable result: Data guru dapat ditambah, diedit, dan dihapus.
• Access state: Role-restricted (admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Admin melanjutkan pengelolaan data lain.

FR-20 — Kelola Kelas

As a Admin I should mengelola data kelas so that data kelas akurat dan lengkap.

• Provenance: explicit
• Trigger/input: Admin membuka section kelola kelas pada dashboard.
• Observable result: Data kelas dapat ditambah, diedit, dan dihapus.
• Access state: Role-restricted (admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Admin melanjutkan pengelolaan data lain.

FR-21 — Kelola Mata Pelajaran

As a Admin I should mengelola data mata pelajaran so that data mata pelajaran akurat dan lengkap.

• Provenance: explicit
• Trigger/input: Admin membuka section kelola mata pelajaran pada dashboard.
• Observable result: Data mata pelajaran dapat ditambah, diedit, dan dihapus.
• Access state: Role-restricted (admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Admin melanjutkan pengelolaan data lain.

FR-22 — Kelola Bank Soal

As a Guru/Admin I should mengelola bank soal so that soal ujian tersedia dan terorganisir.

• Provenance: explicit
• Trigger/input: Guru/Admin membuka BANK SOAL.
• Observable result: Bank soal dapat dikelola dengan atribut mata pelajaran, kelas, materi, pertanyaan, pilihan A–D, kunci jawaban, bobot soal, dan tingkat kesulitan.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Guru/Admin menambah/mengedit soal.

FR-23 — Tambah/Edit/Hapus Soal

As a Guru/Admin I should menambah, mengedit, dan menghapus soal so that bank soal sesuai kebutuhan ujian.

• Provenance: explicit
• Trigger/input: Guru/Admin menekan tombol tambah/edit/hapus pada BANK SOAL.
• Observable result: Soal ditambahkan, diubah, atau dihapus.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry; form tetap terisi.
• Continuation: Guru/Admin melanjutkan pengelolaan soal.

FR-24 — Import Soal

As a Guru/Admin I should mengimpor soal so that saya dapat menambahkan banyak soal sekaligus.

• Provenance: explicit
• Trigger/input: Guru/Admin mengunggah file import soal.
• Observable result: Soal dari file import ditambahkan ke bank soal.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal import — pesan error dengan detail baris yang gagal; soal valid tetap ditambahkan.
• Continuation: Guru/Admin memverifikasi soal yang diimpor.

FR-25 — Dukungan Soal Pilihan Ganda dan Essay

As a Guru/Admin I should membuat soal pilihan ganda dan essay so that ujian dapat mencakup berbagai tipe soal.

• Provenance: explicit
• Trigger/input: Guru/Admin memilih tipe soal saat menambah soal.
• Observable result: Soal pilihan ganda memiliki pilihan A–D dan kunci jawaban; soal essay memiliki field jawaban teks.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: N/A.
• Continuation: Guru/Admin menyusun ujian dari bank soal.

FR-26 — Atur Jumlah Soal

As a Guru/Admin I should mengatur jumlah soal ujian so that ujian sesuai dengan rencana.

• Provenance: explicit
• Trigger/input: Guru/Admin mengatur jumlah soal pada konfigurasi ujian.
• Observable result: Jumlah soal ujian tersimpan dan diterapkan pada sesi ujian.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Guru/Admin mengatur konfigurasi lain.

FR-27 — Atur Waktu Ujian

As a Guru/Admin I should mengatur waktu ujian so that durasi ujian sesuai kebutuhan.

• Provenance: explicit
• Trigger/input: Guru/Admin mengatur waktu ujian pada konfigurasi ujian.
• Observable result: Waktu ujian tersimpan dan diterapkan pada timer ujian.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Guru/Admin mengatur konfigurasi lain.

FR-28 — Atur Jadwal Ujian

As a Guru/Admin I should mengatur jadwal ujian so that ujian dilaksanakan pada waktu yang ditentukan.

• Provenance: explicit
• Trigger/input: Guru/Admin mengatur jadwal ujian pada konfigurasi ujian.
• Observable result: Jadwal ujian tersimpan dan ditampilkan pada halaman login siswa.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal menyimpan — pesan error + retry.
• Continuation: Guru/Admin mengatur konfigurasi lain.

FR-29 — Buat Token Ujian

As a Guru/Admin I should membuat token ujian so that hanya siswa dengan token valid dapat mengikuti ujian.

• Provenance: explicit
• Trigger/input: Guru/Admin menekan tombol buat token ujian.
• Observable result: Token ujian dibuat dan dapat dibagikan kepada siswa.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal membuat token — pesan error + retry.
• Continuation: Guru/Admin membagikan token kepada siswa.

FR-30 — Aktifkan/Nonaktifkan Ujian

As a Guru/Admin I should mengaktifkan atau menonaktifkan ujian so that ujian hanya dapat diakses saat aktif.

• Provenance: explicit
• Trigger/input: Guru/Admin menekan toggle aktif/nonaktif pada ujian.
• Observable result: Ujian aktif dapat diakses siswa; ujian nonaktif tidak dapat diakses.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal mengubah status — pesan error + retry.
• Continuation: Guru/Admin memantau peserta.

FR-31 — Lihat Peserta yang Sedang Ujian

As a Guru/Admin I should melihat peserta yang sedang ujian so that saya dapat memantau jalannya ujian.

• Provenance: explicit
• Trigger/input: Guru/Admin membuka section peserta pada dashboard.
• Observable result: Daftar peserta yang sedang ujian ditampilkan.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Guru/Admin melihat hasil ujian.

FR-32 — Lihat Hasil Ujian

As a Guru/Admin I should melihat hasil ujian so that saya dapat mengevaluasi hasil ujian siswa.

• Provenance: explicit
• Trigger/input: Guru/Admin membuka section hasil pada dashboard.
• Observable result: Hasil ujian ditampilkan.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Guru/Admin melihat nilai siswa.

FR-33 — Lihat Nilai Siswa

As a Guru/Admin I should melihat nilai siswa so that saya dapat menilai hasil belajar siswa.

• Provenance: explicit
• Trigger/input: Guru/Admin membuka section nilai pada dashboard.
• Observable result: Nilai siswa ditampilkan.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Guru/Admin mengekspor hasil.

FR-34 — Export Hasil ke Excel

As a Guru/Admin I should mengekspor hasil ujian ke Excel so that saya dapat mengolah data hasil di luar aplikasi.

• Provenance: explicit
• Trigger/input: Guru/Admin menekan tombol export Excel.
• Observable result: File Excel berisi hasil ujian diunduh.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: Gagal export — pesan error + retry.
• Continuation: Guru/Admin mengolah data di luar aplikasi.

FR-35 — Timer Tersimpan di Server

As a Sistem I should menyimpan timer di server so that timer tidak dapat dimanipulasi dari sisi klien.

• Provenance: explicit
• Trigger/input: Sesi ujian dimulai.
• Observable result: Timer dihitung dari server; refresh halaman tidak mengubah sisa waktu.
• Access state: Role-restricted.
• Failure/recovery: Koneksi terputus — timer tetap dihitung dari server saat koneksi pulih.
• Continuation: Ujian berjalan hingga waktu habis atau diselesaikan.

FR-36 — Jawaban Otomatis Tersimpan

As a Sistem I should menyimpan jawaban secara otomatis so that jawaban siswa tidak hilang.

• Provenance: explicit
• Trigger/input: Siswa memilih jawaban atau menekan Simpan Jawaban.
• Observable result: Jawaban tersimpan di server.
• Access state: Role-restricted.
• Failure/recovery: Gagal menyimpan — retry otomatis; jawaban yang sudah tersimpan tetap aman.
• Continuation: Siswa melanjutkan mengerjakan soal.

FR-37 — Refresh Tidak Menghilangkan Jawaban

As a Sistem I should memastikan refresh halaman tidak menghilangkan jawaban so that siswa dapat melanjutkan ujian setelah refresh.

• Provenance: explicit
• Trigger/input: Siswa me-refresh halaman ujian.
• Observable result: Jawaban yang sudah tersimpan dimuat ulang dari server.
• Access state: Role-restricted.
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Siswa melanjutkan mengerjakan soal.

FR-38 — Jawaban Aman Saat Koneksi Terputus

As a Sistem I should memastikan jawaban yang sudah tersimpan tetap aman jika koneksi terputus so that siswa tidak kehilangan jawaban.

• Provenance: explicit
• Trigger/input: Koneksi siswa terputus.
• Observable result: Jawaban yang sudah tersimpan tetap aman di server.
• Access state: Role-restricted.
• Failure/recovery: Saat koneksi pulih, jawaban dimuat ulang dari server.
• Continuation: Siswa melanjutkan mengerjakan soal.

FR-39 — Mencegah Siswa Mengakses Halaman Admin

As a Sistem I should mencegah siswa mengakses halaman admin so that keamanan data dan operasional ujian terjaga.

• Provenance: explicit
• Trigger/input: Siswa mencoba mengakses halaman admin.
• Observable result: Akses ditolak; siswa diarahkan ke halaman yang sesuai.
• Access state: Role-restricted.
• Failure/recovery: N/A.
• Continuation: Siswa kembali ke halaman ujian.

FR-40 — Logout Otomatis Setelah Ujian Selesai

As a Sistem I should melakukan logout otomatis setelah ujian selesai so that sesi siswa berakhir dengan aman.

• Provenance: explicit
• Trigger/input: Ujian selesai (manual atau waktu habis).
• Observable result: Sesi siswa berakhir; siswa tidak dapat mengerjakan kembali.
• Access state: Role-restricted.
• Failure/recovery: N/A.
• Continuation: Siswa melihat status/hasil ujian sebelum logout.

FR-41 — Penilaian Otomatis

As a Sistem I should menilai jawaban siswa secara otomatis so that hasil ujian tersedia tanpa penilaian manual.

• Provenance: explicit
• Trigger/input: Ujian selesai.
• Observable result: Jumlah benar dan nilai dihitung berdasarkan bobot soal.
• Access state: Role-restricted.
• Failure/recovery: Gagal menilai — pesan error; guru/admin dapat menilai ulang.
• Continuation: Hasil ditampilkan sesuai kebijakan publikasi nilai.

FR-42 — Provisi Akun Siswa

As a Sistem I should memastikan akun siswa diprovisikan sebelum login dan mengikuti ujian so that siswa dapat mengakses ujian.

• Provenance: required_inference
• Trigger/input: Admin mengelola data siswa.
• Observable result: Akun siswa tersedia dengan kredensial yang valid.
• Access state: Role-restricted (admin).
• Failure/recovery: Akun tidak valid — siswa menghubungi guru/admin.
• Continuation: Siswa login dan mengikuti ujian.

FR-43 — Provisi Akun Guru dan Admin

As a Sistem I should memastikan akun guru dan admin diprovisikan dengan peran yang sesuai sebelum mengakses dashboard so that guru dan admin dapat mengakses dashboard sesuai perannya.

• Provenance: required_inference
• Trigger/input: Admin mengelola data guru.
• Observable result: Akun guru dan admin tersedia dengan peran yang sesuai.
• Access state: Role-restricted (admin).
• Failure/recovery: Akun tidak valid — guru/admin menghubungi admin.
• Continuation: Guru/admin login dan mengakses dashboard.

FR-44 — Sesi Ujian dengan Token Valid

As a Sistem I should membuat sesi ujian dengan token valid dan memastikan satu akun hanya boleh memiliki satu sesi aktif so that sesi ujian terikat pada akun yang benar.

• Provenance: required_inference
• Trigger/input: Siswa memasukkan token valid.
• Observable result: Sesi ujian dibuat; satu akun hanya memiliki satu sesi aktif.
• Access state: Role-restricted.
• Failure/recovery: Token tidak valid atau sesi sudah aktif — pesan error.
• Continuation: Siswa mengerjakan ujian.

FR-45 — Pemulihan Timer dan Jawaban dari Server

As a Sistem I should menyimpan timer dan jawaban di server agar dapat dipulihkan setelah refresh atau gangguan koneksi so that siswa dapat melanjutkan ujian tanpa kehilangan progres.

• Provenance: required_inference
• Trigger/input: Siswa me-refresh halaman atau koneksi pulih.
• Observable result: Timer dan jawaban dimuat ulang dari server.
• Access state: Role-restricted.
• Failure/recovery: Gagal memuat — pesan error + retry.
• Continuation: Siswa melanjutkan mengerjakan soal.

FR-46 — Penutupan Final Ujian

As a Sistem I should menutup ujian secara final saat selesai manual atau waktu habis, lalu mencabut akses pengerjaan so that siswa tidak dapat mengerjakan kembali.

• Provenance: required_inference
• Trigger/input: Ujian selesai manual atau waktu habis.
• Observable result: Ujian ditutup final; akses pengerjaan dicabut.
• Access state: Role-restricted.
• Failure/recovery: N/A.
• Continuation: Siswa melihat status/hasil ujian.

FR-47 — Kebijakan Publikasi Nilai Ditentukan Sebelum Hasil Ditampilkan

As a Sistem I should memastikan kebijakan publikasi nilai ditentukan Guru/Admin sebelum hasil ditampilkan kepada Siswa so that publikasi nilai sesuai kebijakan.

• Provenance: required_inference
• Trigger/input: Guru/Admin mengatur kebijakan publikasi nilai.
• Observable result: Hasil ditampilkan atau disembunyikan sesuai kebijakan.
• Access state: Role-restricted (guru/admin).
• Failure/recovery: N/A.
• Continuation: Siswa melihat status selesai ujian.

4. User Personas

Siswa (Peserta Ujian)

Konteks produk: Siswa SMP Negeri 1 Sukadana berusia 13–15 tahun yang mengikuti ujian komputer di sekolah. Mereka membuka link ujian yang dibagikan guru, login dengan username/NIS/NISN dan password, memasukkan token ujian, lalu mengerjakan soal pilihan ganda dan essay.

Tujuan utama: Menyelesaikan ujian dalam waktu yang tersedia dan melihat status/hasil ujian sesuai kebijakan guru.

Tanggung jawab yang diterima:

• Login dengan Username/NIS/NISN dan Password.
• Memasukkan token ujian.
• Mengerjakan soal pilihan ganda (memilih A/B/C/D) dan essay (menulis jawaban teks).
• Berpindah soal melalui tombol Sebelumnya/Berikutnya dan panel nomor soal.
• Menyimpan jawaban dengan tombol Simpan Jawaban.
• Menyelesaikan ujian dengan tombol Selesai Ujian dan konfirmasi.
• Melihat status/hasil ujian.

Input/keputusan: Kredensial login, token ujian, pilihan jawaban A–D, jawaban essay, keputusan mengakhiri ujian.

Interaksi dengan peserta lain: Siswa berinteraksi dengan Guru/Admin secara tidak langsung — guru/admin mengatur ujian, token, dan kebijakan publikasi nilai. Siswa tidak berinteraksi langsung dengan guru/admin di dalam aplikasi.

Keberhasilan yang dapat diamati: Ujian selesai, jawaban tersimpan, dan status/hasil ujian ditampilkan sesuai kebijakan.

Yang membedakan peran ini: Siswa adalah satu-satunya aktor yang mengerjakan ujian di bawah tekanan waktu, dengan kebutuhan antarmuka yang sangat jelas dan minim ambiguitas — nomor soal, timer, dan status jawaban harus terbaca tanpa membaca instruksi.

Guru

Konteks produk: Guru SMP Negeri 1 Sukadana yang menyelenggarakan ujian online. Mereka mengelola bank soal, mengatur konfigurasi ujian, membuat token, memantau peserta, dan menilai hasil.

Tujuan utama: Menyelenggarakan ujian dan menilai hasil siswa.

Tanggung jawab yang diterima:

• Mengelola bank soal (materi, pertanyaan, pilihan, kunci jawaban, bobot, tingkat kesulitan, tipe soal).
• Mengatur jumlah soal, waktu ujian, dan jadwal ujian.
• Membuat token ujian.
• Mengaktifkan/menonaktifkan ujian.
• Memantau peserta yang sedang ujian.
• Melihat hasil ujian dan nilai siswa.
• Menentukan apakah nilai ditampilkan kepada siswa atau disembunyikan.

Input/keputusan: Data soal, konfigurasi ujian, token, kebijakan publikasi nilai.

Interaksi dengan peserta lain: Guru berinteraksi dengan Admin (berbagi dashboard dan data master) dan dengan Siswa secara tidak langsung (mengatur ujian yang dikerjakan siswa).

Keberhasilan yang dapat diamati: Ujian terselenggara dengan soal dan waktu yang benar; hasil dan nilai siswa tersedia; kebijakan publikasi nilai diterapkan.

Yang membedakan peran ini: Guru fokus pada penyusunan soal dan penyelenggaraan ujian, dengan kebutuhan antarmuka yang padat data namun tetap mudah digunakan oleh non-power user.

Admin

Konteks produk: Admin SMP Negeri 1 Sukadana yang menjaga data master dan operasional ujian sekolah. Mereka mengelola data siswa, guru, kelas, mata pelajaran, bank soal, impor soal, konfigurasi ujian, pemantauan, hasil, dan ekspor.

Tujuan utama: Menjaga data dan operasional ujian sekolah berjalan benar.

Tanggung jawab yang diterima:

• Mengelola data siswa, guru, kelas, dan mata pelajaran.
• Mengelola bank soal dan mengimpor soal.
• Mengatur konfigurasi ujian (jumlah soal, waktu, jadwal, token, aktif/nonaktif).
• Memantau peserta yang sedang ujian.
• Melihat hasil ujian dan nilai siswa.
• Mengekspor hasil ke Excel.

Input/keputusan: Data master, file import soal, konfigurasi ujian, keputusan ekspor.

Interaksi dengan peserta lain: Admin berinteraksi dengan Guru (berbagi dashboard dan bank soal) dan dengan Siswa secara tidak langsung (mengelola akun dan data yang diperlukan siswa).

Keberhasilan yang dapat diamati: Data master akurat; ujian berjalan lancar; hasil dapat diekspor ke Excel.

Yang membedakan peran ini: Admin memiliki cakupan data master yang lebih luas daripada Guru, termasuk pengelolaan akun siswa/guru dan impor soal massal, serta ekspor hasil.

5. Core User Flows

Flow 1 — Siswa Mengerjakan Ujian dari Link

1. Konteks awal: Siswa membuka link ujian (contoh: https://ujian.smpn1sukadana.sch.id) di browser.
2. Landing: Siswa melihat Landing dengan penjelasan aplikasi dan jalur akses. Siswa memilih jalur Siswa.
3. HALAMAN LOGIN SISWA: Siswa melihat logo/nama sekolah, judul UJIAN ONLINE SMP NEGERI 1 SUKADANA, informasi nama ujian, mata pelajaran, kelas, dan waktu ujian.
4. Input kredensial: Siswa mengisi Username/NIS/NISN dan Password, lalu menekan MASUK UJIAN.
5. Hasil login: Jika berhasil, siswa diarahkan ke HALAMAN UJIAN. Jika gagal, pesan error ditampilkan dan siswa memperbaiki input.
6. Input token: Siswa memasukkan token ujian. Jika token valid, sesi ujian dibuat. Jika tidak valid, pesan error ditampilkan.
7. HALAMAN UJIAN: Siswa melihat header (nama sekolah, nama ujian, nama siswa, kelas, mata pelajaran), timer countdown, nomor soal, pertanyaan, pilihan A–D, dan tombol navigasi.
8. Mengerjakan soal: Siswa memilih jawaban A/B/C/D atau menulis jawaban essay, lalu menekan Simpan Jawaban. Jawaban tersimpan di server; status nomor soal berubah menjadi sudah dijawab.
9. Navigasi: Siswa berpindah soal dengan Sebelumnya/Berikutnya atau mengklik nomor pada PANEL NOMOR SOAL.
10. Refresh/koneksi terputus: Jika siswa me-refresh halaman atau koneksi terputus, jawaban yang sudah tersimpan tetap aman dan dimuat ulang dari server.
11. Menyelesaikan ujian: Siswa menekan Selesai Ujian. HALAMAN KONFIRMASI SELESAI menampilkan "Apakah Anda yakin ingin mengakhiri ujian?" dengan jumlah soal, sudah dijawab, dan belum dijawab.
12. Keputusan: Siswa menekan Kembali ke Ujian untuk melanjutkan, atau Ya, Selesaikan Ujian untuk mengakhiri.
13. Hasil: Ujian ditutup final; penilaian otomatis dijalankan; siswa diarahkan ke HALAMAN HASIL.
14. HALAMAN HASIL: Siswa melihat nama siswa, kelas, mata pelajaran, jumlah soal, jumlah benar, nilai (jika kebijakan menampilkan), dan status selesai ujian.
15. Logout otomatis: Setelah ujian selesai, sesi siswa berakhir secara otomatis.
16. Langkah berikutnya: Siswa tidak dapat mengerjakan kembali.

Flow 2 — Ujian Berakhir Otomatis Saat Waktu Habis

1. Konteks awal: Siswa sedang mengerjakan ujian pada HALAMAN UJIAN.
2. Timer berjalan: Timer countdown berjalan mundur dari server.
3. Waktu habis: Timer mencapai 00:00:00.
4. Penutupan otomatis: Sistem menyimpan jawaban otomatis, menutup ujian, dan mengarahkan siswa ke halaman selesai.
5. Hasil: Siswa diarahkan ke HALAMAN HASIL dan melihat status selesai ujian.
6. Logout otomatis: Sesi siswa berakhir.
7. Langkah berikutnya: Siswa tidak dapat mengerjakan kembali.

Flow 3 — Guru Menyusun Ujian dan Memantau Peserta

1. Konteks awal: Guru membuka link ujian dan memilih jalur Guru pada Landing.
2. Login Admin/Guru: Guru mengisi kredensial dan menekan tombol masuk.
3. DASHBOARD ADMIN/GURU: Guru melihat left rail bernomor (01 Peserta, 02 Bank Soal, 03 Jadwal, 04 Token, 05 Hasil).
4. BANK SOAL: Guru membuka BANK SOAL, menambah/mengedit soal pilihan ganda atau essay dengan atribut mata pelajaran, kelas, materi, pertanyaan, pilihan A–D, kunci jawaban, bobot soal, dan tingkat kesulitan.
5. Konfigurasi ujian: Guru mengatur jumlah soal, waktu ujian, dan jadwal ujian.
6. Token: Guru membuat token ujian.
7. Aktivasi: Guru mengaktifkan ujian.
8. Pemantauan: Guru melihat peserta yang sedang ujian pada section peserta.
9. Hasil: Guru melihat hasil ujian dan nilai siswa.
10. Kebijakan nilai: Guru menentukan apakah nilai ditampilkan kepada siswa atau disembunyikan.
11. Langkah berikutnya: Guru dapat mengekspor hasil atau mengakhiri ujian.

Flow 4 — Admin Mengelola Data Master dan Mengekspor Hasil

1. Konteks awal: Admin membuka link ujian dan memilih jalur Admin pada Landing.
2. Login Admin/Guru: Admin mengisi kredensial dan menekan tombol masuk.
3. DASHBOARD ADMIN/GURU: Admin melihat left rail bernomor.
4. Kelola data master: Admin mengelola data siswa, guru, kelas, dan mata pelajaran.
5. Bank soal: Admin mengelola bank soal dan mengimpor soal.
6. Konfigurasi ujian: Admin mengatur jumlah soal, waktu, jadwal, token, dan aktif/nonaktif ujian.
7. Pemantauan: Admin melihat peserta yang sedang ujian.
8. Hasil: Admin melihat hasil ujian dan nilai siswa.
9. Export: Admin mengekspor hasil ke Excel.
10. Langkah berikutnya: Admin mengolah data hasil di luar aplikasi.

Flow 5 — Siswa Melihat Hasil Ujian

1. Konteks awal: Siswa telah menyelesaikan ujian (manual atau waktu habis).
2. HALAMAN HASIL: Siswa melihat nama siswa, kelas, mata pelajaran, jumlah soal, jumlah benar, nilai (jika kebijakan menampilkan), dan status selesai ujian.
3. Kebijakan nilai disembunyikan: Jika guru/admin menyembunyikan nilai, siswa hanya melihat status selesai ujian tanpa nilai.
4. Logout otomatis: Sesi siswa berakhir.
5. Langkah berikutnya: Siswa tidak dapat mengerjakan kembali.

6. Visuals Colors and Theme

Muse: Erik Spiekermann — tipografi sebagai infrastruktur, kejelasan wayfinding, warna sinyal seperti jalur transit.

Headline: Typographic infrastructure for a school exam hall — Spiekermann's wayfinding clarity, warm signal red, and Fira Sans doing the work.

Palet (Light Mode)

Aturan warna: Tidak lebih dari dua warna sinyal terlihat dalam satu panel. Setiap warna di layar harus bermakna status (belum dijawab / sudah dijawab / aktif / ragu-ragu). Merah hanya untuk aksi ireversibel dan sinyal kritis.

Tipografi

• Headings: Fira Sans — Fira Sans Condensed untuk header ujian, timer, dan baris data (700/600, uppercase, tracking +0.02em, tabular numerals); Fira Sans regular untuk reading copy (600 untuk headings, 400 untuk body).
• Body: Fira Sans.
• Skala: 1.25 modular pada baseline 4px: 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61px.
• Clamp mobile-first: timer clamp(34px, 9vw, 61px); question stem clamp(19px, 2.6vw, 25px); page title clamp(24px, 4vw, 39px); body 16px (tidak pernah di bawah); label 12px uppercase.
• Aturan: Tidak ada display serif, tidak ada decorative face, tidak ada italic headings. Label 12px uppercase dengan tracking +0.08em, selalu di atas nilainya.

Shape Language

• Persegi jujur dengan radius 6px pada kartu dan 4px pada tombol dan input.
• Hairline 1px sebagai pengganti shadow; satu rule berwarna 3px di atas kartu yang membawa state.
• Chip nomor adalah persegi sempurna dengan radius 4px.
• Circular hanya di mana bermakna: countdown ring dan avatar initial.
• Tidak ada blob, tidak ada pill untuk aksi utama, tidak ada floating glass.

Layout

• Grid 12 kolom terlihat pada measure 1200px dengan gutter 24px dan rule vertikal 1px permanen di tepi kiri kolom konten.
• Layar ujian adalah sistem tiga band: header tetap (nama sekolah + nama ujian + nama siswa/kelas + timer), body dua kolom — question sheet (8 kolom) dan panel nomor soal (4 kolom, sticky) — dan action bar tetap di bawah dengan Sebelumnya / Berikutnya / Simpan Jawaban / Selesai Ujian.
• Pada 768px panel nomor collapses menjadi strip horizontal scrollable di bawah header; pada 375px action bar menjadi stack dua baris dengan aksi utama full-width.
• Dashboard admin adalah left rail bernomor (01 Peserta, 02 Bank Soal, 03 Jadwal, 04 Token, 05 Hasil) dengan area utama tabular padat — ruled rows, tabular numerals right-aligned, tanpa card-per-row.

Imagery

Diagrammatic, bukan photographic. Login hero menggunakan diagram skematik "exam map": grid kotak bernomor dengan tiga kotak terisi dalam warna state, digambar sebagai SVG, dengan satu garis rute hairline melewatinya. Dashboard admin menggunakan pictogram SVG inline untuk setiap section (kursi untuk peserta, buku untuk bank soal, jam untuk jadwal, kunci untuk token). Tidak ada stock photography siswa, tidak ada 3D render, tidak ada ilustrasi orang.

7. Signature Design Concept

Konsep: Peta Ujian — layar login sebagai papan tanda institusi dua panel, bukan form SaaS terpusat.

Panel kiri (45%, full-bleed, edge to edge, top to bottom): Field ink #14161A membawa identitas sekolah:

• Rule merah transit 3px di atas.
• SMP NEGERI 1 SUKADANA dalam Fira Sans Condensed 700 uppercase pada clamp(28px, 4.5vw, 49px), flush left.
• KABUPATEN KAYONG UTARA sebagai label 12px tracked di bawahnya.
• Blok fakta ujian sebagai ruled label/value rows — Nama Ujian, Mata Pelajaran, Kelas, Waktu — dipisahkan rule 1px #3A3D42, nilai dalam tabular numerals.

Panel kanan (55%, ground kertas hangat):

• Judul UJIAN ONLINE SMP NEGERI 1 SUKADANA pada clamp(24px, 3.4vw, 39px).
• Field NIS/NISN, field password, field token.
• Tombol MASUK UJIAN full-width #C0202B dengan radius 4px.
• Field form putih, border 1px #DCD7CC, label 12px uppercase di atas setiap field.
• Diagram skematik grid nomor soal sebagai band 96px di atas panel kanan, bleeding off tepi kanan.

Pada 375px: Panel ink menjadi header band kompak (rule logo + nama sekolah + nama ujian) dan form mengambil lebar penuh di bawahnya.

Signature moves:

• Rule vertikal grid 1px permanen sepanjang tinggi kolom konten di setiap layar, dengan label section bernomor 01–05 dalam 12px uppercase duduk di atasnya.
• Panel nomor soal adalah peta wayfinding: grid chip persegi dengan warna sebagai kode, legenda tercetak di bawahnya seperti kunci jalur transit.
• Timer adalah angka terbesar di layar ujian — Fira Sans Condensed 700, tabular numerals, clamp(34px, 9vw, 61px) — dalam sel header ruled dengan countdown ring 3px yang menguras searah jarum jam; seluruh sel berubah ke ground #C0202B dengan numeral putih di bawah lima menit.
• Action bar bawah adalah tray ruled tetap: border atas hairline, empat tombol sejajar grid, dengan Simpan Jawaban sebagai aksi teal outlined dan Selesai Ujian sebagai satu-satunya tombol merah terisi di layar.
• Tabel admin adalah ruled ledger, bukan card grid: hanya rule horizontal 1px, header kolom 12px uppercase, tabular numerals right-aligned, dan row actions sebagai text link kecil di tepi kanan baris.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)

Motion Tempo: restrained

Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: Diagram skematik "exam map" — grid kotak bernomor dengan tiga kotak terisi dalam warna state (abu-abu belum dijawab, teal sudah dijawab, ink dengan rule merah atas aktif), dengan satu garis rute hairline melewatinya.
• Input → transformation → outcome thesis: Saat halaman dimuat, garis rute hairline menggambar dirinya dari kiri ke kanan melewati grid (200ms ease-out), lalu tiga kotak state menyala secara berurutan (120ms masing-masing) — mengungkapkan peta ujian sebagai satu komposisi utuh. Tidak ada entrance animation pada layar ujian.
• Motion vocabulary: 140ms ease-out pada hover dan focus; 200ms pada transisi panel dan modal; digit flip countdown sekali per detik; countdown ring menguras; chip nomor soal berubah warna instan dengan flash konfirmasi 120ms.
• Composed first frame: Panel ink gelap di kiri dengan rule merah transit dan wordmark sekolah; panel kertas hangat di kanan dengan judul, form, dan diagram grid nomor soal sebagai band 96px di atasnya.
• Reduced-motion state: Ring countdown menjadi bar statis; digit flip menjadi perubahan angka biasa; garis rute dan penyalaan kotak muncul langsung tanpa animasi.

9. Non-Functional Requirements

NFR-01 — Responsive Design

Aplikasi harus responsive untuk komputer, laptop, tablet, dan HP. Provenance: explicit. Rationale: Siswa dan guru mengakses dari berbagai perangkat.

NFR-02 — Tampilan Bersih dan Profesional

Tampilan harus bersih, profesional, modern, dan sederhana, mudah digunakan siswa SMP. Provenance: explicit. Rationale: Pengguna adalah siswa 13–15 tahun dan guru non-power user.

NFR-03 — Minim Animasi

Tidak terlalu banyak animasi. Provenance: explicit. Rationale: Siswa tidak boleh menunggu antarmuka saat ujian.

NFR-04 — Kenyamanan Ujian Durasi Panjang

Tampilan harus nyaman untuk ujian dalam waktu lama. Provenance: explicit. Rationale: Ujian dapat berlangsung hingga 90 menit atau lebih.

NFR-05 — Timer Terlihat Jelas

Timer harus terlihat jelas pada layar ujian. Provenance: explicit. Rationale: Siswa harus selalu mengetahui sisa waktu.

NFR-06 — Keamanan Autentikasi

Authentication harus aman. Provenance: explicit. Rationale: Melindungi akun siswa, guru, dan admin.

NFR-07 — REST API

Backend harus menyediakan REST API. Provenance: explicit. Rationale: Memisahkan frontend dan backend untuk kemudahan deploy.

NFR-08 — Relasi Database yang Benar dan Aman

Database relasional harus memiliki relasi yang benar dan aman. Provenance: explicit. Rationale: Menjaga integritas data ujian.

NFR-09 — Mudah Di-deploy Online

Aplikasi harus mudah di-deploy menjadi link online. Provenance: explicit. Rationale: Guru cukup membagikan link kepada siswa.

NFR-10 — Aplikasi Berfungsi Penuh

Aplikasi harus benar-benar berfungsi, bukan hanya desain/template. Provenance: explicit. Rationale: Kebutuhan operasional ujian sekolah.

NFR-11 — Panduan Instalasi dan Deploy

Harus tersedia panduan instalasi, panduan menjalankan aplikasi secara lokal, dan panduan deploy menjadi link online. Provenance: explicit. Rationale: Memudahkan sekolah menjalankan dan men-deploy aplikasi.

NFR-12 — Pengembangan Bertahap

Kode dibuat secara bertahap dan setiap bagian dipastikan dapat dijalankan sebelum melanjutkan ke bagian berikutnya. Provenance: explicit. Rationale: Memastikan setiap bagian berfungsi.

10. Tech Stack

Catatan: Jika menggunakan teknologi berbeda, pilih stack yang paling mudah untuk pemula dan mudah di-host secara online. Provenance: explicit.

Struktur folder project, database/schema, backend API, frontend, login, dashboard admin, dashboard guru, dashboard siswa, bank soal, sistem ujian, timer, penyimpanan jawaban, penilaian otomatis, hasil ujian, export nilai, panduan instalasi, panduan menjalankan aplikasi secara lokal, dan panduan deploy menjadi link online harus disertakan dalam hasil akhir. Provenance: explicit.

11. Assumptions and Constraints

Constraints (Hard)

1. Jangan menyalin logo, warna, atau identitas resmi UT. — explicit
2. Satu akun hanya dapat digunakan pada satu sesi ujian. — explicit
3. Timer harus tersimpan di server. — explicit
4. Refresh halaman tidak boleh menghilangkan jawaban. — explicit
5. Jika koneksi terputus, jawaban yang sudah tersimpan tetap aman. — explicit
6. Siswa tidak boleh dapat mengakses halaman admin. — explicit
7. Setelah waktu habis, siswa tidak dapat mengerjakan kembali. — explicit
8. Logout otomatis setelah ujian selesai. — explicit
9. Jangan hanya membuat desain/template; aplikasi harus benar-benar berfungsi. — explicit
10. Tidak terlalu banyak animasi. — explicit
11. Guru/Admin dapat menentukan apakah nilai langsung ditampilkan kepada siswa atau disembunyikan. — explicit

Assumptions

1. Akun siswa diprovisikan sebelum login dan mengikuti ujian. — required_inference
2. Akun guru dan admin diprovisikan dengan peran yang sesuai sebelum mengakses dashboard. — required_inference
3. Sesi ujian dibuat dengan token valid dan satu akun hanya boleh memiliki satu sesi aktif. — required_inference
4. Timer dan jawaban disimpan di server agar dapat dipulihkan setelah refresh atau gangguan koneksi. — required_inference
5. Ujian ditutup final saat selesai manual atau waktu habis, lalu akses pengerjaan dicabut. — required_inference
6. Kebijakan publikasi nilai ditentukan Guru/Admin sebelum hasil ditampilkan kepada Siswa. — required_inference

Defaults (Not Specified by User)

• Font: Fira Sans dan Fira Sans Condensed — [Default — not specified by user] (dari CREATIVE DIRECTION).
• Palette: #F4F1EA, #FFFFFF, #14161A, #C0202B, #0E6E5C, #6B6A66 — [Default — not specified by user] (dari CREATIVE DIRECTION).
• Radius: 6px kartu, 4px tombol/input — [Default — not specified by user] (dari CREATIVE DIRECTION).
• Grid: 12 kolom, measure 1200px, gutter 24px — [Default — not specified by user] (dari CREATIVE DIRECTION).

12. Glossary