multiplication_tables_html

simple game of multiplications

by Pierfrancesco Buonsante

HTML

<div id="splash" class="splash">
  <p onclick="start()"> click here to start playing </p>
</div>
<div id="gioco" style="display:none" class="gioco">
  <p>time remaining: <span id="timer">TT</span></p>
  <p>score: <span id="punteggio">PP</span> </p>
  <p style='text-align:center'><span id="domanda">multiplication</span>
    <input type="text" id="risposta" onkeyup="inputKeyUp(event)" style='font-size:100%;width: 3em;'> <span id="ok">&#x25C9;</span><span id="commento"> comment</span></p>
  <br>
</div>
<div id="gameOver" style="display:none;text-align: center;font-size: 150%">
  <p>time is up!</p>
  <p>your final score is <span id="punteggioF">PP</span> </p>
  <p id='riprova'> click here to play again</p>
</div>

CSS

div.splash {
  height: 20em;
  position: relative
}

div.splash p {
  font-size: 150%;
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

div.gioco {
  height: 10em;
  position: relative
}

div.gioco {
  height: 10em;
  position: relative;
  font-size: 150%;
}

JavaScript

// Countdown timer (in seconds)
var countdown = 11;
// ID to track the setTimeout
var id = null;
var punteggio = 0;
var f1 = 0;
var f2 = 0;


// 
document.getElementById("riprova").addEventListener("click", start);

// if the paragraph in the "splash screen" is hit, the game is initiated
function start() {
  // show game screen
  document.getElementById("gioco").style.display = 'block';
  // hide splash screen
  document.getElementById("splash").style.display = 'none';
  // set up timer
  setInterval(conto, 1000);
  conto();
  // start actual game
  gioco();
}

// timer function
function conto() {
  // countdown
  countdown--;
  // update countdown in game screen
  document.getElementById("timer").innerHTML = countdown;
  // if time expires go to gameover function
  if (countdown < 0) {
    fine();
  }
}

// game "loop"
function gioco() {
  // hide comment (does not seem to work)
  document.getElementById("commento").style.visibility = 'hidden';
  // update score
  document.getElementById("punteggio").innerHTML = punteggio;
  // clear text field
  document.getElementById("risposta").value = '';
  // pick two random integers between 2 and 12
  f1 = Math.floor(Math.random() * 11) + 2;
  f2 = Math.floor(Math.random() * 11) + 2;
  // display the multiplication
  document.getElementById("domanda").innerHTML = f1 + ' &times; ' + f2 + ' = ';
  // focus on text field
  document.getElementById("risposta").focus();

}

// wait for the player to hit "enter"
function inputKeyUp(e) {
  e.which = e.which || e.keyCode;
  if (e.which == 13) {
    // convert text field content into an integer
    var risp = parseInt(document.getElementById("risposta").value);
    // check answer
    if (risp == f1 * f2) {
      // correct answer
      punteggio++;
      countdown += 2;
      // comment answer (does not seem to work)
      document.getElementById("commento").innerHTML = ' correct!';
      document.getElementById("commento").style.visibility = 'visible';
      // green-light...