From 7cb614e4e53112f9f1e69f92082233e8a84185dc Mon Sep 17 00:00:00 2001 From: eliott <eliott.sammier@tetras-libre.fr> Date: Mon, 8 Jul 2024 11:20:29 +0200 Subject: [PATCH] Fix CSS for gaps, add "Check answers" button --- src/index.html | 1 + src/index.js | 15 ++++++++++++++- src/style.css | 15 +++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/style.css diff --git a/src/index.html b/src/index.html index 128b793..54a20f1 100644 --- a/src/index.html +++ b/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" diff --git a/src/index.js b/src/index.js index c4cf95d..5de1494 100644 --- a/src/index.js +++ b/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 diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..d201ece --- /dev/null +++ b/src/style.css @@ -0,0 +1,15 @@ +/* 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 -- GitLab