game noun and colour

Find the Hidden Words

Find 3 hidden words about classroom things and colours!

Level: 1/6

100s

Great!

You found all the words!

Time's Up!

You didn't find all words in time.

Awesome!

You completed all levels!

book assistent

Kurikulum Merdeka

English Learning Book Builder

Buat buku pembelajaran Bahasa Inggris lengkap & siap pakai

Topik

Fokus Materi

Jenjang SD SMP SMA

Kelas Kelas 1Kelas 2Kelas 3 Kelas 4Kelas 5Kelas 6 Kelas 7Kelas 8Kelas 9 Kelas 10Kelas 11Kelas 12

Jenis Buku Buku Siswa Buku Guru Modul Ajar

vocab

import React, { useState, useEffect, useMemo } from 'react'; import { Volume2, ArrowLeft, Book, Activity, Trophy, LogIn, RefreshCcw, XCircle, Award, CheckCircle2, ChevronRight, PlayCircle, Headphones } from 'lucide-react'; const App = () => { // --- STATE --- const [view, setView] = useState('login'); const [userName, setUserName] = useState(''); const [category, setCategory] = useState(null); const [questions, setQuestions] = useState([]); const [quizIndex, setQuizIndex] = useState(0); const [score, setScore] = useState(0); const [timeLeft, setTimeLeft] = useState(10); const [isFinished, setIsFinished] = useState(false); const [feedback, setFeedback] = useState(null); // --- DATA (Sesuai vocabulary_list.md) --- const vocabData = { noun: [ { en: "Book", id: "Buku" }, { en: "Pen", id: "Pena" }, { en: "Pencil", id: "Pensil" }, { en: "Bag", id: "Tas" }, { en: "Table", id: "Meja" }, { en: "Chair", id: "Kursi" }, { en: "Phone", id: "HP" }, { en: "Laptop", id: "Laptop" }, { en: "Door", id: "Pintu" }, { en: "Window", id: "Jendela" }, { en: "School", id: "Sekolah" }, { en: "Classroom", id: "Kelas" }, { en: "Teacher", id: "Guru" }, { en: "Student", id: "Siswa" }, { en: "Friend", id: "Teman" }, { en: "Food", id: "Makanan" }, { en: "Water", id: "Air" }, { en: "House", id: "Rumah" }, { en: "Car", id: "Mobil" }, { en: "Road", id: "Jalan" }, { en: "Library", id: "Perpustakaan" }, { en: "Park", id: "Taman" }, { en: "Market", id: "Pasar" }, { en: "Office", id: "Kantor" }, { en: "Store", id: "Toko" }, { en: "Bed", id: "Tempat tidur" }, { en: "Pillow", id: "Bantal" }, { en: "Blanket", id: "Selimut" }, { en: "Clock", id: "Jam" }, { en: "Mirror", id: "Cermin" }, { en: "Shoes", id: "Sepatu" }, { en: "Clothes", id: "Pakaian" }, { en: "Hat", id: "Topi" }, { en: "Bottle", id: "Botol" }, { en: "Glass", id: "Gelas" }, { en: "Computer", id: "Komputer" }, { en: "Internet", id: "Internet" }, { en: "Game", id: "Permainan" }, { en: "Music", id: "Musik" }, { en: "Movie", id: "Film" }, { en: "Teacher’s desk", id: "Meja guru" }, { en: "Whiteboard", id: "Papan tulis" }, { en: "Eraser", id: "Penghapus" }, { en: "Ruler", id: "Penggaris" }, { en: "Notebook", id: "Buku catatan" }, { en: "City", id: "Kota" }, { en: "Village", id: "Desa" }, { en: "Beach", id: "Pantai" }, { en: "Mountain", id: "Gunung" }, { en: "River", id: "Sungai" } ], verb: [ { en: "Go", id: "Pergi" }, { en: "Come", id: "Datang" }, { en: "Eat", id: "Makan" }, { en: "Drink", id: "Minum" }, { en: "Study", id: "Belajar" }, { en: "Read", id: "Membaca" }, { en: "Write", id: "Menulis" }, { en: "Speak", id: "Berbicara" }, { en: "Listen", id: "Mendengar" }, { en: "Watch", id: "Menonton" }, { en: "Play", id: "Bermain" }, { en: "Run", id: "Berlari" }, { en: "Walk", id: "Berjalan" }, { en: "Sit", id: "Duduk" }, { en: "Stand", id: "Berdiri" }, { en: "Open", id: "Membuka" }, { en: "Close", id: "Menutup" }, { en: "Bring", id: "Membawa" }, { en: "Take", id: "Mengambil" }, { en: "Give", id: "Memberi" }, { en: "Help", id: "Membantu" }, { en: "Ask", id: "Bertanya" }, { en: "Answer", id: "Menjawab" }, { en: "Learn", id: "Belajar" }, { en: "Try", id: "Mencoba" }, { en: "Make", id: "Membuat" }, { en: "Clean", id: "Membersihkan" }, { en: "Cook", id: "Memasak" }, { en: "Buy", id: "Membeli" }, { en: "Sell", id: "Menjual" }, { en: "Call", id: "Menelepon" }, { en: "Send", id: "Mengirim" }, { en: "Wait", id: "Menunggu" }, { en: "Meet", id: "Bertemu" }, { en: "Visit", id: "Mengunjungi" }, { en: "Think", id: "Berpikir" }, { en: "Know", id: "Mengetahui" }, { en: "Understand", id: "Mengerti" }, { en: "Remember", id: "Mengingat" }, { en: "Forget", id: "Lupa" }, { en: "Start", id: "Memulai" }, { en: "Finish", id: "Menyelesaikan" }, { en: "Stop", id: "Berhenti" }, { en: "Continue", id: "Melanjutkan" }, { en: "Change", id: "Mengubah" }, { en: "Work", id: "Bekerja" }, { en: "Rest", id: "Istirahat" }, { en: "Sleep", id: "Tidur" }, { en: "Wake up", id: "Bangun" }, { en: "Travel", id: "Bepergian" } ] }; // --- AUDIO --- const speak = (text) => { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'en-US'; window.speechSynthesis.speak(utterance); }; // --- LOGIC --- const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5); const prepareQuiz = () => { const pool = vocabData[category]; const selected = shuffle(pool).slice(0, 25); const quizItems = selected.map((item) => { const others = pool.filter(p => p.en !== item.en); const wrongOptions = shuffle(others).slice(0, 3).map(o => o.id); const options = shuffle([item.id, ...wrongOptions]); return { word: item.en, correct: item.id, options: options }; }); setQuestions(quizItems); setQuizIndex(0); setScore(0); setTimeLeft(10); setIsFinished(false); setFeedback(null); setView('quiz'); }; useEffect(() => { let timer; if (view === 'quiz' && !isFinished && !feedback) { if (timeLeft > 0) { timer = setInterval(() => setTimeLeft(prev => prev - 1), 1000); } else { handleAnswer(-1); } } return () => clearInterval(timer); }, [view, timeLeft, isFinished, feedback]); const handleAnswer = (idx) => { const currentQ = questions[quizIndex]; const isCorrect = idx !== -1 && currentQ.options[idx] === currentQ.correct; setFeedback({ isCorrect, selectedIdx: idx }); if (isCorrect) setScore(s => s + 1); setTimeout(() => { if (quizIndex < questions.length - 1) { setQuizIndex(prev => prev + 1); setTimeLeft(10); setFeedback(null); } else { setIsFinished(true); setView('result'); } }, 1200); }; // --- VIEWS --- if (view === 'login') return (

VocabQuest

Kuasai 100 kosakata bahasa Inggris utama!

setUserName(e.target.value)} />

); if (view === 'dashboard') return (

Halo, {userName}! 👋

Pilih kategori kosakata untuk dipelajari.

100 Kata

{ setCategory('noun'); setView('study'); }} className="bg-white p-10 rounded-[2.5rem] shadow-sm border-b-8 border-orange-500 hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group" >

Noun

Mempelajari 50 kata benda seperti Buku, HP, dan Tempat Umum.

PELAJARI SEKARANG

{ setCategory('verb'); setView('study'); }} className="bg-white p-10 rounded-[2.5rem] shadow-sm border-b-8 border-emerald-500 hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group" >

Verb

Mempelajari 50 kata kerja aksi seperti Makan, Lari, dan Belajar.

PELAJARI SEKARANG

); if (view === 'study') { const list = vocabData[category]; return (

KATEGORI: {category}

Daftar Hafalan

Klik ikon suara untuk mendengarkan

50 Kata

{list.map((item, idx) => (

{item.en}

{item.id}

))}

); } if (view === 'quiz') { const currentQ = questions[quizIndex]; return (

{quizIndex + 1}

PROGRES

{timeLeft}

{feedback && (

{feedback.isCorrect ? : }

)}

{currentQ.word}

Pilih arti yang benar

{currentQ.options.map((opt, idx) => ( ))}

); } if (view === 'result') { const accuracy = Math.round((score / 25) * 100); return (

Hebat, {userName}!

Hasil Latihan {category}

{score}

Benar

{accuracy}%

Akurasi

); } return null; }; export default App;