+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#e7f0ee,#f7f4ee);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
+  #w{width:100%;max-width:340px;padding:1.25rem;text-align:center}
+  h2{margin:.2rem 0 1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#5E7C68}
+  #play{width:96px;height:96px;border-radius:9999px;border:0;background:#8FB39C;color:#fff;font-size:2.4rem;cursor:pointer;box-shadow:0 8px 24px rgba(143,179,156,.5)}
+  #play:active{transform:scale(.95)}
+  p.t{color:#6b7280;font-size:.95rem;margin:1rem 0 .5rem}
+  input{width:100%;box-sizing:border-box;padding:.8rem 1rem;border:2px solid #d1d5db;border-radius:.9rem;font-size:1.1rem;text-align:center;outline:none}
+  input:focus{border-color:#8FB39C}
+  #check{margin-top:.8rem;padding:.65rem 1.4rem;border:0;border-radius:9999px;background:#18181b;color:#fff;font-weight:600;cursor:pointer}
+  #fb{min-height:1.4em;margin-top:.8rem;font-weight:600}
+  #score{color:#9ca3af;font-size:.8rem;margin-top:.6rem}
+</style>
+<div id="w">
+  <h2>Say It! · Listening</h2>
+  <button id="play" aria-label="Play the word">🔊</button>
+  <p class="t">Listen, then type what you hear.</p>
+  <input id="ans" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="type the word">
+  <button id="check">Check</button>
+  <div id="fb"></div>
+  <div id="score"></div>
+</div>
+<script>
+  var words=["water","beautiful","tomorrow","because","strong","weather","comfortable","question","enough","people","friend","family","school","important","different","together","remember","breakfast","language","country","mountain","picture","animal","garden","morning","evening","holiday","present","future","money","market","station","hospital","doctor","teacher","student","science","history","music","window","kitchen","bridge","forest","island","summer","winter","number","letter","sentence","example","another","always","thousand","measure","machine","chocolate","dangerous","knowledge","vegetable","restaurant"];
+  function shuffle(a){for(var k=a.length-1;k>0;k--){var j=Math.floor(Math.random()*(k+1));var t=a[k];a[k]=a[j];a[j]=t;}return a;}
+  // Draw from a shuffled queue so every word is heard once before any
+  // repeat, and never the same word twice in a row across reshuffles —
+  // whether the last answer was right or wrong.
+  var queue=shuffle(words.slice()),qi=0,cur=queue[0],hits=0,tries=0;
+  function advance(){
+    qi++;
+    if(qi>=queue.length){var last=queue[queue.length-1];queue=shuffle(words.slice());qi=0;if(queue[0]===last&&queue.length>1){var t=queue[0];queue[0]=queue[1];queue[1]=t;}}
+    cur=queue[qi];
+  }
+  var fb=document.getElementById("fb"),ans=document.getElementById("ans"),score=document.getElementById("score");
+  function say(){try{var u=new SpeechSynthesisUtterance(cur);u.lang="en-US";u.rate=.9;speechSynthesis.cancel();speechSynthesis.speak(u);}catch(e){fb.textContent="(audio not available here — type: "+cur+")";}}
+  document.getElementById("play").addEventListener("click",say);
+  document.getElementById("check").addEventListener("click",function(){
+    var v=ans.value.trim().toLowerCase();if(!v)return;tries++;
+    if(v===cur){hits++;fb.style.color="#16a34a";fb.textContent="✓ Correct!";}
+    else{fb.style.color="#dc2626";fb.textContent="✗ It was: "+cur;}
+    score.textContent="Score "+hits+" / "+tries;
+    setTimeout(function(){advance();ans.value="";fb.textContent="";say();},1100);
+  });
+  say();
+</script>