Improve generation of radio-group id

[acjh]

There's a huge diff just from the radio-group id, which is also used for radio-list-item names.
This makes the diff difficult to compare and practically useless, e.g. nus-cs2103/website@2a264dd

Currently, it's randomly generated:

markbind/lib/markdown-it/markdown-it-radio-button.js

Line 21 in d25efcb

group = Math.random().toString(36).substr(2, 5); // generate a new group id

Suggestion: Explore smart deterministic generation based on a parameter.

smart → counting is deterministic generation, but isn't smart because removing a single file may affect the id of all other radio groups down the line. A possible example is relative file path — to be explored.

[acjh]

Prioritizing this to aid debugging, for when looking at the diff may be useful.

[Gisonrg]

One stupid idea: how about hashing the content of the first item in the list? Supposing each list item is unique and less likely to change, this could help to avoid huge amount of randomly generated ids and make most of them deterministic.
It's an non-trivial issue to resolve though, user don't have direct control on setting this id and invariants in the context are little :)

[acjh]

That's similar to what I ended up considering actually.

I spent a couple hours console.log-ing different properties of the state parameter and looking into markdown-it repo, but couldn't find anything about getting the current file path. I have even tried using state.md.helpers.parseLinkDestination to resolve a relative file path, but it doesn't seem to do that.

[acjh]

how about hashing the content of the first item in the list? Supposing each list item is unique and less likely to change

There are a handful of true-false questions with - ( ) True as the first item.

[acjh]

Supposing the question before the list is unique, it can be accessed by...

1. tokens[i-5] for most cases:

   <panel header=":lock::key: Statements about the Singleton pattern">
   <question> <!-- tokens[i-7] -->
   
   We use the Singleton pattern when <!-- tokens[i-5] -->
   
   - ( ) a. we want an a class with a private constructor.

2. tokens[i-5] for questions in header of panel:

   <panel header=":lock::key: What does the navigability given by this diagram mean?">
   <question> <!-- tokens[i-5] -->
   
   <img src="{{baseUrl}}/oopDesign/associations/navigability/images/unitItem.png" height="100" />
   <p/> <!-- tokens[i-4] -->
   
   - ( ) a. A `Unit` object knows about the `Item` object it is linked to

3. tokens[i-4] if there is no empty line between <question> and question:

   <question>
   Pick the odd one out. <!-- tokens[i-4] -->
   
   - ( ) a. Separation of Concerns Principle.

4. tokens[i-6] if there is a block between question and radio:

   <panel header=":lock::key: LoD violation?">
   <question> <!-- tokens[i-8] -->
   
   This violates Law of Demeter. <!-- tokens[i-6] -->
   
   ```java
   void foo(Bar b) {
       Goo g =  new Goo();
       g.doSomething();
   } <!-- tokens[i-4] -->
   `` 
   
   - ( ) True
   - ( ) False

   <panel header=":lock::key: Is this Facade?">
   <question> <!-- tokens[i-8] -->
   
   Does the design below likely to use the Facade pattern? <!-- tokens[i-6] -->
   
   <img src="{{baseUrl}}/designPatterns/facade/what/images/textStorage.png" height="150" />
   <p/> <!-- tokens[i-4] -->
   
   - ( ) True
   - ( ) False

5. other, if radio is in answer:

   <div slot="answer"> <!-- tokens[i-4] -->
   
   - (x) a. Separation of Concerns Principle.

[acjh]

Based on the above, I propose to go with:

group = md5(tokens[i-5].content + tokens[i-4].content + tokens[i].content).substr(2, 5);

This was tested with:

/* Top of the file */
var d = {};

/* Inside the method */
var content = md5(tokens[i-8].content
                + tokens[i-7].content
                + tokens[i-6].content
                + tokens[i-5].content
                + tokens[i-4].content
                + tokens[i-3].content
                + tokens[i-2].content
                + tokens[i-1].content
                + tokens[i].content);
if (d[group]) {
  if (d[group] == content) {
    // console.log("reuse");

  } else {
    console.log("conflict");

    d[group] = content;
    if (tokens[i-5].content == "This is a defensive implementation of the association.") {
      // console.log("conflict");
      console.log(tokens[i-8].content);
    }
  }
} else {
  // console.log("set");

  d[group] = content;
  if (tokens[i-5].content == "This is a defensive implementation of the association.")
  {
    console.log("set");
    console.log(tokens[i-8].content);
  }
}

The above prints:

set
<img src="{{baseUrl}}/errorHandling/defensiveProgramming/compulsoryAssociations/images/countryCity.png" height="45">
<p></p>

conflict
<img src="{{hostBaseUrl}}/book/errorHandling/defensiveProgramming/compulsoryAssociations/images/countryCity.png" height="45">
<p></p>