quiz.js

/**
 * Checks whether all questions are correctly answered and displays the overall feedback.
 */
function checkAllQuestions(questions, surveyConfig, converter) {
    let allCorrect = true;
    questions.forEach((question) => {
        if (!question.isAnswerCorrect()) {
            allCorrect = false;
        }
    });
    if (allCorrect) {
        correctIndic.node.className = "correct";
        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";
        surveyConfig.incorrectComment = surveyConfig.incorrectComment.replace(/\n\n/g, "<br>");
        correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.incorrectComment) || "Some answers are incorrect!";
    }
}

/**
 * Clears all answers and resets the feedback indicator.
 */
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 () {
    correctIndic = {
        node: document.getElementById("correct-indic"),
        commentNode: document.querySelector("#correct-indic .comment"),
    };

    Survey.JsonObject.metaData.addProperty("question", {
        name: "customFormat",
        type: "text",
        category: "general",
        default: "",
        visibleIndex: 0,
    });

    Survey.JsonObject.metaData.addProperty("survey", {
        name: "isSurveySummaryVisible",
        type: "boolean",
        category: "general",
        default: "false",
        visibleIndex: 0,
    });


    Survey.JsonObject.metaData.addProperty("question", {
        name: "helpComment",
        type: "text",
        category: "general",
        default: "",
        visibleIndex: 0,
    });

    // Add compComment to the metadata
    Survey.JsonObject.metaData.addProperty("question", {
        name: "compComment",
        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) {
        console.log("Survey has only one question");
        console.log(questions[0]);
        const regex = /pg\d\d\d/g;
        if (questions[0].title.match(regex)) {
            questions[0].titleLocation = "hidden";
        }
    }

    // Instantiate `markdown-it`
    const converter = markdownit({
        html: true // Support HTML tags in the source (unsafe, see documentation)
    });

    survey.onTextMarkdown.add((_, options) => {
        let str = converter.renderInline(options.text);
        options.html = str;
    });

    survey.onAfterRenderQuestion.add((survey, options) => {
        if (options.question.customFormat) {
            if (options.question.customFormat === "one_line") {
                $(options.htmlElement).addClass("one-line");
            }
            if (options.question.customFormat === "hide_disabled-checkboxes") {
                $(options.htmlElement).addClass("hide-disabled-checkboxes");
            }
        }

        // Display compComment if present
        if (options.question.compComment) {
            const compCommentElement = document.createElement('div');
            compCommentElement.className = 'comp-comment';
            compCommentElement.innerHTML = options.question.compComment;
            options.htmlElement.appendChild(compCommentElement);
        }

        // 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';
            helpButton.onclick = () => toggleHelpComment(options.question, options.htmlElement);
            options.htmlElement.appendChild(helpButton);
        }

        if( options.question.getType() === "dropdown" ) {
            // Very ugly fix to avoid sliding dropdown on focus
            $('.book-article').css({
                'will-change' : 'unset',
                'transition': 'none',
            });
            $('.book-page').css({
                'will-change' : 'unset',
                'transition': 'none',
            });
        }
    });

    // Add "Check answers" button
    survey.addNavigationItem({
        id: "sv-nav-check",
        title: "Vérifier",
        action: () => {
            checkAllQuestions(survey.currentPage.questions, jsonStatic, converter);
        },
        css: "nav-button",
        innerCss: "sd-btn sd-btn--action nav-input"
    });

    // Add "Clear answers" button
    survey.addNavigationItem({
        id: "sv-nav-clear",
        title: "Effacer",
        action: () => {
            clearAllQuestions(survey.currentPage.questions);
        },
        css: "nav-button",
        innerCss: "sd-btn nav-input"
    });

    survey.onComplete.add(function (sender) {

          if (sender.isSurveySummaryVisible) {
              console.log("Survey summary is visible");
              const userData = sender.data;
              const summaryDiv = document.createElement("div");
              summaryDiv.id = "surveySummary";
              let html = "<h3>Your Results:</h3><ul>";

              sender.getAllQuestions().forEach(q => {
                  const userAnswer = userData[q.name];
                  const correctAnswer = q.correctAnswer;
                  const isCorrect = userAnswer === correctAnswer;
                  html += `<li><b>${q.title}</b><br>
                    Your answer: ${userAnswer} <br>
                    Correct answer: ${correctAnswer} <br>
                    <span style="color:${isCorrect ? 'green' : 'red'};">
                      ${isCorrect ? "Correct" : "Incorrect"}
                    </span>
                  </li><br>`;
              });

              html += "</ul>";
              summaryDiv.innerHTML = html;

              // Append the summary after the survey container
              document.getElementById("surveyContainer").appendChild(summaryDiv);

          }
      });



    // Ugly tricks to avoid creating a new theme
    const customTheme = SurveyTheme.DefaultLightPanelless;
    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
    $("#surveyContainer").Survey({ model: survey });
});

$(document).ready(function() {
    $('button:contains("Play")').html('<i class="fa-solid fa-play"></i> Écouter').addClass('btn-play').prop('title', 'Écouter');
});