Add free-type spell checker for students

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/app.js

@@ -2519,6 +2519,37 @@ $('#btn-test').addEventListener('click', () => {
   startTest();
 });
 
+$('#btn-freetype').addEventListener('click', () => {
+  backTarget = () => openKid(currentStudent.id, 'spelling');
+  $('#freetype-feedback').innerHTML = '';
+  $('#freetype-input').value = '';
+  show('freetype');
+  $('#freetype-input').focus();
+});
+
+$('#freetype-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const input = $('#freetype-input');
+  const typed = input.value.trim();
+  if (!typed) return;
+  const fb = $('#freetype-feedback');
+  try {
+    const r = await api(`/api/spellcheck?word=${encodeURIComponent(typed)}`);
+    if (r.correct) {
+      fb.innerHTML = `<div class="banner good">✅ "${esc(r.word)}" is spelled correctly!</div>`;
+    } else {
+      const tips = r.suggestions.length
+        ? ` Did you mean: ${r.suggestions.map((x) => `<strong>${esc(x)}</strong>`).join(', ')}?`
+        : '';
+      fb.innerHTML = `<div class="banner bad">❌ "${esc(r.word)}" is not spelled correctly.${tips}</div>`;
+      alert(`"${r.word}" is spelled wrong. Try again!`);
+    }
+  } catch (err) {
+    fb.innerHTML = `<div class="banner bad">${esc(err.message)}</div>`;
+  }
+  input.select();
+});
+
 // ---------- docs (OnlyOffice) ----------
 
 let docsEditorInstance = null;

public/index.html

@@ -99,6 +99,7 @@
       <div class="big-actions">
         <button id="btn-practice" class="big-btn practice">✏️ Practice</button>
         <button id="btn-test" class="big-btn test">⭐ Friday Test</button>
+        <button id="btn-freetype" class="big-btn print-list">🔍 Check any word</button>
         <button id="btn-print-list" class="big-btn print-list">🖨 Print my words</button>
       </div>
       <div id="kid-test-history"></div>
@@ -273,6 +274,20 @@
     </div>
   </section>
 
+  <!-- Free-type spell check -->
+  <section id="view-freetype" class="view" hidden>
+    <button class="back-btn" data-back="freetype">← Back</button>
+    <div class="word-card">
+      <p class="prompt">Type any word and I'll tell you if it's spelled right:</p>
+      <div id="freetype-feedback" class="feedback"></div>
+      <form id="freetype-form" autocomplete="off">
+        <input id="freetype-input" class="spell-input" type="text" autocomplete="off"
+               autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Type a word" enterkeyhint="go">
+        <p class="hint">Press Enter to check</p>
+      </form>
+    </div>
+  </section>
+
   <!-- Practice (spelling) -->
   <section id="view-practice" class="view" hidden>
     <button class="back-btn" data-back="practice">← Back</button>