Check out Grant Acedrex, our featured variant for April, 2024.

Enter Your Reply

The Comment You're Replying To
H. G. Muller wrote on Sat, Aug 5, 2017 08:52 PM UTC:

I managed to fix the Interactive-Diagram script such that it is possible to have multiple diagrams on the same web page. This only works if the HTML elements enclosing the diagram definition have the attribute class="idiagram", thourgh. The old way of recogizing the diagram definition by id="diagram" still works, but is limited to only a single diagram. Because in JavaScript IDs are supposed to be unique, so that it is an error to have two identical ones. Fortunately not a fatal one, but in any case causing the second occurrence to remain invisible to the script. It is possible to have many elements with the same class, and the script now scans the document for all of these, to expand them all, according to their specifications.

There is one problem with multiple diagrams on the same page, however: the script that powers it can only remember the position of one of them. So when you start moving around pieces, or displaying move diagrams, it forgets about what you have been doing to all other diagrams on that page. When you then again start clicking such other diagram, it will be re-initialized, and revert to its original position.

Another problem I had to face is that diagrams can be connected to external elements elesewhere in the text. For instance to automatically create a list of clickable pieces, like in my Metamachy diagram below. The old way to request insertion of such a list was to put an empty HTML 'ul' ('unnumbered list') tag pair with id=pieceList in the text. But for multiple diagrams it would not know what piece list to put there. So I introduced a new parameter to the diagram description, satellite=xxx, where 'xxx' must be unique for every diagram. A HTML element with id=xxxList will then be used to create the piece list for that diagram. The default value of 'xxx' is 'piece', for backward compatibility with existing pages that have only a single diagram.

To make sure your browser uses the new script, and not an old one it has cached, refresh the page with the Shift key pressed. Some things could still be improved; the script seems to start working before the page is completely loaded, and if the loading takes long, it would fail to expand the diagrams that load afterwards. I tried to have an 'onload' handler invoke the script, but I could not get this to work. (The script was then never invoked.) So I now built in a delay of 1 sec befre it starts expanding the diagrams. This could still be too short for a Shift-load, because that also forces reloading of all the piece graphics. But if some diagrams remain unexpanded that first time, then another normal load usually expands them all.

[Edit] I now also adapted the text in the Interactive Diagram article, and the Design Wizard, to describe/use the new method.


Edit Form
Conduct Guidelines
This is a Chess variants website, not a general forum.
Please limit your comments to Chess variants or the operation of this site.
Keep this website a safe space for Chess variant hobbyists of all stripes.
Because we want people to feel comfortable here no matter what their political or religious beliefs might be, we ask you to avoid discussing politics, religion, or other controversial subjects here. No matter how passionately you feel about any of these subjects, just take it someplace else.
Quick Markdown Guide

By default, new comments may be entered as Markdown, simple markup syntax designed to be readable and not look like markup. Comments stored as Markdown will be converted to HTML by Parsedown before displaying them. This follows the Github Flavored Markdown Spec with support for Markdown Extra. For a good overview of Markdown in general, check out the Markdown Guide. Here is a quick comparison of some commonly used Markdown with the rendered result:

Top level header: <H1>

Block quote

Second paragraph in block quote

First Paragraph of response. Italics, bold, and bold italics.

Second Paragraph after blank line. Here is some HTML code mixed in with the Markdown, and here is the same <U>HTML code</U> enclosed by backticks.

Secondary Header: <H2>

  • Unordered list item
  • Second unordered list item
  • New unordered list
    • Nested list item

Third Level header <H3>

  1. An ordered list item.
  2. A second ordered list item with the same number.
  3. A third ordered list item.
Here is some preformatted text.
  This line begins with some indentation.
    This begins with even more indentation.
And this line has no indentation.

Alt text for a graphic image

A definition list
A list of terms, each with one or more definitions following it.
An HTML construct using the tags <DL>, <DT> and <DD>.
A term
Its definition after a colon.
A second definition.
A third definition.
Another term following a blank line
The definition of that term.