Fix CSS for gaps, add "Check answers" button

src/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Survey-Quizgets example</title>
 
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
     <link rel="stylesheet" href="style.css">
     <!-- SurveyJS & dependencies-->
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"

src/index.js

@@ -9,6 +9,19 @@ function main() {
 
     let survey = new Survey.Model(json);
 
+    // Add "Check answers" button
+    survey.addNavigationItem({
+        id: "sv-nav-check",
+        title: "Check",
+        action: () => {
+            survey.currentPage.questions.forEach((question) => {
+                console.log("%o: correct = %o\n\tvalue         = %o\n\tcorrectAnswer = %o", question.name, question.isAnswerCorrect(), question.value, question.correctAnswer);
+            });
+        },
+        css: "nav-button",
+        innerCss: "sd-btn sd-btn--action nav-input"
+    });
+
     // Inflate the survey in the page
     $("#surveyContainer").Survey({model: survey});
 }
\ No newline at end of file

src/style.css

+/* Hide "Complete survey" button */
+#sv-nav-complete {
+    display: none;
+}
+
+/* Tweak SurveyJS' default style for our custom widgets */
+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