85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Spelling Practice App</title>
|
|
<style>
|
|
body { font-family: sans-serif; text-align: center; padding: 2rem; }
|
|
#wordBox, #inputSection, #summary { margin-top: 2rem; font-size: 1.5rem; }
|
|
#word { font-weight: bold; font-size: 2rem; }
|
|
.hidden { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Spelling Practice</h1>
|
|
<button onclick="startGame()">Start</button>
|
|
|
|
<div id="wordBox" class="hidden"><div id="word"></div></div>
|
|
<div id="inputSection" class="hidden">
|
|
<input type="text" id="userInput" placeholder="Spell the word" />
|
|
<button onclick="submitAnswer()">Submit</button>
|
|
</div>
|
|
<div id="summary" class="hidden"></div>
|
|
|
|
<script>
|
|
const words = ["example", "banana", "computer", "friendship", "responsibility"];
|
|
let current = 0;
|
|
let results = [];
|
|
|
|
function startGame() {
|
|
current = 0;
|
|
results = [];
|
|
document.getElementById('summary').classList.add('hidden');
|
|
showWord();
|
|
}
|
|
|
|
function showWord() {
|
|
const wordBox = document.getElementById('wordBox');
|
|
const wordEl = document.getElementById('word');
|
|
wordBox.classList.remove('hidden');
|
|
wordEl.textContent = words[current];
|
|
|
|
setTimeout(() => {
|
|
wordBox.classList.add('hidden');
|
|
document.getElementById('inputSection').classList.remove('hidden');
|
|
document.getElementById('userInput').value = '';
|
|
document.getElementById('userInput').focus();
|
|
}, 2000);
|
|
}
|
|
|
|
function submitAnswer() {
|
|
const input = document.getElementById('userInput').value.trim();
|
|
results.push({ word: words[current], attempt: input });
|
|
|
|
current++;
|
|
document.getElementById('inputSection').classList.add('hidden');
|
|
|
|
if (current < words.length) {
|
|
showWord();
|
|
} else {
|
|
showSummary();
|
|
}
|
|
}
|
|
|
|
function showSummary() {
|
|
const summary = document.getElementById('summary');
|
|
let correct = 0;
|
|
|
|
const report = results.map(({ word, attempt }) => {
|
|
const isCorrect = word.toLowerCase() === attempt.toLowerCase();
|
|
if (isCorrect) correct++;
|
|
return `<li>${word} — <strong style="color:${isCorrect ? 'green' : 'red'}">${attempt}</strong></li>`;
|
|
}).join('');
|
|
|
|
summary.innerHTML = `
|
|
<h2>Results</h2>
|
|
<p>You got ${correct} out of ${words.length} correct (${Math.round((correct/words.length)*100)}%)</p>
|
|
<ul style="list-style:none;padding:0">${report}</ul>
|
|
`;
|
|
summary.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |