Créer un texte à trous avec les réponses sous forme de liste déroulante ou de champ de saisie

Par défaut, les zones de saisie ou la liste, sont en dessous du texte. Voici comment procéder pour insérer les "trous" directement au bon endroit dans le texte.

Texte à trous avec listes déroulantes

Vous trouverez en pièce jointe à cet article un fichier texte avec le code à copier-coller dans un composant exercice simple de type "Blank Common Problem".

Voici en détail comment procéder. :

Pour créer un exercice de ce type, créez un composant "Blank Common Problem" et copiez-collez l'exemple d'exercice.
Astuce : il n'est pas nécessaire de passer en éditeur avancé, mais l'éditeur avancé vous propose la coloration syntaxique qui facilite la lecture.
Conservez bien la balise problem.
Conservez bien les balises script sans en changer le contenu.
Pour chaque morceau de texte ayant un trou, il faut les intégrer dans une balise optionresponse. Conservez le paramètre inline="1".
Puis mettez les textes sans trous dans des balises de paragraphes p.
Mettez les trous dans des balises optioninput. Attention donc à bien fermer la balise p juste avant la balise optioninput. Voici comment paramétrer la balise optioninput.
- L'attribut label est le titre de l'objet "liste déroulante", qu'il est important de renseigner pour des questions d'accessibilité, en remettant entre guillemets un extrait de la phrase et des underscore à la place du trou concerné.
- Les mots acceptés sont définis par l'attribut options="('mot1','mot2','mot3')".
- La bonne réponse est définie par l'attribut correct="mot3".
  Nota : il n'est pas possible d'avoir plusieurs bonnes réponses.
- Conservez l'attribut inline="1".
Puis fermez la balise optioninput.
Si la phrase continue après votre "trou" (liste déroulante), rouvrez un paragraphe p, en conservant l'attribut style="display: inline" afin qu'il se mette à la suite de la liste déroulante et non à la ligne.
Puis fermez la balise optionresponse.
Procédez ainsi pour chaque trou.
En dessous, dans la balise div dont vous conserverez les attributs class="custom_answer" style="display: none", remettez votre texte complet, sous forme de paragraphes, avec les bons termes en gras vert avec une balise b style="color:green". Ce sera l'affichage de la solution lorsque les apprenants cliquent sur le bouton "Afficher la réponse". A la fin de votre solution, conservez la balise fermante /div.
Conservez ensuite la balise fermante /problem indiquant la fin de l'exercice.

Exemple d'intégration d'un texte à trous avec listes déroulantes

Modèle téléchargeable

Texte à trous avec champ de saisie au clavier

Vous trouverez en pièce jointe à cet article un fichier texte avec le code à copier-coller dans un composant exercice simple de type "Blank Common Problem". Voici en détail comment procéder. :

Pour créer un exercice de ce type, créez un composant "Blank Common Problem" et copiez-collez l'exemple d'exercice.
Astuce : il n'est pas nécessaire de passer en éditeur avancé, mais l'éditeur avancé vous propose la coloration syntaxique qui facilite la lecture.
Conservez bien la balise problem.
Conservez bien les balises script sans en changer le contenu.
Insérez votre texte dans des balises de paragraphe p en conservant l'attribut style="display: inline" si vous voulez que le texte continue de s'afficher à la ligne après les champs de saisie. Vous pouvez utiliser les balises br si vous voulez faire un retour à la ligne sans changer de paragraphe.
Chaque "trou" doit être intégré dans une balise stringresponse. Voici comment paramétrer cette balise.
- Conservez le paramètre inline="1".
- La bonne réponse se paramètre avec l'attribut answer="La bonne réponse".
- Préciser avec l'attribut type="ci" ou type="cs" si vous voulez que la bonne réponse soit sensible à la casse (cs) ou pas (ci).
  Nota : il n'est pas possible de définir plusieurs réponses acceptées, à moins d'essayer de jouer avec les "expressions régulières" (voir le support de l'atelier "Exercices interactifs"). Par contre vous pouvez accepter que la réponse soit juste dès lors que le champ n'est pas laissé vide, en indiquant answer="." type="ci regexp".
Insérez une balise textline en conservant l'attribut inline="1". Voici comment paramétrer cette balise.
- Paramétrez l'attribut label="xx_xxx", en reprenant une partie du texte et en remplaçant les trous par des underscore.
- Indiquez la largeur du champ de saisie en nombre de caractères grâce à l'attribut size="9" où vous définissez le chiffre.
  Nota : cela n'est pas une limitation du nombre de caractères saisis mais bien l'indication de la largeur de l'objet champ de saisie.
Fermez la balise stringresponse.
Procédez ainsi pour chaque paragraphe, chaque trou.
Pour afficher la solution, créez un paragraphe p avec l'attribut class="custom_answer" et positionnez-le en bas, avant la balise de fermeture du problème /problem ou en l'insérant aux endroits opportuns entre les paragraphes d'exercice, comme dans le présent exemple. Mettez en gras vert les bonnes réponses à l'aide de la balise b style="color:green".
Conservez enfin la balise fermante /problem indiquant la fin de l'exercice.

Exemple d'intégration d'un texte à trous avec champs de saisie