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;

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;

my future carier

🚀 Career Path Writing

Skor: 0

Soal 1 dari 5

🏆

Target Tercapai!

Kemampuan writing kamu semakin tajam.

Skor Akhir

0

© 2024 Career Writing Master - Challenge 60s & Unlimited Essay

introduce my self and other self

English Portal

Learning Series: Introduction

Selamat Datang

Silakan isi nama Anda untuk memulai sesi belajar.

📖 Materi Pembelajaran

MODUL 01

🌟 1. INTRODUCE MYSELF

Pola Kalimat Dasar:

• Hello, my name is …
• I am … years old
• I am from … / I live in …
• I am a student
• My hobby is …

Contoh: "Hello, my name is Suci. I am 20 years old. I live in Pekanbaru."

🌟 2. INTRODUCING OTHER PEOPLE

Pola Kalimat:

• This is …
• His name is … (Laki-laki)
• Her name is … (Perempuan)
• He/She is … years old
• He/She is my friend

🌟 3. PERBEDAAN PENTING

Subjek	Myself	Others
Orang	I	He / She
Kepemilikan	My	His / Her
To Be	I am	He is / She is

🌟 4. KOSAKATA PENTING

Name = Nama

Age = Umur

Friend = Teman

Student = Siswa

⚠️ Waktunya Uji Pemahaman! Timer 10 detik per soal.

SOAL 1 / 10

10 Detik

SKOR: 0

💡 Penjelasan:

Selesai!

0