System Requirements Document for belajar-mengajar-quiz

1. Introduction

belajar-mengajar-quiz adalah aplikasi belajar mengajar yang menyatukan tiga hal dalam satu tempat: kegiatan pembelajaran, quiz yang menyertai pembelajaran, dan soal-soal tugas yang harus dikerjakan Murid. Aplikasi ini juga menyediakan laman pembuatan akun terlebih dahulu sebelum aplikasi digunakan, serta memungkinkan Murid mengumpulkan tugas berupa foto.

Produk ini ditujukan untuk dua audiens manusia yang terpisah dan tidak dicampur:

• Guru — pengguna yang mendaftar melalui jalur registrasi guru, menyelenggarakan kegiatan belajar mengajar, menyertakan quiz, menyiapkan soal-soal tugas, dan memeriksa tugas foto yang dikumpulkan Murid.
• Murid — pengguna yang mendaftar melalui jalur registrasi murid, mengikuti kegiatan belajar mengajar, mengerjakan quiz dan soal tugas, serta mengumpulkan tugas dalam bentuk foto.

Inti produk adalah pemisahan jalur: registrasi guru dan registrasi murid adalah dua jalur yang berbeda, dan setelah masuk, Guru dan Murid bekerja di ruang kerja masing-masing. Keberhasilan Guru tercapai ketika materi, quiz, dan tugas tersampaikan serta pengumpulan tugas foto Murid dapat diperiksa. Keberhasilan Murid tercapai ketika tugas foto berhasil dikumpulkan dan hasil pengerjaan quiz/tugas dapat diketahui.

2. System Overview

Aplikasi ini adalah aplikasi web dengan antarmuka kustom milik aplikasi sendiri (bukan sekadar lembar kerja pihak ketiga), dengan identitas akun yang dimiliki aplikasi. Alur dasarnya:

1. Pengunjung tiba di Landing dan memahami bahwa ada dua jalur: Guru dan Murid.
2. Pengguna membuat akun terlebih dahulu melalui jalur yang sesuai — Sign Up Guru atau Sign Up Murid — yang terpisah satu sama lain.
3. Pengguna yang sudah punya akun masuk kembali melalui Login.
4. Guru mengelola quiz di Quiz dan Quiz Editor, mengelola soal-soal tugas di Tugas dan Task Editor, serta memeriksa tugas foto Murid di Submissions.
5. Murid mengerjakan quiz di Quiz Work, mengerjakan soal tugas di Task Work, dan mengumpulkan tugas berupa foto di Task Submission.

Aktor manusia aktif (katalog tertutup): Guru, Murid.

Aktor non-persona: layanan penyimpanan berkas foto (penyimpanan objek) yang menyimpan foto tugas yang diunggah Murid; lapisan backend aplikasi yang menyimpan akun, quiz, soal tugas, dan pengumpulan tugas.

Batasan cakupan saat ini (bukan larangan): dokumen ini hanya mencakup perilaku yang diminta secara eksplisit dan mekanika yang wajib diturunkan agar alur tersebut dapat dijalankan. Tidak ada fitur di luar itu yang ditambahkan.

2a. Product Interpretation and Delivery Boundary

Kepemilikan pengiriman. Aplikasi ini adalah aplikasi web milik sendiri dengan antarmuka kustom. Identitas akun dimiliki oleh aplikasi: Guru dan Murid membuat akun di dalam aplikasi, dan aplikasi menyimpan status akun tersebut agar pengguna dapat kembali masuk dan melanjutkan pekerjaannya. Tidak ada penyedia identitas eksternal yang ditunjuk oleh sumber; karena itu pembuatan akun dan verifikasi saat kembali masuk ditangani oleh aplikasi sendiri.

Batas akses. Landing, Login, Sign Up Guru, dan Sign Up Murid dapat dijangkau tanpa akun — memang demikian seharusnya, karena pembuatan akun harus terjadi lebih dulu sebelum aplikasi digunakan. Seluruh permukaan kerja setelahnya bersifat terbatas per peran: Quiz, Quiz Editor, Tugas, Task Editor, dan Submissions adalah ruang Guru; Quiz Work, Task Work, dan Task Submission adalah ruang Murid. Pembatasan ini mengikuti pemisahan jalur registrasi yang diminta secara eksplisit, bukan penambahan sistem izin yang lebih luas.

Batas sekarang dan nanti. Semua yang dijelaskan di dokumen ini adalah cakupan saat ini. Tidak ada fitur masa depan yang dinyatakan dalam sumber, sehingga tidak ada bagian "masa depan" yang diklaim.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada permintaan ini, sehingga tidak ada inventaris konten sumber yang disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: pengenalan aplikasi belajar mengajar; penjelasan bahwa kegiatan belajar mengajar menyertakan quiz dan soal-soal tugas; penjelasan bahwa Murid mengumpulkan tugas berupa foto; penegasan bahwa pembuatan akun dilakukan terlebih dahulu; penegasan bahwa jalur Guru dan jalur Murid terpisah.
• Aksi utama: menuju Sign Up Guru; menuju Sign Up Murid.
• Aksi pendukung: menuju Login bagi pengguna yang sudah memiliki akun.
• Entitas domain: aplikasi, jalur Guru, jalur Murid, quiz, soal tugas, pengumpulan tugas foto.
• Tanggung jawab komponen: hero informasi dengan headline besar dan dua blok jalur berwarna (Guru dan Murid) yang masing-masing memuat nomor, label, dan tombol pendaftarannya sendiri; strip legenda berkode yang memperlihatkan empat lini sistem (Quiz / Tugas / Pengumpulan Foto / Penilaian); band bernomor yang menjelaskan apa itu aplikasi ini, apa yang dilakukan Guru, apa yang dilakukan Murid, dan bagaimana memulai; penanda bagian bergambar (piktogram guru, murid, unggah kamera, lembar quiz, centang penilaian) yang selalu disertai label teks.
• State: loading — kerangka band bernomor dengan aturan 1px; empty — tidak berlaku karena konten statis; success — pengunjung memahami dua jalur dan dapat memilih salah satu; error — bila tujuan pendaftaran tidak dapat dijangkau, tampilkan pesan kegagalan navigasi dan tawarkan ulang kedua tombol jalur; recovery — pengunjung dapat memilih jalur lain atau menuju Login tanpa kehilangan konteks.

Login

• Informasi/state: formulir masuk untuk pengguna yang sudah membuat akun; penanda jalur netral (bukan merah Guru, bukan amber Murid) karena halaman ini melayani keduanya.
• Aksi utama: memverifikasi identitas dan masuk ke ruang kerja sesuai peran akun.
• Aksi pendukung: menuju Sign Up Guru atau Sign Up Murid bila belum punya akun; kembali ke Landing.
• Entitas domain: akun, peran (Guru/Murid), sesi masuk.
• Tanggung jawab komponen: kolom jalur berwarna ink dengan label bernomor; formulir pada latar kertas hangat; penanganan kesalahan kredensial; pengalihan setelah berhasil masuk ke ruang kerja peran yang sesuai.
• State: loading — tombol masuk dalam keadaan memproses; empty — kolom kosong dengan label jelas; success — pengguna masuk dan diarahkan ke ruang kerja perannya; error — kredensial tidak cocok atau akun tidak ditemukan, ditampilkan sebagai pesan di atas formulir tanpa menghapus isian; recovery — pengguna dapat memperbaiki isian, mencoba lagi, atau beralih ke jalur pendaftaran yang benar.

Sign Up Guru

• Informasi/state: jalur pembuatan akun khusus Guru, terpisah dari jalur Murid; identitas jalur ditandai warna merah dan nomor bagian.
• Aksi utama: membuat akun Guru.
• Aksi pendukung: beralih ke Sign Up Murid bila salah jalur; menuju Login bila sudah punya akun.
• Entitas domain: akun Guru, peran Guru.
• Tanggung jawab komponen: kolom jalur merah dengan label bernomor; formulir pendaftaran Guru pada latar kertas hangat; validasi isian; konfirmasi keberhasilan; pengarahan setelah berhasil.
• State: loading — tombol daftar dalam keadaan memproses; empty — formulir kosong dengan label dan bantuan; success — akun Guru terbentuk dan pengguna diarahkan untuk masuk atau langsung ke ruang kerja Guru; error — isian tidak valid atau akun sudah ada, ditampilkan sebagai pesan yang menunjuk kolom bermasalah; recovery — pengguna memperbaiki isian dan mengirim ulang, atau beralih ke Login bila ternyata akun sudah ada.

Sign Up Murid

• Informasi/state: jalur pembuatan akun khusus Murid, terpisah dari jalur Guru; identitas jalur ditandai warna amber dan nomor bagian.
• Aksi utama: membuat akun Murid.
• Aksi pendukung: beralih ke Sign Up Guru bila salah jalur; menuju Login bila sudah punya akun.
• Entitas domain: akun Murid, peran Murid.
• Tanggung jawab komponen: kolom jalur amber dengan label bernomor; formulir pendaftaran Murid pada latar kertas hangat; validasi isian; konfirmasi keberhasilan; pengarahan setelah berhasil.
• State: loading — tombol daftar dalam keadaan memproses; empty — formulir kosong dengan label dan bantuan; success — akun Murid terbentuk dan pengguna diarahkan untuk masuk atau langsung ke ruang kerja Murid; error — isian tidak valid atau akun sudah ada, ditampilkan sebagai pesan yang menunjuk kolom bermasalah; recovery — pengguna memperbaiki isian dan mengirim ulang, atau beralih ke Login bila ternyata akun sudah ada.

Quiz

• Informasi/state: daftar quiz yang disertakan dalam kegiatan belajar mengajar; status tiap quiz (misalnya belum dipublikasikan, tersedia untuk dikerjakan); jumlah soal dan penanda waktu dalam angka tabular.
• Aksi utama: meninjau quiz yang ada; membuka Quiz Editor untuk membuat quiz baru atau mengubah quiz yang ada.
• Aksi pendukung: menyaring/menelusuri daftar quiz; kembali ke ruang kerja Guru.
• Entitas domain: quiz, soal quiz, status quiz, jumlah soal.
• Tanggung jawab komponen: header bagian bernomor; daftar baris bergaris dengan stripe jalur merah 4px di tepi kiri; aksi buka editor per baris; keadaan kosong bergambar piktogram lembar quiz dengan label teks.
• State: loading — baris kerangka dengan aturan 1px; empty — belum ada quiz, dengan ajakan membuka Quiz Editor; success — daftar quiz tampil dan dapat dibuka; error — daftar gagal dimuat, tampilkan pesan dan tombol coba lagi; recovery — memuat ulang daftar atau membuka Quiz Editor untuk mulai dari nol.

Quiz Editor

• Informasi/state: ruang fokus untuk membuat atau mengubah satu quiz; daftar soal yang sedang disusun; isian pertanyaan dan pilihan jawaban.
• Aksi utama: menambah soal; mengubah soal; menyusun pilihan jawaban; menyimpan quiz.
• Aksi pendukung: menghapus soal; kembali ke Quiz tanpa menyimpan.
• Entitas domain: quiz, soal quiz, pilihan jawaban, kunci jawaban.
• Tanggung jawab komponen: header bagian bernomor; editor soal bergaris dengan kotak huruf 32px untuk pilihan jawaban; kontrol simpan; penanda perubahan belum tersimpan.
• State: loading — editor memuat quiz yang dipilih; empty — quiz baru tanpa soal, dengan ajakan menambah soal pertama; success — quiz tersimpan dan kembali ke Quiz dengan quiz terlihat di daftar; error — penyimpanan gagal atau soal tidak lengkap, ditampilkan sebagai pesan yang menunjuk soal bermasalah; recovery — pengguna memperbaiki soal dan menyimpan ulang, atau meninggalkan editor dengan peringatan perubahan belum tersimpan.

Tugas

• Informasi/state: daftar soal-soal tugas yang disiapkan Guru; status tiap tugas; jumlah soal dan penanda waktu dalam angka tabular.
• Aksi utama: meninjau soal-soal tugas yang ada; membuka Task Editor untuk menyiapkan tugas baru atau mengubah tugas yang ada.
• Aksi pendukung: menuju Submissions untuk memeriksa pengumpulan foto; kembali ke ruang kerja Guru.
• Entitas domain: tugas, soal tugas, status tugas.
• Tanggung jawab komponen: header bagian bernomor; daftar baris bergaris dengan stripe jalur merah 4px; aksi buka editor per baris; tautan ke pengumpulan tugas; keadaan kosong bergambar piktogram.
• State: loading — baris kerangka dengan aturan 1px; empty — belum ada tugas, dengan ajakan membuka Task Editor; success — daftar tugas tampil dan dapat dibuka; error — daftar gagal dimuat, tampilkan pesan dan tombol coba lagi; recovery — memuat ulang daftar atau membuka Task Editor untuk mulai dari nol.

Task Editor

• Informasi/state: ruang fokus untuk menyiapkan atau mengubah satu set soal tugas; daftar soal yang sedang disusun; isian pertanyaan.
• Aksi utama: menambah soal tugas; mengubah soal tugas; menyimpan set tugas.
• Aksi pendukung: menghapus soal; kembali ke Tugas tanpa menyimpan.
• Entitas domain: tugas, soal tugas.
• Tanggung jawab komponen: header bagian bernomor; editor soal bergaris; kontrol simpan; penanda perubahan belum tersimpan.
• State: loading — editor memuat tugas yang dipilih; empty — tugas baru tanpa soal, dengan ajakan menambah soal pertama; success — tugas tersimpan dan kembali ke Tugas dengan tugas terlihat di daftar; error — penyimpanan gagal atau soal tidak lengkap, ditampilkan sebagai pesan yang menunjuk soal bermasalah; recovery — pengguna memperbaiki soal dan menyimpan ulang, atau meninggalkan editor dengan peringatan perubahan belum tersimpan.

Quiz Work

• Informasi/state: daftar quiz yang tersedia untuk dikerjakan Murid; status pengerjaan tiap quiz; jumlah soal dan penanda waktu dalam angka tabular.
• Aksi utama: membuka quiz dan mengerjakan soal-soalnya; mengirim jawaban.
• Aksi pendukung: kembali ke daftar quiz; melihat hasil pengerjaan quiz yang sudah dikirim.
• Entitas domain: quiz, soal quiz, jawaban Murid, hasil pengerjaan.
• Tanggung jawab komponen: header bagian bernomor; daftar baris bergaris dengan stripe jalur amber 4px; baris jawaban bergaris penuh dengan kotak huruf 32px (A/B/C/D) bergaris ink yang terisi saat dipilih; penanda kemajuan quiz berwarna amber dengan angka tabular; kontrol kirim jawaban.
• State: loading — daftar quiz atau soal sedang dimuat; empty — belum ada quiz tersedia, dengan penjelasan singkat; success — jawaban terkirim dan hasil pengerjaan quiz dapat diketahui; error — pengiriman gagal atau koneksi terputus, tampilkan pesan dan pertahankan jawaban yang sudah dipilih; recovery — pengguna dapat mengirim ulang tanpa kehilangan jawaban; jawaban benar ditandai hijau #0B6E4F dengan sapuan aturan 1px, jawaban salah ditandai batang ink 2px.

Task Work

• Informasi/state: daftar soal-soal tugas yang harus dikerjakan Murid; status pengerjaan tiap tugas; jumlah soal dan penanda waktu dalam angka tabular.
• Aksi utama: membuka tugas dan mengerjakan soal-soalnya; mengirim jawaban.
• Aksi pendukung: menuju Task Submission untuk tugas yang memerlukan pengumpulan foto; kembali ke daftar tugas.
• Entitas domain: tugas, soal tugas, jawaban Murid, hasil pengerjaan.
• Tanggung jawab komponen: header bagian bernomor; daftar baris bergaris dengan stripe jalur amber 4px; editor jawaban bergaris; kontrol kirim jawaban; tautan ke pengumpulan foto.
• State: loading — daftar tugas atau soal sedang dimuat; empty — belum ada tugas tersedia, dengan penjelasan singkat; success — jawaban terkirim dan hasil pengerjaan tugas dapat diketahui; error — pengiriman gagal, tampilkan pesan dan pertahankan jawaban; recovery — pengguna dapat mengirim ulang tanpa kehilangan jawaban.

Task Submission

• Informasi/state: ruang Murid untuk mengumpulkan tugas berupa foto; daftar foto yang sudah diunggah untuk tugas tersebut; status pengumpulan.
• Aksi utama: memilih atau mengambil foto tugas; mengunggah foto; mengirim pengumpulan tugas.
• Aksi pendukung: menghapus foto yang salah sebelum mengirim; kembali ke Task Work.
• Entitas domain: tugas, foto tugas, pengumpulan tugas, status pengumpulan, nama, kelas, waktu.
• Tanggung jawab komponen: header bagian bernomor; area unggah bergambar piktogram kamera-unggah dengan label teks; pratinjau foto sebagai gambar persegi tanpa potong pada bingkai ink 1px dengan blok keterangan tabular di bawahnya (nama / kelas / waktu / status); kontrol kirim pengumpulan.
• State: loading — unggahan sedang berjalan dengan indikator kemajuan; empty — belum ada foto, dengan ajakan mengunggah foto pertama; success — pengumpulan terkirim dan statusnya terlihat sebagai terkumpul; error — unggahan gagal atau berkas bukan foto, tampilkan pesan dan pertahankan foto lain yang sudah berhasil; recovery — pengguna dapat mencoba unggah ulang atau mengganti foto, lalu mengirim kembali.

Submissions

• Informasi/state: daftar tugas foto yang dikumpulkan Murid untuk tugas yang dipilih; setiap entri memperlihatkan foto persegi tanpa potong pada bingkai ink 1px dengan keterangan tabular (nama / kelas / waktu / status).
• Aksi utama: memeriksa pengumpulan tugas foto Murid; menandai status pemeriksaan/penilaian.
• Aksi pendukung: berpindah antar tugas untuk melihat pengumpulan yang berbeda; kembali ke Tugas.
• Entitas domain: tugas, pengumpulan tugas, foto tugas, Murid, status penilaian.
• Tanggung jawab komponen: header bagian bernomor; daftar bergaris (bukan kisi kartu) berisi entri pengumpulan; blok keterangan tabular dengan angka tabular; kontrol status penilaian per entri; keadaan kosong bergambar piktogram centang penilaian dengan label teks.
• State: loading — daftar pengumpulan sedang dimuat; empty — belum ada pengumpulan untuk tugas ini, dengan penjelasan singkat; success — pengumpulan tampil dan status penilaian tersimpan; error — daftar atau foto gagal dimuat, tampilkan pesan dan tombol coba lagi; recovery — memuat ulang daftar; status penilaian yang sudah tersimpan tidak hilang.

3. Functional Requirements

Setiap butir di bawah adalah capability yang diminta secara eksplisit atau mekanika wajib yang diturunkan agar alur tersebut dapat dijalankan. Provenance ditandai explicit, basic_default, atau required_inference.

FR-01 — Aplikasi belajar mengajar (explicit) As a Guru, I should dapat menyelenggarakan kegiatan belajar mengajar di dalam aplikasi, sehingga materi, quiz, dan tugas tersampaikan kepada Murid.

• Trigger/input: Guru masuk ke ruang kerja Guru setelah membuat akun.
• Hasil yang dapat diamati: ruang kerja Guru menampilkan area Quiz dan Tugas sebagai tempat kegiatan belajar mengajar diselenggarakan.
• Kegagalan/recovery: bila ruang kerja gagal dimuat, Guru dapat memuat ulang tanpa kehilangan akun.
• Kelanjutan: Guru membuka Quiz atau Tugas.

FR-02 — Aplikasi belajar mengajar (explicit) As a Murid, I should dapat mengikuti kegiatan belajar mengajar di dalam aplikasi, sehingga saya dapat mengerjakan quiz dan soal tugas yang diberikan.

• Trigger/input: Murid masuk ke ruang kerja Murid setelah membuat akun.
• Hasil yang dapat diamati: ruang kerja Murid menampilkan area Quiz Work dan Task Work sebagai tempat kegiatan belajar mengajar diikuti.
• Kegagalan/recovery: bila ruang kerja gagal dimuat, Murid dapat memuat ulang tanpa kehilangan akun.
• Kelanjutan: Murid membuka Quiz Work atau Task Work.

FR-03 — Quiz menyertai pembelajaran (explicit) As a Guru, I should dapat menyertakan quiz dalam kegiatan belajar mengajar, sehingga Murid dapat mengerjakan quiz tersebut.

• Trigger/input: Guru membuka Quiz dan memilih membuat quiz baru.
• Hasil yang dapat diamati: quiz tersimpan dan muncul di daftar Quiz sebagai quiz yang disertakan dalam pembelajaran.
• Kegagalan/recovery: bila penyimpanan gagal, Guru dapat memperbaiki isian dan menyimpan ulang.
• Kelanjutan: Guru membuka Quiz Editor untuk menyusun soal, atau kembali ke Quiz.

FR-04 — Menyusun soal quiz (explicit) As a Guru, I should dapat menyusun soal-soal quiz beserta pilihan jawabannya, sehingga quiz yang disertakan memiliki isi yang dapat dikerjakan.

• Trigger/input: Guru berada di Quiz Editor.
• Hasil yang dapat diamati: soal dan pilihan jawaban tersimpan sebagai bagian dari quiz.
• Kegagalan/recovery: bila soal tidak lengkap, editor menunjuk soal bermasalah dan Guru dapat memperbaikinya.
• Kelanjutan: Guru menyimpan quiz dan kembali ke Quiz.

FR-05 — Soal-soal tugas (explicit) As a Guru, I should dapat menyiapkan soal-soal tugas, sehingga Murid memiliki tugas yang harus dikerjakan.

• Trigger/input: Guru membuka Tugas dan memilih menyiapkan tugas baru.
• Hasil yang dapat diamati: set soal tugas tersimpan dan muncul di daftar Tugas.
• Kegagalan/recovery: bila penyimpanan gagal, Guru dapat memperbaiki isian dan menyimpan ulang.
• Kelanjutan: Guru membuka Task Editor untuk menyusun soal, atau kembali ke Tugas.

FR-06 — Menyusun soal tugas (explicit) As a Guru, I should dapat menyusun dan mengubah soal-soal tugas, sehingga tugas yang diberikan jelas dan lengkap.

• Trigger/input: Guru berada di Task Editor.
• Hasil yang dapat diamati: soal tugas tersimpan sebagai bagian dari set tugas.
• Kegagalan/recovery: bila soal tidak lengkap, editor menunjuk soal bermasalah dan Guru dapat memperbaikinya.
• Kelanjutan: Guru menyimpan tugas dan kembali ke Tugas.

FR-07 — Laman pembuatan akun terlebih dahulu (explicit) As a Guru, I should membuat akun terlebih dahulu sebelum menggunakan aplikasi, sehingga saya memiliki akun yang dapat digunakan untuk masuk kembali.

• Trigger/input: Guru mengunjungi Landing dan memilih jalur Guru.
• Hasil yang dapat diamati: akun Guru terbentuk melalui Sign Up Guru dan Guru dapat masuk melalui Login.
• Kegagalan/recovery: bila isian tidak valid atau akun sudah ada, pesan ditampilkan pada kolom bermasalah dan Guru dapat memperbaiki atau beralih ke Login.
• Kelanjutan: Guru masuk ke ruang kerja Guru.

FR-08 — Laman pembuatan akun terlebih dahulu (explicit) As a Murid, I should membuat akun terlebih dahulu sebelum menggunakan aplikasi, sehingga saya memiliki akun yang dapat digunakan untuk masuk kembali.

• Trigger/input: Murid mengunjungi Landing dan memilih jalur Murid.
• Hasil yang dapat diamati: akun Murid terbentuk melalui Sign Up Murid dan Murid dapat masuk melalui Login.
• Kegagalan/recovery: bila isian tidak valid atau akun sudah ada, pesan ditampilkan pada kolom bermasalah dan Murid dapat memperbaiki atau beralih ke Login.
• Kelanjutan: Murid masuk ke ruang kerja Murid.

FR-09 — Registrasi guru dan murid dipisahkan (explicit) As a Guru, I should mendaftar melalui jalur Sign Up Guru yang terpisah dari jalur Murid, sehingga saya tidak pernah tertukar dengan jalur Murid.

• Trigger/input: Guru memilih tombol pendaftaran Guru pada Landing.
• Hasil yang dapat diamati: Guru berada pada Sign Up Guru dengan identitas jalur merah dan nomor bagian, bukan pada Sign Up Murid.
• Kegagalan/recovery: bila Guru salah jalur, tersedia tautan langsung ke Sign Up Murid.
• Kelanjutan: Guru menyelesaikan pendaftaran pada jalur Guru.

FR-10 — Registrasi guru dan murid dipisahkan (explicit) As a Murid, I should mendaftar melalui jalur Sign Up Murid yang terpisah dari jalur Guru, sehingga saya tidak pernah tertukar dengan jalur Guru.

• Trigger/input: Murid memilih tombol pendaftaran Murid pada Landing.
• Hasil yang dapat diamati: Murid berada pada Sign Up Murid dengan identitas jalur amber dan nomor bagian, bukan pada Sign Up Guru.
• Kegagalan/recovery: bila Murid salah jalur, tersedia tautan langsung ke Sign Up Guru.
• Kelanjutan: Murid menyelesaikan pendaftaran pada jalur Murid.

FR-11 — Returning verification (required_inference) As a Guru, I should dapat masuk kembali melalui Login menggunakan akun yang telah saya buat, sehingga saya dapat melanjutkan pekerjaan saya.

• Trigger/input: Guru memasukkan kredensial akunnya pada Login.
• Hasil yang dapat diamati: Guru diarahkan ke ruang kerja Guru.
• Kegagalan/recovery: bila kredensial tidak cocok, pesan ditampilkan tanpa menghapus isian dan Guru dapat mencoba lagi.
• Kelanjutan: Guru membuka Quiz, Tugas, atau Submissions.

FR-12 — Returning verification (required_inference) As a Murid, I should dapat masuk kembali melalui Login menggunakan akun yang telah saya buat, sehingga saya dapat melanjutkan pekerjaan saya.

• Trigger/input: Murid memasukkan kredensial akunnya pada Login.
• Hasil yang dapat diamati: Murid diarahkan ke ruang kerja Murid.
• Kegagalan/recovery: bila kredensial tidak cocok, pesan ditampilkan tanpa menghapus isian dan Murid dapat mencoba lagi.
• Kelanjutan: Murid membuka Quiz Work atau Task Work.

FR-13 — Mengerjakan quiz (explicit) As a Murid, I should mengerjakan quiz yang disertakan dalam kegiatan belajar mengajar, sehingga hasil pengerjaan quiz saya dapat diketahui.

• Trigger/input: Murid membuka Quiz Work dan memilih quiz yang tersedia.
• Hasil yang dapat diamati: jawaban terkirim dan hasil pengerjaan quiz dapat diketahui; jawaban benar ditandai hijau #0B6E4F, jawaban salah ditandai batang ink 2px.
• Kegagalan/recovery: bila pengiriman gagal, jawaban yang sudah dipilih tetap dipertahankan dan Murid dapat mengirim ulang.
• Kelanjutan: Murid kembali ke daftar quiz atau membuka Task Work.

FR-14 — Mengerjakan soal tugas (explicit) As a Murid, I should mengerjakan soal-soal tugas yang diberikan, sehingga hasil pengerjaan tugas saya dapat diketahui.

• Trigger/input: Murid membuka Task Work dan memilih tugas yang tersedia.
• Hasil yang dapat diamati: jawaban terkirim dan hasil pengerjaan tugas dapat diketahui.
• Kegagalan/recovery: bila pengiriman gagal, jawaban yang sudah dipilih tetap dipertahankan dan Murid dapat mengirim ulang.
• Kelanjutan: Murid kembali ke daftar tugas atau menuju Task Submission bila tugas memerlukan pengumpulan foto.

FR-15 — Mengumpulkan tugas berupa foto (explicit) As a Murid, I should mengumpulkan tugas dalam bentuk foto, sehingga tugas saya tercatat sebagai terkumpul.

• Trigger/input: Murid membuka Task Submission dan memilih atau mengambil foto tugas.
• Hasil yang dapat diamati: foto terunggah dan tampil sebagai gambar persegi tanpa potong pada bingkai ink 1px dengan keterangan tabular (nama / kelas / waktu / status); status pengumpulan terlihat sebagai terkumpul.
• Kegagalan/recovery: bila unggahan gagal atau berkas bukan foto, pesan ditampilkan, foto lain yang sudah berhasil tetap dipertahankan, dan Murid dapat mencoba unggah ulang atau mengganti foto.
• Kelanjutan: Murid mengirim pengumpulan dan kembali ke Task Work.

FR-16 — Memeriksa tugas foto yang dikumpulkan (explicit) As a Guru, I should memeriksa tugas foto yang dikumpulkan Murid, sehingga saya dapat menilai pekerjaan Murid.

• Trigger/input: Guru membuka Submissions untuk tugas yang dipilih.
• Hasil yang dapat diamati: daftar pengumpulan tampil sebagai baris bergaris berisi foto persegi tanpa potong dengan keterangan tabular (nama / kelas / waktu / status), dan Guru dapat menandai status pemeriksaan/penilaian.
• Kegagalan/recovery: bila daftar atau foto gagal dimuat, pesan ditampilkan dan Guru dapat memuat ulang; status penilaian yang sudah tersimpan tidak hilang.
• Kelanjutan: Guru berpindah ke tugas lain atau kembali ke Tugas.

FR-17 — Meninjau quiz yang disertakan (required_inference) As a Guru, I should meninjau quiz yang telah saya susun, sehingga saya dapat memutuskan quiz mana yang perlu diubah.

• Trigger/input: Guru membuka Quiz.
• Hasil yang dapat diamati: daftar quiz tampil dengan status dan jumlah soal dalam angka tabular.
• Kegagalan/recovery: bila daftar gagal dimuat, Guru dapat memuat ulang.
• Kelanjutan: Guru membuka Quiz Editor untuk quiz yang dipilih.

FR-18 — Meninjau soal-soal tugas (required_inference) As a Guru, I should meninjau soal-soal tugas yang telah saya susun, sehingga saya dapat memutuskan tugas mana yang perlu diubah.

• Trigger/input: Guru membuka Tugas.
• Hasil yang dapat diamati: daftar tugas tampil dengan status dan jumlah soal dalam angka tabular.
• Kegagalan/recovery: bila daftar gagal dimuat, Guru dapat memuat ulang.
• Kelanjutan: Guru membuka Task Editor untuk tugas yang dipilih, atau menuju Submissions.

FR-19 — Akses ruang kerja terbatas per peran (required_inference) As a Guru, I should hanya menjangkau ruang kerja Guru, dan as a Murid, I should hanya menjangkau ruang kerja Murid, sehingga pemisahan jalur registrasi tetap konsisten setelah masuk.

• Trigger/input: pengguna yang sudah masuk mencoba membuka permukaan kerja peran lain.
• Hasil yang dapat diamati: permukaan kerja peran lain tidak dapat diakses; pengguna tetap berada di ruang kerja perannya.
• Kegagalan/recovery: bila pengguna tiba di permukaan yang bukan perannya, ia diarahkan kembali ke ruang kerja perannya tanpa kehilangan sesi.
• Kelanjutan: pengguna melanjutkan pekerjaan di ruang kerja perannya.

4. User Personas

Guru

Konteks produk. Guru adalah pengguna yang mendaftar melalui jalur registrasi guru yang terpisah dari murid. Guru adalah pihak yang menyelenggarakan kegiatan belajar mengajar di dalam aplikasi: menyertakan quiz, menyiapkan soal-soal tugas, dan memeriksa tugas Murid yang dikumpulkan berupa foto.

Tujuan utama. Materi, quiz, dan tugas tersampaikan, dan pengumpulan tugas foto Murid dapat diperiksa.

Tanggung jawab yang diterima. Membuat akun Guru melalui Sign Up Guru; masuk kembali melalui Login; meninjau dan mengelola quiz di Quiz; membuat atau mengubah quiz di Quiz Editor; meninjau dan mengelola soal-soal tugas di Tugas; menyiapkan atau mengubah soal tugas di Task Editor; memeriksa tugas foto yang dikumpulkan Murid di Submissions.

Input dan keputusan. Guru memutuskan quiz mana yang disertakan dan soal apa yang disusun; memutuskan soal tugas apa yang diberikan; memutuskan status pemeriksaan/penilaian atas setiap pengumpulan foto Murid.

Interaksi dengan peserta lain. Guru adalah penerima hasil kerja Murid: pengumpulan tugas foto Murid adalah masukan langsung bagi pekerjaan pemeriksaan Guru. Guru juga pihak yang menyediakan quiz dan soal tugas yang kemudian dikerjakan Murid.

Keberhasilan yang dapat diamati. Quiz dan tugas tersimpan serta terlihat di daftar Quiz dan Tugas; pengumpulan foto Murid tampil di Submissions dengan keterangan nama, kelas, waktu, dan status; status penilaian tersimpan.

Yang membedakan peran ini. Guru adalah satu-satunya pihak yang menciptakan dan mengubah isi pembelajaran (quiz dan soal tugas) serta satu-satunya pihak yang memeriksa dan menilai pengumpulan foto. Pekerjaannya berorientasi penyusunan dan penilaian, bukan pengerjaan.

Murid

Konteks produk. Murid adalah pengguna yang mendaftar melalui jalur registrasi murid yang terpisah dari guru. Murid mengikuti kegiatan belajar mengajar, mengerjakan quiz dan soal tugas yang diberikan, serta mengumpulkan tugas dalam bentuk foto.

Tujuan utama. Tugas foto berhasil dikumpulkan dan hasil pengerjaan quiz/tugas dapat diketahui.

Tanggung jawab yang diterima. Membuat akun Murid melalui Sign Up Murid; masuk kembali melalui Login; membuka dan mengerjakan quiz di Quiz Work; membuka dan mengerjakan soal tugas di Task Work; mengunggah dan mengumpulkan tugas dalam bentuk foto di Task Submission.

Input dan keputusan. Murid memilih jawaban quiz dan jawaban soal tugas; memilih atau mengambil foto tugas yang akan dikumpulkan; memutuskan kapan pengumpulan dikirim.

Interaksi dengan peserta lain. Murid adalah penerima isi pembelajaran yang disiapkan Guru: quiz dan soal tugas yang dibuat Guru adalah bahan yang dikerjakan Murid. Pengumpulan foto Murid adalah hasil yang kemudian diperiksa Guru.

Keberhasilan yang dapat diamati. Jawaban quiz dan tugas terkirim serta hasilnya dapat diketahui; foto tugas tampil sebagai gambar persegi tanpa potong dengan keterangan nama, kelas, waktu, dan status; status pengumpulan terlihat sebagai terkumpul.

Yang membedakan peran ini. Murid adalah satu-satunya pihak yang mengerjakan quiz dan soal tugas serta satu-satunya pihak yang mengunggah foto tugas. Pekerjaannya berorientasi pengerjaan dan pengumpulan, bukan penyusunan atau penilaian.

5. Core User Flows

Alur 1 — Guru membuat akun dan masuk (Guru)

1. Guru membuka Landing dan membaca bahwa aplikasi ini adalah aplikasi belajar mengajar dengan quiz dan soal tugas, bahwa Murid mengumpulkan tugas berupa foto, dan bahwa pembuatan akun dilakukan terlebih dahulu.
2. Guru melihat dua blok jalur pada hero: blok merah berlabel 01 — GURU dan blok amber berlabel 02 — MURID, masing-masing dengan tombolnya sendiri.
3. Guru memilih tombol Daftar sebagai Guru pada blok merah dan tiba di Sign Up Guru — jalur yang terpisah dari jalur Murid.
4. Guru mengisi formulir pendaftaran Guru dan mengirimkannya.
5. Hasil yang dapat diamati: akun Guru terbentuk. Bila isian tidak valid atau akun sudah ada, pesan tampil pada kolom bermasalah dan Guru dapat memperbaiki isian atau beralih ke Login.
6. Guru masuk melalui Login dengan akun yang baru dibuat dan diarahkan ke ruang kerja Guru.
7. Kelanjutan: Guru membuka Quiz atau Tugas.

Alur 2 — Murid membuat akun dan masuk (Murid)

1. Murid membuka Landing dan membaca bahwa aplikasi ini adalah aplikasi belajar mengajar dengan quiz dan soal tugas, serta bahwa Murid mengumpulkan tugas berupa foto.
2. Murid melihat dua blok jalur pada hero dan memilih tombol Daftar sebagai Murid pada blok amber.
3. Murid tiba di Sign Up Murid — jalur yang terpisah dari jalur Guru.
4. Murid mengisi formulir pendaftaran Murid dan mengirimkannya.
5. Hasil yang dapat diamati: akun Murid terbentuk. Bila isian tidak valid atau akun sudah ada, pesan tampil pada kolom bermasalah dan Murid dapat memperbaiki isian atau beralih ke Login.
6. Murid masuk melalui Login dengan akun yang baru dibuat dan diarahkan ke ruang kerja Murid.
7. Kelanjutan: Murid membuka Quiz Work atau Task Work.

Alur 3 — Guru menyertakan quiz dan menyusun soalnya (Guru)

1. Guru masuk ke ruang kerja Guru dan membuka Quiz.
2. Guru meninjau daftar quiz yang ada; bila belum ada quiz, keadaan kosong menampilkan piktogram lembar quiz dengan label teks dan ajakan membuka Quiz Editor.
3. Guru membuka Quiz Editor untuk membuat quiz baru.
4. Guru menambahkan soal dan menyusun pilihan jawaban pada baris bergaris dengan kotak huruf 32px.
5. Guru menyimpan quiz.
6. Hasil yang dapat diamati: quiz tersimpan dan kembali terlihat di daftar Quiz sebagai quiz yang disertakan dalam pembelajaran. Bila penyimpanan gagal atau soal tidak lengkap, editor menunjuk soal bermasalah dan Guru dapat memperbaikinya.
7. Kelanjutan: Guru kembali ke Quiz untuk meninjau quiz lain, atau beralih ke Tugas.

Alur 4 — Guru menyiapkan soal-soal tugas (Guru)

1. Guru masuk ke ruang kerja Guru dan membuka Tugas.
2. Guru meninjau daftar tugas yang ada; bila belum ada tugas, keadaan kosong menampilkan piktogram dengan label teks dan ajakan membuka Task Editor.
3. Guru membuka Task Editor untuk menyiapkan tugas baru.
4. Guru menambahkan soal-soal tugas dan menyimpan set tugas.
5. Hasil yang dapat diamati: set soal tugas tersimpan dan kembali terlihat di daftar Tugas. Bila penyimpanan gagal atau soal tidak lengkap, editor menunjuk soal bermasalah dan Guru dapat memperbaikinya.
6. Kelanjutan: Guru kembali ke Tugas, atau menuju Submissions untuk memeriksa pengumpulan.

Alur 5 — Murid mengerjakan quiz (Murid)

1. Murid masuk ke ruang kerja Murid dan membuka Quiz Work.
2. Murid melihat daftar quiz yang tersedia; bila belum ada quiz, keadaan kosong menjelaskan hal itu secara singkat.
3. Murid membuka satu quiz dan mengerjakan soal-soalnya, memilih jawaban pada baris bergaris penuh dengan kotak huruf 32px (A/B/C/D) yang terisi saat dipilih.
4. Murid mengirim jawabannya.
5. Hasil yang dapat diamati: jawaban terkirim dan hasil pengerjaan quiz dapat diketahui; jawaban benar ditandai hijau #0B6E4F dengan sapuan aturan 1px, jawaban salah ditandai batang ink 2px. Bila pengiriman gagal, jawaban yang sudah dipilih tetap dipertahankan dan Murid dapat mengirim ulang.
6. Kelanjutan: Murid kembali ke daftar quiz atau membuka Task Work.

Alur 6 — Murid mengerjakan soal tugas (Murid)

1. Murid masuk ke ruang kerja Murid dan membuka Task Work.
2. Murid melihat daftar tugas yang tersedia; bila belum ada tugas, keadaan kosong menjelaskan hal itu secara singkat.
3. Murid membuka satu tugas dan mengerjakan soal-soalnya.
4. Murid mengirim jawabannya.
5. Hasil yang dapat diamati: jawaban terkirim dan hasil pengerjaan tugas dapat diketahui. Bila pengiriman gagal, jawaban yang sudah dipilih tetap dipertahankan dan Murid dapat mengirim ulang.
6. Kelanjutan: Murid kembali ke daftar tugas, atau menuju Task Submission bila tugas tersebut memerlukan pengumpulan foto.

Alur 7 — Murid mengumpulkan tugas berupa foto (Murid)

1. Murid berada di Task Work dan membuka Task Submission untuk tugas yang memerlukan pengumpulan foto.
2. Bila belum ada foto, keadaan kosong menampilkan piktogram kamera-unggah dengan label teks dan ajakan mengunggah foto pertama.
3. Murid memilih atau mengambil foto tugas dan mengunggahnya; indikator kemajuan tampil selama unggahan berjalan.
4. Hasil yang dapat diamati: foto tampil sebagai gambar persegi tanpa potong pada bingkai ink 1px dengan blok keterangan tabular di bawahnya berisi nama, kelas, waktu, dan status.
5. Bila unggahan gagal atau berkas bukan foto, pesan ditampilkan, foto lain yang sudah berhasil tetap dipertahankan, dan Murid dapat mencoba unggah ulang atau mengganti foto.
6. Murid mengirim pengumpulan tugas.
7. Hasil yang dapat diamati: status pengumpulan terlihat sebagai terkumpul.
8. Kelanjutan: Murid kembali ke Task Work.

Alur 8 — Guru memeriksa tugas foto yang dikumpulkan Murid (Guru)

1. Guru masuk ke ruang kerja Guru dan membuka Submissions untuk tugas yang dipilih.
2. Bila belum ada pengumpulan, keadaan kosong menampilkan piktogram centang penilaian dengan label teks dan penjelasan singkat.
3. Guru melihat daftar pengumpulan sebagai baris bergaris — bukan kisi kartu — yang memuat foto persegi tanpa potong pada bingkai ink 1px dengan keterangan tabular nama, kelas, waktu, dan status.
4. Guru memeriksa setiap pengumpulan dan menandai status pemeriksaan/penilaian.
5. Hasil yang dapat diamati: status penilaian tersimpan dan tetap terlihat pada entri tersebut. Bila daftar atau foto gagal dimuat, pesan ditampilkan dan Guru dapat memuat ulang tanpa kehilangan status yang sudah tersimpan.
6. Kelanjutan: Guru berpindah ke tugas lain untuk melihat pengumpulan yang berbeda, atau kembali ke Tugas.

6. Visuals Colors and Theme

Arah kreatif bersifat otoritatif untuk bagian ini. Muse: Erik Spiekermann — tipografi sebagai infrastruktur. Headline arah: Typographic infrastructure for a school that lives in your pocket — Fira Sans, signal colours, and a numbered system you can navigate blind.

Warna (light mode).

Proporsi: 70% kertas hangat + putih, 20% tipe ink, 10% sinyal tersaturasi. Merah dan amber tidak pernah diletakkan sebagai bidang penuh yang bersebelahan tanpa aturan ink 1px di antaranya.

Tipografi. Heading dan body: Fira Sans. Display: Fira Sans ExtraBold (800), tracking rapat -0.02em, sentence case dengan ejaan Indonesia utuh — huruf kapital penuh hanya untuk mikro-label. Body: Fira Sans Regular (400). Mikro-label, nomor bagian, dan chip status: Fira Sans SemiBold (600) 11–12px, uppercase, letterspacing 0.14em. Semua angka memakai font-variant-numeric: tabular-nums agar skor quiz, jumlah soal, dan tanggal sejajar dalam kolom.

Skala: 1.25 modular di mobile, 1.333 di desktop. Display clamp(40px, 8vw, 92px); h1 clamp(32px, 5.2vw, 56px); h2 clamp(24px, 3.4vw, 36px); h3 22px; body-lg 18px; body 16px; label 13px; micro 11px. Line height: display 0.98, h1 1.06, body 1.6, label 1.3. Lebar baca dibatasi 68ch.

Bahasa bentuk. Bersudut keras dan infrastruktural: radius 2px pada input dan tombol, 0px pada panel dan kartu, garis ink 1px (#1C1B18 pada 18% untuk hairline, ink penuh untuk aturan struktural). Tanpa bayangan lembut — elevasi dinyatakan oleh garis 1px ditambah blok datar offset 4px dalam ink atau warna lini. Tombol persegi dengan radius 2px dan tepi bawah 3px lebih gelap yang turun 1px saat aktif. Ikon adalah piktogram bergaris 1.5px pada grid 24px dengan area hidup 20px, selalu berpasangan dengan label teks — tidak pernah ikon saja untuk hal yang harus dipahami pengguna baru.

Layout. Grid 12 kolom dengan aturan vertikal 1px yang terlihat pada 1280px, menciut ke 6 kolom pada 768px dan tumpukan 4 kolom tunggal pada 375px; aturan itu bertahan sebagai pembatas bagian horizontal di mobile sehingga nuansa "sistem tercetak" tidak hilang. Tipe rata kiri, flush-left/ragged-right — paragraf tidak pernah ditengahkan. Setiap layar dibuka dengan header bagian bernomor: blok ink persegi 44px berisi nomor bagian dalam amber atau putih, diikuti label uppercase dan aturan 1px selebar penuh. Landing berjalan sebagai rangkaian band bernomor bertumpuk (01 Apa ini / 02 Untuk Guru / 03 Untuk Murid / 04 Mulai), bukan kisi kartu. Layar auth terbelah: kolom warna lini solid di kiri (merah untuk Guru, amber untuk Murid, ink untuk Login) dengan label bernomor diputar 90°, dan formulir di atas kertas hangat di kanan; pada 375px kolom warna menjadi band header 96px dengan nomor dan label horizontal.

Imagery. Diagramatis dan dokumenter, tidak pernah stok-orang. Piktogram dalam tradisi transit Spiekermann: guru-di-papan, murid-dengan-ponsel, kamera-unggah, lembar-quiz, centang-penilaian — garis 1.5px, grid 24px, dipakai sebagai penanda bagian dan seni keadaan kosong. Fotografi hanya sebagai bukti: foto kelas Guru pada band "Untuk Guru" di Landing, dan foto tugas yang dikumpulkan Murid di dalam Submissions, selalu ditampilkan tanpa potong, persegi, pada bingkai ink 1px dengan blok keterangan di bawahnya berisi nama, kelas, dan cap waktu. Tanpa ilustrasi dekoratif, tanpa 3D, tanpa gradien, tanpa blob abstrak.

7. Signature Design Concept

Poster informasi dua jalur. Halaman masuk publik (Landing) bukan hero SaaS yang ditengahkan, melainkan poster informasi selebar penuh dari tepi ke tepi.

Komposisinya: grid 12 kolom dengan aturan vertikal 1px yang terlihat. Tujuh kolom kiri memuat headline Fira Sans ExtraBold raksasa "Belajar, mengerjakan, mengumpulkan." pada clamp(40px, 8vw, 92px) dengan leading 0.98, flush-left, dibiarkan mengalir sampai tepi kanan kolomnya; di bawahnya satu aturan ink 1px dan subline 68ch dalam Fira Sans Regular. Lima kolom kanan adalah pasangan blok warna solid bertumpuk — blok merah berlabel 01 — GURU dan blok amber berlabel 02 — MURID — masing-masing dengan tombol persegi di dalamnya (Daftar sebagai Guru / Daftar sebagai Murid), sehingga jalur registrasi yang terpisah menjadi gagasan grafis dominan hero. Strip bergaris hairline di bagian bawah viewport memperlihatkan empat lini sistem terkode (Quiz / Tugas / Pengumpulan Foto / Penilaian) sebagai legenda, seperti kunci transit. Tanpa gambar, tanpa gradien, tanpa kartu mengambang: tipe dan dua blok warna adalah seluruh hero. Di mobile kedua blok warna bertumpuk selebar penuh di bawah headline, masing-masing tetap membawa nomor, label, dan tombolnya secara utuh.

Gerakan khas yang dipakai ulang di seluruh aplikasi: blok bagian bernomor (ubin ink 44px berisi nomor dua digit, label mikro uppercase, aturan 1px selebar penuh) yang muncul sama persis di Quiz, Tugas, Submissions, dan Sign Up; identitas lini transit (merah = Guru, amber = Murid) sebagai kolom kiri solid pada layar auth, garis bawah pada nav aktif, dan stripe lini 4px di tepi kiri setiap baris ruang kerja; baris jawaban bergaya lembar jawaban dengan kotak huruf 32px; pengumpulan foto sebagai dokumen yang diarsipkan; dan gerakan papan keberangkatan yang hanya terdiri dari dua animasi.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Subjek fokus: headline tipografis raksasa "Belajar, mengerjakan, mengumpulkan." di tujuh kolom kiri, berhadapan dengan dua blok warna jalur — merah 01 — GURU dan amber 02 — MURID — di lima kolom kanan, ditutup strip legenda empat lini sistem.
• Tesis input → transformasi → hasil: saat pengunjung menggulir masuk ke setiap band bernomor, nomor bagian menghitung naik satu kali (tidak berulang) dan aturan 1px di bawahnya tergambar; hasilnya adalah pengunjung yang memahami bahwa ada dua jalur terpisah dan di mana harus memulai — tanpa satu pun elemen yang melayang atau berparalaks.
• Kosakata gerak: transisi linear-ish 120–180ms pada perubahan state, tanpa spring, tanpa bounce; sapuan aturan 1px kiri-ke-kanan 160ms pada pengungkapan jawaban; batang ink 2px yang menyentak masuk pada jawaban salah; wipe ink 200ms dari tepi kiri antar halaman; tidak ada yang berulang, tidak ada yang melayang, tidak ada paralaks.
• Bingkai pertama yang tersusun: grid 12 kolom dengan aturan vertikal 1px terlihat; headline flush-left mengalir ke tepi kanan kolomnya; satu aturan ink 1px dan subline 68ch di bawahnya; dua blok warna jalur bertumpuk di kanan dengan tombol persegi di dalamnya; strip legenda hairline di dasar viewport.
• Keadaan reduced-motion: semua gerak menjadi perubahan state instan — nomor bagian langsung tampil pada nilai akhirnya, aturan langsung tergambar, wipe halaman hilang, dan kedua blok jalur tetap utuh dengan nomor, label, serta tombolnya.

Tidak ada permintaan 3D/WebGL eksplisit dari pengguna dan dimensionalitas hero arah kreatif adalah flat, sehingga tidak ada Canvas/R3F/Drei yang diwajibkan.

9. Non-Functional Requirements

NFR-01 — Pemisahan jalur registrasi (explicit) Registrasi guru dan registrasi murid harus dipisahkan. Tidak boleh ada satu formulir gabungan dengan pemilih peran; jalur Guru dan jalur Murid adalah dua layar terpisah dengan warna dan nomor yang berbeda. Rasional: ini adalah batasan keras yang dinyatakan pengguna.

NFR-02 — Pembuatan akun lebih dulu (explicit) Pembuatan akun dilakukan terlebih dahulu sebelum penggunaan aplikasi. Permukaan kerja Guru dan Murid tidak dapat digunakan sebelum akun dibuat dan pengguna masuk. Rasional: batasan keras yang dinyatakan pengguna.

NFR-03 — Identitas dimiliki aplikasi (required_inference) Aplikasi menyimpan akun Guru dan Murid serta status sesi masuk, sehingga pengguna dapat kembali masuk dan melanjutkan pekerjaannya. Rasional: tanpa ini, alur "membuat akun terlebih dahulu" dan "masuk kembali" tidak dapat dijalankan.

NFR-04 — Akses ruang kerja per peran (required_inference) Permukaan kerja Guru (Quiz, Quiz Editor, Tugas, Task Editor, Submissions) hanya dapat dijangkau oleh akun Guru, dan permukaan kerja Murid (Quiz Work, Task Work, Task Submission) hanya oleh akun Murid. Rasional: menjaga konsistensi pemisahan jalur registrasi setelah pengguna masuk. Ini bukan sistem izin berjenjang; hanya pemisahan dua peran yang sudah dinyatakan sumber.

NFR-05 — Penyimpanan foto tugas (required_inference) Foto tugas yang diunggah Murid harus tersimpan dan dapat ditampilkan kembali kepada Guru yang memeriksanya, tanpa dipotong. Rasional: pengumpulan tugas berupa foto dan pemeriksaannya oleh Guru adalah capability eksplisit yang memerlukan penyimpanan berkas.

NFR-06 — Ketahanan pengiriman jawaban dan unggahan (required_inference) Kegagalan pengiriman jawaban quiz/tugas atau unggahan foto tidak boleh menghapus pekerjaan yang sudah dilakukan pengguna; pengguna harus dapat mencoba lagi. Rasional: alur pengerjaan dan pengumpulan hanya dapat digunakan jika kegagalan dapat dipulihkan.

NFR-07 — Keterbacaan dan kontrol utuh di setiap viewport (explicit, dari arah kreatif) Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap seluruhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat, dan tidak ada elemen lain yang menutupi bagian mana pun darinya. Gambar, dekorasi, dan gerak boleh dipotong atau keluar tepi sesuai arah kreatif selama tidak menutupi teks atau kontrol yang dapat dibaca.

NFR-08 — Aksesibilitas gerak (explicit, dari arah kreatif) Dengan prefers-reduced-motion, seluruh gerak menjadi perubahan state instan, dan setiap susunan tetap dapat digunakan secara statis.

NFR-09 — Kontras dan keterbacaan tipe (explicit, dari arah kreatif) Teks utama memakai #1C1B18 di atas #F4F1EA/#FFFFFF untuk kontras tinggi; amber #F2B300 hanya dipakai sebagai isian datar dengan teks ink di atasnya, tidak pernah sebagai glow atau teks di atas latar terang.

10. Tech Stack

Sumber tidak menetapkan teknologi tertentu, sehingga item berikut adalah default yang wajar untuk aplikasi web dengan antarmuka kustom, identitas milik aplikasi, dan penyimpanan foto. Semuanya ditandai [Default — not specified by user].

• Frontend: React [Default — not specified by user] — antarmuka kustom untuk Landing, Login, Sign Up Guru, Sign Up Murid, Quiz, Quiz Editor, Tugas, Task Editor, Quiz Work, Task Work, Task Submission, dan Submissions.
• Backend: Python/FastAPI [Default — not specified by user] — melayani akun, quiz, soal tugas, pengumpulan tugas, dan penilaian.
• Penyimpanan data: basis data relasional untuk akun, quiz, soal, tugas, dan pengumpulan tugas [Default — not specified by user].
• Penyimpanan berkas: penyimpanan objek untuk foto tugas yang diunggah Murid [Default — not specified by user].
• Tipografi: Fira Sans (ExtraBold 800, SemiBold 600, Regular 400) dari Google Fonts — ditetapkan oleh arah kreatif.
• Kontainerisasi: Docker/docker-compose [Default — not specified by user] untuk menjalankan frontend, backend, dan basis data secara lokal.
• Orkestrasi: Kubernetes tidak disertakan; tidak ada kebutuhan deployment yang dinyatakan sumber.

11. Assumptions and Constraints

Batasan keras (dari sumber).

1. Registrasi guru dan registrasi murid harus dipisahkan.
2. Pembuatan akun dilakukan terlebih dahulu sebelum penggunaan aplikasi.

Asumsi sempit (ditandai).

1. [Asumsi] Akun Guru dan Murid dibuat di dalam aplikasi (identitas milik aplikasi), karena sumber menyatakan "laman yang bisa membuat akun terlebih dahulu" dan tidak menunjuk penyedia identitas eksternal.
2. [Asumsi] Login melayani kedua peran pada satu layar dengan penanda lini netral (ink), karena sumber hanya menyatakan pembuatan akun yang dipisahkan, bukan proses masuk.
3. [Asumsi] Quiz dan soal tugas yang dibuat Guru tersedia bagi Murid di dalam aplikasi yang sama, karena sumber menyatakan kegiatan belajar mengajar menyertakan quiz dan soal tugas.
4. [Asumsi] Foto tugas disimpan di penyimpanan objek dan ditampilkan kembali kepada Guru, karena pengumpulan foto dan pemeriksaannya oleh Guru adalah capability eksplisit.
5. [Asumsi] Pemisahan akses ruang kerja mengikuti peran akun (Guru vs Murid) sebagai kelanjutan langsung dari pemisahan jalur registrasi; tidak ada tingkat izin lain yang diasumsikan.

Di luar cakupan saat ini.

• Tidak ada fitur yang dinyatakan sebagai rencana masa depan dalam sumber, sehingga tidak ada bagian "future requirements".
• Tidak ada sistem izin berjenjang, peran tambahan, atau pengelolaan akun lanjutan (misalnya pengaturan profil, lupa kata sandi, verifikasi surel) yang dinyatakan sumber; hal-hal itu tidak disertakan.
• Tidak ada integrasi pihak ketiga, pembayaran, atau analitik yang dinyatakan sumber.

12. Glossary

• Guru — pengguna yang mendaftar melalui jalur registrasi guru; menyelenggarakan kegiatan belajar mengajar, menyertakan quiz, menyiapkan soal-soal tugas, dan memeriksa tugas foto Murid.
• Murid — pengguna yang mendaftar melalui jalur registrasi murid; mengikuti kegiatan belajar mengajar, mengerjakan quiz dan soal tugas, serta mengumpulkan tugas dalam bentuk foto.
• Quiz — bentuk penilaian yang menyertai kegiatan belajar mengajar; disusun Guru dan dikerjakan Murid.
• Soal tugas — pertanyaan yang disiapkan Guru sebagai tugas yang harus dikerjakan Murid.
• Pengumpulan tugas foto — tindakan Murid mengunggah dan mengirim tugas dalam bentuk foto.
• Jalur Guru — rangkaian pendaftaran dan ruang kerja yang khusus untuk Guru, ditandai warna merah #C8102E.
• Jalur Murid — rangkaian pendaftaran dan ruang kerja yang khusus untuk Murid, ditandai warna amber #F2B300.
• Ruang kerja — kumpulan permukaan kerja yang dapat dijangkau setelah masuk, terpisah antara Guru dan Murid.
• Lini sistem — empat kategori terkode yang dipakai sebagai legenda: Quiz, Tugas, Pengumpulan Foto, Penilaian.
• Angka tabular — penyajian angka dengan lebar digit seragam (tabular-nums) agar skor, jumlah soal, dan tanggal sejajar dalam kolom.