diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss new file mode 100644 index 0000000000000000000000000000000000000000..b9827fc578e45dc9c456b3158b163e1d4e4d33fd --- /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 940722eeba2d55a714bfb0cb133dbfecef589a5a..1da92949ec14eeb3b16268f36e2d1588be724f4d 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 5f8db8d9aff0e5631b32493a8d7d16a830628b35..0000000000000000000000000000000000000000 --- 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 3024f5e71eb122d8abc9bb4f017599a0f1713579..fb64e2009f6e6d1d680c3fc44e5f6e1b0af1080d 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 485648ccca20d3200eb9dda4e1461b04a6194ee3..f185f5ba08610fd2b64e567a82428fe8ffd8b38e 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>