Duegame: diverse games for all ages. Play action, puzzles, and more—anytime, your way. Start fun now!
Copyright © 2025 DueGame Inc. All rights reserved. "DueGame" is a registered trademark.
Daily Anagram Crossword
Description
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Anagram Crossword Game</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { text-align: center; margin-bottom: 20px; } #game { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #clues { margin-bottom: 20px; } .clue { margin-bottom: 10px; } #inputs { display: flex; flex-direction: column; gap: 8px; } input[type=text] { padding: 8px; font-size: 16px; width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; } #checkBtn { margin-top: 15px; padding: 10px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } #checkBtn:hover { background-color: #45a049; } #result { margin-top: 15px; font-weight: bold; text-align: center; } </style> </head> <body> <h1>Anagram Crossword Challenge</h1> <div id="game"> <div id="clues"></div> <div id="inputs"></div> <button id="checkBtn">Check Answers</button> <div id="result"></div> </div> <script> const puzzleData = [ {clue: "A domesticated feline", answer: "CAT"}, {clue: "A bright celestial body", answer: "STAR"}, {clue: "Opposite of 'cold'", answer: "HOT"}, {clue: "A form of communication", answer: "TEXT"}, {clue: "A type of fruit", answer: "PEAR"}, {clue: "A container for liquids", answer: "JUG"}, {clue: "An outdoor gambling spot", answer: "CASINO"}, {clue: "A musical instrument", answer: "GUITAR"}, {clue: "A fast, airborne vehicle", answer: "JET"}, {clue: "A secret message", answer: "CODE"} ]; const cluesDiv = document.getElementById('clues'); const inputsDiv = document.getElementById('inputs'); const checkBtn = document.getElementById('checkBtn'); const resultDiv = document.getElementById('result'); let userInputs = []; function initGame() { cluesDiv.innerHTML = ''; inputsDiv.innerHTML = ''; resultDiv.innerHTML = ''; userInputs = []; puzzleData.forEach((item, index) => { // Display the clue const clueEl = document.createElement('div'); clueEl.className = 'clue'; clueEl.innerText = `${index + 1}. ${item.clue}`; cluesDiv.appendChild(clueEl); // Create input field const inputEl = document.createElement('input'); inputEl.type = 'text'; inputEl.maxLength = item.answer.length; inputEl.dataset.index = index; inputEl.placeholder = 'Your answer'; inputsDiv.appendChild(inputEl); userInputs.push(''); inputEl.addEventListener('input', (e) => { userInputs[index] = e.target.value.toUpperCase(); }); }); } checkBtn.addEventListener('click', () => { let correctCount = 0; for (let i = 0; i < puzzleData.length; i++) { const userAnswer = userInputs[i].replace(/\s+/g, '').toUpperCase(); const correctAnswer = puzzleData[i].answer.toUpperCase(); if (userAnswer === correctAnswer) { correctCount++; // indicate correct inputsDiv.children[i].style.borderColor = 'green'; } else { // indicate incorrect inputsDiv.children[i].style.borderColor = 'red'; } } resultDiv.innerText = `You got ${correctCount} out of ${puzzleData.length} correct!`; }); window.onload = initGame; </script> </body> </html>