Documentation

API

  • Les fichiers

  • Point de départ

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8" />
    <script src="https://bobanum.github.io/qr/App.js"></script>
    <!-- <script src="App.js"></script>-->
    <script>
    App.cfg({
    'cours': 'Titre du cours',
    'titre': 'Titre de l'épreuve,
    'version': 'Seed|Etiquette',
    });
    App.setConfig({
    'cours': 'Titre du cours',
    'titre': 'Titre de l\'épreuve',
    'version': 'Seed|Etiquette',
    });
    </script>
    <title>Titre du cours - Titre de l'épreuve</title>
    </head>
    <body data-questions-alea="true">
    </body>
    </html>

  • Les types de question

    • Question de base

      Est la base des autres types de questions

      • Fichier Question.js
      • Propriétés
        • self.style
        • actif
        • valeur*
        • poids*
        • melanger*
        • selecteurMelanger*
        • choisir*
      • Classes et attributs utilisés
        • .qr-question
        • .qr-body
        • .off
        • [data-proprietes]
        • [data-pointage] ajouté automatiquement
        • [data-pts] appliqué à l'intérieur du body
      • Emmet
        div.qr-question[id][data-valeur][data-poids][data-proprietes]>(header>p>lorem5)+div.qr-body

    • Choix multiple

      • Fichier Choix.js
      • Propriétés
        • largeur
        • inverse
      • Classes et attributs utilisés
        • [data-solution] ('v' pour bonne reponse)
        • qr-body.qr-ligne
        • qr-body.qr-droite
      • Remarque
        L'attribut [data-solution] est nécessaire pour afficher les coches.
      • Emmet
        div.qr-question-choix[id][data-valeur][data-poids][data-alea=true]>(header>p>lorem5)+div.qr-body>div[data-solution=f]>lorem5

    • Complexe

      Permet de mettre des sous-questions

      • FichierComplexe.js
      • Propriétés
        • à faire
      • Classes et attributs utilisés
        • à faire
      • Remarque
      • Emmet
        div.qr-question-complexe[id][data-valeur][data-poids]>(header>p>lorem5)+div.qr-body>(div>(p>lorem5)+div.qr-reponses>(div>span.qr-solution>lorem2)+(div[data-solution=solution]))*2

    • Corriger

      • FichierCorriger.js
      • Propriétés
        • à faire
      • Classes et attributs utilisés
        • [data-solution]
        • table.standard
      • Remarque
        Crée un tableau
      • Emmet
        à faire

    • Courtes

      Série de questions courtes disposées sur une ligne.

      • FichierCourtes.js
      • Propriétés
        • largeur
        • largeurEnonce
        • aleaSelecteur
        • alea
        • numero [ none | decimal | (lower-|upper-)alpha | (lower-|upper-)roman]
      • Classes et attributs utilisés
        • .qr-enonce
        • .qr-reponse
        • span.qr-solution
        • .qr-inverse OU .qr-horizontal
      • Remarque
      • Emmet

        div.qr-question-courtes[id][data-valeur][data-poids][data-largeur][data-largeur-enonce][data-inverse][data-alea=true]>(header>p>lorem5)+div.qr-body>(div[data-solution]>lorem5)*5

    • Match

      • FichierMatch.js
      • Propriétés
        • largeur
        • selecteurChoisir
        • selecteurGarder
      • Classes et attributs utilisés
        • line.qr-solution
        • div.col
      • Remarque
        Utilise du SVG pour les solutions
      • Emmet
        div.qr-question-match[id][data-valeur][data-poids][data-largeur]>(header>p>lorem5)+div.qr-body>div*5>(div>lorem3)+(div>lorem3)

    • Qui suis-je?

      • FichierQuisuisje.js
      • Propriétés
        • melanger
        • largeur
        • inverse
      • Classes et attributs utilisés
        • table.flat
        • colgroup.qr-reponses
        • [data-solution]
        • .qr-reponse
      • Remarque
        Crée un tableau (todo: Transformer en flex)
      • Emmet
        div.qr-question-quisuisje[id][data-valeur][data-poids][data-proprietes]>(header>p>lorem5)+div.qr-body>(div[data-solution="lorem"]>lorem5)*5

    • Trous

      • FichierTrous.js
      • Propriétés
        • ratio5
        • unite
        • largeur
      • Classes et attributs utilisés
        • .qr-reponse
        • .qr-trou
        • .off
        • [data-solution]
      • Emmet
        div.qr-question-trous[id][data-valeur][data-poids][data-proprietes]>(header>p>lorem5)+div.qr-body>(p>lorem3+(span.qr-trou>lorem2)+lorem3)*3

    • Vrai ou faux

      • FichierVraifaux.js
      • Propriétés
        • à faire
      • Classes et attributs utilisés
        • [data-solution] ('v', 'f')
        • col.qr-vraifaux
        • table.standard
      • Remarque
        Crée un tableau
      • Emmet
        div.qr-question-vraifaux[id][data-valeur][data-poids][data-proprietes]>(header>p>lorem5)+div.qr-body>(div[data-solution="vf"]>lorem5)*5

  • Les classes et les attributs

    • .qr-question Identifie la balise contenant une question.
    • .qr-body La zone contenant le corps de la question. Exclue habituellement l'énoncé.
    • .off Identifie une question désactivée.

      S'applique à une question

    • [data-proprietes]
    • [data-pointage] Pour l'affichage de la valeur finale d'une question.

      Est ajouté automatiquement.

    • [data-pts] appliqué à l'intérieur du body

  • Modifier les propriétés du questionnaire

    • La version

      La propriété version (accessible par l'adresse) permet de mélanger les questions autrement (change le seed de base).

      Si la version contient un pipe |, la portion de gauche sera le seed et la portion de droite sera affichée.

      L'affichage se place dans la propriété version_label

  • Modifier les propriétés des questions

    *Utilisation de data-... pour modifier une propriété de la question : format = data-ma-prop="abc" pour la propritété this.maProp. ATTENTION: Il n'y a pas de validation de l'inocuité de la propriété.

    Utilisation de data-proprietes : a priorité sur les data spécifiques. format = "maProp1=abc&amp;maProp2=123". ATTENTION: Il n'y a pas de validation de l'inocuité de la propriété.

  • Pour marquer les points dans le solutionnaire

    Ajouter l'attribut data-pts à une balise. La valeur de l'attribut se retrouvera dans la puce rouge. On peut évidemment ajouter un span vide à cet effet.

    Dans un attribut data-solution, ajouter des doubles crochets avec la valeur à l'intérieur. Ex.: [[2]]

  • Utilisation de data-valeur

    data-valeur="n" pour la valeur de la question au complet

    data-valeur="n#" pour la valeur des sous-questions. (sera multiplié par le nombre de sous-questions)

    data-poids="n" est un multiplicateur qui permet de pondérer ou de modérer une question.

  • Ajouter un style à une question

    Les balises style placées au début d'une question s'appliqueront à cette question uniquement. Il est important de donner un id à la question afin de bien viser celle-ci.

    Pour viser la balise de la question, on utilise le (faux) nom de balise "ici" sélecteur #question

    On peut ajouter l'attribut data-contexte pour donner un contexte plus global aux règles.

    Exemples pour gérer les solutions

    En utilisant le contexte

    <style media="print" data-contexte="#qr-mode-solutionnaire:not(:checked) ~ div.qr">
    .question > div:after {
    content: none;
    }
    </style>
    <style media="screen" data-contexte="#qr-mode-eleve:checked ~ div.qr">
    .question > div:after {
    content: none;
    }
    </style>

    Nouvellement : des "media" personnalisés.

    <style media="solutionnaire">
    .question > div:after {
    content: none;
    }
    </style>

    Les règles ci-dessus vont s'appliquer lors de l'impression de la version pas "solutionnaire".

    <style media="eleve">
    .question > div:after {
    content: none;
    }
    </style>

    Les règles ci-dessus vont s'appliquer lors de l'affichage de la version "eleve".

    <style media="solution">
    .question > div:after {
    content: none;
    }
    </style>

    La feuille de style ci-dessus résume les 2 précédentes.

  • Attributs spéciaux

    data-var: Permet de modifier aléatoirement des éléments (mots) d'un bloc. syntaxe: data-var="[A|B]|[Y|Z]". Dans le code de la question, on doit mettre des marqueurs de variable. {{0}} recevra le A ou le Y et {{1}} recevra le B ou le Z. Les séries de variables sont coordonnées

  • Traitement des iframe

    On peut mettre le HTML d'un iframe directement dans celui-ci pour créer une mise en forme spéciale au lieu d'utiliser un fichier séparé. Le contenu du iframe sera placé par programmation dans le src sous forme de data.

  • Créer des clones

    Lorsqu'un élément complexe revient plusieurs fois dans la page, on peut le cloner à l'aide de l'attribut data-clone avec come valeur le id d'un élément dans un div vide.

    Exemple : <div data-clone="tableauABC"></div>

    À modifier : ajouter le # pour indiquer que c'est le id et éventuellement permettre des sélecteurs plus complexes

  • Pour créer un nouveau type de question

    À faire