AI Quiz Game — Interactive Learning with AI Evaluation
AI Quiz Game adalah aplikasi kuis interaktif berbasis web yang memungkinkan pengguna menjawab pertanyaan dan mendapatkan evaluasi otomatis dari kecerdasan buatan (AI).
Game ini menggabungkan pembelajaran dan hiburan — pemain akan diberi skor dan umpan balik secara langsung berdasarkan kualitas jawaban mereka.
Aplikasi ini dibangun menggunakan React + TypeScript + TailwindCSS di sisi frontend dan Express.js + Replicate API di sisi backend.
AI (model IBM Granite via Replicate) menilai jawaban pengguna secara objektif berdasarkan konteks dan kriteria penilaian yang telah ditentukan.
- ⚛ React 18 + TypeScript — Framework utama untuk UI interaktif
- 💨 Tailwind CSS — Styling cepat dan responsif
- ⚡ Vite — Build tool modern untuk pengembangan cepat
- 🧩 Node.js + Express 4 — Server API dan penyaji file statis
- 🔐 Dotenv — Manajemen environment variables
- 🤖 Replicate API (IBM Granite 3.3-8B Instruct) — Model AI evaluator
✅ AI-Powered Evaluation — Jawaban pemain dinilai oleh model AI menggunakan prompt terstruktur.
✅ Dynamic Scoring System — Skor dan tingkat akurasi otomatis berdasarkan penilaian AI atau fallback similarity.
✅ Interactive Avatar — Avatar ekspresif dengan animasi (happy, sad, neutral, thinking).
✅ Offline Fallback Logic — Jika AI gagal merespons, sistem tetap menilai berdasarkan kemiripan jawaban.
✅ Single Deployment Server — Backend Express menyajikan frontend sekaligus API.
✅ Production Ready — Siap dideploy ke platform seperti Railway, Render, atau Vercel.
git clone https://github.com/username/quiz-ai.git
cd quiz-aipnpm installBuat file .env di root project:
REPLICATE_API_TOKEN=your_replicate_api_token_here
pnpm run buildpnpm startServer akan berjalan di: 👉 http://localhost:3000
Aplikasi ini menggunakan model AI IBM Granite (via Replicate API) untuk mengevaluasi jawaban pengguna.
Setiap kali pengguna mengirim jawaban:
-
Frontend mengirim prompt ke endpoint
/api/evaluate. -
Backend mengirim permintaan ke Replicate API dengan prompt berisi:
- Pertanyaan
- Jawaban ideal
- Jawaban pengguna
- Kriteria penilaian (Excellent / Good / Fair / Poor)
-
AI mengembalikan hasil evaluasi seperti:
AKURASI: good POIN: 17 FEEDBACK: Jawaban sudah benar sebagian besar! -
Jika API gagal (rate limit, token invalid, model nonaktif), backend otomatis menjalankan fallback similarity — menghitung kesamaan teks antara jawaban pengguna dan jawaban ideal.
Dengan sistem ini, aplikasi tetap berfungsi penuh meskipun tanpa koneksi langsung ke model AI.
-
Created by Leo Prangs Tobing
-
🎨 For Capstone Project in Bootcamp: Hacktiv8 x IBM Skillsbuild Code Generation