Exercice customisé : quiz de type "Vous êtes plutôt ceci/cela"

Si vous souhaitez faire un quiz, comme on pourrait en trouver dans les magazines du type, "Si vous avez un maximum d'étoiles vous êtes de profil X, et si vous avez un maximum de carrés, vous êtes plutôt de profil Z", nous vous proposons ici un tutoriel avec un exemple de code en pièce jointe, que vous pourrez copier-coller dans votre composant exercice.

A quoi peut servir cet exercice ? Par exemple, comme c'est le cas dans l'exemple que nous avons repris, pour permettre à l'apprenant de déterminer son profil d'apprentissage, à savoir s'il est plutôt visuel, auditif ou kinesthésique.

Les lignes qui vont suivre vous expliqueront comment faire à partir de l'exemple joint, dans lequel le code est par ailleurs commenté afin de vous guider. En effet, il y a des modifications à apporter dans les balises XML, mais aussi dans du code JavaScript et Python, qu'il ne faut pas modifier à la légère sinon cela ne fonctionnerait plus.

Créer et paramétrer le composant

• Créez un composant exercice avancé ("Blank Advanced Problem"). Ainsi vous aurez la coloration syntaxique, ce qui ne sera pas superflu.

• Copiez-collez le code fourni dans le fichier texte ci-joint.

Ajustez ensuite les paramètres du composant :

• Afficher la réponse : sélectionnez "jamais". En effet, la solution s'affichera automatiquement au moment où l'apprenant envoie sa réponse, car elle est gérée par les scripts.

• Nom d'affichage : ajustez le titre de l'exercice à votre convenance.

• Poids de l'exercice : ajustez à votre convenance selon les règles mises en place dans votre MOOC. Si vous laissez vide, ce sera 1 point pour l'ensemble de l'exercice. Si vous voulez octroyer 1 point par question, indiquez-en le nombre. Enfin, vous pouvez choisir de mettre 0. Nota : mettre 0 points à un exercice et mettre sa sous-section en "Non noté" sont deux actions différentes qui n'ont pas la même conséquence. Voir l'article sur le paramétrage de l'évaluation du MOOC.

Modifier le contenu du quiz

Penchons-nous maintenant sur le code que vous avez copié-collé.

Il est basé sur un principe de 3 profils. Chaque question a trois réponses. Chaque réponse est soit a soit b soit c (ou carré, étoile, triangle, si nous étions dans un magazine). Un script va compter le nombre de a, de b et de c, pour définir si l'apprenant est plutôt du profil A B ou C. Puis un script va afficher un message différent selon le profil.

1. La consigne

Indiquez l'énoncé, la consigne tout simplement dans des balises paragraphe <p></p> et <br/>.

2. Les questions

La question est dans une balise <p></p>.

Les réponses, des boutons radio, sont sous forme de balise <input type="radio">.

Il vous reste à ajuster les attributs :

• name="q1" pour la question 1, name="q2" pour la question 2, etc.

• onclick="assign_JSinput(1, 'a')" où 1 est le numéro de la question et a la lettre associée au profil. Donc pour la question 1 vous avez trois balises input où onclick="assign_JSinput(1, 'a')", ou b ou c.

Par exemple :

<p>8) Question/Proposition 8</p>  
 <input type="radio" name="q8" onclick="assign_JSinput(8, 'a')"/> Texte de la réponse/du choix A<br/>  
 <input type="radio" name="q8" onclick="assign_JSinput(8, 'b')"/> Texte de la réponse/du choix B<br/>  
 <input type="radio" name="q8" onclick="assign_JSinput(8, 'c')"/> Texte de la réponse/du choix C<br/>

3. Le script JavaScript : enregistre les réponses

Une seule ligne à modifier éventuellement : si vous ajoutez ou supprimez des questions, il faut indiquer le nombre total de questions dans la ligne suivante.

number_of_questions = 8;

Le script Python : affichage du message (solution)

Ne pas modifier à la légère ce script python. Ce que vous devrez modifier : le texte des messages à afficher selon le profil A B ou C.

Pour chaque profil vous aurez un code de ce type, ici pour le profil A :

   if "a" in ans:  
         message = "<b>Vous êtes plutôt A - partie du texte qui s'affiche en gras</b><br/> Description du profil A en quelques mots."   
         message = "<div style='border: 1px solid #000; padding: 8px; margin-top: 12px;'>{0}</div>".format(message)  
         return {'ok': True, 'msg': message}

Faites de même pour bloc de code commençant par if "b" in ans: correspondant donc au profil B.

Faites de même pour bloc de code commençant par if "c" in ans: correspondant donc au profil C.

Si le nombre de réponses ne permet pas de définir un profil type, c'est à dire parce que deux profils sont égaux, alors l'apprenant aura un message de type "Vous avez un profil mixte", dont il vous faudra aussi modifier le texte. Il s'agit du bloc de code commençant par if "eq" in ans: dans lequel vous procéderez de la même manière que décrit précédemment.

    if "eq" in ans:   
        message = "<b>Comme beaucoup de personnes, vous êtes autant A que B ou C</b><br/> Description du profil mixte en quelques lignes."  
        message = "<div style='border: 1px solid #000; padding: 8px; margin-top: 12px;'>{0}</div>".format(message)  
        return {'ok': True, 'msg': message}

De la même manière, vous pouvez ajuster le texte qui s'affiche si l'apprenant n'a pas répondu à toutes les questions, en modifiant le texte du message associé à la variable  if "missing" in ans:

    if "missing" in ans:  
         message = "Veuillez répondre à toutes les questions pour avoir votre résultat."  
         message = "<font color='red'>{0}</font>".format(message)  
         return {'ok': False, 'msg': message}

Aperçu du quiz

Et si je veux plus de 3 profils ?

Si vous êtes à l'aise avec le JavaScript et le Python :

• Quelques modifications dans le JavaScript pour indiquer toutes les variables

• Quelques modifications dans la partie Python (attention, en Python les indentations sont très importantes, il ne faut pas les faire avec des espaces successifs par exemple)

Si vous n'êtes pas à l'aise ou par esprit pratique :

• Un copier-coller dans un composant "Blank advanced problem", de la version "4 profils" ci-jointe.