Fix answer checking regression

macao/assets/quiz.js

@@ -31,8 +31,10 @@ let gapfillSelectWidget = {
         // The gap-fill text is made of segments, which are either plain pieces
         // of text (strings) or "gaps" with a few options to select (string arrays).
         // We append these to build the text, turning strings into <span>s and
-        // gaps into <select>s
+        // gaps into <select> dropdowns
         let nbGaps = 0;
+        let segmentElems = new DocumentFragment(); // a bit faster than mutating the DOM all the time
+        let selectTemplate = document.getElementById("template-select").content.firstChild;
         for (segment of question.jsonObj.segments) {
             if (typeof segment === 'string' || segment instanceof String) {
                 segmentElem = document.createElement("span");
@@ -40,7 +42,7 @@ let gapfillSelectWidget = {
             } else if (segment instanceof Array) {
                 // It's a gap
                 // Create the <select> element
-                segmentElem = document.getElementById("template-select").content.firstChild.cloneNode(true);
+                segmentElem = selectTemplate.cloneNode(true);
                 segmentElem.setAttribute("data-index", nbGaps); // The node knows its index
                 // Create and append options
                 for (opt of segment) {
@@ -51,14 +53,16 @@ let gapfillSelectWidget = {
                 // Add listener to update the question's value when the selector's value changes
                 segmentElem.addEventListener("change", (e) => {
                     // The select node knows its index, therefore is able to update the question value at the correct index
-                    this.question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;
+                    question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;
                 });
                 nbGaps++;
             }
             // Add segment
-            el.appendChild(segmentElem);
+            segmentElems.appendChild(segmentElem);
         }
         question.value = new Array(nbGaps);
+        // Finally add everything to the DOM
+        el.appendChild(segmentElems);
     },
 };