Monkey Puzzles

The below implementation of Monkey puzzles consist of squares which have to be arranged in a rectangle such that the numbers on the corners of each square and the neighbouring squares coincide. Here an interactive version with the task to bring the puzzle into order. Indices of the squares are 11,12,13, 21,22,23, 31,32,33.
The current implementation runs on the Internet Explorer, but at some other browser there is the problem that the output of "document.write" is not displayed before the program has terminated. This makes an interactive use of document.write as done here impossible. Instead one has to use buttons. The following should be done.
  1. Inspect the source code of the previous assignment and the file on Buttons and Windows as well as the slids of Lecture 6 for the usage of buttons and subwindows.
  2. Modify the code such that a subwindow is opened when loading the page and that the "function output" at the beginning of this file writes into the subwindow.
  3. Take over the idea of buttons from Assignment 21 and create two forms. The first form has the values of the board and the second form has some additional controls.
  4. The first form contains an array of 36 buttons depicting the entries of the fields. This array should be updated whenever the function "display" is called and the values from the variable field should be copied into the corresponding buttons. In the case that a hole tile like 
              73
          38
    can be diplayed properly in one button (might be very difficult), 9 buttons would of course also be enough. This would require some extra care when writing the function display() in order to get the button updated suitably.
  5. Whenever the buttons of two tiles are clicked, they should be exchanged using the function exchange. Note that due to its human interface, this function receives one number typed in by the user. Now having buttons, one can either modify the input of this function or calculate the current correct input from it. Both ways are possible, the only requirement is that it works afterwards.
  6. The second form should have buttons to start a new game and to undo the last move. This button needs the game to memorize the last move somewhere. Note that an undo is the same as to do the last move again; thus it is only necessary to archieve this information, but not to write a new function. Furthermore, it should have an information button on the number of moves so far.
  7. While the function "newgame()" will still be needed for the button to start a new game, the function "game()" is then no longer needed as the control is now transferred to the buttons.
  8. Replace the command <body> by something of the form <body onload="newgame(); ..."> in order to make sure that the necessary functions are activated when someone is loading the page.
The below part can be replaced by buttons.