diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss index b9827fc578e45dc9c456b3158b163e1d4e4d33fd..2440a9960ed02eb70b22d2d773618169f777adb9 100644 --- a/macao/assets/_custom.scss +++ b/macao/assets/_custom.scss @@ -1,6 +1,12 @@ #correct-indic { border-radius: 8px; padding: 16px; + transition: opacity 0.1s ease-in-out; + + &.hidden { + display: block; + opacity: 0; + } p { margin: 0; @@ -13,8 +19,7 @@ &.correct { background: #dfd; - .label::before { - content: "Correct"; + .label { color: var(--sd-rating-good-color); } } @@ -23,12 +28,14 @@ background: #fdd; } - .label::before { - content: "Incorrect"; + .label { color: var(--sd-rating-bad-color); } } +#sv-nav-complete { + display: none; +} p#gapfill-container { white-space: pre-wrap; diff --git a/macao/assets/quiz.js b/macao/assets/quiz.js index 1da92949ec14eeb3b16268f36e2d1588be724f4d..4333f38fafc306375f00796e373530ec64ce220f 100644 --- a/macao/assets/quiz.js +++ b/macao/assets/quiz.js @@ -2,20 +2,33 @@ * 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", ""); + correctIndic.node.className = "correct" + correctIndic.labelNode.innerText = "Correct"; + correctIndic.commentNode.innerText = question.getPropertyValue("correctComment", ""); } else { - indicNode.className = "incorrect"; - commentNode.innerText = question.getPropertyValue("incorrectComment", ""); + 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); @@ -34,12 +47,22 @@ $(function () { // Add "Check answers" button survey.addNavigationItem({ - id: "sv-nav-clear-page", - title: "Check", + id: "sv-nav-check", + title: "Vérifier", action: () => { 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" });