Mini-Lab: If-Else Statements


The goal of today's Mini-Lab is to improve your puzzle with a counter that keeps track of the number of moves that have been made. If the player makes too many moves without completing the puzzle, they lose.

Make sure that you have finished the previous Mini-Lab before you get started on this one.


  1. Adding a Counter: The first step is to add a new variable to your JavaScript program to keep track of number of moves that the player has left. The variable should be initialized to 20. Like the currentBlank variable you created earlier, this variable should be created inside your <script> section but outside any of your existing JavaScript functions. (Variables created inside a function only exist while that function is executing, and can only be accessed in that function. Variables that are created outside of any function exist indefinitely, and can be accessed from any JavaScript functions in the page.)
  2. Updating the Counter: The next step is to modify your swapWithBlank function so that it updates your counter variable every time it is called, and informs the player when too many moves have been made:
    function swapWithBlank(imageToSwap) 
    // DON'T REMOVE YOUR PREVIOUS CODE! // ADD NEW CODE TO: // 1. Decrease the counter variable by 1. // 2. Pop up an alert box if the counter variable is less than or equal to 0.
    Test your page to make sure that it works as expected.
  3. Extras (If You Have Time):    (otherwise go straight to step 4)
  4. Finishing Up: Before publishing your page to the web server, add comments to your JavaScript containing the following information (Don't remove your old comments, just add these after them.):