greek letters 4a vert

simple game for learning the greek letters useful in physics and mathematics

by Pierfrancesco Buonsante

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div style="width: 100%; display: table;">
<div style="width: 100%; display: table-row;">
<div style="width: 15%; display:table-cell;">
<span style='font-size:4vw;text-align:center'>Counters</span>
<table style='font-size:3.5vw;margin:auto' id='cntr'>

</table>  
  
  
</div>
<div style="display:table-cell;">
<div id="splash" class="splash">
  <p style="font-weight:bold;">
    Greek alphabet
  </p>
  <p style="text-align:justify;font-size:3vw">
    The question box has a light green background. It can contain either a Greek letter &mdash; like e.g. <b>&alpha;</b>, <b>&beta;</b>,..., <b>&omega;</b> &mdash; or the name of a Greek letter &mdash; like e.g. <b>alpha</b>, <b>beta</b>,..., <b>omega</b>    &mdash;.
  </p>
  <p style="text-align:justify;font-size:3vw">
    Four options are shown below the question box. If the question box contains the symbol for a letter, you have to choose the matching name. If the question box contains the name of a letter, you have to choose the matching symbol.
  </p>

  <p style="text-align:justify;font-size:3vw">
You have 10 seconds to choose your answer. If you get it right, you'll get as many points as the time left, and two extra seconds. Also, the counter for the letter you guessed will decrease by one. If your answer is wrong, your score will decrease by as many points as the time left and your time will decreases by one second. Also, the counter for the letter you did not guess will go up by three units. </p>

 <p style="text-align:justify;font-size:3vw">
The game ends either when the countdown reaches zero or when all the counters are set to one. In the second case, the score you have will be doubled. 
</p>


  <span onClick="start()"> click here to start </span>
</div>
<div class="gameOver" id="gameOver" style="display:none">
<b>Game Over</b>
<p id='congr' style='display:none;line-height:100%;text-align:justify;'>Congratulations! You get the bonus for...

CSS

div {
  width: 60%;
  margin-bottom: 0.5vh;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 3px;
}

div.question {
  width: 80%;
  font-size: 9vw;
  background-color: #AAFFAA;
  margin-bottom: 2vh;
  border: 3px solid #73AD21;
  padding: 0.5vh;
}

div.ans {
  width: 80%;
  border: 3px solid #73AD21;
  font-size: 9vw;
  padding: 0.5vh;
}

div.time {
  width: 80%;
  margin-top: 3vh;
  border: 3px solid #999900;
  font-size: 7vw;
  padding: 0.5vh;
}

div.score {
  width: 80%;
  margin-top: 1vh;
  border: 3px solid #999900;
  font-size: 7vw;
  padding: 0.5vh;
}

div.aux {
  margin-top: 10px;
  border: 3px solid #000000;
}

div.gameOver {
  width: auto;
  text-align: center;
  line-height: 50%;
}

div.splash {
  width: 95%;
  text-align: center;
  font-size: 8vw;
}

JavaScript

//------------------
// global variables 
//------------------
// countdown
var countdown = 11;
var cdwnId = null;
//cdwnId = setInterval(cdwn, 1000);

// number  of letters in the alphabet
var nl = 24;
// number of answer in a question
var na = 4;
// alphabet: 1st column contains names;
// 2nd column contains symbols
var gLets = [
  ["alpha", "&alpha;"],
  ["beta", "&beta;"],
  ["gamma", "&gamma;"],
  ["delta", "&delta;"],
  ["epsilon", "&epsilon;"],
  ["zeta", "&zeta;"],
  ["eta", "&eta;"],
  ["theta", "&theta;"],
  ["iota", "&iota;"],
  ["kappa", "&kappa;"],
  ["lambda", "&lambda;"],
  ["mu", "&mu;"],
  ["nu", "&nu;"],
  ["xi", "&xi;"],
  ["omicron", "&omicron;"],
  ["pi", "&pi;"],
  ["rho", "&rho;"],
  ["sigma", "&sigma;"],
  ["tau", "&tau;"],
  ["upsilon", "&upsilon;"],
  ["phi", "&phi;"],
  ["chi", "&chi;"],
  ["psi", "&psi;"],
  ["omega", "&omega;"],
];

// vector for 
var anss = [];
var ansm = [];

var chsn = [];
// auxiliary vector for choosing the wrong answers
var an = [];
// vector containing the indices of the chosen answers (the correct one is the first)
var ani = [];
// permutated version of ani: contains the indices for the answers in random order
var rp = [];
// auxiliary vector for building rp
var an2 = [];
// question
var q;
// number of questions asked
var qask = 0;
// number of correct answers
var cora = 0;
// score
var score = 0;
// ignorance vector 
var ignv = [];
// reset ignorance vector
resetI();
// total ignorance
var maxign;



//------------------------------------------
// test function
//------------------------------------------
function test(msg) {
  window.alert(msg);
}

//------------------------------------------
// start game
//------------------------------------------
function start() {
  // reset timer
  countdown = 11;
  // reset score
  score = 0;
  // reset number of question asked
  qask = 0;
  // reset number of correct answers
  cora = 0;
  // display score
  document.getElementById("scr").innerHTML = score;
  //...