So the game is ready to play. Now we need to ask, "What happens when the player clicks a button?". Well we need to decide whether they're right or wrong. But what to do with that information? I think the easiest idea is to just keep score and restrict the game to (say) 10 goes. So we'll need a global go counter, g_n and a global score, g_score which will be incremented for each correct answer. So have a go at writing a button_click(colr) function. Note that the cards under consideration are g_cards[1] and g_cards[4]. You can assume that colr will be either 'red' or 'green'.


function button_click(colr) {
  g_n++;
  if (g_cards[1]==g_cards[4]) {
    if (colr=='green') g_score++;
  } else {
    if (colr=='red') g_score++;
  }
}

Before this will work, we need to set up the new global variables and to add an onClick attribute to each button.

  ...
  </div>
  <script>
    var g_n=0;
    var g_score=0;
    var g_cards=[];
  ...
  </script>
</body>
</html>
<img id='red' src='images/red.png' onClick="button_click('red');">