«ExerSite» avec HotPotatoes

«ExerSite» avec HotPotatoes
HotPotatoes est un logiciel gratuit qui permet de construire des QCM (questionnaire à choix multiples),
QCU (questionnaires à choix unique), Vrai/Faux, QROC (questionnaires à réponses ouvertes courtes), des mots
croisés…
Sans que l'on ait besoin de connaître le langage Html ou le JavaScript, les exercices créés par
HotPotatoes sont sous forme de pages Web. Lorsqu'un élève travaille sur un de ces exercices, il a la possibilité
de vérifier automatiquement ses résultats..
Tous les exercices que l’on crée peuvent être reliés entre eux très facilement pour former de petits sites
Internet que l'on peut mettre à disposition des élèves sur Internet ou plus simplement sur le réseau d'un
établissement.
Pour plus de détails voir le site : http://yann.bertrand3.free.fr/Web/index.html
Objectif : Apprendre à créer un site d’activités mathématiques utilisable par l’élève en salle informatique ou
chez lui grâce à un ENT.
Mise en œuvre : Dans ce qui suit, on a choisi d’expliquer comment on peut préparer une «autocorrection» de
contrôle sous forme d’exercices HotPotatoes. Voici dans l’encadré ci-dessous le début du texte d’un contrôle:
ABC est un triangle rectangle en B tel que AB=40 et
BC=50. A tout point M du segment [BC] distinct de
ses extrémités, on associe le point N du segment [AC]
tel que les droites (AB) et (MN) soient parallèles.
On note A(x) l'aire du triangle AMN en fonction de la
longueur x du segment [BM].
1. Quelles valeurs peut prendre x ?
2. a. Exprimer MN en focntion de x.
2
b. Démontrer que A x= 50 – x  x
5
3. a Remplir le tableau numérique ci-dessous de
pas 5 qui vous permattra de représe,ter la fonction A.
etc......
Les logiciels dont vous devez disposer:
HotPotatoes ;
GeoGebra (logiciel de géométrie);
NVU (création de page Web).
Ces trois logiciels sont gratuits. Vous pouvez télécharger leur dernière version très facilement en tapant leur
nom sur n’importe qu’elle navigateur de recherche.
Les différentes étapes de construction :
Etape A : Installation du logiciel. Que faire avant de commencer?
Etape B: JCloze (pour la question 1): Comment rédiger une question, insérer une image ; mettre en forme
Etape C: JQuiz (pour la question 2) : Comment rédiger une question, insérer une image ; mettre en forme
Etape D: Faire le lien entre les deux questions (le Jcloze et le JQuiz)
Etape E: Insérer une formule de mathématiques dans le deuxième exercice
Etape F: Créer une animation avec GeoGebra
Etape G: Insérer une animation dans la première question (le JCloze)
Etape H: Insérer un tableau.
Etape I: Créer une page d’accueil pour votre activité.
Autres exemples, autres idées : Dans des chapitres comme les statistiques ou les suites (par exemple) les
exercices de type JCloze rendent les élèves plus autonomes (voir l'exemple).
Etape A: Installation du logiciel HotPotatoes et ce qu’il faut faire avant de commencer
Téléchargement et présentation de HotPotatoes :
Sur le site http://hotpot.uvic.ca/index.htm cliquez sur Downloads.
Langue : Le téléchargement étant fait, vous pouvez choisir votre langue et obtenir la version française (Options
/ Interface / Load Interface file). Cette opération sera à effectuer à la première utilisation de chaque type
d’exercice. Elle est notamment à faire au début des étapes B et C.
La clef : Pour pouvoir utiliser le logiciel sans rencontrer de limites, il vous faut demander un numéro
d’enregistrement sur le site http://hotpot.uvic.ca/index.htm en cliquant sur le lien « Register » du menu. Vous
devrez d’abord lire les termes de la licence puis cocher la case en bas de l’écran pour pouvoir ensuite remplir le
formulaire en veillant à donner une adresse de courriel correcte. Vous recevrez immédiatement un numéro (la
clé d’enregistrement) qu’il faut conserver précieusement.
Lancez HotPotatoes, cliquez sur n’importe quelle typologie d’exercice et dans le menu, cliquez sur « Aide »
puis vous trouverez un item "Enregistrement". Entrez votre nom et votre clé.
Etape B : Exercice de type JCloze (QROC : Questions à Réponses Ouvertes Courtes)
Objectif : créer un QROC à partir de la première question du contrôle. Plus précisément, taper l’énoncé et coller
la figure du contrôle, créer des QROC.
Avant de commencer :
Créer un dossier nommé « exercice ». A l’intérieur de celui-ci créer un dossier « contenu ».
Ouvrez HotPotatoes puis ouvrez un JCloze. Enregistrez cet exercice dans le dossier « contenu ». On pourra le
nommé « question1 ». Cette démarche est importante.
Zone de Titre : Question 1
Le texte : Tapez le texte sur lequel vous désirez voir travailler les élèves.
Comment créer un trou ? :
Quand vous aurez fini de taper votre texte, pour remplacer un mot ou un nombre par un trou, grisez ce mot à
l’aide de la souris puis cliquez sur le bouton « créer un trou » que vous trouverez en bas de page.
Créer votre page Web une première fois : Pour cela, cliquez sur l’onglet (3) et enregistrez votre page dans le
dossier « contenu ». Nommez le aussi « question1 ».
Cliquez ensuite sur « voir l’exercice dans mon navigateur ». Votre page Web apparaît une première fois. Vous
allez pouvoir améliorer la mise en forme et insérer la figure.
Pour insérer une image : Placez vous à l’endroit où vous voulez coller votre image. Cliquez sur Insérer (1) puis
sur « image / à partir d’un fichier local » puis sélectionnez l’image « figure1 » dans le dossier « Documents ».
Définir les paramètres de la page Web : Cliquez sur l’icône (2) et visitez les 4 premiers onglets
(Titre/consignes ; Messages ; boutons ; Apparence).
A la fin, n’oubliez pas de créer votre page Web.
Etape C : Exercice type JQuiz (pour la deuxième question)
Objectif :
Créer un QRU (Questionnaire à Réponse Unique) à partir de la question 2.a. du contrôle. Comme
précédemment, insérer l’énoncé et la figure du contrôle et créer des Questions à Réponses Uniques. On va en
créer au moins deux à partir de la question posée dans le contrôle.
Avant de commencer :
Ouvrez HotPotatoes puis ouvrez un JQuiz. Enregistrez cet exercice dans le dossier « contenu ». On pourra le
nommé « question2 ».
Titre dans la zone (4) : Question 2
La question dans la zone (5) : Tapez la question sur laquelle vous désirez voir travailler les élèves.
Les réponses possibles dans la colonne « Réponses » : A vous de les taper !
Attention : Toutes les formules mathématiques seront entourées de guillemets (Alt Gr + 7).
4
Exemple : Si vous avez le fichier asciimathml.js, la formule MN = 50 – x  sera sera taper `4/5(50-x)` (pour
5
obtenir ce guillemet, faire : Alt Gr puis 7). Sinon, il vous suffira de créer une image de cette formule et de l'insérer en
utilisant l'étapeB.
Sélectionnez la réponse exacte dans la colonne de droite
Pour créer une seconde question en rapport avec la question 2b du contrôle : cliquez sur (2), sélectionnez Q2,
puis posez votre nouvelle question.
Créer votre page Web une première fois : Pour cela, cliquez sur l’icône (3) et enregistrez votre page sous le
nom « question2 » dans le dossier « contenu ».
Cliquez ensuite sur « voir l’exercice dans mon navigateur ». Votre page Web apparaît une première fois. Vous
allez pouvoir améliorer la mise en forme (icône 6 )et insérer l’image.
Pour insérer l’image : Cliquez sur Insérer (1) puis sur « image / à partir d’un fichier local » puis sélectionnez
l’image « figure 1 ».
Définir les paramètres de la page Web : Cliquez sur l’icône (6)
A la fin, n’oubliez pas de créer votre page Web à l’aide de l’onglet (3).
Etape D : Faire le lien entre les deux exercices HotPotatoes « question1 » et « question2 ».
Objectif :
Faire un lien entre la page Web « question1 » et la page Web « question2 » de manière à ce que les élèves,
après la question1, passent à la question 2 d’un simple clique.
Ouvrir le fichier JCloze « question1 », cliquer sur l’onglet (2), de la barre du JCloze :
Dans la fenêtre qui s’ouvre cliquez sur
l’onglet « boutons » puis cochez «inclure
un bouton ‘exercice suivant’ ». Cliquez
ensuite sur « Parcourir » et sélectionnez
la page Web « question2 ». Cliquez sur
«OK».
Actualisez la page Web [icône (3)].
Les deux pages « question1 » et
« question2 » sont maintenant reliées.
A la fin, n’oubliez pas de créer votre
page Web à l’aide de l’onglet (3).
Remarque : On peut de la même manière créer un lien pour revenir à l’exercice « question1 » quand on est
dans l’exercice « question2 » : cliquez dans la fenêtre ci-dessus sur le bouton : Inclure un bouton « Retour ».
Attention : Les étapes E, F, G et H seront à faire consécutivement aux étapes précédentes. C’est pour cela
qu’avant de passer à ces étapes, il est conseillé de sauvegarder une version des pages créées à l’aide de
HotPotaoes. En effet, après avoir fait l’étape E (par exemple), si vous décidez de modifier ce que vous avez fait
avec HotPotatoes, vous serez obligés de refaire, à nouveau, l’étape E.
Etape E : Insérer une formule mathématiques sans avoir à insérer son image
Attention : Pour cette étape il faut avoir le fichier asciimathml.js
Objectif : Ecrire les formules comme nous aimons les
voir !
1. Ouvrir le logiciel NVU ; dans le menu fichier
ouvrir la page Web « question2 » (dans laquelle se
trouvent les formules mathématiques à mettre en
forme). Cliquez en bas sur l’onglet « Source ».
Réduisez ensuite cette page.
2. Dans le dossier « contenu », copiez le fichier « asciimathml » Cette étape est très importante car c’est ce
script qui va transformer les formules écrites en Mathml.
3. Copiez les deux lignes suivantes :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="ASCIIMathML.js"></script>
4. Collez ces deux lignes en haut de la page que vous avez ouverte avec NVU, entre les balises <head> et
</head>, après la balise </title> par exemple.
5. Enregistrez cette page (fichier / enregistrer) puis dans votre dossier « contenu » ouvrez la page Web
« question2 ». Les formules apparaissent normalement.
Remarque : C’est la présence du fichier « asciimathml » dans votre dossier « contenu », qui permet de
transformer ainsi les formules. Il ne faut pas l’oublier.
A la fin, n’oubliez pas de créer votre page Web en enregistrant votre travail (Fichier/Enregistrer).
Etape F : Création d’une animation à l’aide du logiciel Geogebra
Le document « Présentation_ILallierGirot » (écrit par madame Lallier-Girot), vous permettra de prendre en
main le logiciel Geogebra et de construire vos propres figures.
Lorsque vous avez créé votre figure à l’aide de Geogebra, enregistrez la dans le dossier «contenu », sous le
nom, par exemple « Animation ».
Cliquez ensuite sur l’onglet Fichier puis sur Exporter puis sur « feuille de travail dynamique en tant que page
Web (html) » et enregistrez cette page toujours dans le dossier « contenu » et toujours sous le nom
« Animation ».
Etape G : Insérer une animation dans la page « question1 »
Objectif: Améliorer la page «question1» en remplaçant l’image par une animation créée.
1. Dans votre dossier « contenu », ouvrez la page Web nommée « Animation » de manière à voir ce qu’elle
contient.
2. Ouvrez, ensuite, à l’aide du logiciel NVU cette page Web. Cliquez en bas sur l’onglet « Source ».
3. Copiez la ligne 5, <meta name="generator" content="GeoGebra">
4. Ouvrez à l’aide du logiciel NVU la page « question1 ». Cliquez en bas sur l’onglet « Source » et collez la
ligne que vous venez de copier entre les balises <head> et </head>, après la balise </title> par exemple.
5. Dans la page « Animation », lue par NVU, copiez tout ce qui ce trouve entre les balises <Applet code…> et
</Applet> (des lignes 16 à 24).
6. Collez ces lignes dans la page « question1 », lue par NVU, à la place de :
<img src="Figure1.jpg" alt="Figure1.jpg" title="Figure1" height="355" width="429">
7. Enregistrez votre nouvelle page. Elle est maintenant animée !
A la fin, n’oubliez pas de créer votre page Web en enregistrant votre travail (Fichier/Enregistrer).
Etape H : Créer un tableau numérique
Objectif : Créer une nouvelle question dans l'activité, au sujet de la question 3. a. de l'exercice proposé.
1. Ouvrez HotPotatoes puis ouvrez un JCloze. Enregistrez cet exercice dans le dossier « contenu ». On pourra
le nommé « question5 ». Cette démarche est importante.
2. Tapez l'énoncé puis cliquez sur (1), pour insérer un tableau ayant 2 lignes et 12 colonnes.
3. Quand vous aurez cliquer sur OK, il apparaîtra alors le code Html que vous
devrez compléter en vous appuyant sur le modèle ci-dessous (ici seule la
première ligne du tableau a été complétée). Il reste à compléter la deuxième
et à créer les trous (voir l'étape B).
N'oubliez pas d'enregistrer votre JCloze (Fichier / Enregistrer) et ensuite,
n’oubliez pas d'actualiser votre page Web en cliquant sur l'icône (3).
Etape I : Créer une page d’accueil pour votre activité
Dans NVU, cliquez sur l’onglet New.
Enregistrez cette page dans le dossier « exercice » (créé à l’étape B) à l’extérieur du dossier « contenu »,
nommez la, par exemple, « index ». Ceci étant fait écrire sur la page, le titre que vous voulez donner à votre
activité, vos consignes, etc…. puis créez votre lien avec la page « question1 » en écrivant par exemple :
Pour commencer l’exercice : COMMENCER
Sélectionnez le mot COMMENCER, puis à l’aide d’un clique droit choisissez « Create Link » puis « Choose
File » et sélectionnez dans « Documents » le fichier « question1 ».
Cette page d’accueil peut être améliorée par exemple en permettant, ici, aux élèves de voir le texte du contrôle
et sa correction. Pour cela écrire :
Pour voir le texte du contrôle et sa correction : TEXTE et CORRECTION
Grisez les mots TEXTE et CORRECTION, puis à l’aide d’un clique droit, choisissez « Create Link » puis
« Choose File » et sélectionnez dans « contenu » le fichier pdf « Texte» dans lequel vous aurez mis le texte
complet de l’exercice.
Votre page d’accueil est faite !
A la fin, n’oubliez pas de créer votre page Web en enregistrant votre travail (Fichier/Enregistrer).