<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Guess the Word Game</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #F5F5F5;
}
h1 {
text-align: center;
}
form {
text-align: center;
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
font-size: 24px;
text-align: center;
width: 80%;
max-width: 400px;
border: none;
border-radius: 5px;
background-color: #FFFFFF;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Guess the Word Game</h1>
<form>
<p id="definition"></p>
<input type="text" id="answer" placeholder="Enter your answer here">
<button type="button" onclick="checkAnswer()">Submit Answer</button>
</form>
<script>
const gameWords = [
{word: "bellicose", definition: "inclined or eager to fight, aggressively hostile, or belligerent"},
{word: "ennui", definition: "a feeling of weariness and dissatisfaction; boredom"},
{word: "indolent", definition: "wanting to avoid activity or exertion; lazy"},
{word: "nefarious", definition: "wicked or criminal"},
{word: "quixotic", definition: "very idealistic; unrealistic and impractical"},
{word: "reprobate", definition: "unprincipled person; shameless rogue"},
{word: "superfluous", definition: "unnecessary, especially through being more than enough"},
{word: "umbrage", definition: "offense, annoyance, displeasure or resentment, usually as a result of a real or supposed slight or insult"},
{word: "vicarious", definition: "experienced through another person or related to someone else's experiences, usually in a way that is pleasurable"},
{word: "zealous", definition: "enthusiastic or passionate about something"},
];
let currentWordIndex = Math.floor(Math.random() * gameWords.length);
let currentWord = gameWords[currentWordIndex];
let currentWordLength = currentWord.word.length;
let currentHintIndex = 0;
let correctAnswer = false;
document.getElementById("definition").innerHTML = currentWord.definition;
function checkAnswer() {
let answer = document.getElementById("answer").value.toLowerCase();
if (answer === currentWord.word) {
alert("Congratulations, you got it right!");
correctAnswer = true;
} else {
alert("Sorry, that is not the correct answer. Please try again.");
}
document.getElementById("answer").value = "";
if (correctAnswer === false) {
displayHint();
}
}
function displayHint() {
if (currentHintIndex < currentWordLength) {
let hint = currentWord.word.substring(0, currentHintIndex);
for (let i = currentHintIndex; i < currentWordLength; i++) {
hint += "●";
}
document.getElementById("answer").placeholder = hint;
currentHintIndex++;
setTimeout(displayHint, 4000);
} else {
alert("Sorry, you ran out of hints. The correct answer is " + currentWord.word);
}
}
</script>
</body>
</html>
