diff --git a/macao/assets/quiz.js b/macao/assets/quiz.js index 5a3e99178718d3078e2a1f52275cbdafd23a6548..3a841dcbfcbd01ed2cecd4f1946ab8f10ee5d275 100644 --- a/macao/assets/quiz.js +++ b/macao/assets/quiz.js @@ -3,22 +3,17 @@ */ function checkAllQuestions(questions, surveyConfig, converter) { let allCorrect = true; - questions.forEach((question) => { if (!question.isAnswerCorrect()) { allCorrect = false; } }); - if (allCorrect) { correctIndic.node.className = "correct"; - // convert \n\n into <br> tags for HTML rendering surveyConfig.correctComment = surveyConfig.correctComment.replace(/\n\n/g, "<br>"); - correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.correctComment) || "All answers are correct!"; } else { correctIndic.node.className = "incorrect"; - // convert \n\n into <br> tags for HTML rendering surveyConfig.incorrectComment = surveyConfig.incorrectComment.replace(/\n\n/g, "<br>"); correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.incorrectComment) || "Some answers are incorrect!"; } @@ -31,11 +26,27 @@ function clearAllQuestions(questions) { questions.forEach((question) => { question.value = undefined; }); - correctIndic.node.className = "hidden"; correctIndic.commentNode.innerHTML = ""; } +/** + * Toggles the visibility of the help comment for a question. + */ +function toggleHelpComment(question, htmlElement) { + const helpCommentElement = htmlElement.querySelector('.help-comment'); + if (helpCommentElement) { + // If help comment is already shown, remove it + helpCommentElement.remove(); + } else { + // Otherwise, create and show the help comment + const newHelpCommentElement = document.createElement('div'); + newHelpCommentElement.className = 'help-comment'; + newHelpCommentElement.innerHTML = question.helpComment; + htmlElement.appendChild(newHelpCommentElement); + } +} + let correctIndic; $(function () { @@ -45,19 +56,30 @@ $(function () { }; Survey.JsonObject.metaData.addProperty("question", { - name: "customFormat", type: "text", category: "general", default: "", visibleIndex: 0, + name: "customFormat", + type: "text", + category: "general", + default: "", + visibleIndex: 0, }); + Survey.JsonObject.metaData.addProperty("question", { + name: "helpComment", + type: "text", + category: "general", + default: "", + visibleIndex: 0, + }); // Load survey model from JSON const survey = new Survey.Model(jsonStatic); - const questions = survey.getAllQuestions(); - if(questions.length === 1) { + + if (questions.length === 1) { console.log("Survey has only one question"); console.log(questions[0]); const regex = /pg\d\d\d/g; - if(questions[0].title.match(regex)) { + if (questions[0].title.match(regex)) { questions[0].titleLocation = "hidden"; } } @@ -68,12 +90,7 @@ $(function () { }); survey.onTextMarkdown.add((_, options) => { - // Convert Markdown to HTML let str = converter.renderInline(options.text); - // ... - // Sanitize the HTML markup using a third-party library here - // ... - // Set HTML markup to render options.html = str; }); @@ -82,12 +99,20 @@ $(function () { if (options.question.customFormat === "one_line") { $(options.htmlElement).addClass("one-line"); } - if(options.question.customFormat === "hide_disabled-checkboxes") { + if (options.question.customFormat === "hide_disabled-checkboxes") { $(options.htmlElement).addClass("hide-disabled-checkboxes"); } } - }); + // Add "Corrigé" button if helpComment is present + if (options.question.helpComment) { + const helpButton = document.createElement('button'); + helpButton.innerHTML = 'Corrigé'; + helpButton.className = 'sd-btn sd-btn--action nav-input'; // Apply the specified class + helpButton.onclick = () => toggleHelpComment(options.question, options.htmlElement); + options.htmlElement.appendChild(helpButton); + } + }); // Add "Check answers" button survey.addNavigationItem({ @@ -111,16 +136,15 @@ $(function () { innerCss: "sd-btn nav-input" }); - // Ugly tricks to avoid to create a new theme + // Ugly tricks to avoid creating a new theme const customTheme = SurveyTheme.DefaultLightPanelless; - const primColor = getComputedStyle(document.documentElement,null).getPropertyValue('--macao-primary-color'); - + const primColor = getComputedStyle(document.documentElement, null).getPropertyValue('--macao-primary-color'); customTheme.cssVariables["--sjs-primary-backcolor"] = primColor; customTheme.cssVariables["--sjs-primary-backcolor-dark"] = primColor; + // Apply theme survey.applyTheme(SurveyTheme.DefaultLightPanelless); console.log("Survey theme applied", SurveyTheme.DefaultLightPanelless); - survey.showCompleteButton = false; // Inflate the survey in the page @@ -128,5 +152,5 @@ $(function () { }); $(document).ready(function() { - $('button:contains("Play")').html('<i class="fa-solid fa-play"></i> Écouter').addClass('btn-play').prop('title','Écouter'); + $('button:contains("Play")').html('<i class="fa-solid fa-play"></i> Écouter').addClass('btn-play').prop('title', 'Écouter'); });