Task 1: Set up images in the html document

Download lab13 folder from the download directory. Examine the downloaded material and open
the memoryGame.html file in your text editor. Add the html code needed to show three
buttons with the image of the question mark (which can be found in the images subfolder).
Give the three buttons ids
0, 1, and 2 respectively.
(You can consult material from the lab on the Index Cards game, if you need to.)

Test your html page to make sure these buttons show nicely on the page.

Now, notice how similar these three sets of tags are, and in particular, notice where they differ.

Task 2: Define the start() function

In the memoryGameJS.js file, define a function, named start(), which will add to the page
six buttons -similar to the ones in the previous task-, each with the question mark image on it.
The html tags you wrote in Task 1 should be your guide here.

We would like the start() function to be invoked as soon as the page loads in the browser's window.
In order to do so, update the body tag to look like this:

<body onLoad="start()">

Test your page and debug your javascript code until your browser's window shows all buttons,
with their images, as soon as it loads.

Task 3: Start the playCard(num) function

The playCard(num) function will be called when anyone of the buttons is clicked.
When it is called from the first button, it will show the first image from the paths array.
When called from the second button, it will show the second image, etc.
Therefore it should take an integer as input, which is the id of the button that was clicked. Attach the
function to each button by adding to each button's tag:

onClick='playCard(this.id);

Start by adding some trivial statement in this method -something like an alert() let's say-.
Test that indeed when you click on any button, you see this alert.

Now add some code to the function so that when the user clicks on a button, the corresponding
image from the paths array replaces the question mark:

--the first button will show paths[0] image,

--the second button will show paths[1] image, etc.

Add this code to the playCard(num) function:

//reveal the image that was clicked
document.getElementById(num).innerHTML = "";

Task 4: Pick it up from here...

At this point, you may want to download a fresh copy of the material at this stage:

download/lab13/MemoryGameMidi

This version of the program, loads the page with all buttons and their images, and when
any button is clicked the corresponding image shows.

Task 5: Disable clicked buttons

Let's disable the button that was just clicked:

document.getElementById(num).disabled = true;

Task 6: First or Second Click?

Experimenting with the version of the game we have, we realise that our actions should be different depending on whether a certain
click was the first or the second in the round: If it was the first click, we don't do much,
but if it was the second one, then we should check for a match. In order to "remember" which
click was that, we need a global boolean variable:

var firstClick = true;

This variable starts out true, and changes to false after the first click, and back to true
after the second click:

if (firstClick == true) {
alert("This was the first click");
firstClick = false;
}
else { // this was the second click
alert("This was the second click");
firstClick = true;
}

Test your game so far, to make sure it recognises forst vs second clicks.

Task 7: Reacting to Second Click

After a second click, we need to check for a possible match: was the previously clicked card
the same as the one just clicked? But wait... what was the previously clicked card? Oops... we forgot!

One more global variable will come to our rescue here:

var prevClickedIndex1;

Now we are ready to check for a match:

if (firstClick == true) {
alert("This was the first click");
prevClickedIndex1 = num;
firstClick = false;
}
else { // this was the second click
alert("This was the second click");
firstClick = true;
//check for a match
if (paths[prevClickedIndex1] == paths[num]) { //we just had a match
alert("We just had a match");
matches++;
} else {
alert("We did not have a match");
}
}

Check your work at this stage. Does it work? Always?

Task 8: We had no match...

As we are starting a new round, i.e we detect a first click, the two previously clicked cards
should continue to stay open and deactivated if we had a match, otherwise their images
should hide and become active again: