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

Revamp correct indicator to include comments
2f8cbacc · Eliott Sammier · 37c08da8 · 2f8cbacc · 2f8cbacc · 37c08da8
Commit 2f8cbacc authored Jul 1, 2024 by Eliott Sammier
--- a/macao/assets/_custom.scss
+++ b/macao/assets/_custom.scss
+#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
--- a/macao/assets/quiz.js
+++ b/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) {
+    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"

--- a/macao/assets/style.css
+++ b/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
--- a/macao/layouts/partials/docs/inject/head.html
+++ b/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" }}

--- 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>