vendredi 31 janvier 2014

Coder un questionnaire interactif à choix multiple avec innerHTML


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".