From 2f8cbacc6ea9dddfccd6038f90fc0b1552d186b0 Mon Sep 17 00:00:00 2001
From: eliott <eliott.sammier@tetras-libre.fr>
Date: Mon, 1 Jul 2024 17:36:07 +0200
Subject: [PATCH] Revamp correct indicator to include comments

- Add custom question properties for comments, which may be defined in the JSON
- New indicator block, styled with Sass, to hold the comment
---
 macao/assets/_custom.scss                    | 42 ++++++++++++++++++++
 macao/assets/quiz.js                         | 38 +++++++++++-------
 macao/assets/style.css                       | 19 ---------
 macao/layouts/partials/docs/inject/head.html |  3 --
 macao/layouts/shortcodes/quiz.html           |  5 ++-
 5 files changed, 70 insertions(+), 37 deletions(-)
 create mode 100644 macao/assets/_custom.scss
 delete mode 100644 macao/assets/style.css

diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss
new file mode 100644
index 0000000..b9827fc
--- /dev/null
+++ b/macao/assets/_custom.scss
@@ -0,0 +1,42 @@
+#correct-indic {
+  border-radius: 8px;
+  padding: 16px;
+
+  p {
+    margin: 0;
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+  &.correct {
+    background: #dfd;
+
+    .label::before {
+      content: "Correct";
+      color: var(--sd-rating-good-color);
+    }
+  }
+
+  &.incorrect {
+    background: #fdd;
+  }
+
+  .label::before {
+    content: "Incorrect";
+    color: var(--sd-rating-bad-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
diff --git a/macao/assets/quiz.js b/macao/assets/quiz.js
index 940722e..1da9294 100644
--- a/macao/assets/quiz.js
+++ b/macao/assets/quiz.js
@@ -1,20 +1,34 @@
-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) {
+    let indicNode = document.getElementById("correct-indic");
+    let commentNode = indicNode.querySelector(".comment")
+    if (question.isAnswerCorrect()) {
+        indicNode.className = "correct";
+        commentNode.innerText = question.getPropertyValue("correctComment", "");
     } else {
-        indic.innerText = "Incorrect";
-        indic.classList.remove("correct");
+        indicNode.className = "incorrect";
+        commentNode.innerText = question.getPropertyValue("incorrectComment", "");
     }
+    console.log("question = ", question);
+    console.log("  correct = ", question.isAnswerCorrect());
 }
 
 $(function () {
     // 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);
 
@@ -23,11 +37,7 @@ $(function () {
         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());
-            });
+            checkQuestion(survey.currentPage.questions[0]);
         },
         css: "nav-button",
         innerCss: "sd-btn nav-input"
diff --git a/macao/assets/style.css b/macao/assets/style.css
deleted file mode 100644
index 5f8db8d..0000000
--- a/macao/assets/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-#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
diff --git a/macao/layouts/partials/docs/inject/head.html b/macao/layouts/partials/docs/inject/head.html
index 3024f5e..fb64e20 100644
--- a/macao/layouts/partials/docs/inject/head.html
+++ b/macao/layouts/partials/docs/inject/head.html
@@ -1,7 +1,4 @@
 {{/* 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" }}
diff --git a/macao/layouts/shortcodes/quiz.html b/macao/layouts/shortcodes/quiz.html
index 485648c..f185f5b 100644
--- a/macao/layouts/shortcodes/quiz.html
+++ b/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>
-- 
GitLab