Aller au contenu

Bonus : QCM et multi QCM⚓︎

Des QCM en MkDocs⚓︎

Quelle est la réponse à la question universelle (deux réponses possibles) ?

Syntaxe

{{ qcm(["$6\\times 7$", "$\\int_0^{42} 1 dx$", "`#!python sum([i for i in range(10)])`", "La réponse D"], [1,2], shuffle = True) }}
  • Argument 1: Tableau de strings contenant vos réponses.

  • Argument 2: Entier ou tableau d'entiers indiquant les bonnes réponses. L'indexation naturelle (1 à N) est choisie.

  • Argument 3: True pour une génération aléatoire à chaque rechargement du site web. False sinon.

  • Toute instruction Latex nécessitant un backslash \ doit être échappé avec un second backslash \.

  • Les codes (e.g. instructions Python) doivent tenir sur une ligne.

  • La génération aléatoire n'est faite qu'une seule fois (à la génération du site statique).

Installation⚓︎

Prérequis

  • Plugin macro
  • MathJax 3.0
  • Pyodide-MkDocs

Ajouter le lien vers le fichier de css du QCM :

    extra_css:
        ....
        - my_theme_customizations/qcm/qcm.css
        ....

Dans la partie de chargement des libraires (md{% block libs %}), ajouter :

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-light.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>  

À la fin du fichier, ajouter :

    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('pre code.qcm').forEach((el) => {
        hljs.highlightElement(el);
        });
    });
    
    document.querySelectorAll("[id^=qcm_]").forEach((el) => {
        let qcmAns = el.childNodes;
        if (el.dataset.shuffle == 1) {
        for (let i = qcmAns.length - 1; i >= 0; i--) el.appendChild(qcmAns[Math.floor(Math.random() * i)])
        }
        
        for (let element of el.children) {
        element.addEventListener('click', () => {
            element.firstChild.disabled = true
            element.firstChild.checked = true
        })
        }
    });

Télécharger le fichier appelé qcm.css.

À la suite de votre configuration existante et au sein de la fonction define_env, ajouter le contenu du fichier main_QCM.py.

Pour rappel, votre fichier de configuration docs/xtra/javascripts/mathjax-config.js doit ressembler à cela :

window.MathJax = {
startup: {
    ready: () => {
        console.log('MathJax is loaded, but not yet initialized');
        MathJax.startup.defaultReady();
        console.log('MathJax is initialized, and the initial typeset is queued');
    }
},
tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    processEscapes: true,
    processEnvironments: true
},
options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
}
};

document$.subscribe(() => {
MathJax.typesetPromise()
})

Multi QCM⚓︎

test

La réponse à la question ?
1 + 1 = ?
\(x - {n} = {p}\)
Résoudre l'équation \(x - {n} = {p}\) pour \(x>0\).
Past participle of show ?
Past participle of {verb}ing ?
Past participle of {verb}ake ?
ValiderRecharger

1+1=?
1+1=?
\(x - {n} = {p}\)
Résoudre l'équation \(x - {n} = {p}\) pour \(x>{p}\).
ValiderRecharger