+ *
+ * The question
+ *
+ * - the answer
+ * - the good answer
+ *
+ *
+ *
+ *
+ *
+ * With an explanation inside another custom block most of time a custom-block-neutral
+ *
+ *
+ *
+ * The question
+ *
+ * - the answer
+ * - the good answer
+ *
+ *
+ * Explanation
+ * a formatted text
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * Note that the correction MAY be inside the last li due to the way custom-block plugin works, this is not a bug
+ * */
+
+var currentURL = window.location.href;
+
+if (currentURL.includes("/contenus/")) {
+
+ let lastListItems = document.querySelectorAll('.custom-block-quizz ul li:last-child');
+
+ for (let i = 0; i < lastListItems.length; i++) {
+
+ // Create a new div element
+ let newDiv = document.createElement('div');
+ newDiv.classList.add('explanation_on')
+
+ // Set the text content of the div to match the text content of the last list item
+ newDiv.innerHTML = 'Explication : ' + lastListItems[i].textContent;
+
+ // Replace the last list item with the new div element
+ lastListItems[i].parentNode.replaceChild(newDiv, lastListItems[i]);
+ }
+
+
+}
+
+if (currentURL.includes("/tutoriels/")) {
+
+ let index = 0
+
+ function extractAnswer(inputDomElementList, answers) {
+
+ let idli = 0
+ inputDomElementList.forEach((rb) => {
+
+ const ulWrapperElement = rb.parentElement.parentElement
+ // we give the ui an id to find the element in a more effective way later when the users answer the questions
+ if (!ulWrapperElement.getAttribute('id')) {
+ ulWrapperElement.setAttribute('id', 'id-' + (index++))
+ }
+
+ rb.setAttribute('name', ulWrapperElement.getAttribute('id'))
+ rb.setAttribute('id', ulWrapperElement.getAttribute('id') + '-' + idli)
+ idli++
+
+ const questionBlock = ulWrapperElement.parentElement.parentElement
+ questionBlock.setAttribute('data-name', rb.getAttribute('name'))
+ if (!answers[ulWrapperElement.getAttribute('id')]) {
+ answers[ulWrapperElement.getAttribute('id')] = [rb.checked]
+ } else {
+ answers[ulWrapperElement.getAttribute('id')].push(rb.checked)
+ }
+ rb.setAttribute('value', answers[ulWrapperElement.getAttribute('id')].length - 1)
+ rb.disabled = false
+ rb.checked = false
+ })
+ }
+
+ /**
+ * @param answers the answer dictionary, it will be modified by the process
+ */
+ function initializeCheckboxes(answers) {
+
+ ExplanationMaker()
+
+ const checkboxes = document.querySelectorAll('.quizz ul li input[type=checkbox]')
+ extractAnswer(checkboxes, answers)
+
+ AnswersAsLabels()
+
+ }
+
+ function AnswersAsLabels() {
+
+ var checkboxli = document.querySelectorAll('.quizz ul li')
+
+ checkboxli.forEach((li) => {
+ var input = li.querySelector('input[type=checkbox]')
+ var label = document.createElement('label')
+ label.setAttribute('for', input.getAttribute('id'))
+ label.classList.add('answer-label')
+ label.innerHTML = li.querySelector('span.math') ? li.querySelector('span.math').innerHTML : li.innerText
+ li.textContent = ''
+ li.appendChild(input)
+ li.appendChild(label)
+ })
+ }
+
+ function ExplanationMaker() {
+ // add explanation to all questions
+ document.querySelectorAll('div.custom-block-quizz').forEach(quizzDiv => {
+
+ const ul = quizzDiv.querySelector('ul')
+ const lastLi = ul.lastElementChild
+ const explanationText = 'Explication : ' + lastLi.innerText
+ const explanation = document.createElement('div')
+ explanation.classList.add('explanation_off')
+ explanation.innerHTML = explanationText
+ lastLi.parentNode.removeChild(lastLi)
+ quizzDiv.querySelector('div.custom-block-body').appendChild(explanation)
+
+ })
+ }
+
+ const initializePipeline = [initializeCheckboxes]
+
+ function computeForm(formdata, answers) {
+ const badAnswers = []
+ const allAnswerNames = []
+ for (const entry of formdata.entries()) {
+ const name = entry[0]
+ const values = parseInt(entry[1], 10)
+ allAnswerNames.push(name)
+ if (!answers[name]) {
+ continue
+ } else {
+ // for poc we assume we only deal with lists
+ if (!answers[name][values]) {
+ badAnswers.push({
+ name: name,
+ value: values
+ })
+ }
+ }
+ }
+ return [badAnswers, allAnswerNames]
+ }
+
+ function markBadAnswers(form, names, answers) {
+
+ const toAdd = []
+
+ Object.keys(answers).forEach(answer => {
+
+ const inputs = form.querySelectorAll(`#${answer} input`);
+
+
+ let numChecked = 0;
+ inputs.forEach(input => {
+ if (input.hasAttribute('checked')) {
+ input.parentElement.classList.add('answer-good')
+ numChecked++;
+ }
+ });
+
+ // question with more than one correct answer
+ if (numChecked > 1) {
+
+ let AnsweredWell = true
+ answers[answer].forEach((value, index) => {
+ const inputAnswer = document.querySelector(`#${answer} input[value="${index}"]`)
+ if (value && !inputAnswer.checked) {
+ AnsweredWell = false
+ }
+ })
+
+ const divquizz = form.querySelector(`div[data-name="${answer}"]`)
+ if (!AnsweredWell) {
+ divquizz.classList.add('quizz-bad')
+ const icon = iconMaker(false)
+ divquizz.querySelector('div.custom-block-body').appendChild(icon);
+ } else {
+ divquizz.classList.add('quizz-good')
+ }
+ }
+ })
+
+ names.forEach(({ name }) => {
+
+ form.querySelectorAll('input[name="' + name + '"]').forEach(field => {
+
+
+ if (answers[name][parseInt(field.getAttribute('value'), 10)] && !field.checked) {
+
+ toAdd.push({
+ name: name,
+ value: field.getAttribute('value')
+ })
+ }
+ })
+
+ const divquizz = form.querySelector(`.custom-block[data-name=${name}]`)
+ if (!divquizz.classList.contains('quizz-good')) {
+
+ divquizz.classList.add('quizz-bad')
+ // Create a new icon element
+ const icon = iconMaker(false)
+ divquizz.querySelector('div.custom-block-body').appendChild(icon);
+ }
+ })
+
+ names.forEach(({
+ name,
+ value
+ }) => {
+
+ form.querySelector(`input[type=checkbox][name="${name}"][value="${value}"]`).parentElement.classList.add('answer-bad')
+ })
+
+ toAdd.forEach(name => names.push(name))
+ }
+
+ function getWantedHeading(questionNode, nodeName, attr) {
+ let potentialHeading = questionNode
+ while (potentialHeading[attr] &&
+ potentialHeading.nodeName !== nodeName.toUpperCase()) {
+ potentialHeading = potentialHeading[attr]
+ }
+ if (potentialHeading.nodeName !== nodeName.toUpperCase()) {
+ return null
+ }
+ return potentialHeading
+ }
+
+
+ function injectForms(quizz, answers) {
+
+
+ const searchedTitle = quizz.getAttribute('data-heading-level') || 'h3'
+ const submitLabel = quizz.getAttribute('data-quizz-validate') || 'Validate'
+ const headings = {}
+ const wrappers = []
+
+
+ const QuizzQstNum = quizz.querySelectorAll('.custom-block-quizz').length
+
+ Object.keys(answers).forEach(blockId => {
+
+
+ const blockNode = document.getElementById(blockId)
+
+ if (!blockNode) {
+ // if the node was treated and therefore the clone has not been reinserted yet
+ return
+ }
+ // this is the custom-block-quizz node
+ const questionNode = blockNode.parentElement.parentElement
+ const heading = getWantedHeading(questionNode, searchedTitle, 'previousSibling') || quizz
+
+ if (!heading.getAttribute('id')) {
+
+ heading.setAttribute('id', `quizz-form-${idBias}`)
+ idBias++
+ }
+
+
+ if (heading && !headings[heading.getAttribute('id')]) {
+
+ // this is just for convenience, this add a "known" element that will always be there
+ const wrapper = document.createElement('div')
+
+ headings[heading.getAttribute('id')] = true
+ const form = document.createElement('form')
+ form.classList.add('quizz')
+ form.style.marginBottom = '50px'
+
+
+ const submit = document.createElement('button')
+ submit.innerText = submitLabel
+ submit.style.marginTop = '-22px'
+
+ submit.classList.add('btn', 'btn-submit')
+
+ var parts = quizz.previousElementSibling.firstElementChild.href.split("/");
+ var idButton = parts[parts.length - 4] + "/" + parts[parts.length - 3] + "/" + parts[parts.length - 2] + "/" + parts[parts.length - 1];
+
+ submit.setAttribute('id', `my-button-${idButton}`);
+
+
+ const notAnswered = document.createElement('p')
+ notAnswered.classList.add('notAnswered')
+
+ let nodeToAddToForm
+ if (heading === quizz) {
+
+ nodeToAddToForm = quizz.firstChild
+ } else {
+ nodeToAddToForm = heading.nextSibling
+ }
+
+
+ // add any element before the first question to the wrapper
+ while (nodeToAddToForm.nodeName !== "DIV" && nodeToAddToForm.className !== "custom-block custom-block-quizz") {
+
+ const current = nodeToAddToForm
+ nodeToAddToForm = nodeToAddToForm.nextSibling
+ wrapper.appendChild(current.cloneNode(true))
+ current.parentNode.removeChild(current)
+
+ }
+
+ form.method = 'POST'
+ form.setAttribute('action', quizz.getAttribute('data-answer-url'))
+ form.setAttribute('id', `my-form-${idCounter}`);
+ idCounter++;
+
+
+ // add elements between 1st and last question to form
+ let num = 0;
+ while (nodeToAddToForm && nodeToAddToForm.nodeName !== searchedTitle.toUpperCase()) {
+ const current = nodeToAddToForm
+ if (current.nodeName === "DIV" && current.className === "custom-block custom-block-quizz") num++;
+ nodeToAddToForm = nodeToAddToForm.nextSibling
+ form.appendChild(current.cloneNode(true))
+ current.parentNode.removeChild(current)
+ if (num === QuizzQstNum) { form.appendChild(submit); break };
+ }
+ wrapper.append(form)
+
+ // add elements after last question until next h3 to wrapper
+ while (nodeToAddToForm && nodeToAddToForm.nodeName !== searchedTitle.toUpperCase()) {
+
+ const current = nodeToAddToForm
+ nodeToAddToForm = nodeToAddToForm.nextSibling
+ wrapper.appendChild(current.cloneNode(true))
+ current.parentNode.removeChild(current)
+ }
+
+ wrapper.appendChild(notAnswered)
+ wrappers.push(wrapper)
+
+ }
+ // avoid doubly
+ if (heading.nodeName === searchedTitle.toUpperCase()) {
+ quizz.removeChild(heading)
+ }
+ })
+ wrappers.forEach((wrapper) => quizz.appendChild(wrapper))
+ }
+
+ let answers = {}
+
+ initializePipeline.forEach(func => func(answers))
+
+ let idCounter = 0
+ let idBias = 0
+
+ document.querySelectorAll('div.quizz').forEach(div => {
+
+ const quizInside = div.querySelector('.custom-block-quizz ul li input[type=checkbox]');
+ if (quizInside) {
+ injectForms(div, answers)
+ }
+
+ })
+
+ function sendQuizzStatistics(form, statistics) {
+
+ const csrfmiddlewaretoken = document.querySelector('input[name=\'csrfmiddlewaretoken\']').value
+ const xhttp = new XMLHttpRequest()
+ xhttp.open('POST', form.getAttribute('action'))
+ xhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+ xhttp.setRequestHeader('Content-Type', 'application/json')
+ xhttp.setRequestHeader('X-CSRFToken', csrfmiddlewaretoken)
+ statistics.url = form.parentElement.parentElement.previousElementSibling.firstElementChild.href
+ xhttp.send(JSON.stringify(statistics))
+
+ }
+
+ function displayResultAfterSubmitButton(form) {
+
+ const questions = form.querySelectorAll('.custom-block-quizz');
+
+ for (let question of questions) {
+
+ const explanationElement = question.querySelector('.explanation_off')
+ if (explanationElement !== null) {
+ explanationElement.classList.remove('explanation_off');
+ explanationElement.classList.add('explanation_on');
+ }
+
+ }
+
+ }
+
+ // test if the quizz is totally answered or not
+ function QuizzAnswered(form) {
+
+ const questions = form.querySelectorAll('.custom-block-quizz');
+ for (let question of questions) {
+ const checkboxes = question.querySelectorAll('input[type="checkbox"]');
+ let isQuestionValid = false;
+ for (let checkbox of checkboxes) {
+ if (checkbox.checked) {
+ isQuestionValid = true;
+ break;
+ }
+ }
+ if (!isQuestionValid) {
+ return false
+ }
+ }
+ return true
+ }
+
+ function iconMaker(isGood) {
+ // Create a new icon element
+ const icon = document.createElement('div');
+ icon.classList.add('fas');
+ isGood ? icon.classList.add('fa-check') : icon.classList.add('fa-exclamation-triangle')
+ icon.style.fontSize = '10px';
+ icon.style.transform = 'scale(2)';
+ icon.style.margin = '10px'
+ return icon
+ }
+
+
+ function getQuestionText(question) {
+
+ let title
+ if (question.querySelector('.math')) {
+ const annotation = question.querySelector('.math annotation');
+ title = '$' + annotation.textContent.trim() + '$';
+ }
+ else {
+ title = question.textContent;
+ }
+ return title
+ }
+
+
+ function getAnswerText(liWrapper) {
+
+ let label = liWrapper.querySelector('.answer-label')
+ let MathAnnotation = label.querySelector('annotation')
+ let answer;
+ if (MathAnnotation) {
+ answer = '$' + MathAnnotation.textContent.trim() + '$';
+ } else {
+ answer = liWrapper.textContent;
+ }
+ return answer
+ }
+
+
+ document.querySelectorAll('form.quizz').forEach(form => {
+
+ form.addEventListener('submit', e => {
+
+ e.preventDefault()
+ e.stopPropagation()
+
+ const notAnswered = form.parentElement.querySelector('.notAnswered');
+ const submitBtn = form.querySelector('.btn-submit');
+
+
+ if (!document.querySelector('input[name=\'csrfmiddlewaretoken\']')) {
+ if (!sessionStorage.getItem(submitBtn.id)) {
+ // If the quiz has not been submitted before, store a flag in session storage to prevent multiple submissions
+ sessionStorage.setItem(`${submitBtn.id}`, true);
+ } else {
+ // If the quiz has already been submitted, disable the submit button
+ submitBtn.setAttribute('disabled', true);
+ alert('Vous avez déjà répondu, Veuillez vous connecter');
+ return;
+ }
+ }
+
+ // test if the whole quizz is answered
+ if (QuizzAnswered(form)) {
+
+ const formData = new FormData(form)
+ const [badAnswerNames, allAnswerNames] = computeForm(formData, answers)
+
+ markBadAnswers(form, badAnswerNames, answers)
+
+ allAnswerNames.forEach(name => {
+ const ulWrapper = document.getElementById(name)
+ const quizzCustomBlock = ulWrapper.parentElement.parentElement
+ quizzCustomBlock.classList.add('hasAnswer')
+ })
+ const questions = []
+ badAnswerNames.forEach(result => {
+ if (questions.indexOf(result.name) === -1) {
+ questions.push(result.name)
+ }
+ })
+
+ const statistics = {
+ expected: {},
+ result: {}
+ }
+
+ const CurrentFormQuestions = [...form.querySelectorAll('.custom-block-heading')].map(question => getQuestionText(question));
+
+ Object.keys(answers).forEach(name => {
+
+ const element = document.querySelector(`.custom-block[data-name="${name}"]`)
+
+ let title = getQuestionText(element.querySelector('.custom-block-heading'))
+
+
+ //make statistics of concerned form only
+ if (CurrentFormQuestions.includes(title)) {
+
+ statistics.result[title] = {
+ evaluation: 'bad',
+ labels: []
+ }
+ statistics.expected[title] = {}
+
+ const availableResponses = element.querySelectorAll('input')
+ for (let i = 0; i < availableResponses.length; i++) {
+ // wee need to get the question label for statistics
+ const liWrapper = availableResponses[i].parentElement
+ let questionLabel = getAnswerText(liWrapper)
+
+ statistics.expected[title][questionLabel] = answers[name][i]
+ }
+ // now determine answers and their labels
+ element.querySelectorAll('input:checked').forEach(node => {
+
+ // remove eventual glued corretion
+ let label = getAnswerText(node.parentElement)
+
+ statistics.result[title].labels.push(label.trim())
+ })
+ if (element.classList.contains('hasAnswer') && !element.classList.contains('quizz-bad')) {
+
+ element.classList.add('quizz-good')
+
+ const icon = iconMaker(true)
+ // Append the icon to the element
+ element.querySelector('div.custom-block-body').appendChild(icon);
+ statistics.result[title].evaluation = 'ok'
+
+ }
+ }
+ })
+
+ if (document.querySelector('input[name=\'csrfmiddlewaretoken\']')) {
+ sendQuizzStatistics(form, statistics)
+ }
+ submitBtn.setAttribute('disabled', true);
+ displayResultAfterSubmitButton(form)
+ notAnswered.innerText = ''
+ // not all questions answered
+ } else {
+
+ notAnswered.innerText = 'Veuillez répondre à toutes les questions'
+
+ }
+ })
+ })
+
+
+}
diff --git a/assets/js/editor-new.js b/assets/js/editor-new.js
index ed610b2a79..a3b0876a87 100644
--- a/assets/js/editor-new.js
+++ b/assets/js/editor-new.js
@@ -118,6 +118,7 @@
} else if (_type === 'n' || _type === 'neutre') {
ret.blocNeutral = true
}
+
}
} else {
// find checklist
@@ -169,7 +170,7 @@
start = text.slice(0, startPoint.ch)
end = text.slice(startPoint.ch)
let offset = 0
- if (type === 'blocInformation' || type === 'blocQuestion' || type === 'blocWarning' || type === 'blocError' || type === 'blocSecret' || type === 'blocNeutral') {
+ if (type === 'blocInformation' || type === 'blocQuestion' || type === 'blocWarning' || type === 'blocError' || type === 'blocSecret' || type === 'blocNeutral' || type === 'blocquizz') {
unShiftLines(cm, startPoint.line, endPoint.line)
startPoint.ch = 0
} else if (type === 'checklist') {
@@ -228,7 +229,7 @@
function enableBlockZmd(cm, type, start, end, startPoint, endPoint) {
let i, text
- if (type === 'blocInformation' || type === 'blocQuestion' || type === 'blocWarning' || type === 'blocError' || type === 'blocSecret' || type === 'blocNeutral') {
+ if (type === 'blocInformation' || type === 'blocQuestion' || type === 'blocWarning' || type === 'blocError' || type === 'blocSecret' || type === 'blocNeutral'|| type === 'blocquizz') {
// blocs
for (i = startPoint.line; i <= endPoint.line; i++) {
text = start + cm.getLine(i)
@@ -247,6 +248,22 @@
} else if (type === 'blocNeutral') {
shiftLines(cm, startPoint.line, '[[neutre|titre]]')
}
+ else if (type === 'blocquizz') {
+
+ if(window.location.href.includes('/contenus/')){
+ shiftLines(cm, startPoint.line, '| - Votre explication');
+ shiftLines(cm, startPoint.line, '| - [ ] réponse 3');
+ shiftLines(cm, startPoint.line, '| - [x] réponse 2 ( bonne )');
+ }
+ else {
+ shiftLines(cm, startPoint.line, '| - [ ] réponse 3');
+ shiftLines(cm, startPoint.line, '| - [ ] réponse 2');
+ }
+
+
+ shiftLines(cm, startPoint.line, '| - [ ] réponse 1');
+ shiftLines(cm, startPoint.line, '[[quizz|Question]]');
+ }
startPoint.ch = 0
endPoint.line += 1
endPoint.ch = endPoint.line.length
@@ -383,570 +400,584 @@
return null
}
- /* global EasyMDE */
- const easyMDE = new EasyMDE({
- autoDownloadFontAwesome: false,
- element: this,
- forceSync: true,
- autosave: {
- enabled: true,
- uniqueId: mdeUniqueKey,
- delay: 1000
+ const BaseToolbar = [
+ {
+ name: 'bold',
+ action: EasyMDE.toggleBold,
+ className: 'fa fa-bold',
+ title: 'Gras'
},
- indentWithTabs: false,
- minHeight: minHeight + 'px',
- placeholder: 'Votre message au format Markdown',
- promptURLs: true,
- promptTexts: {
- image: 'Url de votre image',
- link: 'Url de votre lien'
+ {
+ name: 'italic',
+ action: EasyMDE.toggleItalic,
+ className: 'fa fa-italic',
+ title: 'Italique'
},
- uploadImage: true,
- imageUploadFunction: uploadImage,
- imageTexts: {
- sbInit: 'Joindre des images par glisser-déposer ou coller depuis le presse-papiers.',
- sbOnDragEnter: 'Déposez l\'image pour l\'envoyer dans votre galerie.',
- sbOnDrop: 'Téléchargement d\'images #images_names#',
- sbProgress: 'Téléchargement #file_name#: #progress#%',
- sbOnUploaded: 'Image téléchargée #image_name#'
+ {
+ name: 'strikethrough',
+ action: EasyMDE.toggleStrikethrough,
+ className: 'fa fa-strikethrough',
+ title: 'Barré'
},
- spellChecker: false,
- inputStyle: 'contenteditable',
- nativeSpellcheck: true,
- sideBySideFullscreen: false,
- promptAbbrv: true,
- theme: 'zest',
- previewRender: customMarkdownParser,
- syncSideBySidePreviewScroll: false,
- toolbar: [
- {
- name: 'bold',
- action: EasyMDE.toggleBold,
- className: 'fa fa-bold',
- title: 'Gras'
- },
- {
- name: 'italic',
- action: EasyMDE.toggleItalic,
- className: 'fa fa-italic',
- title: 'Italique'
- },
- {
- name: 'strikethrough',
- action: EasyMDE.toggleStrikethrough,
- className: 'fa fa-strikethrough',
- title: 'Barré'
- },
- {
- name: 'abbr',
- action: (e) => {
- const options = e.options
- const cm = e.codemirror
- let abbr = cm.getSelection()
- let description = ''
- const lastLine = cm.lastLine()
- const lastCh = cm.getLine(lastLine).length
-
- const startPoint = cm.getCursor('start')
- const endPoint = cm.getCursor('end')
-
- if (options.promptAbbrv) {
+ {
+ name: 'abbr',
+ action: (e) => {
+ const options = e.options
+ const cm = e.codemirror
+ let abbr = cm.getSelection()
+ let description = ''
+ const lastLine = cm.lastLine()
+ const lastCh = cm.getLine(lastLine).length
+
+ const startPoint = cm.getCursor('start')
+ const endPoint = cm.getCursor('end')
+
+ if (options.promptAbbrv) {
+ if (abbr.length === 0) {
+ abbr = prompt('Mot abrégé', '')
if (abbr.length === 0) {
- abbr = prompt('Mot abrégé', '')
- if (abbr.length === 0) {
- return false
- }
+ return false
}
- description = prompt('Description de l\'abbréviation', '')
}
+ description = prompt('Description de l\'abbréviation', '')
+ }
- cm.replaceRange(cm.lineSeparator() + cm.lineSeparator() + '*[' + abbr + ']: ' + description, { line: lastLine, ch: lastCh }, { line: lastLine, ch: maxRange })
- cm.setSelection(startPoint, endPoint)
- cm.focus()
- },
- className: 'fa fa-text-width',
- title: 'Abbréviation'
+ cm.replaceRange(cm.lineSeparator() + cm.lineSeparator() + '*[' + abbr + ']: ' + description, { line: lastLine, ch: lastCh }, { line: lastLine, ch: maxRange })
+ cm.setSelection(startPoint, endPoint)
+ cm.focus()
},
- {
- name: 'keyboard',
- action: (e) => {
- _toggleBlockZmd(e, 'keyboard', '||')
- },
- className: 'far fa-keyboard',
- title: 'Touche clavier'
- },
- {
- name: 'codeInline',
- action: (e) => {
- _toggleBlockZmd(e, 'codeInline', '`')
- },
- className: 'fa fa-terminal',
- title: 'Code inline'
- },
- '|',
- {
- name: 'superscript',
- action: (e) => {
- _toggleBlockZmd(e, 'superscript', '^')
- },
- className: 'fa fa-superscript',
- title: 'Exposant'
- },
- {
- name: 'subscript',
- action: (e) => {
- _toggleBlockZmd(e, 'subscript', '~')
- },
- className: 'fa fa-subscript',
- title: 'Indice'
- },
- '|',
- {
- name: 'alignCenter',
- action: (e) => {
- _toggleBlockZmd(e, 'alignCenter', '-> ', ' <-')
- },
- className: 'fa fa-align-center',
- title: 'Aligner au centre'
- },
- {
- name: 'alignRight',
- action: (e) => {
- _toggleBlockZmd(e, 'alignRight', '-> ', ' ->')
- },
- className: 'fa fa-align-right',
- title: 'Aligner a droite'
- },
- '|',
- {
- name: 'list-ul',
- action: EasyMDE.toggleUnorderedList,
- className: 'fa fa-list-ul',
- title: 'Liste à puces'
- },
- {
- name: 'ordered-list',
- action: EasyMDE.toggleOrderedList,
- className: 'fa fa-list-ol',
- title: 'Liste ordonnée'
- },
- {
- name: 'checklist',
- action: (e) => {
- _toggleBlockZmd(e, 'checklist', '- [ ] ')
- },
- className: 'far fa-check-square',
- title: 'Liste de taches'
+ className: 'fa fa-text-width',
+ title: 'Abbréviation'
+ },
+ {
+ name: 'keyboard',
+ action: (e) => {
+ _toggleBlockZmd(e, 'keyboard', '||')
},
- '|',
- {
- name: 'heading',
- action: EasyMDE.toggleHeadingSmaller,
- className: 'fas fa-heading',
- title: 'Titres'
+ className: 'far fa-keyboard',
+ title: 'Touche clavier'
+ },
+ {
+ name: 'codeInline',
+ action: (e) => {
+ _toggleBlockZmd(e, 'codeInline', '`')
},
- '|',
- {
- name: 'image',
- action: EasyMDE.drawImage,
- className: 'far fa-image',
- title: 'Image'
+ className: 'fa fa-terminal',
+ title: 'Code inline'
+ },
+ '|',
+ {
+ name: 'superscript',
+ action: (e) => {
+ _toggleBlockZmd(e, 'superscript', '^')
},
- {
- name: 'link_btn',
- action: EasyMDE.drawLink,
- className: 'fa fa-link',
- title: 'Lien'
+ className: 'fa fa-superscript',
+ title: 'Exposant'
+ },
+ {
+ name: 'subscript',
+ action: (e) => {
+ _toggleBlockZmd(e, 'subscript', '~')
},
- '|',
- {
- name: 'quote',
- action: EasyMDE.toggleBlockquote,
- className: 'fa fa-quote-left',
- title: 'Citation'
+ className: 'fa fa-subscript',
+ title: 'Indice'
+ },
+ '|',
+ {
+ name: 'alignCenter',
+ action: (e) => {
+ _toggleBlockZmd(e, 'alignCenter', '-> ', ' <-')
},
- {
- name: 'code',
- action: EasyMDE.toggleCodeBlock,
- className: 'fa fa-code',
- title: 'Bloc de code coloré'
+ className: 'fa fa-align-center',
+ title: 'Aligner au centre'
+ },
+ {
+ name: 'alignRight',
+ action: (e) => {
+ _toggleBlockZmd(e, 'alignRight', '-> ', ' ->')
},
- {
- name: 'math',
- action: (e) => {
- _toggleBlockZmd(e, 'math', '$$')
- },
- className: 'fa fa-percent',
- title: 'Formule mathématique'
+ className: 'fa fa-align-right',
+ title: 'Aligner a droite'
+ },
+ '|',
+ {
+ name: 'list-ul',
+ action: EasyMDE.toggleUnorderedList,
+ className: 'fa fa-list-ul',
+ title: 'Liste à puces'
+ },
+ {
+ name: 'ordered-list',
+ action: EasyMDE.toggleOrderedList,
+ className: 'fa fa-list-ol',
+ title: 'Liste ordonnée'
+ },
+ {
+ name: 'checklist',
+ action: (e) => {
+ _toggleBlockZmd(e, 'checklist', '- [ ] ')
},
- {
- name: 'table',
- action: EasyMDE.drawTable,
- className: 'fa fa-table',
- title: 'Table'
+ className: 'far fa-check-square',
+ title: 'Liste de taches'
+ },
+ '|',
+ {
+ name: 'heading',
+ action: EasyMDE.toggleHeadingSmaller,
+ className: 'fas fa-heading',
+ title: 'Titres'
+ },
+ '|',
+ {
+ name: 'image',
+ action: EasyMDE.drawImage,
+ className: 'far fa-image',
+ title: 'Image'
+ },
+ {
+ name: 'link_btn',
+ action: EasyMDE.drawLink,
+ className: 'fa fa-link',
+ title: 'Lien'
+ },
+ '|',
+ {
+ name: 'quote',
+ action: EasyMDE.toggleBlockquote,
+ className: 'fa fa-quote-left',
+ title: 'Citation'
+ },
+ {
+ name: 'code',
+ action: EasyMDE.toggleCodeBlock,
+ className: 'fa fa-code',
+ title: 'Bloc de code coloré'
+ },
+ {
+ name: 'math',
+ action: (e) => {
+ _toggleBlockZmd(e, 'math', '$$')
},
- '|',
- {
- name: 'blocMenu',
- action: (e) => {
+ className: 'fa fa-percent',
+ title: 'Formule mathématique'
+ },
+ {
+ name: 'table',
+ action: EasyMDE.drawTable,
+ className: 'fa fa-table',
+ title: 'Table'
+ },
+ '|',
+ {
+ name: 'blocMenu',
+ action: (e) => {
+ },
+ className: 'fa fa-smile',
+ title: 'Emojis heureux',
+ children: [
+ {
+ name: 'char1',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':)')
+ },
+ className: 'emoji smile',
+ title: ':)'
},
- className: 'fa fa-smile',
- title: 'Emojis heureux',
- children: [
- {
- name: 'char1',
- action: (e) => {
- toggleEmoji(e.codemirror, ':)')
- },
- className: 'emoji smile',
- title: ':)'
+ {
+ name: 'char2',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':D')
},
- {
- name: 'char2',
- action: (e) => {
- toggleEmoji(e.codemirror, ':D')
- },
- className: 'emoji heureux',
- title: ':D'
+ className: 'emoji heureux',
+ title: ':D'
+ },
+ {
+ name: 'char3',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ';)')
},
- {
- name: 'char3',
- action: (e) => {
- toggleEmoji(e.codemirror, ';)')
- },
- className: 'emoji clin',
- title: ';)'
+ className: 'emoji clin',
+ title: ';)'
+ },
+ {
+ name: 'char8',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':soleil:')
},
- {
- name: 'char8',
- action: (e) => {
- toggleEmoji(e.codemirror, ':soleil:')
- },
- className: 'emoji soleil',
- title: ':soleil:'
+ className: 'emoji soleil',
+ title: ':soleil:'
+ },
+ {
+ name: 'char4',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':p')
},
- {
- name: 'char4',
- action: (e) => {
- toggleEmoji(e.codemirror, ':p')
- },
- className: 'emoji langue',
- title: ':P'
+ className: 'emoji langue',
+ title: ':P'
+ },
+ {
+ name: 'char5',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':lol:')
},
- {
- name: 'char5',
- action: (e) => {
- toggleEmoji(e.codemirror, ':lol:')
- },
- className: 'emoji rire',
- title: ':lol:'
+ className: 'emoji rire',
+ title: ':lol:'
+ },
+ {
+ name: 'char6',
+ action: (e) => {
+ toggleEmoji(e.codemirror, '^^')
},
- {
- name: 'char6',
- action: (e) => {
- toggleEmoji(e.codemirror, '^^')
- },
- className: 'emoji hihi',
- title: '^^'
+ className: 'emoji hihi',
+ title: '^^'
+ },
+ {
+ name: 'char7',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':ange:')
},
- {
- name: 'char7',
- action: (e) => {
- toggleEmoji(e.codemirror, ':ange:')
- },
- className: 'emoji ange',
- title: ':ange:'
+ className: 'emoji ange',
+ title: ':ange:'
+ },
+ {
+ name: 'char9',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':popcorn:')
},
- {
- name: 'char9',
- action: (e) => {
- toggleEmoji(e.codemirror, ':popcorn:')
- },
- className: 'emoji popcorn',
- title: ':popcorn:'
+ className: 'emoji popcorn',
+ title: ':popcorn:'
+ },
+ {
+ name: 'char10',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':bounce:')
},
- {
- name: 'char10',
- action: (e) => {
- toggleEmoji(e.codemirror, ':bounce:')
- },
- className: 'emoji bounce',
- title: ':bounce:'
- }
- ]
- },
- {
- name: 'blocMenu',
- action: (e) => {
+ className: 'emoji bounce',
+ title: ':bounce:'
+ }
+ ]
+ },
+ {
+ name: 'blocMenu',
+ action: (e) => {
+ },
+ className: 'fa fa-frown',
+ title: 'Emojis mécontents',
+ children: [
+ {
+ name: 'char1',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':(')
+ },
+ className: 'emoji triste',
+ title: ':('
},
- className: 'fa fa-frown',
- title: 'Emojis mécontents',
- children: [
- {
- name: 'char1',
- action: (e) => {
- toggleEmoji(e.codemirror, ':(')
- },
- className: 'emoji triste',
- title: ':('
+ {
+ name: 'char2',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':colere:')
},
- {
- name: 'char2',
- action: (e) => {
- toggleEmoji(e.codemirror, ':colere:')
- },
- className: 'emoji angry',
- title: ':colere:'
+ className: 'emoji angry',
+ title: ':colere:'
+ },
+ {
+ name: 'char3',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':colere2:')
},
- {
- name: 'char3',
- action: (e) => {
- toggleEmoji(e.codemirror, ':colere2:')
- },
- className: 'emoji mechant',
- title: ':colere2:'
+ className: 'emoji mechant',
+ title: ':colere2:'
+ },
+ {
+ name: 'char4',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':diable:')
},
- {
- name: 'char4',
- action: (e) => {
- toggleEmoji(e.codemirror, ':diable:')
- },
- className: 'emoji diable',
- title: ':diable:'
+ className: 'emoji diable',
+ title: ':diable:'
+ },
+ {
+ name: 'char5',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':\'(')
},
- {
- name: 'char5',
- action: (e) => {
- toggleEmoji(e.codemirror, ':\'(')
- },
- className: 'emoji pleure',
- title: ':\'('
+ className: 'emoji pleure',
+ title: ':\'('
+ },
+ {
+ name: 'char6',
+ action: (e) => {
+ toggleEmoji(e.codemirror, '>_<')
},
- {
- name: 'char6',
- action: (e) => {
- toggleEmoji(e.codemirror, '>_<')
- },
- className: 'emoji pinch',
- title: '>_<'
- }
- ]
- },
- {
- name: 'blocMenu',
- action: (e) => {
+ className: 'emoji pinch',
+ title: '>_<'
+ }
+ ]
+ },
+ {
+ name: 'blocMenu',
+ action: (e) => {
- },
- className: 'fa fa-meh',
- title: 'Emojis autres',
- children: [
- {
- name: 'char1',
- action: (e) => {
- toggleEmoji(e.codemirror, ':euh:')
- },
- className: 'emoji unsure',
- title: ':euh:'
+ },
+ className: 'fa fa-meh',
+ title: 'Emojis autres',
+ children: [
+ {
+ name: 'char1',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':euh:')
},
- {
- name: 'char2',
- action: (e) => {
- toggleEmoji(e.codemirror, ':o')
- },
- className: 'emoji huh',
- title: ':o'
+ className: 'emoji unsure',
+ title: ':euh:'
+ },
+ {
+ name: 'char2',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':o')
},
- {
- name: 'char3',
- action: (e) => {
- toggleEmoji(e.codemirror, ':B')
- },
- className: 'emoji b',
- title: ':B'
+ className: 'emoji huh',
+ title: ':o'
+ },
+ {
+ name: 'char3',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':B')
},
- {
- name: 'char4',
- action: (e) => {
- toggleEmoji(e.codemirror, 'o_O')
- },
- className: 'emoji blink',
- title: 'o_O'
+ className: 'emoji b',
+ title: ':B'
+ },
+ {
+ name: 'char4',
+ action: (e) => {
+ toggleEmoji(e.codemirror, 'o_O')
},
- {
- name: 'char5',
- action: (e) => {
- toggleEmoji(e.codemirror, ':-°')
- },
- className: 'emoji siffle',
- title: ':-°'
+ className: 'emoji blink',
+ title: 'o_O'
+ },
+ {
+ name: 'char5',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':-°')
},
- {
- name: 'char6',
- action: (e) => {
- toggleEmoji(e.codemirror, ':magicien:')
- },
- className: 'emoji magicien',
- title: ':magicien:'
+ className: 'emoji siffle',
+ title: ':-°'
+ },
+ {
+ name: 'char6',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':magicien:')
},
- {
- name: 'char8',
- action: (e) => {
- toggleEmoji(e.codemirror, ':pirate:')
- },
- className: 'emoji pirate',
- title: ':pirate:'
+ className: 'emoji magicien',
+ title: ':magicien:'
+ },
+ {
+ name: 'char8',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':pirate:')
},
- {
- name: 'char9',
- action: (e) => {
- toggleEmoji(e.codemirror, ':honte:')
- },
- className: 'emoji rouge',
- title: ':honte:'
+ className: 'emoji pirate',
+ title: ':pirate:'
+ },
+ {
+ name: 'char9',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':honte:')
},
- {
- name: 'char10',
- action: (e) => {
- toggleEmoji(e.codemirror, ':waw:')
- },
- className: 'emoji waw',
- title: ':waw:'
+ className: 'emoji rouge',
+ title: ':honte:'
+ },
+ {
+ name: 'char10',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':waw:')
},
- {
- name: 'char11',
- action: (e) => {
- toggleEmoji(e.codemirror, ':zorro:')
- },
- className: 'emoji zorro',
- title: ':zorro:'
+ className: 'emoji waw',
+ title: ':waw:'
+ },
+ {
+ name: 'char11',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':zorro:')
},
- {
- name: 'char7',
- action: (e) => {
- toggleEmoji(e.codemirror, ':ninja:')
- },
- className: 'emoji ninja',
- title: ':ninja:'
- }
- ]
- },
- '|',
- {
- name: 'blocMenu',
- action: (e) => {
- _toggleBlockZmd(e, 'blocInformation', '| ')
+ className: 'emoji zorro',
+ title: ':zorro:'
},
- className: 'fa fa-info',
- title: 'Bloc spéciaux',
- children: [
- {
- name: 'blocInformation',
- action: (e) => {
- _toggleBlockZmd(e, 'blocInformation', '| ')
- },
- className: 'fa fa-info bloc_information',
- title: 'Bloc information'
+ {
+ name: 'char7',
+ action: (e) => {
+ toggleEmoji(e.codemirror, ':ninja:')
},
- {
- name: 'blocQuestion',
- action: (e) => {
- _toggleBlockZmd(e, 'blocQuestion', '| ')
- },
- className: 'fa fa-question bloc_question',
- title: 'Bloc question'
+ className: 'emoji ninja',
+ title: ':ninja:'
+ }
+ ]
+ },
+ '|',
+ {
+ name: 'blocMenu',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocInformation', '| ')
+ },
+ className: 'fa fa-info',
+ title: 'Bloc spéciaux',
+ children: [
+ {
+ name: 'blocInformation',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocInformation', '| ')
},
- {
- name: 'blocWarning',
- action: (e) => {
- _toggleBlockZmd(e, 'blocWarning', '| ')
- },
- className: 'fas fa-exclamation-triangle bloc_warning',
- title: 'Bloc attention'
+ className: 'fa fa-info bloc_information',
+ title: 'Bloc information'
+ },
+ {
+ name: 'blocQuestion',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocQuestion', '| ')
},
- {
- name: 'blocError',
- action: (e) => {
- _toggleBlockZmd(e, 'blocError', '| ')
- },
- className: 'fas fa-times-circle bloc_error',
- title: 'Bloc erreur'
+ className: 'fa fa-question bloc_question',
+ title: 'Bloc question'
+ },
+ {
+ name: 'blocWarning',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocWarning', '| ')
},
- {
- name: 'blocSecret',
- action: (e) => {
- _toggleBlockZmd(e, 'blocSecret', '| ')
- },
- className: 'fa fa-eye-slash',
- title: 'Bloc secret'
+ className: 'fas fa-exclamation-triangle bloc_warning',
+ title: 'Bloc attention'
+ },
+ {
+ name: 'blocError',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocError', '| ')
},
- {
- name: 'blocNeutral',
- action: (e) => {
- _toggleBlockZmd(e, 'blocNeutral', '| ')
- },
- className: 'fa fa-sticky-note',
- title: 'Bloc neutre'
- }
- ]
- },
- '|',
- {
- name: 'abc-spellchecker',
- action: (evt) => {},
- className: 'fas fa-spell-check',
- title: 'Correcteur orthographique externe'
- },
- {
- name: 'abc-grammalecte',
- action: (evt) => {
- oGrammalecteAPI.openPanelForText(easyMDE.codemirror.getValue(), easyMDE.codemirror.display.lineDiv)
+ className: 'fas fa-times-circle bloc_error',
+ title: 'Bloc erreur'
},
- className: 'fa zdsicon zi-grammalecte',
- title: 'Correcteur orthographique externe'
- },
- {
- name: 'switch-contentAreaStyle',
- action: (evt) => {
- if (easyMDE.isFullscreenActive()) {
- easyMDE.toggleFullScreen()
- }
- const wrapper = easyMDE.codemirror.getWrapperElement()
- $(wrapper.parentElement).children('.textarea-multivers').toggle()
- $(wrapper).toggle()
- // deactivating buttons incompatible with the textarea mode
- const $toolbar = $(easyMDE.element.parentElement).children('.editor-toolbar')
- if ($toolbar.hasClass('disabled-for-textarea-mode')) {
- $toolbar.removeClass('disabled-for-textarea-mode')
- } else {
- $toolbar.addClass('disabled-for-textarea-mode')
- }
- easyMDE.codemirror.refresh()
+ {
+ name: 'blocSecret',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocSecret', '| ')
+ },
+ className: 'fa fa-eye-slash',
+ title: 'Bloc secret'
},
- className: 'fas fa-remove-format',
- title: 'Zone de texte sans mise en forme'
- },
- '|',
- {
- name: 'preview',
- action: EasyMDE.togglePreview,
- className: 'fa fa-eye no-disable disable-for-textarea-mode',
- title: 'Aperçu'
+ {
+ name: 'blocNeutral',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocNeutral', '| ')
+ },
+ className: 'fa fa-sticky-note',
+ title: 'Bloc neutre'
+ }
+ ]
+ },
+ '|',
+ {
+ name: 'abc-spellchecker',
+ action: (evt) => {},
+ className: 'fas fa-spell-check',
+ title: 'Correcteur orthographique externe'
+ },
+ {
+ name: 'abc-grammalecte',
+ action: (evt) => {
+ oGrammalecteAPI.openPanelForText(easyMDE.codemirror.getValue(), easyMDE.codemirror.display.lineDiv)
},
- {
- name: 'side-by-side',
- action: EasyMDE.toggleSideBySide,
- className: 'fa fa-columns no-disable no-mobile disable-for-textarea-mode',
- title: 'Aperçu sur le coté'
+ className: 'fa zdsicon zi-grammalecte',
+ title: 'Correcteur orthographique externe'
+ },
+ {
+ name: 'switch-contentAreaStyle',
+ action: (evt) => {
+ if (easyMDE.isFullscreenActive()) {
+ easyMDE.toggleFullScreen()
+ }
+ const wrapper = easyMDE.codemirror.getWrapperElement()
+ $(wrapper.parentElement).children('.textarea-multivers').toggle()
+ $(wrapper).toggle()
+ // deactivating buttons incompatible with the textarea mode
+ const $toolbar = $(easyMDE.element.parentElement).children('.editor-toolbar')
+ if ($toolbar.hasClass('disabled-for-textarea-mode')) {
+ $toolbar.removeClass('disabled-for-textarea-mode')
+ } else {
+ $toolbar.addClass('disabled-for-textarea-mode')
+ }
+ easyMDE.codemirror.refresh()
},
- {
- name: 'fullscreen',
- action: EasyMDE.toggleFullScreen,
- className: 'fa fa-arrows-alt no-disable no-mobile disable-for-textarea-mode',
- title: 'Plein écran'
- }
- ]
+ className: 'fas fa-remove-format',
+ title: 'Zone de texte sans mise en forme'
+ },
+ '|',
+ {
+ name: 'preview',
+ action: EasyMDE.togglePreview,
+ className: 'fa fa-eye no-disable disable-for-textarea-mode',
+ title: 'Aperçu'
+ },
+ {
+ name: 'side-by-side',
+ action: EasyMDE.toggleSideBySide,
+ className: 'fa fa-columns no-disable no-mobile disable-for-textarea-mode',
+ title: 'Aperçu sur le coté'
+ },
+ {
+ name: 'fullscreen',
+ action: EasyMDE.toggleFullScreen,
+ className: 'fa fa-arrows-alt no-disable no-mobile disable-for-textarea-mode',
+ title: 'Plein écran'
+ },
+ '|'
+ ]
+ const QuizzButton = {
+ name: 'blocquizz',
+ action: (e) => {
+ _toggleBlockZmd(e, 'blocquizz', '')
+ },
+ className: 'fas fa-question',
+ title: 'Bloc quizz'
+ };
+
+ const currentURL = window.location.href
+ const Toolbar = ( currentURL.includes('/contenus/') || currentURL.includes('/forums/') ) ? [...BaseToolbar, QuizzButton] : BaseToolbar;
+
+ /* global EasyMDE */
+ const easyMDE = new EasyMDE({
+ autoDownloadFontAwesome: false,
+ element: this,
+ forceSync: true,
+ autosave: {
+ enabled: true,
+ uniqueId: mdeUniqueKey,
+ delay: 1000
+ },
+ indentWithTabs: false,
+ minHeight: minHeight + 'px',
+ placeholder: 'Votre message au format Markdown',
+ promptURLs: true,
+ promptTexts: {
+ image: 'Url de votre image',
+ link: 'Url de votre lien'
+ },
+ uploadImage: true,
+ imageUploadFunction: uploadImage,
+ imageTexts: {
+ sbInit: 'Joindre des images par glisser-déposer ou coller depuis le presse-papiers.',
+ sbOnDragEnter: 'Déposez l\'image pour l\'envoyer dans votre galerie.',
+ sbOnDrop: 'Téléchargement d\'images #images_names#',
+ sbProgress: 'Téléchargement #file_name#: #progress#%',
+ sbOnUploaded: 'Image téléchargée #image_name#'
+ },
+ spellChecker: false,
+ inputStyle: 'contenteditable',
+ nativeSpellcheck: true,
+ sideBySideFullscreen: false,
+ promptAbbrv: true,
+ theme: 'zest',
+ previewRender: customMarkdownParser,
+ syncSideBySidePreviewScroll: false,
+ toolbar: Toolbar
})
if (smdeUniqueContent != null && localStorage['smde_' + mdeUniqueKey] !== textarea.value) {
diff --git a/assets/scss/base/_content.scss b/assets/scss/base/_content.scss
index 0043484a6a..de0bf07f2a 100644
--- a/assets/scss/base/_content.scss
+++ b/assets/scss/base/_content.scss
@@ -115,6 +115,36 @@ h6 {
}
+.quizz .custom-block {
+ .custom-block {
+ display: none;
+ }
+ &.quizz-bad {
+ display: block;
+ & .custom-block-body {
+ background-color: $accent-500 ;
+ }
+ .custom-block {
+ display: block;
+ border: solid 1px $grey-600;
+ }
+ }
+ &.quizz-good {
+ display: block;
+ & .custom-block-body{
+ background: $green-500;
+ }
+ .custom-block {
+ display: block;
+ border: solid 1px $grey-600;
+ .custom-block-body {
+ font-weight: normal;
+ }
+ }
+ }
+
+}
+
.custom-block {
margin: $length-24 0;
@@ -224,6 +254,7 @@ h6 {
}
}
.custom-block-neutral,
+.custom-block-quizz,
.custom-block-spoiler {
background: $grey-100;
@@ -238,6 +269,15 @@ h6 {
&:after {
display: none;
}
+
+ .custom-block {
+ display: none;
+ /* hide the correction while not answered */
+ &.quizz-good, &.quizz-bad, &.quizz-missing {
+ display: block;
+ }
+ }
+
}
}
@@ -604,22 +644,32 @@ div.align-left, figure pre code.hljs {
// checkbox menu
-ul li p {
- margin: 0;
-}
-
li.task-list-item {
+
list-style-type: none;
position: relative;
+ display: flex;
+ align-items: center;
+
+ input[type="checkbox"] {
+ margin-right: 10px;
+ }
+
+ &.answer-bad {
+ label {
+ color: $color-danger;
+ }
+ }
- input[type=checkbox] {
- position: absolute;
- top: $length-2;
- left: -$length-24;
+
+ &.answer-good {
+ label {
+ color: green;
+ }
- background-color: $true-white !important;
}
-}
+ }
+
.warn-typo {
height: $length-20;
diff --git a/assets/scss/pages/_stats.scss b/assets/scss/pages/_stats.scss
index 0b130f004f..0441e55304 100644
--- a/assets/scss/pages/_stats.scss
+++ b/assets/scss/pages/_stats.scss
@@ -1,52 +1,144 @@
-.stat-table {
- .level-1 {
- padding-left: $length-20;
- }
+/* Style for the header of each quiz */
+.header-stats-quiz {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ background-color: #f2f2f2;
+ border: 1px solid #ddd;
+}
+
+.header-stats-quiz h3 {
+ font-size: 24px;
+ margin: 0;
+}
+
+/* Style for the initialize stats button */
+.delete-quizz-button,
+.delete-question-button {
+ background-color: #e44833;
+ border: none;
+ color: white;
+ padding: 10px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.delete-quizz-button:hover,
+.delete-question-button:hover {
+ background-color: #3e8e41;
+}
+
+/* Style for each question and its stats */
+.stat-graph {
+ margin-bottom: 20px;
+ border: 1px solid #ddd;
+ padding: 10px;
+}
+
+.Question {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.question-stats {
+ font-size: 15px;
+ margin: 0;
+ margin-bottom: 5px;
+}
+
+.question-stats span {
+ display: inline-block;
+}
+
+.quizz-answers {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ border: 1px solid #ddd;
+
+}
+
+.quizz-answers li {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 10px;
+ justify-content: space-around;
+}
- .level-2 {
- padding-left: $length-38;
- }
+.progress-stat {
+ width : 20vw;
+ text-align: center;
}
- /* Style the tab */
-.tab {
- border: $length-1 solid $grey-100;
- border-bottom: none;
- background-color: $grey-100;
- color: $color-primary;
+.quizz-answers li span:last-child {
+ font-weight: bold;
+ font-size: 16px;
}
-/* Style the buttons that are used to open the tab content */
-.tab span {
- display: inline-block;
- padding: $length-8 $length-16;
- cursor: pointer;
+.quizz-answers li.quizz-stats-good {
+ background-color: #a6f566;
+ border-color: #155724;
+ color: #155724;
+}
+
+.progress-wrapper {
+ position: relative;
+ height: 20px;
+ border-radius: 10px;
+ background-color: #f2f2f2;
}
-/* Change background color of buttons on hover */
-.tab span:hover {
- background-color: $white;
+.progress-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ border-radius: 10px;
+ background-color: #4CAF50;
}
-/* Create an active/current tablink class */
-.tab span.active {
- background-color: $white;
- font-weight: bold;
+.progress-label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+ font-size: 16px;
+ font-weight: bold;
}
-/* Style the tab content */
-.tabcontent {
- /* Tab has to be displayed by default, otherwise Chart.js doesn't render the graph. */
- padding: $length-6 $length-12;
+.explanation_off {
+ display: none;
+}
+
+.explanation_on {
+ margin-top: 1rem;
+ padding: 1rem;
+ color: #0a0706; /* dark text */
+ border-radius: 0.25rem;
+}
- border: $length-1 solid $grey-100;
- border-top: none;
+.notAnswered {
+ margin-top: 1rem;
+ padding: 1rem;
+ margin-right: 17rem;
- .stat-graph {
- width: 60%;
- margin: 0 auto;
- }
+ border: 1px solid #f5c6cb; /* dark red */
+ color: #f72f0c; /* dark text */
+ border-radius: 0.25rem;
+ font-size: 1.2rem;
+ line-height: 1.5;
+ &:empty {
+ display: none;
+ }
}
diff --git a/doc/source/back-end/contents_manifest.rst b/doc/source/back-end/contents_manifest.rst
index 1ed2ca261e..c6ff17ae63 100644
--- a/doc/source/back-end/contents_manifest.rst
+++ b/doc/source/back-end/contents_manifest.rst
@@ -100,7 +100,17 @@ Version 2.0
6. ``children`` : tableau vers les enfants de niveau inférieur si l'enfant est de type *container*. **Obligatoire**
7. ``text`` : nom du fichier contenant le texte quand l'enfant est de type *extract*. Nous conseillons de garder la convention ``nom de fichier = slug.md`` mais rien n'est obligatoire à ce sujet. **Obligatoire**
+Version 2.1
+-----------
+
+Cette version ajoute le paramètre "ready_to_publish" dans les ``Container`` qui vaut ``True`` par défaut.
+Cet attribut permet d'implémenter la fonctionnalité de "publication partielle".
+
+Version 2.2
+-----------
+Cette version ajoute le paramètre ``is_quizz`` dans les ``Extract`` afin de créer des extraits de type Quizz qui auront leur
+correction automatiquement calculée par le client.
Version 1.0
diff --git a/doc/source/back-end/quizz.rst b/doc/source/back-end/quizz.rst
new file mode 100644
index 0000000000..da5d238227
--- /dev/null
+++ b/doc/source/back-end/quizz.rst
@@ -0,0 +1,134 @@
+===============================
+Ajout de Quizz à Zest de savoir
+===============================
+
+Zeste de savoir est capable de présenter des quizz à l'utilisateur. La philosophie qui a été retenue est :
+
+- L'auteur écrit la **correction** du quizz dans un extrait qui est marqué comme étant un quizz.
+- Lorsque le tutoriel est publié, côté client, un script parcourt cette correction et la transforme en formulaire.
+- Une fois que le lecteur a rempli son quizz, la correction est automatiquement calculée et rendue au lecteur.
+- Des statistiques sont alors envoyées à l'auteur pour qu'il voit où sont les erreurs de chacun.
+
+L'ajout de quizz n'est pas une mince affaire dans notre code d'autant qu'il est important de les rendre **faciles** à rédiger.
+En effet, rédiger sur ZDS demande pas mal d'effort et l'ajout de quizz avec les méthodes habituelles à base
+de formulaires spécifiques, qui permettent de "configurer le rendu" de la question est peu pertinent.
+
+La première version du module de quizz permet d'ajouter des QCM mais a été conçue pour permettre l'ajout d'autres types de réponse.
+
+Liens avec ZMarkdown
+====================
+
+Le module des quizz nécessite ZMarkdown 9 pour être fonctionnel sur la version web et ZMarkdown 10 pour être proprement exporté en PDF.
+Les epub affichent uniquement la correction pour l'instant.
+
+Utiliser Zmarkdown > 10
+-----------------------
+
+Avec l'utilisation de zmarkdown > 10 vous pouvez utiliser le bloc ``[[quizz | Intitulé de la question]]``.
+Ce bloc a le même comportement que le bloc neutre. Cependant il permet d'ajouter des informations de contexte nécessaires à l'export Latex.
+De même on devrait pouvoir tirer partie du fait que ce bloc a une classe précise dans les implémentations des futurs types de questions.
+
+Ajouter des types de questions
+------------------------------
+
+Globalement, l'ajout de type de questions, disons "texte libre" pour l'exemple se décompose en trois parties :
+
+- Décider de quelle syntaxe Markdown on tirera partie pour définir la correction. Imaginons ici qu'on utilise la syntaxe des codes inlines (deux `````)
+- Implémenter dans zMarkdown un préprocesseur de ``quizzCustomBlock`` qui permettra de remplacer les ``inlineCode`` par un texte composé de ``______`` dans le quizz et les laissera intacts dans la correction
+- Adapter ``content_quizz.js`` et ``statistics.py`` pour que la correction se fasse et que les statistiques remontent
+
+Comportement attendu des quiz
+=============================
+
+- Les quiz peuvent être créés dans les tutoriels.
+- Dans une session, un utilisateur non connecté ne peut répondre qu’une seule fois à un quiz
+- Un utilisateur connecté peut répondre plusieurs fois à un quiz
+- Le propriétaire du quiz et le staff ont accès à une page contenant les statistiques (nombre de réponses à chaque question)
+- Le propriétaire et le staff ont la possibilité de réinitialiser les statistiques de chaque quiz et de chaque question d’un quiz indépendamment à l’aide d’un bouton
+- Une question de quiz contient au moins une bonne réponse (pas de test)
+- Une question quiz doit avoir une explication qui s’affiche lorsqu'il répond au quiz
+- Lors de la modification du tutoriel, les statistiques doivent rester cohérentes avec les quiz qui sont encore présents dans le tutoriel
+- Lors d’une bonne réponse, la couleur de fond passe en vert, en orange pour une bonne réponse partielle (ex : une des deux bonnes réponses a été choisie mais pas l’autre). Enfin rouge pour une mauvaise réponse.
+
+Comment créer un quiz
+=====================
+
+la Création d’un quiz se fait directement en zmarkdown de la façon suivante :
+
+[[quizz | la question1]]
+| - [ ] réponse 1
+| - [x] bonne réponse
+| - [ ] réponse 2
+| - réponse 2 est correcte, car Elle est correcte
+
+[[quizz | la question2]]
+| - [x] réponse 1
+| - [x] bonne réponse
+| - [ ] réponse 2
+| - réponse 1 et 2 sont correcte car Elle sont bonnes
+
+Contenu du fichier
+==================
+
+Variables globales
+------------------
+
+- answers: un objet vide qui contiendra les réponses des utilisateurs aux questions du quizz.
+- idCounter: un compteur pour générer des identifiants uniques pour chaque question du quizz.
+- idBias: une valeur qui sert à décaler la numérotation des questions du quizz en cas de suppression d'une question.
+
+Fonctions
+---------
+
+- initializePipeline(answers): une fonction qui initialise une série de fonctions pour traiter les réponses des utilisateurs.
+- injectForms(div, answers): une fonction qui ajoute les éléments de formulaire pour les questions du quizz à un élément de la page HTML.
+- sendQuizzStatistics(form, statistics): une fonction qui envoie les statistiques de la réponse du quizz à un serveur à l'aide d'une requête XMLHttpRequest.
+- displayResultAfterSubmitButton(form): une fonction qui affiche la réponse correcte pour chaque question du quizz après que l'utilisateur a soumis ses réponses.
+- QuizzAnswered(form): une fonction qui teste si toutes les questions du quizz ont une réponse.
+- iconMaker(isGood): une fonction qui crée un élément d'icône avec l'icône "check" ou "exclamation-triangle" de Font Awesome en fonction de si la réponse de l'utilisateur est correcte ou non.
+- getQuestionText(question): une fonction qui retourne le texte de la question.
+- getAnswerText(liWrapper): une fonction qui retourne le texte de la réponse.
+- computeForm(formData, answers): une fonction qui compare les réponses de l'utilisateur avec les réponses attendues et retourne une liste des réponses incorrectes et une liste de toutes les réponses.
+- markBadAnswers(form, badAnswerNames, answers): une fonction qui marque les réponses incorrectes pour chaque question du quizz.
+
+Événements
+----------
+
+- 'submit' pour chaque formulaire de quizz: lorsque l'utilisateur soumet ses réponses, le code traite les réponses et envoie les statistiques à un serveur.
+
+Sélectionneurs DOM (Document Object Model)
+------------------------------------------
+
+- document.querySelectorAll('div.quizz'): sélectionne tous les éléments HTML avec la classe quizz qui contiennent des questions de quizz.
+- document.querySelectorAll('form.quizz'): sélectionne tous les éléments HTML avec la classe quizz qui sont des formulaires de quizz.
+
+
+Base de données
+===============
+
+Représentation en base de donnée des quiz
+-----------------------------------------
+
+- Le modèle QuizzQuestion contient les champs pour stocker une URL, la question et le type de question. Le type de question est un champ de texte avec une taille maximale de 15 caractères et une valeur par défaut de "qcm".
+- Le modèle QuizzAvailableAnswer contient les champs pour stocker le libellé de la réponse, un indicateur pour savoir si c'est la bonne réponse, et une clé étrangère pour lier la réponse à la question correspondante dans le modèle QuizzQuestion.
+- Le modèle QuizzUserAnswer contient les champs pour stocker une réponse donnée par l'utilisateur, la date de la réponse, et des clés étrangères pour lier la réponse à la question correspondante dans le modèle QuizzQuestion et au contenu publié associé.
+
+Commentaires sur les factories
+------------------------------
+
+- La classe QuizzQuestionFactory utilise la bibliothèque Python faker pour générer une URL, une question et un type de questions aléatoires. Le type de question est choisi parmi une liste de valeurs possibles ('qcm', 'open', 'bool').
+- La classe QuizzAvailableAnswerFactory génère des réponses possibles à une question de quiz. Elle utilise également faker pour générer une étiquette de réponse et un booléen pour indiquer si la réponse est correcte ou non. La clé étrangère related_question est une sous-factory qui crée une instance de QuizzQuestion.
+- La classe QuizzUserAnswerFactory génère des réponses d'utilisateurs à des questions de quiz. Elle utilise une sous-factory pour créer une instance de PublishableContentFactory, un champ de réponse aléatoire et une clé étrangère related_question qui est une sous-factory pour créer une instance de QuizzQuestion. Le champ full_answer_id est généré à l'aide de faker pour simuler un identifiant unique.
+
+
+Commentaires sur les tests
+--------------------------
+
+- test_question_count() : vérifie que deux questions ont été créées dans la base de données.
+- test_answer_count() : vérifie que quatre réponses ont été créées dans la base de données.
+- test_user_answer_count() : vérifie que deux réponses d'utilisateur ont été créées dans la base de données.
+- test_related_user_answers() : vérifie que les réponses d'utilisateur sont bien liées aux bonnes questions.
+- test_related_answers() : vérifie que les réponses disponibles sont bien liées aux bonnes questions.
+- test_answer_is_good() : vérifie qu'au moins une réponse disponible pour chaque question est marquée comme bonne.
+- test_user_answer_unique_id() : vérifie que chaque réponse d'utilisateur a un ID unique.
+- test_nb_good_answers() : vérifie qu'il y a bien 2 bonnes et 2 mauvaises réponses pour une question qui a plusieurs réponses possibles.
\ No newline at end of file
diff --git a/templates/misc/quizz.graph.part.html b/templates/misc/quizz.graph.part.html
new file mode 100644
index 0000000000..139d3a6eb1
--- /dev/null
+++ b/templates/misc/quizz.graph.part.html
@@ -0,0 +1,33 @@
+{% load i18n %}
+{% load emarkdown%}
+
+
+