# 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](https://support.fun-edu.fr/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzE0NGZkNTM4LTgwYjAtNDI0NS05Y2U0LTEyOGExMWRkNjI4Mi84ZTgxMWY4OC03NzJlLTQ5NTgtODYyYi0yOWYzYzliMjE5N2EvaW1hZ2UiLCJ0eXBlIjoiYXR0YWNobWVudCIsImlhdCI6MTc5MDA3OTMwMCwiZXhwIjoxNzkwMTY1NzAwfQ.rZno3CEwVwaun_roK5jt278fSpVk8phaX_OMrHY6law) ### Modèle téléchargeable [modele_texte_a_trou_liste_deroulante.txt 6014](https://support.fun-edu.fr/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzE0NGZkNTM4LTgwYjAtNDI0NS05Y2U0LTEyOGExMWRkNjI4Mi8xOTZjZmNmNC1lYzlhLTRmZjMtYmNiMi00OTg3YjcyZTI4YTgvbW9kZWxlX3RleHRlX2FfdHJvdV9saXN0ZV9kZXJvdWxhbnRlLnR4dCIsInR5cGUiOiJhdHRhY2htZW50IiwiaWF0IjoxNzkwMDc5MzAwLCJleHAiOjE3OTAxNjU3MDB9.8E9LNOJ1Au07Kz8lbsBfSgDhgdg_g7ffJo97yghfsu8) --- ## 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"](/doc/exercices-interactifs-restitution-dun-atelier-xO5nEekXRD)). 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](https://support.fun-edu.fr/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzE0NGZkNTM4LTgwYjAtNDI0NS05Y2U0LTEyOGExMWRkNjI4Mi8xODAwYmVjZS0zYzNhLTQ3NTYtOWMzOC00MjFhOTM1ZmQ2ZjIvaW1hZ2UiLCJ0eXBlIjoiYXR0YWNobWVudCIsImlhdCI6MTc5MDA3OTMwMCwiZXhwIjoxNzkwMTY1NzAwfQ.bN-Dnxu5WL8PHLIviUKQ770O0EOXA0QtSvKK5wytXug) ### Modèle téléchargeable [modele_texte_a_trou_champ_saisie.txt 5507](https://support.fun-edu.fr/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzLzE0NGZkNTM4LTgwYjAtNDI0NS05Y2U0LTEyOGExMWRkNjI4Mi81N2EzMjQ2YS0yYjZkLTQ0ZjQtYTBhNi04NGQ3YWMxMzVhMDcvbW9kZWxlX3RleHRlX2FfdHJvdV9jaGFtcF9zYWlzaWUudHh0IiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTAwNzkzMDAsImV4cCI6MTc5MDE2NTcwMH0.jRD1r9PVrrc6YGEjQOfb0LQKimtzFTbfVs8jOJJQNjY)