Single Comment

Affecting the initial state is somewhat tricky, because the Interactive Diagram is initialized with a certain delay. This to make sure the initialization routine can see all Diagrams on the page, and is not immediately executing after the page has been loaded enough to only see the first Diagram. So you cannot use the code you use later for altering a Diagram that you use in the buttons immediately.

The way I would do it, is first alter the mechanism by which you change things now, by letting all buttons call the same function (say 'AlterDiagram(n)'), specifying by the parameter n what should actually be altered. So AlterDiagram would contain a switch(n) statement, where each case does what you now have written directly in the button. Initially you can then call AlterDiagram with a random number as parameter (Math.floor(nmax*Math.random()). Or call it twice, once for the base variant, and once to choose the off-board piece.

The main difficulty is when to call it. You could call it with a delay larger than the betza.js script uses to call its Init() function, but that seems a bit risky in case the page lows more slowly than that (or future versions of betza.js use another delay). Now you can prevent that betza.js invokes the Init() routine at all, by, before specifying the URL to betza.js

<script>var scriptSeen = 7;</script>

(Betza.js uses this to make sure the Init() routine is only executed once, even if there are multiple links to the script on the page, such as could happen in a Comments page.) You then should arrange the Init() function to be called from your own code. You could do this through

<script>
function MyInit() {
  Init();
  var n = ...; // number of the random position you want to show
  AlterDiagram(n);
}
setTimeout('MyInit()', 100); // arrange MyInit() to be invoked 100 msec from now.
</script>

This guarantees that you execute the AlterDiagram() for picking the initially shown position only after the initialization has been done.