ChatMD

3. Créer des rétroactions variées

Ce tutoriel permet d’améliorer les rétroactions au sein d’un chatbot, à partir de l’exemple du chatbot Oscar 2 créé dans un précédent tutoriel.

Dans l’exemple précédent, on peut voir que trois choix sur quatre amènent vers le même paragraphe nommé ## Erreur. On peut différencier ce message d’erreur de diverses manières.

Testez le chatbot Oscar 3 qui intègre des variables sur les messages d’erreur et de félicitation, et son pad CodiMD associé.

A gauche sont repérés les éléments dans le codiMD, à droite le rendu
La structure du chatbot dans CodiMD et son rendu dans le navigateur

A gauche sont repérés les éléments dans le codiMD, à droite le rendu :
 cadre bleu : déclaration des variables bravo, erreur et encourage dans l’en-tête
 cadres rouges : message d’erreur générique avec variables erreur et encourage ; message d’erreur spécifique pour une mauvaise réponse précise
 cadres violets : deux messages d’erreur différents grâce aux varaibles
 cadre vert : bonne réponse

  • Créer des paragraphes différents quand on veut non pas un message générique mais un message précis, comme dans l’exemple ci-dessous. Les réponses "noyau" amènent vers le message générique d’erreur, la réponse "manteau" a son paragraphe spécifique ## Erreur manteau.
  • Introduire des variables qui diversifient les rétroactions positives et négatives. Dans Oscar 3, trois variables ont été créées : bravo, erreur et encourage. Elles se définissent dans l’en-tête, avec pour chacune une demi-douzaine d’expressions possibles accompagnées ou non d’emojis (par exemple :cry : ) et séparées par un triple ///.
variables:
   bravo: "Bravo ! /// Tout à fait ! /// Bonne réponse ! /// C'est exact ! /// C'est une bonne réponse ! /// Excellent !"
   erreur: "C'est une erreur :-1:/// Eh non :anguished:/// Pas de chance :laughing:/// C'est inexact :anguished: /// Ce n'est pas la bonne réponse :cry: /// Aïe aïe aïe !:laughing:/// Nope... "
   encourage: " Cherche encore. /// Recommence. /// Essaye encore ! /// Retente ta chance ! /// Réfléchis encore. /// Propose autre chose !"

Ces variables sont ensuite à intégrer dans les paragraphes voulus avec la syntaxe : @{bravo}, @{erreur} et @{encourage}, et seront appelées de manière aléatoire lors des messages d’erreur, d’encouragement ou de félicitation.

Si on laisse la possibilité de taper au clavier, on peut attribuer à certains paragraphes des mots clés. Dans l’exemple d’Oscar 3, le paragraphe ## Limite est tagué du mot Moho. C’est la réponse à la question libre posée précédemment.

Capture d'écran
La structure du chatbot dans CodiMD et son rendu dans le navigateur

A gauche l’interface de CodiMD avec en bleu les paragraphes où on laisse la possibilité de taper une réponse, et en vert le paragraphe tagué du mot clé correspondant à la réponse attendue.

## TerreQ1OK
`@KEYBOARD = true`

@{bravo}
C'est bien la croûte terrestre qui se trouve le plus en surface.
Passons à la question suivante :
Sauras-tu me donner le nom de la limite inférieure de la croûte terrestre ?
Tape le mot ou fais un choix.

## Limite
{{- Moho}}

@{bravo}
Le Moho a été dénommé ainsi en l'honneur de son découvreur, le sismologue croate Andrija Mohorovičić (1857-1936).
Le Moho est en moyenne situé à 35 km de profondeur sous la croûte continentale.

Précautions :

  • Veiller à ajouter dans l’en-tête contenuDynamique : true
  • Pour la configuration du clavier, deux possibilités :
    • soit il est toujours disponible via l’en-tête : clavier : true
    • soit il est masqué la plupart du temps avec l’en-tête : clavier : false et on le libère si besoin dans un paragraphe avec la ligne `@KEYBOARD = true` sous le titre du paragraphe.

Remarque on peut aussi mettre des mots clés négatifs, en le précédant d’un point d’exclamation.

Vous pouvez intégrer des sons, images, vidéos, et de nombreux contenus externes.

Vous pouvez utiliser des ressources hébergées en ligne ou les héberger vous-mêmes dans Nuage ou dans la Forge des communs numériques éducatifs.

Exemple de code pour une image :

![Structure interne Terre niveau collège](https://forge.apps.education.fr/mfenaert/chatbots/-/raw/main/Images/ViTa/structureterre-college.PNG "structure de la Terre en couches concentriques")

Le texte alternatif entre guillemets est visible au survol ou au clic sur l’image.

Pour ajouter une source de l’image, visible mais plus petite que le texte du dialogue, on peut utiliser la balise aside.
<aside>Source : SVT Dijon modifié</aside>

Exemple de code pour un son :
!Audio:https://forge.apps.education.fr/mfenaert/chatbots/-/raw/32da32e85b01e7a067d24e3b368e501ddecdd519/Sons/615100__mlaudio__magic_game_win_success_2.wav

On peut aussi insérer une ressource externe (hébergée en ligne) via une iframe : vidéo, exercice interactif (LearningApps, H5P...), tout site externe autorisant la visualisation via une iframe.

Ressource(s) associée(s)

Article rédigé par Mélanie FENAERT