The following solution makes use of three Passages:
1 The Passage that contains the visual grid of ‘buttons’, in my example it is named Keypad but you could name it whatever you like as long as you alter the references to it. It uses a HTML <table> to layout the buttons, the (link-repeat:) macro to allow those ‘buttons’ to be selected multiple times without needing to ‘refresh’ the grid, and the (display:) macro to ‘execute’ the same code for each ‘button’ selected.
The HTML comment at the top of this Passage’s contents explains which Story Variables ($keycode and $guess) and Hidden Hook (correct) are required for the Keypad to work correctly. It also mentions the optional Hidden Hook (wrong) and Named Hook (entered) that can be used to extend the Keypad’s functionality.
{
<!--
Keypad.
requires:
keycode Story variable which contains the Correct answer.
guess Story variable which contains the current sequences of key presses.
correct Hidden Hook to show/execute when guess equals keycode.
optional:
wrong Hidden Hook to show/execute when guess does not equal keycode.
entered Named Hook to display current guess in.
-->
<table id="keypad">
<tr>
<td>(link-repeat: "1")[{(set: _keypress to "1")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "2")[{(set: _keypress to "2")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "3")[{(set: _keypress to "3")(display: "Keypad Keypressed")}]</td>
</tr>
<tr>
<td>(link-repeat: "4")[{(set: _keypress to "4")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "5")[{(set: _keypress to "5")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "6")[{(set: _keypress to "6")(display: "Keypad Keypressed")}]</td>
</tr>
<tr>
<td>(link-repeat: "7")[{(set: _keypress to "7")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "8")[{(set: _keypress to "8")(display: "Keypad Keypressed")}]</td>
<td>(link-repeat: "9")[{(set: _keypress to "9")(display: "Keypad Keypressed")}]</td>
</tr>
<tr>
<td></td>
<td>(link-repeat: "0")[{(set: _keypress to "0")(display: "Keypad Keypressed")}]</td>
<td></td>
</tr>
</table>
}
2 The Passage which contains the code that is executed each time a ‘button’ is selected, in my example it is named Keypad Keypressed but you can change this too. It uses (if:) macros to determine the length of the guess and if that guess was correct or not, the (replace:) macro the optional Named Hook (if it exists), and the (show:) macro to ‘execute’ the contents of the ‘correct’ (and optional ‘wrong’) Hidden Hook as needed.
(if: $guess's length < $keycode's length)[
(set: $guess to it + _keypress)
(replace: ?entered)[$guess]
(if: $guess's length is $keycode's length)[
(if: $guess is $keycode)[
(show: ?correct)
]
(else:)[
(show: ?wrong)
]
]
]
3 The Passage in which you want the Keypad to be displayed, in my example this was named Guess Code. You need to initialise the required Story Variables ($keycode and $guess), display the ‘Keypad’ grid, and define the Hidden Hook (correct) who’s contents will be executed when the guess equals the keycode.
Enter the 8 number passcode
(set: $keycode to "87654321")\
(set: $guess to "")\
(display: "Keypad")
|correct)[
You guessed correctly.
]
The following is a variation of the above Passage that includes both of the optional ‘Keypad’ options.
Enter the 8 number passcode
(set: $keycode to "87654321")\
(set: $guess to "")\
(display: "Keypad")
|entered>[]
|correct)[
You guessed correctly.
]
|wrong)[
You guessed wrong!
(link-goto: "Try Again", "Guess Code")
]
Place the following CSS within your project’s Story Stylesheet area, it adds some styling to the <table> element used to display the ‘button grid’.
#keypad {
border-spacing: 10px;
border-collapse: separate;
display: inline-block;
}
#keypad td {
width: 38px;
height: 38px;
text-align: center;
border: 1px solid white;
}
#keypad td tw-hook, #keypad td tw-hook tw-link {
vertical-align: middle;
display: inline-block;
width: 100%;
height: 100%;
}
#keypad td tw-hook tw-collapsed tw-hook {
display: none;
}
#keypad tr:last-of-type td:not(:nth-child(2)) {
border: none
}