The ListenHear Game – Listen and type the word

What it does:

Speak a random word chosen from an array and ask the user to type the word in the box for 15 seconds

  • If right, +1pts, reset the timer and go to next word.
  • If wrong: do nothing.
  • After 15 seconds: game over.
    body {background-color: black; color: white;}
    .center {
      width: 50%;
      height: 50%;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      margin: auto;
    .hidden {
      display: none;
<script src=""></script>
<center class="center start">
    The ListenHear<br>Game<br><br><button class="w3-btn w3-green" onclick="play()">Play</button><button class="w3-btn w3-red" onclick="exit()">Exit</button>
<center class="center hidden">
  <h1 id="x"><x class="w3-red">There was an error.</x> </h1>
var read;
var time = 0;
var i = 0;
var words;
var c;
  $.getJSON( "", function( data ) {
function play() {
$(".start").hide(function() {
$("#x")[0].innerHTML = "<i style='color:green'>Listen and fill in the blank the word(s).</i>";
function game() {
  read = words[Math.floor(Math.random()*words.length)];
  $("#x")[0].innerHTML = "<input type=text onkeypress=check() style=width:100%></input><button onclick='speechSynthesis.speak(new SpeechSynthesisUtterance(read));'>Again please!</button><br><div class='time'></div><br><button onclick=giveup()>Give up</button>";
speechSynthesis.speak(new SpeechSynthesisUtterance(read));
time = 0;
  c=setInterval(function() {
  if(time>15) {giveup();}
}, 10);
function check() {
  if ($("input")[0].value.toUpperCase() === read.toUpperCase()) {
    $("#x")[0].innerHTML = "<i style='color:green'>Correct! Score: "+(++i)+"</i>";
    time = 0;
function giveup() {
    $("#x")[0].innerHTML = "<i style='color:red'>Time's Up! Score: "+(i)+"<br>The word(s) are: "+read+"</i>";
function exit() {$("body").slideUp(function() {window.close;});}

For those who are complaining the code is broken, the SpeechSynthesisAPI (the code depends on) doesn’t have good browser support.


Your game() calls c=setInterval(…), which is balanced by clearInterval(c) in check(). However, giveup() does not call clearInterval(c). As a result, if you just start the game but do nothing, then it gets ridiculously faster and faster.

Source : Link , Question Author : Community , Answer Author : 200_success

Leave a Comment