From c0265c2864235c49b0ecdfd1e2f8a6519dd57c04 Mon Sep 17 00:00:00 2001 From: eliott <eliott.sammier@tetras-libre.fr> Date: Tue, 2 Jul 2024 11:47:16 +0200 Subject: [PATCH] Replace default nav buttons --- macao/assets/_custom.scss | 15 +++++++++++---- macao/assets/quiz.js | 39 +++++++++++++++++++++++++++++++-------- 2 files changed, 42 insertions(+), 12 deletions(-) diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss index b9827fc..2440a99 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 1da9294..4333f38 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" }); -- GitLab