{% trans graph_title %} {{ question }}
+-
+ {% for answer_name, answer_stats in stats.responses.items %}
+
- + {{ answer_name }} + + + + {{answer_stats.nb}} / {{ stats.total }} + + {% endfor %} +
+ *
+ * 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
+ *
+ * @param answers the answer dictionary, it will be modified by the process
+ */
+function initializeCheckboxes(answers) {
+ const checkboxes = document.querySelectorAll('.quizz ul li input[type=checkbox]')
+ extractAnswer(checkboxes, answers)
+}
+
+
+function initializeRadio(answers) {
+ const radio = document.querySelectorAll('.quizz ul li input[type=radio]')
+ extractAnswer(radio, answers)
+}
+
+const initializePipeline = [initializeCheckboxes, initializeRadio]
+
+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(names, answers) {
+ const toAdd = []
+ if (names.length === 0) {
+ Object.keys(answers).forEach(answer => {
+ let mustMarkBad = false
+ answers[answer].forEach((value, index) => {
+ const inputAnswer = document.querySelector(`#${answer} input[value="${index}"]`)
+ if (value && !inputAnswer.checked) {
+ inputAnswer.parentElement.classList.add('quizz-forget')
+ mustMarkBad = true
+ }
+ })
+ if (mustMarkBad) {
+ document.querySelector(`div[data-name="${answer}"]`).classList.add('quizz-bad')
+ }
+ })
+ }
+ names.forEach(({ name }) => {
+ document.querySelectorAll('input[name="' + name + '"]').forEach(field => {
+ if (answers[name][parseInt(field.getAttribute('value'), 10)] && !field.checked) {
+ field.parentElement.classList.add('quizz-forget')
+ toAdd.push({
+ name: name,
+ value: field.getAttribute('value')
+ })
+ }
+ })
+ document.querySelector(`.custom-block[data-name=${name}]`).classList.add('quizz-bad')
+ })
+ names.forEach(({
+ name,
+ value
+ }) => {
+ document.querySelector(`input[type=checkbox][name="${name}"][value="${value}"]`)
+ .parentElement.classList.add('quizz-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
+}
+
+/**
+ * As we are using forms to capture the answer and send the result back to user (and flushing stats for authors),
+ * we need to add an html form.
+ *
+ * The main issue is that it was asked to have many quizz inside a tutorial section, not just a list of questions in a
+ * specific section. As a result we had to find an heuristic :
+ * - if the current section has no h3 headings, we just span the form from the beggining to the end of section
+ * - if the current section has one or more h3 headings, we start the form just after it and end it at just before the
+ * next h3 heading if there is one or the end of form
+ *
+ * @param quizz current quizz container
+ * @param answers answers dictionary
+ */
+function injectForms(quizz, answers) {
+ const searchedTitle = quizz.getAttribute('data-heading-level') || 'h3'
+ const submitLabel = quizz.getAttribute('data-quizz-validate') || 'Validate'
+ const headings = {}
+ let idBias = 0
+ const wrappers = []
+ 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')
+
+ const submit = document.createElement('button')
+ submit.innerText = submitLabel
+ submit.classList.add('btn', 'btn-submit')
+ const result = document.createElement('p')
+ result.classList.add('result')
+ let nodeToAddToForm
+ if (heading === quizz) {
+ nodeToAddToForm = quizz.firstChild
+ } else {
+ nodeToAddToForm = heading.nextSibling
+ }
+ form.method = 'POST'
+ form.setAttribute('action', quizz.getAttribute('data-answer-url'))
+ // gather all the questions of this current subsection, until the next h3 heading
+ while (nodeToAddToForm && nodeToAddToForm.nodeName !== searchedTitle.toUpperCase()) {
+ const current = nodeToAddToForm
+ nodeToAddToForm = nodeToAddToForm.nextSibling
+ form.appendChild(current.cloneNode(true))
+ current.parentNode.removeChild(current)
+ }
+ form.appendChild(result)
+ form.appendChild(submit)
+ wrappers.push(wrapper)
+ if (nodeToAddToForm && nodeToAddToForm.nodeName === searchedTitle.toUpperCase()) {
+ wrapper.append(form)
+ wrappers.push(nodeToAddToForm.cloneNode(true))
+ } else {
+ wrapper.appendChild(form)
+ if (heading.nextSibling) {
+ wrapper.appendChild(heading.nextSibling.cloneNode(true))
+ heading.parentNode.removeChild(heading.nextSibling)
+ }
+ }
+ }
+ // avoid doubly
+ if (heading.nodeName === searchedTitle.toUpperCase()) {
+ quizz.removeChild(heading)
+ }
+ })
+ wrappers.forEach((wrapper) => quizz.appendChild(wrapper))
+}
+
+const answers = {}
+initializePipeline.forEach(func => func(answers))
+document.querySelectorAll('div.quizz').forEach(div => {
+ 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(nbGood, nbTotal, form) {
+ const percentOfAnswers = (100 * 1.0 * nbGood / nbTotal).toLocaleString('fr-FR', {
+ minimumIntegerDigits: 1,
+ useGrouping: false
+ })
+ form.querySelector('.result').innerText = `Vous avez bien répondu à ${percentOfAnswers}% des questions.`
+}
+
+document.querySelectorAll('form.quizz').forEach(form => {
+ // compute the answer and send stats
+ form.addEventListener('submit', e => {
+ e.preventDefault()
+ e.stopPropagation()
+ const formData = new FormData(form)
+ // result = name of bad answers
+ const [badAnswerNames, allAnswerNames] = computeForm(formData, answers)
+ markBadAnswers(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: {}
+ }
+ let nbGood = 0
+ let nbTotal = 0
+ Object.keys(answers).forEach(name => {
+ const element = document.querySelector(`.custom-block[data-name="${name}"]`)
+ let title = element.querySelector('.custom-block-heading').textContent
+ const correction = element.querySelector('.custom-block-body .custom-block')
+ if (correction && title.indexOf(correction.textContent) > 0) {
+ title = title.substr(0, title.indexOf(correction.textContent))
+ }
+ 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 = liWrapper.textContent
+ if (correction && questionLabel.indexOf(correction.textContent) !== -1) {
+ questionLabel = questionLabel.substring(0, questionLabel.indexOf(correction.textContent))
+ }
+ 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 = node.parentElement.textContent
+ if (correction && label.indexOf(correction.textContent) !== -1) {
+ label = label.substr(0, label.indexOf(correction.textContent))
+ }
+ statistics.result[title].labels.push(label.trim())
+ })
+ if (element.classList.contains('hasAnswer')) {
+ nbTotal++
+
+ if (!element.classList.contains('quizz-bad') &&
+ !element.classList.contains('quizz-forget')) {
+ element.classList.add('quizz-good')
+ statistics.result[title].evaluation = 'ok'
+ nbGood++
+ }
+ }
+ })
+ sendQuizzStatistics(form, statistics)
+ displayResultAfterSubmitButton(nbGood, nbTotal, form)
+ })
+})
diff --git a/assets/scss/base/_content.scss b/assets/scss/base/_content.scss
index 92a55603d3..42b3ba3a2d 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;
+ }
+ }
+
}
}
@@ -615,8 +655,18 @@ li.task-list-item {
background-color: $true-white !important;
}
+ &.quizz-forget {
+ font-weight: bolder;
+ }
+ &.quizz-forget {
+ font-weight: bolder;
+ }
+ &.quizz-bad {
+ color: $color-danger;
+ }
}
+
.warn-typo {
height: $length-20;
}
diff --git a/assets/scss/pages/_stats.scss b/assets/scss/pages/_stats.scss
index 0b130f004f..f1afba9663 100644
--- a/assets/scss/pages/_stats.scss
+++ b/assets/scss/pages/_stats.scss
@@ -50,3 +50,17 @@
margin: 0 auto;
}
}
+
+.stat-graph ul.quizz-answers {
+ max-width: 50%;
+ li.quizz-stats {
+ display: grid;
+ grid-template-columns: 3fr 3fr 1fr;
+ grid-gap: 1px;
+ .over-progress {
+ display: block;
+ position: relative;
+ left: -50%;
+ }
+ }
+}
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..feadde563d
--- /dev/null
+++ b/doc/source/back-end/quizz.rst
@@ -0,0 +1,39 @@
+===============================
+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
+
diff --git a/templates/misc/quizz.graph.part.html b/templates/misc/quizz.graph.part.html
new file mode 100644
index 0000000000..b52e514688
--- /dev/null
+++ b/templates/misc/quizz.graph.part.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+
+