Comment (bien ?) utiliser ChatGPT pour développer une app de QCM

Je donne des « cours » en business schools. Un atelier sur « les enjeux du numérique ». Vaste programme, comme aurait dit le Général. Mais je ne vais pas vous dire ici ce qu’il se passe dans ce cours. Le sujet, c’est l’évaluation.
Compte-tenu du fonctionnement et du niveau du groupe, je me résous à ne pas faire plus compliqué qu’un QCM. En même temps ça sera plus vite corrigé que tout autre modalité d’évaluation.

Et puis comme je n’aime pas perdre mon temps, je vais investir le temps de conception de ce QCM pour moi même apprendre quelque chose. Apprendre à créer une appli mobile de passation de QCM. Alors que je ne suis pas codeur.

Je vais faire appel à mon nouveau meilleur ami : ChatGPT, celui de Tous développeurs avec ChatGPT ?.

Mission 1 : créer un QCM

Personnellement, je ne suis pas expert en QCM. Je vais donc commencer par faire élaborer par un premier ChatGPT une expertise en QCM ; les bonnes pratiques validées par la science. Elles vont servir à mon 2e ChatGPT, développeur.

Une recherche Google (et oui, ça peut encore servir et c’est même souvent un meilleur choix que Perplexity, un « simple » moteur de recherche) m’a permis d’identifier et valider un guide écrit pour aider des universitaires à rédiger de bons QCM. Je vais m’en servir de référence.

Alors je commence à demander à ChatGPT (4o) :

J’obtiens immédiatement un corpus de 10 règles, avec chacune un exemple, et la description d’un test de conformité.

Je sauve ce résultat dans un Google Docs.

Et j’ouvre un nouveau Chat.
Je lui donne le lien vers ce Google docs.
Avec le prompt de conception :

Objectif : valider les capacités des élèves à faire leurs propres recherches et appliquer un raisonnement méthodique sur le thème des enjeux du numérique.

Rôle : tu es un concepteur-rédacteur de questions d'évaluation dans le domaine des enjeux du numérique ; tu sais rédiger des questions à choix multiples et des propositions de réponses pertinentes. Tu te bases pour cela sur le doc "10 règles essentielles pour élaborer un QCM" ci-joint.

Taches :
1. lister pour commencer 10 enjeux majeurs du numérique
2. Pour chacun de ces enjeux, lister 5 situations, cas ou problématiques concrètes dans lesquels cet enjeu est central
3. relire et analyser le document "10 règles essentielles pour élaborer un QCM" fourni qui donne les bonnes pratiques pour concevoir un QCM de compréhension en sciences sociales
4. Pour l'une de des situations, cas ou problématiques du premier enjeu, en appliquant les bonnes pratiques pertinentes, écrire une question à choix multiples et ses propositions de réponses permettant d'évaluer la capacité de compréhension de l'étudiant à propos de l'enjeu considéré ; signaler quelle est la réponse juste ; les distracteurs doivent être plausibles (mais incontestablement faux) ; écrire aussi un commentaire de 1 paragraphe qui justifie pourquoi la réponse juste est plus vraie que les deux distracteurs proposés.
Répéter pour le 2e enjeu et ainsi de suite.

Format :
{
"id": "[ID unique]",
"question": "[texte de la question]",
"réponses": {
"juste": "[réponse juste]",
"distracteur1": "[réponse distracteur 1]",
"distracteur2": "[réponse distracteur 2]"
},
"commentaire": "[texte d'explication de la réponse]"
}

 J’avoue, je ne connais pas le formalisme de JSON. J’ai ouvert un autre chat, collé mon premier jet et demandé à ChatGPT de me le corriger.

J’obtiens un fichier Json de QCM bien structurées.

Je garde cette conversation en réserve pour quand je voudrai davantage de questions. Mais pour le moment j’ai suffisament d’exemples pour l’étape suivante.

Ah, oui, je vais aussi lui faire écrire des phrases d’encouragements et de félicitations. Prompt :

Tant qu'on y est, génère un fichier json contenant :
- 20 brefs messages de félicitation à afficher au participant quand il aura trouvé la bonne réponse, chacun avec le tag "bravo"
- 20 brefs messages désolés et d'encouragements à afficher au participant qui aura choisi une réponse distracteur, chacun avec le tag "desole" Le ton doit être cordial, sympathiquement sarcastique mais bienveillant.

Je stocke le fichier Json correspondant.

Mission 2 : développer une appli mobile de passation

Cahier des charges

Mon objectif, c’est d’avoir une adresse web, chaque fois qu’on l’ouvre, sur mobile ou non d’ailleurs mais il faut que la page s’affiche bien sur mobile, elle affiche une page d’introduction sur l’objet et le déroulement du test :

Le titre de l’application : « Testez vos connaissances » ; un sous-titre : « Trouvez la bonne réponse à ces quelques questions de culture générale pour tester votre connaissance et votre compréhension » et un bouton « Commencer le test ».
Le bouton lance la première question. Affichage d’une question prise au hasard dans le corpus de questions et affichage des 3 réponses proposées pour cette question, dans un ordre aléatoire. Indication « Question n / N » où n est ne numéro d’ordre de la question dans la série et N le nombre de question de la série. Par défaut, N = 5. L’utilisateur sélectionne une réponse, cela met cette réponse en évidence parmi les trois, un bouton « Résultat » apparaît ; l’utilisateur peur changer sa réponse ou demander le résultat. Sur la page de résultat, toujours la question et les 3 réponses possibles ; il n’est plus possible de sélectionner un choix. La réponse juste est écrite en vert, les distracteurs sont écrits en rouge, la réponse choisie par l’utilisateur est marquée distinctement ; le texte explicatif est composée d’un message de félicitation ou d’encouragement, suivi du commentaire associé à la question. Il y a un bouton « Question suivante » qui recommence le cycle.
Ceci jusqu’à la dernière question de la série. Sur l’écran de résultat de celle-ci, il y a un bouton « Mon score ».
La page Score affiche le nombre de réponses justes sur le nombre de questions posées, et un message d’encouragement à renouveler l’expérience pour mieux découvrir l’étendue des enjeux du numérique. Il y a un bouton « Recommencer » qui renvoie à la page d’introduction.
Le corpus des questions est le fichier qcm_numerique.json
Le corpus des messages est le fichier qcm_numerique_messages.json
Je vais installer l’application et les fichiers de référence sur mon serveur Web https://www.bxfrance.fr dans le répertoire /formations/qcmv2/
La page d’index devra être nommée index.html
Mise en page et typographie :
– la page a un fond vert amande ;
– le contenu est dans une colonne blanche centrée sur la page, la colonne prend sur écran large 60% de la page, sur écran étroit 95% de la page
– police des titres vert bouteille sans serif
– police des questions, réponses et commentaires gris foncé serif
– police des réponses après résultats : vertes et rouge comme actuellement
– la police des questions en gras
Rappel important que la mise en forme doit être « Mobile First ».

Déroulement

Je donne ce cahier des charges à un nouveau ChatGPT que je bombarde développeur en chef.

ChatGPT me génère le code d’un fichier index.html, qui contient la feuille de styles et le squelette de la page, et un fichier quiz.js qui contient la logique applicative.

J’enregistre ces deux fichiers dans le répertoire choisi de mon serveur web, avec les deux fichiers .json de contenus.

J’ouvre un navigateur et j’appelle la page https://www.bxfrance.fr/formations/qcmv2/

Suspense…

Résultat

Bon, je ne vais pas frimer : il s’en faut de pas mal pour avoir notre web application parfaite du premier coup.

En vrai, j’ai besoin de quelques interactions avec ChatGPT pour lui signaler ce qui ne fonctionne pas, ou mal.

Des « bugs » — le fonctionnel n’est pas conforme — 5 bugs, pas plus.

Et du design, ergonomie, 5 itérations aussi.

Parfois je lui explique ce qui ne va pas. Parfois j’ai la flemme alors je le laisse trouver…

Chaque fois, il réécrit une version modifiée de index.html et/ou de quiz.js, que charge sur le serveur à la place de la précédente. Et je recharge mon quiz.

Une fois que le fonctionnel est OK, on passe au design. je lui fournit un screenshot des écrans et je lui demande :

… pour arriver à quelque chose de très présentable.

Vous pouvez l’essayer à cette adresse : https://www.bxfrance.fr/formations/qcmv2/

Pour finir, j’ai demandé à ChatGPT d’optimiser les codes, sans altérer ni les fonctionnalités ni le design. Je ne suis pas compétent pour dire si c’est bien optimisé mais le code a réduit d’1/3. Et ça marche encore !

Limites, difficultés rencontrées et ce qu’il resterait à faire pour aller plus loin

Dans un premier temps, impossible de lui faire lire le .pdf de bonnes pratiques. J’ai dû changer de chat. je ne sais pas pourquoi (surcharge de la plate-forme ?)

Aussi, dans ma première version, le Json de questions, réponses, commentaires avait une structure syntaxiquement juste, mais complexe. En m’y reprenant, j’ai obtenu une structure plus simple. Et puis merci ChatGPT pour la correction syntaxique !

Il ne faut pas s’énerver si une demande de correction n’est pas prise en compte correctement. Une occasion d’apprendre à bien s’exprimer, clairement, précisément (utiliser scrupuleusement nom des pages, des éléments…), avec des copies d’écran en support…

Je m’en suis tenu à ce périmètre fonctionnel. J’aurais pu ajouter :

• création de compte utilisateur (même sommaire : juste une adresse e-mail) ;
• enregistrer quelque part les résultats de l’utilisateur ;
• transmettre les résultats à un évaluateur ;
• ajouter des dizaines de questions, ce ne sont pas les sujets qui manquent ;
• rendre le nombre de questions du quiz paramétrable ;
• varier les types de réponses possibles, voire les types de QCM…
• utiliser un gestionnaire de versions pour tracer les évolutions de l’appli pendant son élaboration itérative ;
• sûrement utiliser un environnement de développement interfacé avec ChatGPT pour éviter les aller-retours et copier-coller entre le chat, l’éditeur de code, le serveur, le navigateur…

Vous qui êtes de vrais analyste-programmeurs compétents, n’hésitez pas à expliquer en commentaires comment il faut faire. Je suis avide d’apprendre.

En attendant, j’espère que ce rapport d’expérience donnera aux autres l’envie de s’augmenter en osant sortir de leur zone de confort.