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