Whack-a-mole
1

First, reassign the browser to Full Screen view, to give this worksheet and your code as much space as possible.

Then choose either one of the two options below:

Option 1: Start this worksheet from scratch

- First Enter your name:
- Then
  .
- All answers that you subsequently enter/edit will be auto-saved to this sheet.

Option 2: Continue, or view, previous work

- All answers that you subsequently enter/edit will be auto-saved to this sheet.
- The first time you re-load an answers sheet - within a single session on Elan - you will be asked to confirm that you understand this.

This worksheet is copyright © Richard Pawson 2025, and protected by the Creative Commons license: Attribution-NonCommercial-NoDerivatives 4.0 International. You may freely make and distribute copies of this worksheet as is, but if you modify this worksheet you may not distribute your modified version (outside your own teaching institution) without the author's permission. Please email the author to report errors or suggest improvements.

# Step 1: Introduction

#### Notes

Step Completed Total hints used: /

# Step 2: Load and exploring the starting code

# 5df28caa31662998d0b574c82171762c4927486273db2969eca08f3d7e98223c Elan 2.0.0-alpha valid main variable score set to 0 while true variable hole set to Hole.vacant if random() > 0.5 then assign hole to Hole.mole end if variable html set to htmlForSimpleGame(hole, score) call displayHtml(html) variable stop set to clock() + 1000 while clock() < stop call processKey(hole, score) end while end while end main procedure processKey(out hole as Hole, out score as Int) variable n set to getNumericKey() if n isnt -1 then if hole is Hole.mole then assign hole to Hole.hit assign score to score + 1 elif hole is Hole.vacant then assign hole to Hole.miss assign score to score - 1 end if variable html set to htmlForSimpleGame(hole, score) call displayHtml(html) end if end procedure enum Hole vacant, mole, hit, miss function htmlForSimpleGame(hole as Hole, score as Int) returns String variable core set to htmlForHole(hole, "hole") return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>" end function function htmlForFullGame(holes as Array<of Hole>, score as Int) returns String variable core set to "" for i in range(0, holes.length()) assign core to core + htmlForHole(holes[i], i.toString()) end for return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>" end function function htmlForHole(hole as Hole, label as String) returns String variable img set to imageForStatus[hole] return $"<div class='hole'><img src='{img}'><div class='label'>{label}</div></div>" end function # Acknowledgement: mole icon source https://www.flaticon.com/ constant vacantImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/vacant.png" constant moleImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/mole.png" constant hitImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/hit.png" constant missImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/miss.png" constant imageForStatus set to {Hole.vacant:vacantImg, Hole.mole:moleImg, Hole.hit:hitImg, Hole.miss:missImg} constant styleSheet set to '\n.game { display: flex; flex-direction: row; }\n.hole { display: flex; flex-direction: column; width: 50px; height: 50px; border: 10px solid white;}\n.label {width: 40px; text-align: center;}\n.hole img {height: 40px; width: 40px}\n.score{ margin-top: 20px;}'
, watch the following video, exploring the code alongside the video:

What is the largest and smallest result returned by the random() method?

#### Notes

Step Completed Total hints used: /

# Step 3: creating an Array

Having made the changes shown in the video and run the program, describe what the display shows?

Do any moles appear?

#### Notes

Step Completed Total hints used: /

# Step 4: making moles appear again

Having made the changes the mole should now pop up in different holes. But ...

What happens when you press a key?

#### Notes

Step Completed Total hints used: /

# Step 5: responding to the keyboard input

Make the changes shown in the video and then run the program - to show that you can now hit (and also miss!) the moles. If you find that the moles change too quickly to hit, change the speed by editing this line:
Code does not parse as Elan.
Code does not parse as Elan.
Code does not parse as Elan.
Code does not parse as Elan.
Code does not parse as Elan.
changing the value to 2000 (milliseconds), for example.

What is the main difference between how this game works and the one shown in the introductory video at the start of this worksheet?

#### Notes

Step Completed Total hints used: /

# Step 6: making multiple moles appear

Complete the changes shown in the video and confirm that 1, 2, or 3 moles appear at a time.

#### Notes

Step Completed Total hints used: /

# Step 7: review what we have learned

How can you select multiple instructions in the Elan editor?

What does 'DRY' stand for in 'the DRY principle'?

What is an 'enum' ?

What is 'dead code' within a program?

When should you use a 'for' loop?

What, in general terms, does an Array allow you to do?

How can you select multiple instructions in the Elan editor?

An Array is a simple example of a more general concept, called what?

What pieces of information must you specify when defining an Array?

If you created an array of just five elements, what would be the element numbers of the first, and last, elements?

What would be the syntax for reading the first element of an array named 'players'?

What instruction is used to change a specific element within an existing array?

#### Notes

Step Completed Total hints used: /

# Congratulations! You have completed this worksheet

If you have time available, there are two optional activities:

Continue to refine the game

Here are some ways that you might like to refine the game

- At the start of the program allow the user to select a level of play - say as a number in the range 1-5. (Look up the library method inputIntBetween in the Help tab show in Help.) Use this number in a formula to alter the time specified in this instruction: `let stop be clock() + 1000`
- Keep track of how many moles have actually appeared, and display this as well as the score.
- Award a bonus point if, whenever three moles are shown at once, you hit all three before they disappear.

Explore the source code in more depth

# cce653dc3a5173ba91d288ce4be9137ac2723eb2245c236e8169e34c80d96d75 Elan 2.0.0-alpha valid main variable score set to 0 while true variable holes set to new List<of Hole>() call holes.intialise(10, Hole.vacant) variable hole set to Hole.vacant variable numberOfMoles set to randint(1, 3) for count in range(1, numberOfMoles + 1) variable holeNumber set to randint(0, 9) assign holes[holeNumber] to Hole.mole end for variable html set to htmlForFullGame(holes, score) call displayHtml(html) variable stop set to clock() + 1000 while clock() < stop call processKey(holes, score) end while end while end main procedure processKey(out holes as Array<of Hole>, out score as Int) variable n set to getNumericKey() if n isnt -1 then if holes[n] is Hole.mole then assign holes[n] to Hole.hit assign score to score + 1 elif holes[n] is Hole.vacant then assign holes[n] to Hole.miss assign score to score - 1 end if variable html set to htmlForFullGame(holes, score) call displayHtml(html) end if end procedure enum Hole vacant, mole, hit, miss function htmlForSimpleGame(hole as Hole, score as Int) returns String variable core set to htmlForHole(hole, "hole") return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>" end function function htmlForFullGame(holes as Array<of Hole>, score as Int) returns String variable core set to "" for i in range(0, holes.length()) assign core to core + htmlForHole(holes[i], i.toString()) end for return $"<style>{styleSheet}</style><div class='game'>{core}</div><div class='score'>Score: {score}</score>" end function function htmlForHole(hole as Hole, label as String) returns String variable img set to imageForStatus[hole] return $"<div class='hole'><img src='{img}'><div class='label'>{label}</div></div>" end function # Acknowledgement: mole icon source https://www.flaticon.com/ constant vacantImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/vacant.png" constant moleImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/mole.png" constant hitImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/hit.png" constant missImg set to "https://elan-lang.org/documentation/worksheets/whack-a-mole/miss.png" constant imageForStatus set to {Hole.vacant:vacantImg, Hole.mole:moleImg, Hole.hit:hitImg, Hole.miss:missImg} constant styleSheet set to '\n.game { display: flex; flex-direction: row; }\n.hole { display: flex; flex-direction: column; width: 50px; height: 50px; border: 10px solid white;}\n.label {width: 40px; text-align: center;}\n.hole img {height: 40px; width: 40px}\n.score{ margin-top: 20px;}'
. Important: You don't need to understand the additional code shown in order to continue with further worksheets. However, the following video does explain the additional code for those who might want to go deeper at this stage.