Vocabulary Learning Game

Enter the words you want to focus on, separated by "@", then start the game!

body { font-family: Arial, sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #game-container { text-align: center; padding: 20px; border-radius: 8px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; } input { padding: 10px; margin: 10px 0; width: 100%; border-radius: 4px; border: 1px solid #ccc; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; border-radius: 4px; } button:hover { background-color: #45a049; } #question-container { margin-bottom: 20px; } #results { display: none; } #restart-button { background-color: #f44336; } #restart-button:hover { background-color: #e53935; } const wordsList = [ { word: "access", definition: "The ability to approach or reach something." }, { word: "challenge", definition: "A difficult task that requires effort and skill to overcome." }, { word: "expert", definition: "A person with a high level of skill or knowledge in a specific area." }, { word: "participate", definition: "To take part in an activity or event." }, { word: "approach", definition: "To move towards something or someone with a specific goal in mind." }, { word: "eliminate", definition: "To completely remove or get rid of something." }, { word: "finding", definition: "A discovery or conclusion based on research or observation." }, { word: "physical", definition: "Related to the body, involving movement or physical activity." }, { word: "benefit", definition: "A positive or helpful result." }, { word: "encourage", definition: "To give someone support, confidence, or hope." }, { word: "link", definition: "A connection or relationship between things." }, { word: "practical", definition: "Relating to real-world applications or use." } ]; let userWords = []; let currentQuestionIndex = 0; let score = 0; document.getElementById("start-button").addEventListener("click", startGame); document.getElementById("submit-answer").addEventListener("click", submitAnswer); document.getElementById("restart-button").addEventListener("click", restartGame); function startGame() { const userInput = document.getElementById("word-input").value.trim(); userWords = userInput.split("@").map(word => word.trim()).filter(word => word.length > 0); if (userWords.length === 0) { alert("Please enter at least one word."); return; } // Filter words from the list based on user input const filteredWords = wordsList.filter(word => userWords.includes(word.word)); if (filteredWords.length === 0) { alert("No valid words found. Try entering different words."); return; } document.getElementById("game-questions").style.display = "block"; document.getElementById("instructions").style.display = "none"; document.getElementById("word-input").style.display = "none"; document.getElementById("start-button").style.display = "none"; showQuestion(filteredWords); } function showQuestion(filteredWords) { if (currentQuestionIndex < filteredWords.length) { const currentQuestion = filteredWords[currentQuestionIndex]; document.getElementById("question").textContent = `What is the definition of ${currentQuestion.word}?`; } else { endGame(); } } function submitAnswer() { const answer = document.getElementById("answer").value.trim().toLowerCase(); const currentQuestion = wordsList.find(word => word.word === userWords[currentQuestionIndex]); if (answer === currentQuestion.definition.toLowerCase()) { score++; } currentQuestionIndex++; document.getElementById("answer").value = ""; showQuestion(wordsList); } function endGame() { document.getElementById("game-questions").style.display = "none"; document.getElementById("results").style.display = "block"; document.getElementById("score").textContent = `Your final score is: ${score} out of ${userWords.length}`; } function restartGame() { currentQuestionIndex = 0; score = 0; document.getElementById("results").style.display = "none"; document.getElementById("game-questions").style.display = "none"; document.getElementById("instructions").style.display = "block"; document.getElementById("word-input").style.display = "block"; document.getElementById("start-button").style.display = "block"; document.getElementById("word-input").value = ""; }