Test question verification with matrix type

macao/content/activities/861/index.md

@@ -4,9 +4,5 @@ title = "Repérer les syllabes orales"
 
 [Change page](../381)
 
-<div id="STY_question" class="STY_question" style="  "><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt" align="">En
-        cliquant sur la flèche, combien de <a class="STY_lienComt" href="javascript:CRS_afficherDetail('1')"
-                                              onclick="enrPosClic(event,'1')">syllabes</a> entendez-vous pour chacun
-        des  3 mots ci-dessous ? <br>Pour chaque mot, écouter et sélectionnez 1, 2, 3, 4 ou 5 selon le nombre de
-        syllabes entendues. </p>
-    </div>
\ No newline at end of file
+En cliquant sur la flèche, combien de [syllabes]() entendez-vous pour chacun des 3 mots ci-dessous ?  
+Pour chaque mot, écouter et sélectionnez 1, 2, 3, 4 ou 5 selon le nombre de syllabes entendues.

macao/content/activities/861/survey.json

@@ -4,42 +4,45 @@
             "type": "matrix",
             "name": "question1",
             "title": "Nombre de syllabes",
+            "hideNumber": true,
             "columns": [
                 {
-                    "value": "Column 1",
+                    "value": 1,
                     "text": "1"
                 },
                 {
-                    "value": "Column 2",
+                    "value": 2,
                     "text": "2"
                 },
                 {
-                    "value": "Column 3",
+                    "value": 3,
                     "text": "3"
                 },
                 {
-                    "value": "Column 4",
+                    "value": 4,
                     "text": "4"
                 },
                 {
-                    "value": "Column 5",
+                    "value": 5,
                     "text": "5"
                 }
             ],
             "rows": [
                 {
-                    "value": "Row 1",
-                    "text": "every3.swf"
+                    "text": "every3"
                 },
                 {
-                    "value": "Row 2",
-                    "text": "interresting1.swf"
+                    "text": "interresting1"
                 },
                 {
-                    "value": "Row 3",
-                    "text": "dangerous1.swf"
+                    "text": "dangerous1"
+                }
+            ],
+            "correctAnswer": {
+                "every3": 2,
+                "interresting1": 3,
+                "dangerous1": 2
             }
-            ]
         }
     ]
 }
\ No newline at end of file

macao/static/index.js

+function showCorrectIndic(correct) {
+    indic = document.getElementById("correct-indic");
+    if (correct === undefined) {
+        indic.innerText = "";
+    } else if (correct) {
+        indic.innerText = "Correct";
+        indic.classList.add("correct");
+    } else {
+        indic.innerText = "Incorrect";
+        indic.classList.remove("correct");
+    }
+}
+
 $(function () {
-    $("#surveyContainer").Survey({ model: new Survey.Model(jsonStatic) });
-});
+    survey = new Survey.Model(jsonStatic);
+    $("#surveyContainer").Survey({ model: survey });
 
-// Tests bouton vérification manuelle
+    survey.addNavigationItem({
+        id: "sv-nav-clear-page",
+        title: "Check",
+        action: () => {
+            survey.currentPage.questions.forEach((question) => {
+                console.log("question = ", question);
+                console.log("  correct = ", question.isAnswerCorrect());
+                showCorrectIndic(question.isAnswerCorrect());
+            });
+        },
+        css: "nav-button",
+        innerCss: "sd-btn nav-input"
+    });
 
-// survey.addNavigationItem({
-//     id: "sv-nav-clear-page",
-//     title: "Check",
-//     action: () => {
-//         survey.currentPage.questions.forEach((question) => {
-//           for (answer of question.choices) {
-//             if (answer.id === question.correctAnswer) {
-//               console.log(answer)
-//             }
-//           }
-//           //  let correct = question.isAnswerCorrect();
-//           //  console.log(correct)
-//           console.log(question)
-//         });
-//     },
-//     css: "nav-button",
-//     innerCss: "sd-btn nav-input"
-// });
+    survey.onValueChanged.add((_, options) => {
+        console.log(options)
+    });
 
-// survey.onValueChanged.add((_, options) => {
-//   console.log(options)
-// });
\ No newline at end of file
+});

macao/themes/hugo-pure/assets/main.css

@@ -174,6 +174,17 @@ a.post-tag:hover { text-decoration: none; }
     { display: none; }
 }
 
+
+
+/******** Survey stuff **************/
+#correct-indic {
+    color: var(--sd-rating-bad-color);
+    font-weight: bold;
+}
+#correct-indic.correct {
+    color: var(--sd-rating-good-color);
+} 
+
 /******************************************************************************/
 /* light mode colors */
 /******************************************************************************/

macao/themes/hugo-pure/layouts/partials/page.html

@@ -77,6 +77,7 @@
 </div>
 {{ with $p.Resources.GetMatch "survey.json" }}
 <div id="surveyContainer"></div>
+<p id="correct-indic"></p>
 <script type="text/javascript">
     const jsonStatic = {{ .Content | safeJS }};
     </script>