Dagelijkse Anagram Puzzel
Description : <!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dagelijkse Anagram Kruiswoord</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
#game {
max-width: 800px;
margin: 0 auto;
}
#puzzle {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
margin-top: 20px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
font-size: 16px;
text-transform: uppercase;
}
#clues {
margin-top: 30px;
}
.clue {
margin-bottom: 10px;
}
button {
margin-top: 20px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-weight: bold;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Dagelijkse Anagram Kruiswoord</h1>
<div id="game">
<div id="puzzle"></div>
<div id="clues"></div>
<button onclick="controleerAntwoorden()">Controleer oplossingen</button>
<div id="result"></div>
</div>
<script>
// Voorbeeldlevert: een set woorden met anagrammen en bijbehorende aanwijzingen
const dagWoordenschat = [
{ index: 1, length: 7, aanwijzing: 'Rustige rivier', antwoord: 'vliet' },
{ index: 2, length: 5, aanwijzing: 'Bosbouw-werktuig', antwoord: 'bijl' },
{ index: 3, length: 6, aanwijzing: 'Zwaargewicht', antwoord: 'reuzen' },
{ index: 4, length: 4, aanwijzing: 'Einde van de dag', antwoord: 'avond' },
{ index: 5, length: 8, aanwijzing: 'Mooie bloem', antwoord: 'roosje' }
];
const woorden = dagWoordenschat.map(w => ({
...w,
anagram: shuffleString(w.antwoord)
}));
function shuffleString(str) {
const arr = str.split('');
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr.join('');
}
const cellInputs = [];
function initGame() {
const puzzleDiv = document.getElementById('puzzle');
const cluesDiv = document.getElementById('clues');
puzzleDiv.innerHTML = '';
cluesDiv.innerHTML = '';
woorden.forEach((woord, idx) => {
// Voeg invoervelden toe
for (let i=0; i<woord.length; i++) {
const input = document.createElement('input');
input.type = 'text';
input.maxLength = 1;
input.dataset.index = idx;
input.dataset.position = i;
puzzleDiv.appendChild(input);
cellInputs.push(input);
}
// Voeg aanwijzingen toe
const clueDiv = document.createElement('div');
clueDiv.className = 'clue';
clueDiv.innerHTML = `<strong> ${woord.index}. </strong> ${woord.aanwijzing} (${woord.length} letters)`;
cluesDiv.appendChild(clueDiv);
});
}
function controleerAntwoorden() {
let alleJuist = true;
woorden.forEach((woord, idx) => {
const antwoordLetters = [];
cellInputs.filter(input => input.dataset.index == idx).forEach(input => {
antwoordLetters.push(input.value.toLowerCase());
});
if (antwoordLetters.join('') !== woord.antwoord) {
alleJuist = false;
}
});
const resultDiv = document.getElementById('result');
if (alleJuist) {
resultDiv.textContent = 'Gefeliciteerd! Alle woorden correct ingevuld.';
} else {
resultDiv.textContent = 'Sommige woorden zijn nog niet correct. Probeer opnieuw.';
}
}
window.onload = initGame;
</script>
</body>
</html>
Instructions :
Play
