Merge branch '3-qcu-features'

macao/assets/_custom.scss

+#correct-indic {
+  border-radius: 8px;
+  padding: 16px;
+  transition: opacity 0.1s ease-in-out;
+
+  &.hidden {
+    display: block;
+    opacity: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+  &.correct {
+    background: #dfd;
+
+    .label {
+      color: var(--sd-rating-good-color);
+    }
+  }
+
+  &.incorrect {
+    background: #fdd;
+  }
+
+  .label {
+    color: var(--sd-rating-bad-color);
+  }
+}
+
+#sv-nav-complete {
+  display: none;
+}
+
+p#gapfill-container {
+  white-space: pre-wrap;
+  line-height: 3em;
+}
+
+select.sd-dropdown.inline-dropdown {
+  display: inline-block;
+  width: fit-content;
+  padding: 8px;
+}
\ No newline at end of file

macao/assets/quiz.js

-function showCorrectIndic(correct) {
-    let indic = document.getElementById("correct-indic");
-    if (correct === undefined) {
-        indic.innerText = "";
-    } else if (correct) {
-        indic.innerText = "Correct";
-        indic.classList.add("correct");
+/**
+ * Checks whether a question is correct, and update the correct indicator accordingly.
+ */
+function checkQuestion(question) {
+    if (question.isAnswerCorrect()) {
+        correctIndic.node.className = "correct"
+        correctIndic.labelNode.innerText = "Correct";
+        correctIndic.commentNode.innerText = question.getPropertyValue("correctComment", "");
     } else {
-        indic.innerText = "Incorrect";
-        indic.classList.remove("correct");
+        correctIndic.node.className = "incorrect";
+        correctIndic.labelNode.innerText = "Incorrect";
+        correctIndic.commentNode.innerText = question.getPropertyValue("incorrectComment", "");
     }
+    console.log("question = ", question);
+    console.log("  correct = ", question.isAnswerCorrect());
+}
+
+function clearQuestion(question) {
+    question.value = undefined;
+    correctIndic.node.className = "hidden";
 }
 
+let correctIndic;
+
 $(function () {
+    correctIndic = {
+        node: document.getElementById("correct-indic"),
+        commentNode: document.querySelector("#correct-indic .comment"),
+        labelNode: document.querySelector("#correct-indic .label")
+    };
+
     // Register our custom question types
     Survey.CustomWidgetCollection.Instance.add(gapfillSelectWidget, gapfillSelectWidget.name);
 
+    // Register custom properties for quiz correction comments
+    Survey.Serializer.addProperty("question", {
+        name: "correctComment",
+        type: "text"
+    });
+    Survey.Serializer.addProperty("question", {
+        name: "incorrectComment",
+        type: "text"
+    });
+
     // Load survey model from JSON
     const survey = new Survey.Model(jsonStatic);
 
     // Add "Check answers" button
     survey.addNavigationItem({
-        id: "sv-nav-clear-page",
-        title: "Check",
+        id: "sv-nav-check",
+        title: "Vérifier",
         action: () => {
-            survey.currentPage.questions.forEach((question) => {
-                console.log("question = ", question);
-                console.log("  correct = ", question.isAnswerCorrect());
-                showCorrectIndic(question.isAnswerCorrect());
+            checkQuestion(survey.currentPage.questions[0]);
+        },
+        css: "nav-button",
+        innerCss: "sd-btn sd-btn--action nav-input"
     });
+    // Add "Clear answers" button
+    survey.addNavigationItem({
+        id: "sv-nav-clear",
+        title: "Effacer",
+        action: () => {
+            clearQuestion(survey.currentPage.questions[0]);
         },
         css: "nav-button",
         innerCss: "sd-btn nav-input"

macao/assets/style.css

-#correct-indic {
-    color: var(--sd-rating-bad-color);
-    font-weight: bold;
-}
-
-#correct-indic.correct {
-    color: var(--sd-rating-good-color);
-}
-
-p#gapfill-container {
-    white-space: pre-wrap;
-    line-height: 3em;
-}
-
-select.sd-dropdown.inline-dropdown {
-    display: inline-block;
-    width: fit-content;
-    padding: 8px;
-}
\ No newline at end of file

macao/layouts/partials/docs/inject/head.html

 {{/* Included by the theme in the <head> tag */}}
-{{/* Get CSS as resource and minify */}}
-{{- $css := resources.Get "style.css" | resources.Minify }}
-<link rel="stylesheet" href="{{- $css.RelPermalink -}}">
 
 {{/* if a quiz.json exists in the page resources, load SurveyJS */}}
 {{ with .Resources.GetMatch "quiz.json" }}

macao/layouts/shortcodes/quiz.html

@@ -3,7 +3,10 @@ and inserts a SurveyJS quiz using this JSON */ -}}
 
 {{ with $.Page.Resources.GetMatch "quiz.json" }}
     <div id="surveyContainer"></div>
-    <p id="correct-indic"></p>
+    <div id="correct-indic" class="hidden">
+        <p class="label"></p>
+        <p class="comment"></p>
+    </div>
     <script type="text/javascript">
         const jsonStatic = {{ .Content | safeJS }};
     </script>