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 = "";
}