ujian-online

byKieky Hardhieka

Buatkan aplikasi **UJIAN ONLINE SEKOLAH berbasis link/website** untuk siswa SMP dengan tampilan profesional, rapi, modern, dan sederhana, terinspirasi dari sistem ujian online seperti **Ujian UT**, tetapi jangan menyalin logo, warna, atau identitas resmi UT. ### 1. HALAMAN LOGIN SISWA Buat halaman login peserta dengan: - Logo/nama sekolah - Judul: **UJIAN ONLINE SMP NEGERI 1 SUKADANA** - Input Username/NIS/NISN - Input Password - Tombol **MASUK UJIAN** - Informasi nama ujian, mata pelajaran, kelas, dan waktu ujian Setelah login berhasil, siswa masuk ke halaman ujian. ### 2. HALAMAN UJIAN Buat tampilan seperti sistem ujian komputer: - Header berisi nama sekolah dan nama ujian - Nama siswa dan kelas - Mata pelajaran - Timer/countdown waktu ujian - Nomor soal - Pertanyaan - Pilihan jawaban A, B, C, D - Tombol **Sebelumnya** - Tombol **Berikutnya** - Tombol **Simpan Jawaban** - Tombol **Selesai Ujian** ### 3. PANEL NOMOR SOAL Di sebelah kanan buat panel nomor soal: 1 2 3 4 5 6 7 8 9 10 dan seterusnya sampai jumlah soal. Status nomor soal: - Abu-abu = belum dijawab - Warna berbeda = sudah dijawab - Nomor aktif = soal yang sedang dikerjakan Siswa dapat langsung klik nomor soal untuk berpindah ke soal tertentu. ### 4. SISTEM TIMER Buat countdown otomatis, misalnya: **01:30:00** Ketika waktu habis: - Jawaban otomatis disimpan - Ujian otomatis ditutup - Siswa diarahkan ke halaman selesai - Siswa tidak dapat mengerjakan kembali ### 5. HALAMAN KONFIRMASI SELESAI Ketika siswa menekan tombol **Selesai Ujian**, tampilkan konfirmasi: "Apakah Anda yakin ingin mengakhiri ujian?" Tampilkan: - Jumlah soal - Sudah dijawab - Belum dijawab Tombol: **Kembali ke Ujian** **Ya, Selesaikan Ujian** ### 6. HALAMAN HASIL Setelah ujian selesai, tampilkan: - Nama siswa - Kelas - Mata pelajaran - Jumlah soal - Jumlah benar - Nilai - Status selesai ujian Guru/Admin dapat menentukan apakah nilai langsung ditampilkan kepada siswa atau disembunyikan. ### 7. DASHBOARD ADMIN/GURU Buat dashboard terpisah untuk Admin/Guru. Fitur: - 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 ### 8. BANK SOAL Buat database bank soal dengan: - Mata pelajaran - Kelas - Materi - Pertanyaan - Pilihan A - Pilihan B - Pilihan C - Pilihan D - Kunci jawaban - Bobot soal - Tingkat kesulitan Dukung soal: - Pilihan Ganda - Essay ### 9. SISTEM KEAMANAN UJIAN Tambahkan: - Satu akun hanya dapat digunakan pada satu sesi ujian - Token ujian - Timer tersimpan di server - Jawaban otomatis tersimpan - Refresh halaman tidak menghilangkan jawaban - Jika koneksi terputus, jawaban yang sudah tersimpan tetap aman - Mencegah siswa mengakses halaman admin - Logout otomatis setelah ujian selesai ### 10. LINK UJIAN Aplikasi harus dapat dijalankan melalui **link online**, sehingga guru cukup membagikan link kepada siswa. Contoh: **https://ujian.smpn1sukadana.sch.id** Siswa membuka link → login → memasukkan token → mengikuti ujian. ### 11. DESAIN Gunakan desain: - Responsive untuk komputer, laptop, tablet, dan HP - Tampilan bersih dan profesional - Tidak terlalu banyak animasi - Mudah digunakan siswa SMP - Sidebar/panel nomor soal - Header ujian - Timer terlihat jelas - Gunakan card dan tombol yang modern - Pastikan tampilan nyaman untuk ujian dalam waktu lama ### 12. DATABASE Gunakan database relasional dengan tabel minimal: - users - students - teachers - classes - subjects - exams - questions - options - exam_questions - exam_sessions - answers - results - tokens Buat relasi database yang benar dan aman. ### 13. TEKNOLOGI Gunakan teknologi modern yang mudah di-deploy: - Frontend: React/Next.js - Backend: Node.js - Database: MySQL/PostgreSQL - Authentication yang aman - REST API - Responsive UI Jika menggunakan teknologi berbeda, pilih stack yang paling mudah untuk pemula dan mudah di-host secara online. ### 14. HASIL AKHIR Jangan hanya membuat desain/template. Buat **aplikasi yang benar-benar berfungsi**, termasuk: - 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 - Panduan deploy menjadi link online Buat kode secara bertahap dan pastikan setiap bagian dapat dijalankan sebelum melanjutkan ke bagian berikutnya.