Version of Monday 9 November 2015.
Dave Barber's other pages.
The essential invariant is this: At any time, exactly one button in each row, and exactly one button in each column, will be in the selected state.
- Whenever the user clicks on a button that is not already selected, it becomes selected, and three other buttons are automatically modified in order to maintain the invariant.
- Whenever the user clicks on a button that already is selected, nothing happens.
All the buttons of this example reside within the following HTML table at the bottom of which is a text summary of the selection, updated after every change.
Here is some detail about happens when the user clicks a previously unselected button in row r and column c, more briefly written as the ordered pair (r, c):
- Let c* represent the column in which row r's previously-selected button lay.
- Let r* represent the row in which column c's previously-selected button lay.
- The previously-selected buttons, now automatically deselected, are (r*, c) and (r, c*).
- The new button selected by the user is (r, c). The other new button, automatically selected, is (r*, c*).
All source code is in this one HTML file, which anyone may copy, modify and redistribute as desired.