Coder un questionnaire interactif à choix multiple avec innerHTML [jan 2014]

Besoin pédagogique

Un "questionnaire à réponses multiples" est un outil pédagogique utile pour vérifier après la lecture d'un contenu si certains points ont bien été retenus ou compris par l'apprenant, et le cas échéant, pour apporter des éclairages supplémentaires en commentant les choix de l'apprenant.

L'expérience de l'apprenant est la suivante :

1. l'apprenant lit le contenu
2. l'enseignant pose une (des) question(s) à réponses multiples
3. l'apprenant choisit une réponse
4. l'enseignant notifie à l'apprenant si la réponse choisie est celle attendue
5. l'enseignant apporte éventuellement des commentaires en fonction du choix.

Orientation opérationnelle
- Produire un code dont la qualité déterminante du code est de permettre une revue rapide, une évolution aisée du contenu et une reproduction simple par des fonction éditoriales immédiates telles que copier/coller/remplacer.
- Produire un code zéro bug, propre, élémentaire, modulaire et transparent.

Cinq principes de codage
- 1. Séparer le contenu pédagogique et les mécanismes pédagogiques
- 2. Encapsuler le contenu pédagogique
- 3. Documenter le design du code
- 4. Publier le document de design
- 5. Placer des commentaires dans le code même

Exercice proposé

Spécification du code
- afficher la question : "Ce billet vous a-t-il plu ?" et un bouton "OUI" un bouton "NON"
- si on clique "OUI", afficher sous les boutons "Merci pour votre participation. Bonne continuation"
- si on clique "NON", afficher sous les boutons "Merci pour votre participation. Je vous invite à me joindre pour améliorer le billet"

Eléments du design adopté
Trois méthodes pour accéder au champ "retour"
- codage d'une fonction yes() : afficher sous les boutons "Merci pour votre participation. Bonne continuation"
- codage d'une fonction no() : afficher sous les boutons "Merci pour votre participation. Je vous invite à me joindre pour améliorer le billet"
- codage d'une fonction init() : afficher sous les boutons "Ici, la retour de l'enseignant selon OUI ou NON"

Examen du code
Si vous utilisez les fonctionnalités de votre navigateur (sur Firefox,l'onglet outils/développeur web/inspecteur), vous verrez que le code est bien mélangé avec le code de Blogger. Voici ci-dessous le code essentiel qu a été écrit en mode conception/modifier/HTML dans la page de Blogger.

Pour des informations complémentaires sur le code et notamment innerHTML, je suggère de visiter le MOOC 3Wschools

Résultat de la production du code

DEBUT
Souhaitez-vous faire un don?

Ici, le retour de l'enseignant selon OUI ou NON

FIN

Note : vous ne pouvez pas faire un simple copier/coller à partir de l'écran : le code est mixé avec le code de Blogger. Il vous faut réécrire le code sous HTML dans votre environnement, Blogger, Wordpress ou autre. Pour Blogger, il faut se mettre en mode Conception/Modifier/ "HTML" au lieu du mode Conception/Modifier/ "Rédiger"

Mise à jour du 21 août 2014

Le contenu a été intégré dans un short MOOC "Coder un quiz interactif en HTML5".

 

Mise à jour novembre 2023
Le questionnaire intéractif a été intégré dans le Personal MOOC [a], un service frugal mais professionnel d'édition de MOOC élu trophée Innovation numérique par les membres du CRIP lors de la cinquième édition de IT Innovation Forum, janvier 2015. 

[a] Les technologies et services numériques intégrés dans le Personal MOOC, mai 2015
[b]Un projet de responsabilité sociale d'entreprise, Trophée innovation numérique, fev 2015