Replace default nav buttons

macao/assets/_custom.scss

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

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"
     });