Un framework javascript pour ajouter des exercices interactifs à une page web

Quiz-Script Framework

Présentation du framework

Quiz-Script est un framework javascript permettant d’ajouter des exercices interactifs à un site web. Disponible en téléchargement gratuit sur le site de l’auteur, cet environnement met à disposition une dizaine d’exercices différents que l’on peut intégrer à une page web en y copiant un code Html spécifique.

Les dix types d’exercices

  • Associations par paires (images et/ou mots) par glisser/déposer
  • Associations par groupes (images et/ou mots) par glisser/déposer
  • Champs à compléter par glisser/déposer ou champ de saisie
  • Puzzle (images)
  • Memory (images et/ou mots)
  • Questionnaire à choix multiples
  • Quiz avec champ de saisie
  • Mots croisés
  • Mots mêlés
  • Pendu

Les types d’exercices sont intéressants et variés. Ils permettent de réaliser de nombreux exercices.

Installation du framework

Disponible en téléchargement gratuit sous Licence GNU Lesser General Public License (LGPL), il est nécessaire de télécharger Quiz-Script Framework puis de décompresser et de copier le dossier obtenu à l’endroit voulu sur le serveur.

Pour appeler le script à partir de votre page web, placer le code ci-dessous dans la balise <head> de votre page Html :

<script src="votre-emplacement-sur-le-serveur/quiz/quiz.js" type="text/javascript"></script>

Création et intégration des exercices

Hélas, il n’existe pas d’interface livrée avec le script qui permette de créer des exercices de manière intuitive. Cela pourra d’ailleurs paraître assez laborieux pour les personnes n’ayant pas les connaissances de base en Html. C’est un peu l’ombre au tableau.

Comme l’explique l’auteur, une fois le script installé, celui-ci détecte la présence de balises particulières dans le code Html de la page. Quand il reconnaît certaines classes CSS prédéfinies ou des balises Html particulières, il transforme directement le code en exercice.

Dans le code ci-dessous,par exemple, la classe CSS « lueckentext-quiz » indique qu’il s’agit d’un exercice lacunaire et la balise <strong> transforme le mot « troisième » en champ de saisie.

<div class="lueckentext-quiz" lang="fr">
<p>Dormir est un verbe du <strong>troisième</strong> groupe.</p>
</div>

Ce qui a pour effet:

Autre exemple, voici le code à insérer pour une question à choix multiples. De la même manière, une div avec une classe CSS « multiplechoice-quiz » et une organisation avec des parenthèses pour le choix des réponses. Le point d’exclamation signifiant : « Différent », la bonne réponse est donc marquée par l’absence de « ! ».

<div class="multiplechoice-quiz" lang="fr">
<p>Choisir est un verbe du (!1er groupe) (2ème groupe) (!3ème groupe)</p>
</div>

Ce qui a pour effet:

Le framework prévoit une gestion aléatoire. Ainsi, chaque fois que vous actualisez la page, les réponses sont présentées de manière différente. Bien entendu, une fois l’exercice terminé, l’élève a accès directement au corrigé. Vous noterez à ce sujet la présence du lang= »fr » dans les deux codes ci-dessus. L’auteur ayant prévu une traduction, le fichier « multilingual.js » vous permettra d’entrer vos propres termes à l’aide d’un éditeur.

Voilà pour le principe de manière générale. L’idée étant ensuite de disposer d’un modèle de code pour chacun des exercices et le tour est joué.

Les codes pour chaque exercice

Voici un exemple pour chaque type d’exercices (Il s’agit d’une traduction rapide des exemples proposés par l’auteur), ainsi que le code Html s’y rapportant.
Les associations

Associations

Déplace les étiquettes vertes sur les cases correspondantes.

AbeilleAbeille
PoirePoire
CochonCochon

 


<div class="zuordnungs-quiz" lang="fr">
<h2 id="zuordnungs-quiz">Associations</h2>
<p>Déplace les étiquettes vertes sur les cases correspondantes.</p>
<table>
<tr>
<td><img src="quiz/images/abeille.jpg" alt="Abeille" /></td>
<td>Abeille</td>
</tr>
<tr>
<td><img src="quiz/images/poire.jpg" alt="Poire" /></td>
<td>Poire</td>
</tr>
<tr>
<td><img src="quiz/images/cochon.jpg" alt="Cochon" /></td>
<td>Cochon</td>
</tr>
</table>
</div>

Les associations par groupes

Associations par groupes

Déplace les étiquettes vertes dans les groupes correspondants.

InsectesPunaiseAbeilleFourmiMite
FruitsPrunePoirePommeCeriseBanane
Animaux de la fermeMoutonCochonVache

 

<div class="zuordnungs-quiz" lang="fr">
<h2 id="zuordnungs-quiz-gruppenweise">Associations par groupes</h2>
<p>Déplace les étiquettes vertes dans les groupes correspondants.</p>
<table>
<tr>
<td>Insectes</td>
<td>Punaise</td>
<td><img src="quiz/images/abeille.jpg" alt="Abeille" /></td>
<td>Fourmi</td>
<td>Mite</td>
</tr>
<tr>
<td>Fruits</td>
<td>Prune</td>
<td><img src="quiz/images/poire.jpg" alt="Poire" /></td>
<td>Pomme</td>
<td>Cerise</td>
<td>Banane</td>
</tr>
<tr>
<td>Animaux de la ferme</td>
<td>Mouton</td>
<td><img src="quiz/images/cochon.jpg" alt="Cochon" /></td>
<td>Vache</td>
</tr>
</table>
</div>

Les champs à compléter

Champs à compléter

Complète les champs blancs et déplace les étiquettes vertes sur les champs verts.

Une petite abeille | guêpe (Abeille) a volé une poire (Poire) et demande sa direction au petit porc | cochon (Cochon). Pas de problème, dit la poire (Poire). Il suffit de suivre le chemin à gauche! Si vous rencontrez un problème en route, demandez simplement (pas compliqué) au prochain policier!

 

<div class="lueckentext-quiz" lang="fr">
<h2 id="lueckentext-quiz">Champs à compléter</h2>
<p>Complète les champs blancs et déplace les étiquettes vertes sur les champs verts.</p>
<p>Une petite <strong>abeille | guêpe (<img src="quiz/images/abeille.jpg" alt="Abeille" />)</strong> a volé une <strong>poire (<img src="quiz/images/poire.jpg" alt="Poire" />)</strong> et demande sa direction au petit <strong>porc | cochon (<img src="quiz/images/cochon.jpg" alt="Cochon" />)</strong>. Pas de <strong>problème</strong>, dit la <strong>poire (<img src="quiz/images/poire.jpg" alt="Poire" />)</strong>. Il suffit de suivre le <strong>chemin</strong> à <strong>gauche</strong>! Si vous rencontrez un <strong>problème</strong> en route, demandez <strong>simplement (pas compliqué)</strong> au prochain policier!</p>
</div>

Le puzzle

Puzzle

Reconstruis l’image en déplaçant les pièces du puzzle dans le cadre ci-dessous.

Preview.

 

<div class="lueckentext-quiz" lang="fr">
<h2 id="bilderpuzzle">Puzzle</h2>
<p>Reconstruis l'image en déplaçant les pièces du puzzle dans le cadre ci-dessous.</p>
<p><img src="quiz/images/puzzle-quiz/ostern_ganz_vorschau.jpg" alt="Preview." class="linksbuendig" /></p>
<table class="puzzle">
<tr>
<td><em><img src="quiz/images/puzzle-quiz/ostern_1_1.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_1_2.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_1_3.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_1_4.jpg" alt="" /></em></td>
</tr>
<tr>
<td><em><img src="quiz/images/puzzle-quiz/ostern_2_1.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_2_2.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_2_3.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_2_4.jpg" alt="" /></em></td>
</tr>
<tr>
<td><em><img src="quiz/images/puzzle-quiz/ostern_3_1.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_3_2.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_3_3.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_3_4.jpg" alt="" /></em></td>
</tr>
<tr>
<td><em><img src="quiz/images/puzzle-quiz/ostern_4_1.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_4_2.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_4_3.jpg" alt="" /></em></td>
<td><em><img src="quiz/images/puzzle-quiz/ostern_4_4.jpg" alt="" /></em></td>
</tr>
</table>
</div>

Le memory

Memory

Retrouve les images correspondantes

PoirePoirePoire
AbeilleAbeilleAbeille
CochonCochonCochon

 

<div class="memo-quiz" lang="fr">
<h2 id="memo-quiz">Memory</h2>
<p>Retrouve les images correspondantes</p>
<table>
<tr>
<td><img src="quiz/images/poire.jpg" alt="Poire" /></td>
<td>Poire</td>
<td><img src="quiz/images/poire.jpg" alt="Poire" /></td>
</tr>
<tr>
<td><img src="quiz/images/abeille.jpg" alt="Abeille" /></td>
<td>Abeille</td>
<td><img src="quiz/images/abeille.jpg" alt="Abeille" /></td>
</tr>
<tr>
<td><img src="quiz/images/cochon.jpg" alt="Cochon" /></td>
<td>Cochon</td>
<td><img src="quiz/images/cochon.jpg" alt="Cochon" /></td>
</tr>
</table>
</div>

Les questions à choix multiples

Questions à choix multiples

Les questions suivantes peuvent avoir plusieurs réponses correctes!

Qui a découvert l’Amérique?? (Christophe Colomb)(!Marco Polo)(!James Cook)

Quel animal est un mammifère? (!Requin)(Baleine)(Kangourou)(!Mésange)(Souris)(!Abeille)

Alexandre Legrand était (!Egyptien) (Macédonien) (!Arabe) (!Grèque) (!Perse)

 

<div class="multiplechoice-quiz" lang="fr">
<h2 id="multiplechoice-quiz">Questions à choix multiples</h2>
<p>Les questions suivantes peuvent avoir plusieurs réponses correctes!</p>
<p>Qui a découvert l'Amérique?? (Christophe Colomb)(!Marco Polo)(!James Cook)</p>
<p>Quel animal est un mammifère? (!Requin)(Baleine)(Kangourou)(!Mésange)(Souris)(!Abeille)</p>
<p>Alexandre Legrand était (!Egyptien) (Macédonien) (!Arabe) (!Grèque) (!Perse)</p>
</div>

Les champs à compléter

Champ à compléter

Ecris le mot qui convient

Le jeune oiseau attrape un ver.

Internet est un réseau d’ordinateurs connectés dans le monde entiers.

 

<div class="schuettel-quiz" lang="fr">
<h2 id="schuettel-quiz">Champs à compléter</h2>
<p>Ecris le mot qui convient</p>
<p>Le <strong>jeune</strong> oiseau <strong>attrape</strong> un ver.</p>
<p><strong>Internet</strong> est un <strong>réseau</strong> d'ordinateurs connectés dans le monde entiers.</p>
</div>

Les mots croisés

Mots croisés

Clique sur un nombre de la grille pour obtenir la définition et écrire le mot correspondant.

jardinLieu public avec des plantes et des fleurs
moustiqueUn insecte qui pique
arbrePlante de laquelle on extrait le bois
soleilSource de lumière disponible uniquement la journée
ventMouvement de l’air qui peut changer le temps
fleurTerme général pour la floraison des plantes
PommeCertains fruits poussent sur les arbres
CochonAnimal qui a une queue en tire-bouchon

 

<div class="kreuzwort-quiz" lang="fr">
<h2 id="kreuzwort-quiz">Mots croisés</h2>
<p>Clique sur un nombre de la grille pour obtenir la définition et écrire le mot correspondant.</p>
<table>
<tr>
<td>jardin</td>
<td>Lieu public avec des plantes et des fleurs</td>
</tr>
<tr>
<td>moustique</td>
<td>Un insecte qui pique</td>
</tr>
<tr>
<td>arbre</td>
<td>Plante de laquelle on extrait le bois</td>
</tr>
<tr>
<td>soleil</td>
<td>Source de lumière disponible uniquement la journée</td>
</tr>
<tr>
<td>vent</td>
<td>Mouvement de l'air qui peut changer le temps</td>
</tr>
<tr>
<td>fleur</td>
<td>Terme général pour la floraison des plantes</td>
</tr>
<tr>
<td>Pomme</td>
<td>Certains fruits poussent sur les arbres</td>
</tr>
<tr>
<td>Cochon</td>
<td>Animal qui a une queue en tire-bouchon</td>
</tr>
</table>
</div>

Les mots mêlés

Mots mêlés

Retrouve les mots suivants dans cette grille : ARBRE, FLEUR, ABEILLE, JARDIN, POIRE, MOUSTIQUE, POMME.

Clique sur la première lettre du mot et sans relacher, amène la souris jusqu’à la dernière lettre.

arbre
fleur
abeille
jardin
poire
moustique
pomme

 

<div class="suchsel-quiz" lang="fr">
<h2 id="suchsel-quiz">Mots mêlés</h2>
<p>Retrouve les mots suivants dans cette grille : ARBRE, FLEUR, ABEILLE, JARDIN, POIRE, MOUSTIQUE, POMME.</p>
<p>Clique sur la première lettre du mot et sans relacher, amène la souris jusqu'à la dernière lettre.</p>
<table>
<tr><td>arbre</td></tr>
<tr><td>fleur</td></tr>
<tr><td>abeille</td></tr>
<tr><td>jardin</td></tr>
<tr><td>poire</td></tr>
<tr><td>moustique</td></tr>
<tr><td>pomme</td></tr>
</table>
</div>

Le pendu

Le pendu

Retrouve le mot secret en proposant des lettres.

Tous les mots correspondent à des animaux.

Lion
Abeille
Hirondelle
Cheval
Chien
Chat
Cochon

 

<div class="buchstabenraten-quiz" lang="fr">
<h2 id="buchstabenraten-quiz">Le pendu</h2>
<p>Retrouve le mot secret en proposant des lettres.</p>
<p>Tous les mots correspondent à des animaux.</p>
<table>
<tr><td>Lion</td></tr>
<tr><td>Abeille</td></tr>
<tr><td>Hirondelle</td></tr>
<tr><td>Cheval</td></tr>
<tr><td>Chien</td></tr>
<tr><td>Chat</td></tr>
<tr><td>Cochon</td></tr>
</table>
</div>

 

Conclusion

Bien que peu attractif de par la manipulation du code, ce créateur d’exercices peut s’avérer bien pratique pour qui possède quelques bases en Html. Surtout qu’en soi, le framework javascript tient la route. Dix types d’exercices avec des actions de glisser/déposer, une gestion des images, des mots croisés, un memory etc… On sort du cadre habituel des questions à choix multiples.
Avec un peu d’habitude, on réalise très vite des exercices que l’on peut insérer directement dans le contenu par simple copier/coller d’un modèle d’exercices.

Caractéristiques

  • Configuration : Windows, Mac, Linux
  • Licence : Gratuit (GNU Lesser General Public License)
  • Auteur : Felix Riesterer
  • Langue : Allemand (taduction anglais, français etc...)
  • Difficulté : Nécessite des connaissances de base en Html
  • Documentation : http://www.felix-riesterer.de/main/seiten/quiz-script.html
Vous aimez cet article? Partagez-le sur les réseaux !

11 réflexions au sujet de « Un framework javascript pour ajouter des exercices interactifs à une page web »

  1. Ping : Quiz, questionnaires, sondages | Pearltrees

  2. Ping : Prof geek | Pearltrees

  3. Ping : TIC | Pearltrees

  4. Ping : Image dynamique swf html5 | Pearltrees

  5. Le , daurelle marie a dit :

    J’essaie désespérément de mettre cela en pratique, mais je n’y arrive pas pouvez-vous regarder comment je m’y prends dans ma rubrique « partage de documents » et me dire où je pêche…

  6. Le , Patrick Finot a dit :

    Bonjour Marie,

    Je pense qu’il vous manque simplement la partie qui se trouve dans le paragraphe « Installation du framework » dans les explications ci-dessus.

  7. Ping : Generateurs d'exercices | Pearltrees

  8. Le , Serris a dit :

    Je suis tombée sur votre page par hasard au gré de mes recherches, et je voulais vous remercier. Ce framework est fantastique et très simple à utiliser.
    Je me demandais seulement si vous saviez comment personnaliser les messages de félicitation / erreur qui apparaissent à la fin des exercices ? Il y a quelques petite fautes d’orthographe dedans. Je suis loin d’être une spécialiste (j’ai des notions de base en HTML, et cela s’arrête là pour moi). J’ai scanné les fichiers .js et le site du concepteur sans trouver où effectuer la modification. Si vous avez une idée, merci d’avance ! Mais sinon, bravo encore pour cette trouvaille !

  9. Le , Patrick Finot a dit :

    Bonjour et merci pour votre commentaire.
    Dans le dossier « quiz », vous trouverez un fichier nommé « multilingual.js » et c’est dans celui-ci que se trouvent les messages.

  10. Le , Florence Serris a dit :

    Patrick Finot : Effectivement ! C’était évident, et c’est moi qui avait scrollé trop rapidement ce fichier. ça m’apprendra, je suis parfois pire que mes élèves. Merci encore pour la rapidité de votre réponse !

  11. Le , Patrick Finot a dit :

    Avec plaisir…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *