Index

index.html

@@ -0,0 +1,85 @@
+<!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>