import React, { useState, useRef } from "react"; // useSharedStorage for words, progress export default function App() { // 'vocab_booster_words' stores: [{id, word, definition, mastered:bool, score: int}] const [words, setWords] = useSharedStorage("vocab_booster_words", []); // Card-flip quiz mode: deck is randomized and presented const [mode, setMode] = useState("edit"); // edit | quiz | reviewResult const [deck, setDeck] = useState([]); // holds sequence of quiz indices const [currentIdx, setCurrentIdx] = useState(0); const [showDef, setShowDef] = useState(false); const [quizCorrect, setQuizCorrect] = useState([]); // array of bool: was correct? const [lastResult, setLastResult] = useState([]); // Persist last quiz results for review const wordInput = useRef(null); const defInput = useRef(null); // Utility: shuffle (Fisher–Yates) function shuffle(array) { let a = array.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } // Add a new word function handleAddWord(e) { e.preventDefault(); const word = wordInput.current.value.trim(); const definition = defInput.current.value.trim(); if (!word || !definition) return; setWords(prev => [ ...prev, { id: Date.now() + Math.random().toString(36).slice(2), word, definition, mastered: false, score: 0 // for spaced repetition } ]); wordInput.current.value = ""; defInput.current.value = ""; } // Delete a word function handleDeleteWord(id) { setWords(prev => prev.filter(w => w.id !== id)); } // Start quiz: focus on unmastered, but mix in some mastered (spaced rep) function handleStartQuiz() { if (words.length === 0) return; // More likely to show unmastered, some mastered appear for review let unmastered = words.filter(w => !w.mastered); let mastered = words.filter(w => w.mastered); let quizWords = []; if (unmastered.length > 0) { // Add all unmastered, and ~25% of mastered quizWords = [ ...unmastered.map(w => w.id), ...shuffle(mastered.map(w => w.id)).slice(0, Math.max(1, Math.floor(mastered.length * 0.25))) ]; } else { // All mastered? Just review all quizWords = shuffle(words.map(w => w.id)); } setDeck(shuffle(quizWords)); setQuizCorrect([]); setCurrentIdx(0); setShowDef(false); setMode("quiz"); } // Handle marking quiz card as correct/incorrect function handleQuizAnswer(isCorrect) { const id = deck[currentIdx]; setQuizCorrect(prev => [...prev, isCorrect]); // Update word score setWords(prev => prev.map(w => { if (w.id !== id) return w; let score = w.score || 0; score = isCorrect ? score + 1 : Math.max(0, score - 1); // Mastered if 3+ correct in a row. Reset counter if missed. let mastered = score >= 3; return { ...w, score, mastered }; })); setShowDef(false); if (currentIdx + 1 < deck.length) { setCurrentIdx(currentIdx + 1); } else { // Quiz finished setLastResult(deck.map((id, i) => ({ word: words.find(w => w.id === id)?.word || "", correct: quizCorrect[i] ?? false }))); setMode("reviewResult"); } } function handleResetProgress() { if (!window.confirm("Reset ALL progress and mastery?")) return; setWords(prev => prev.map(w => ({ ...w, mastered: false, score: 0 }))); } // Flashcard flip animation function CardFlip({ front, back, flipped, onClick }) { return (

{front}

{back}

); } // Completion stats const masteredCount = words.filter(w => w.mastered).length; const total = words.length; const progressPct = total ? Math.round((masteredCount / total) * 100) : 0; // UI return (

Vocabulary Booster

Boost your vocabulary with smart, adaptive flashcards.
Enter words, flip to test yourself, and master them all!

{/* Progress Bar */}

{progressPct}% mastered

{mode === "edit" && ( <> {/* New word form */} {/* Word list */}

Your Words {words.length > 0 && ( )}

{words.length === 0 && (

✨ Start by adding vocabulary words above!

)} {words.map((w, i) => (

{i + 1}. {w.word} — {w.definition} {w.mastered && 🏆 Mastered}

))}

{/* Start Quiz */}

)} {/* QUIZ MODE */} {mode === "quiz" && (

Card {currentIdx+1} of {deck.length}

{(() => { const w = words.find(x => x.id === deck[currentIdx]); if (!w) return

(Card Not Found)

; return (

{w.word}} back={{w.definition}} flipped={showDef} onClick={() => setShowDef(f => !f)} />

Tap card to flip

); })()} {showDef ? (

) : ( )}

)} {/* RESULT/REVIEW SCREEN */} {mode === "reviewResult" && (

Quiz Complete!

✅ Correct: {quizCorrect.filter(x => x).length} / {deck.length}

{deck.map((id,i) => { const w = words.find(x => x.id === id); if (!w) return null; return (

{quizCorrect[i] ? '✓' : '✗'} {w.word} — {w.definition} {w.mastered && 🏆 Mastered}

); })}

)} {/* Attribution, tiny footer */}

🚀 Tip: Add words as you encounter them, quiz daily to master fast!
Your progress and words are saved.

{/* Card flip styles */}

); }