Add custom question widget for gap-fill text

macao/.gitignore

 public/
 .hugo_build.lock
+.idea/
\ No newline at end of file

macao/assets/quiz.js

+/**
+ * Custom widget for "fill-in-the-gaps" question type
+ */
+let gapfillSelectWidget = {
+    name: "gapfill-select",
+    title: "Gap-Fill Text (Select)",
+    /**
+     * This function should return true when the widget and all needed resources
+     * are loaded
+     */
+    widgetIsLoaded: function () {
+        return true;
+    },
+    /**
+     * This function should return true if the widget should be applied to the question */
+    isFit: function (question) {
+        console.log("isFit?", question)
+        return question.getType() === this.name;
+    },
+    init() {
+        //Register a new type using the empty question as the base.
+        Survey.Serializer.addClass(this.name, [], null, "empty");
+    },
+    /** Static HTML template rendered by SurveyJS */
+    htmlTemplate:
+        '<p id="gapfill-container"><template id="template-select"><select class="my-custom-class"><option selected/></select></template></p>',
+    //Our element will be rendered base on template.
+    //We do not need to do anything here
+    afterRender: function (question, el) {
+        // 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
+        for (segment of question.jsonObj.segments) {
+            if (typeof segment === 'string' || segment instanceof String) {
+                segmentElem = document.createElement("span");
+                segmentElem.innerText = segment;
+            } else if (segment instanceof Array) {
+                // Get the <select> element
+                segmentElem = document.getElementById("template-select").content.firstChild.cloneNode(true);
+                // Create and append options
+                for (opt of segment) {
+                    optionElem = document.createElement("option");
+                    optionElem.innerText = opt;
+                    segmentElem.appendChild(optionElem);
+                }
+            }
+            // Add segment
+            el.appendChild(segmentElem);
+        }
+    }
+};
+
+
 function showCorrectIndic(correct) {
     indic = document.getElementById("correct-indic");
     if (correct === undefined) {
@@ -12,9 +66,13 @@ function showCorrectIndic(correct) {
 }
 
 $(function () {
+    // Register our custom question types
+    Survey.CustomWidgetCollection.Instance.add(gapfillSelectWidget, gapfillSelectWidget.name);
+
+    // Load survey model from JSON
     survey = new Survey.Model(jsonStatic);
-    $("#surveyContainer").Survey({ model: survey });
 
+    // Add "Check answers" button
     survey.addNavigationItem({
         id: "sv-nav-clear-page",
         title: "Check",
@@ -29,6 +87,7 @@ $(function () {
         innerCss: "sd-btn nav-input"
     });
 
+
     survey.onValueChanged.add((_, options) => {
         console.log(options)
     });

macao/assets/style.css

@@ -6,3 +6,7 @@
 #correct-indic.correct {
     color: var(--sd-rating-good-color);
 }
+
+p#gapfill-container {
+    white-space: pre-wrap;
+}
\ No newline at end of file

macao/content/activities/20/index.md

++++
+title = "Ecoutez et complétez (2)"
++++
+
+Ecoutez maintenant les extraits sonores en cliquant sur les flèches et sélectionnez la bonne réponse dans les listes déroulantes. 
+
+{{% quiz %}}
\ No newline at end of file

macao/content/activities/20/quiz.json

+{
+    "elements": [
+        {
+            "type": "gapfill-select",
+            "name": "pg20",
+            "title": "pg20",
+            "segments": [
+                "So, ",
+                [
+                    "mother",
+                    "my mother",
+                    "our mother"
+                ],
+                " told us we were not to pick ",
+                [
+                    "the apples",
+                    "apples",
+                    "an apple"
+                ],
+                ". My mother said, 'It’s naughty to pick the apples when they are growing upon ",
+                [
+                    "a tree",
+                    "the tree",
+                    "tree"
+                ],
+                ", because we want them to go on growing until they are ripe and rosy, and then we shall pick them and put them quite away ",
+                [
+                    "for",
+                    "for a",
+                    "for the"
+                ],
+                " winter-time'."
+            ]
+        }
+    ]
+}
\ No newline at end of file