QuizKuy

Aplikasi web kuis & latihan ujian interaktif

Aplikasi web untuk berlatih mengerjakan bank soal dengan berbagai mode latihan, pengacakan soal dan opsi, umpan balik instan, pelacakan waktu, serta riwayat skor yang tersimpan di perangkat.

Januari 2025
Live Demo(buka di tab baru)Source Code(buka di tab baru)
Teknologi & Tools:
ReactReact RouterTailwind CSSDaisyUILocalStorage
Fitur & Sorotan Utama:
  • 01Empat mode latihan: semua soal acak, semua soal berurutan, 100 soal acak, dan batch parsial (mis. soal 1-20, 21-40),
  • 02Pengacakan soal dan opsi jawaban dengan algoritma Fisher-Yates Shuffle,
  • 03Umpan balik instan: hijau untuk jawaban benar, merah untuk salah, disertai kunci jawaban,
  • 04Timer pengerjaan dan riwayat skor tersimpan di LocalStorage tanpa backend
  • 05Tampilan dark theme yang responsif

Ringkasan

QuizKuy adalah aplikasi web kuis dan latihan ujian interaktif yang dibangun dengan React, Vite, Tailwind CSS, dan DaisyUI. Aplikasi ini dirancang agar mahasiswa atau pengguna lain dapat berlatih mengerjakan bank soal dengan nyaman, lengkap dengan umpan balik langsung dan catatan riwayat hasil latihan.

Fitur Utama

Mode latihan fleksibel

Pengguna memilih mata kuliah atau topik, lalu menentukan cara mengerjakan:

  • Semua soal secara acak
  • Semua soal sesuai urutan
  • 100 soal acak
  • Batch parsial (misalnya soal 1-20, 21-40, dan seterusnya)

Pengacakan yang adil

Urutan soal dan opsi pilihan ganda (A-E) diacak dengan algoritma Fisher-Yates Shuffle, sehingga pola jawaban tidak bisa dihafal.

Umpan balik instan

Setiap jawaban langsung diberi warna: hijau jika benar, merah jika salah. Saat jawaban salah, kunci jawaban yang benar ditampilkan otomatis.

Timer dan riwayat

Durasi pengerjaan dilacak dalam menit dan detik. Skor, durasi, nama peserta, tipe soal, dan tanggal pengerjaan disimpan di LocalStorage, dengan tombol Clear History untuk mereset.

Dark theme responsif

Antarmuka bergaya modern dengan palet gelap yang nyaman di mata, dibangun dari kombinasi Tailwind CSS dan DaisyUI.

Keputusan Teknis

  • React + Vite untuk pengembangan yang cepat dan build yang ringan.
  • React Router untuk navigasi antara halaman beranda, pengerjaan soal, dan hasil akhir.
  • useReducer untuk mengelola state kuis (soal aktif, jawaban, skor, status selesai) di satu tempat.
  • Bank soal berbentuk JSON statis yang memuat soal sekaligus konfigurasi tipe soal, sehingga menambah materi tidak memerlukan backend.
  • LocalStorage untuk riwayat, sehingga aplikasi berjalan sepenuhnya di sisi klien tanpa akun atau database.

Struktur Proyek

Kode dipisah menjadi beberapa bagian:

Folder / FileFungsicomponents/Komponen UI (StartScreen, Question, Options, Timer, Finish)pages/Halaman utama kuis dan pengelolaan statedata/Bank soal dan konfigurasi tipe soalutils.jsFungsi pengacakan Fisher-Yates

Tautan

Projek Lainnya

Eksplorasi proyek dan studi kasus lainnya

Lihat Semua Projek