Skip to content
Snippets Groups Projects
Commit 147b5593 authored by David Rouquet's avatar David Rouquet
Browse files

Ajout boutton Corrigé si helpCommment dans le json

Ajout d'un boutton Corrigé à la question si helpCommment est dans le json
parent a15084a7
No related branches found
No related tags found
No related merge requests found
Pipeline #2069 passed
...@@ -3,22 +3,17 @@ ...@@ -3,22 +3,17 @@
*/ */
function checkAllQuestions(questions, surveyConfig, converter) { function checkAllQuestions(questions, surveyConfig, converter) {
let allCorrect = true; let allCorrect = true;
questions.forEach((question) => { questions.forEach((question) => {
if (!question.isAnswerCorrect()) { if (!question.isAnswerCorrect()) {
allCorrect = false; allCorrect = false;
} }
}); });
if (allCorrect) { if (allCorrect) {
correctIndic.node.className = "correct"; correctIndic.node.className = "correct";
// convert \n\n into <br> tags for HTML rendering
surveyConfig.correctComment = surveyConfig.correctComment.replace(/\n\n/g, "<br>"); surveyConfig.correctComment = surveyConfig.correctComment.replace(/\n\n/g, "<br>");
correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.correctComment) || "All answers are correct!"; correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.correctComment) || "All answers are correct!";
} else { } else {
correctIndic.node.className = "incorrect"; correctIndic.node.className = "incorrect";
// convert \n\n into <br> tags for HTML rendering
surveyConfig.incorrectComment = surveyConfig.incorrectComment.replace(/\n\n/g, "<br>"); surveyConfig.incorrectComment = surveyConfig.incorrectComment.replace(/\n\n/g, "<br>");
correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.incorrectComment) || "Some answers are incorrect!"; correctIndic.commentNode.innerHTML = converter.renderInline(surveyConfig.incorrectComment) || "Some answers are incorrect!";
} }
...@@ -31,11 +26,27 @@ function clearAllQuestions(questions) { ...@@ -31,11 +26,27 @@ function clearAllQuestions(questions) {
questions.forEach((question) => { questions.forEach((question) => {
question.value = undefined; question.value = undefined;
}); });
correctIndic.node.className = "hidden"; correctIndic.node.className = "hidden";
correctIndic.commentNode.innerHTML = ""; 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; let correctIndic;
$(function () { $(function () {
...@@ -45,14 +56,25 @@ $(function () { ...@@ -45,14 +56,25 @@ $(function () {
}; };
Survey.JsonObject.metaData.addProperty("question", { 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 // Load survey model from JSON
const survey = new Survey.Model(jsonStatic); const survey = new Survey.Model(jsonStatic);
const questions = survey.getAllQuestions(); const questions = survey.getAllQuestions();
if (questions.length === 1) { if (questions.length === 1) {
console.log("Survey has only one question"); console.log("Survey has only one question");
console.log(questions[0]); console.log(questions[0]);
...@@ -68,12 +90,7 @@ $(function () { ...@@ -68,12 +90,7 @@ $(function () {
}); });
survey.onTextMarkdown.add((_, options) => { survey.onTextMarkdown.add((_, options) => {
// Convert Markdown to HTML
let str = converter.renderInline(options.text); let str = converter.renderInline(options.text);
// ...
// Sanitize the HTML markup using a third-party library here
// ...
// Set HTML markup to render
options.html = str; options.html = str;
}); });
...@@ -86,8 +103,16 @@ $(function () { ...@@ -86,8 +103,16 @@ $(function () {
$(options.htmlElement).addClass("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 // Add "Check answers" button
survey.addNavigationItem({ survey.addNavigationItem({
...@@ -111,16 +136,15 @@ $(function () { ...@@ -111,16 +136,15 @@ $(function () {
innerCss: "sd-btn nav-input" 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 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"] = primColor;
customTheme.cssVariables["--sjs-primary-backcolor-dark"] = primColor; customTheme.cssVariables["--sjs-primary-backcolor-dark"] = primColor;
// Apply theme // Apply theme
survey.applyTheme(SurveyTheme.DefaultLightPanelless); survey.applyTheme(SurveyTheme.DefaultLightPanelless);
console.log("Survey theme applied", SurveyTheme.DefaultLightPanelless); console.log("Survey theme applied", SurveyTheme.DefaultLightPanelless);
survey.showCompleteButton = false; survey.showCompleteButton = false;
// Inflate the survey in the page // Inflate the survey in the page
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment