PHARESES

import React, { useState, useEffect } from 'react'; import { User, BookOpen, Trophy, Clock, ChevronRight, LogIn, RefreshCcw, AlertCircle, XCircle, Languages, ArrowLeft } from 'lucide-react'; const App = () => { // State Management const [view, setView] = useState('login'); const [user, setUser] = useState({ name: '' }); const [currentLevel, setCurrentLevel] = useState(1); const [quizState, setQuizState] = useState({ currentQuestionIndex: 0, score: 0, timeLeft: 10, isFinished: false, answers: [] }); const [tempName, setTempName] = useState(''); // Data Materi & Soal const materialData = [ { en: "I will go to school", id: "Saya akan pergi ke sekolah" }, { en: "I am going to school", id: "Saya sedang pergi ke sekolah" }, { en: "I wake up early", id: "Saya bangun pagi" }, { en: "I go to bed late", id: "Saya tidur larut" }, { en: "I am studying now", id: "Saya sedang belajar" }, { en: "I will do my homework", id: "Saya akan mengerjakan PR" }, { en: "I am in the classroom", id: "Saya di kelas" }, { en: "I am with my friends", id: "Saya bersama teman-teman" }, { en: "I like English", id: "Saya suka bahasa Inggris" }, { en: "I don’t understand", id: "Saya tidak mengerti" }, { en: "I am hungry", id: "Saya lapar" }, { en: "I am thirsty", id: "Saya haus" }, { en: "I am tired", id: "Saya lelah" }, { en: "I feel happy", id: "Saya merasa senang" }, { en: "I feel sad", id: "Saya merasa sedih" }, { en: "I am watching TV", id: "Saya sedang menonton TV" }, { en: "I am playing games", id: "Saya sedang bermain game" }, { en: "I am listening to music", id: "Saya sedang mendengarkan musik" }, { en: "I am using my phone", id: "Saya sedang menggunakan HP" }, { en: "I am chatting with my friend", id: "Saya sedang chatting dengan teman" }, { en: "I will eat later", id: "Saya akan makan nanti" }, { en: "I will call you", id: "Saya akan menelepon kamu" }, { en: "I will come soon", id: "Saya akan segera datang" }, { en: "I will help you", id: "Saya akan membantu kamu" }, { en: "I will try my best", id: "Saya akan berusaha sebaik mungkin" }, { en: "I have a class today", id: "Saya ada kelas hari ini" }, { en: "I have homework", id: "Saya punya PR" }, { en: "I have a test", id: "Saya ada ujian" }, { en: "I have free time", id: "Saya punya waktu luang" }, { en: "I have many friends", id: "Saya punya banyak teman" }, { en: "I am at home", id: "Saya di rumah" }, { en: "I am outside", id: "Saya di luar" }, { en: "I am on my way", id: "Saya sedang dalam perjalanan" }, { en: "I am waiting for you", id: "Saya menunggu kamu" }, { en: "I am ready", id: "Saya siap" }, { en: "I like to read", id: "Saya suka membaca" }, { en: "I like to play football", id: "Saya suka bermain sepak bola" }, { en: "I like to watch movies", id: "Saya suka menonton film" }, { en: "I like to study", id: "Saya suka belajar" }, { en: "I like to travel", id: "Saya suka jalan-jalan" }, { en: "I need help", id: "Saya butuh bantuan" }, { en: "I need more time", id: "Saya butuh waktu lebih" }, { en: "I need to study", id: "Saya perlu belajar" }, { en: "I need to go now", id: "Saya harus pergi sekarang" }, { en: "I need your advice", id: "Saya butuh saran kamu" }, { en: "I can do it", id: "Saya bisa melakukannya" }, { en: "I can’t do it", id: "Saya tidak bisa melakukannya" }, { en: "I can understand", id: "Saya bisa mengerti" }, { en: "I can speak English", id: "Saya bisa berbicara bahasa Inggris" }, { en: "I can try again", id: "Saya bisa mencoba lagi" }, { en: "I will see you tomorrow", id: "Saya akan menemui kamu besok" }, { en: "I am drinking water", id: "Saya sedang minum air" }, { en: "I am washing my hands", id: "Saya sedang mencuci tangan" }, { en: "I have a big dream", id: "Saya punya mimpi besar" }, { en: "I can dance well", id: "Saya bisa menari dengan baik" } ]; // Helper to shuffle array const shuffle = (array) => [...array].sort(() => Math.random() - 0.5); const generateQuestions = (level) => { const pool = shuffle(materialData); const selected = pool.slice(0, 25); return selected.map((item, index) => { const others = materialData.filter(m => m.en !== item.en); const randomOthers = shuffle(others).slice(0, 3); let questionText = ""; let correctAnswer = ""; let wrongAnswers = []; if (level === 1) { questionText = `Apa arti dari: "${item.en}"?`; correctAnswer = item.id; wrongAnswers = randomOthers.map(o => o.id); } else { questionText = `Terjemahkan ke Inggris: "${item.id}"`; correctAnswer = item.en; wrongAnswers = randomOthers.map(o => o.en); } const options = shuffle([correctAnswer, ...wrongAnswers]); return { id: index, text: questionText, options: options, correct: options.indexOf(correctAnswer), hint: level === 1 ? "Perhatikan kata kerja (will/am/can)." : "Gunakan tenses yang tepat." }; }); }; const [questions, setQuestions] = useState([]); // Timer Logic useEffect(() => { let timer; if (view === 'quiz' && quizState.timeLeft > 0 && !quizState.isFinished) { timer = setInterval(() => { setQuizState(prev => ({ ...prev, timeLeft: prev.timeLeft - 1 })); }, 1000); } else if (quizState.timeLeft === 0 && view === 'quiz') { handleAnswer(-1); } return () => clearInterval(timer); }, [view, quizState.timeLeft, quizState.isFinished]); // Handlers const handleLogin = (e) => { e.preventDefault(); if (tempName.trim()) { setUser({ name: tempName }); setView('dashboard'); } }; const startQuiz = (level) => { setCurrentLevel(level); const newQuestions = generateQuestions(level); setQuestions(newQuestions); setQuizState({ currentQuestionIndex: 0, score: 0, timeLeft: 10, isFinished: false, answers: [] }); setView('quiz'); }; const handleAnswer = (optionIndex) => { const isCorrect = optionIndex === questions[quizState.currentQuestionIndex].correct; const newScore = isCorrect ? quizState.score + 1 : quizState.score; if (quizState.currentQuestionIndex < questions.length - 1) { setQuizState(prev => ({ ...prev, score: newScore, currentQuestionIndex: prev.currentQuestionIndex + 1, timeLeft: 10, answers: [...prev.answers, optionIndex] })); } else { setQuizState(prev => ({ ...prev, score: newScore, isFinished: true, answers: [...prev.answers, optionIndex] })); setView('result'); } }; const quitQuiz = () => { if (confirm("Apakah Anda yakin ingin mengakhiri kuis? Progres akan hilang.")) { setView('dashboard'); } }; // Views const LoginView = () => (

English Quiz App

Siap menguji kemampuan bahasa Inggris Anda?

Nama Kamu setTempName(e.target.value)} />

); const DashboardView = () => (

Halo, {user.name}! 👋

Pilih level kuis untuk mulai belajar.

{user.name[0]?.toUpperCase()}

setView('material')} className="bg-white p-6 rounded-2xl shadow-md border border-slate-100 cursor-pointer hover:shadow-lg transition group">

Daftar Kalimat (Materi)

Baca kembali 50+ kalimat sehari-hari yang akan diujikan.

Buka Catatan

Mulai Kuis

25 Soal Acak • 10 Detik/Soal

); const MaterialView = () => (

English Daily Phrases

Pelajari kalimat-kalimat ini sebelum memulai kuis.

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

{item.en}

{item.id}

))}

); const QuizView = () => { const currentQ = questions[quizState.currentQuestionIndex]; if (!currentQ) return null; const progress = ((quizState.currentQuestionIndex + 1) / questions.length) * 100; return (

{/* Tombol Kembali (Keluar Kuis) */}

KUIS LEVEL {currentLevel} Soal {quizState.currentQuestionIndex + 1}/25

{quizState.timeLeft}s

{currentQ.text}

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

Pilih terjemahan yang benar secepat mungkin!

); }; const ResultView = () => { const isSuccess = quizState.score >= 18; return (

{isSuccess ? : }

{isSuccess ? 'Excellent!' : 'Keep Practicing!'}

Hasil untuk Kuis Level {currentLevel}:

{quizState.score}/25

Benar

); }; switch (view) { case 'login': return ; case 'dashboard': return ; case 'material': return ; case 'quiz': return ; case 'result': return ; default: return ; } }; export default App;