Tutoriel Hot Potatoes 6

1. La barre d’outils .............................................................................................................................................. 3

2. Les différents types d’exercices ...................................................................................................................... 4

2.1. JQuizz ...................................................................................................................................................... 4
2.1.1. Démarche pour la création d’un QCM (option Multi-sélection ou Qcm) ....................................... 4
2.1.2. Démarche pour la création d’un Quiz (questions à réponse courte) (option Quiz ou Hybride)..... 5
2.2. JCloze....................................................................................................................................................... 7
2.3. JMatch ..................................................................................................................................................... 8
2.4. JCross..................................................................................................................................................... 10
2.5. JMix ....................................................................................................................................................... 11

3. Personnalisation des exercices ..................................................................................................................... 13

3.1. Onglet « Titre/Consignes » : sous titre et consignes à faire apparaitre à chaque question ................. 13
3.2. Onglet « Messages » : choisir les indicateurs et messages à faire apparaitre à l’apprenant lorsqu’il
valide une réponse ............................................................................................................................................ 13
3.3. Onglet « Boutons » : libellé des boutons à faire apparaitre pour valider, naviguer d’une question à
une autre, d’un exercice à un autre .................................................................................................................. 14
3.4. Onglet « Apparence » : modifier l’aspect des pages HTML produites.................................................. 14
3.5. Onglet « Autres » (les cases à cocher diffèrent selon les exercices produits) ...................................... 16
3.6. Permettre à l’apprenant d’accéder à des ressources ........................................................................... 16

4. Gestion des images ....................................................................................................................................... 18

4.1. Redimensionner les images .................................................................................................................. 18
4.2. Insertion de l’image dans l’exercice : .................................................................................................... 18
4.3. Configuration de l’image à insérer ........................................................................................................ 18

5. Insérer des fichiers Hotpotatoes dans Moodle............................................................................................. 19

5.1 Préparation des fichiers de l’exercice Hotpotatoes .............................................................................. 19
5.2 Insertion dans Moodle .......................................................................................................................... 20

Guillaume 1 Novembre2014
 Tutoriel Hot Potatoes 6

Hot Potatoes est un logiciel gratuit (freeware) téléchargeable sur le site suivant :
http://web.uvic.ca/hrd/hotpot/index.php#downloads.
Il permet de créer de manière intuitive 5 types d'exercices différents interactifs puis de les publier au
format HTML sur internet (autoévaluation des élèves, exercices en ligne…). Il permet d‘obtenir
différentes stratégies d'apprentissage et compétences chez l'apprenant.
Aucune connaissance de programmation n’est nécessaire : quel que soit les exercices, vous devez
entrer vos données, textes, questions, réponses… et le logiciel qui fonctionne sous JavaScript créera
le code HTML.

Ecran d’accueil au lancement du logiciel :

Pour créer les 5 types d’exercices différents, soit le choisir dans le menu déroulant « Potatoes » soit
cliquer directement sur l’une des pommes de terre :
• JQuiz est un programme qui permet de créer des questionnaires à choix multiples ou un
questionnaire où l’élève doit taper la réponse, extension .jqz
• JMix est un programme qui permet de créer un exercice où l'élève doit remettre en ordre des
segments de phrase, extension .jmx
• JCross est un programme qui permet de créer des mots-croisés, extension .jcw
• JMax est un programme qui permet de créer des exercices de mise en correspondance (2
parties d'une phrase ou une image et un texte), extension .jmt
• JCloze est un programme qui permet de créer des exercices à trous, extension .jcl.

Chacun des programmes possède des options qui permettent de personnaliser les productions :
• insertion de feedbacks qui permet à l'apprenant de comprendre ses erreurs,
• intégration de liens HTML externes qui permet à l’apprenant de construire son apprentissage,
• insertion de multimédia (vidéos, images, sons, animations flash)
• personnalisation de chacun des programmes par modification du code (modification des
couleurs, de la police…).

Remarque : The Masher permet d'agencer entre eux des exercices Hot Potatoes (JQuiz, JCloze,
JCross, JMix et JMatch) pour créer un ensemble cohérent sur un site informatique.

Guillaume 2 Novembre2014
 Tutoriel Hot Potatoes 6

1. La barre d’outils
La barre d'outils est similaire quel que soit le programme de Hot Potatoes utilisé.

Icones Fonctions classiques Icones Fonctions plus spécifiques

Nouvel exercice Ajoute une ressource associée à l’exercice

Ctrl N Ctrl R

Ouvrir un fichier d'exercice Créer une page HTML pour navigateurs

au format Hot Potatoes (extension .htm)
Ctrl O F6
Créer une page HTML dynamique pour
Enregistrer
navigateurs (extension .htm)
Ctrl S Ctrl F6
Enregistrer sous Insérer une image depuis un fichier local

Quitter Insérer une image depuis une adresse Web

Ctrl Q

Annuler Insérer un lien vers un fichier local

Ctrl Z

Couper Insérer un lien vers une adresse Web

Ctrl X

Copier Insérer des caractères unicode

Ctrl C
Définir les paramètres de la page Web (titre,
Coller
message, boutons)
Ctrl V
Voir le fichier d'aide (en
anglais)

La barre d'outils peut être modifiée, une fois l’un des programmes lancés, dans le menu options de la
barre d'outils afin d'y faire figurer les icônes qui correspondent aux fonctions les plus utilisées.

Quelques règles à respecter durant la réalisation d’un exercice :

• créer un dossier au nom de l’exercice où seront enregistrés :
le dossier « images » où seront stockées tous les fichiers images de l’exercice : cette
organisation est indispensable pour qu’au moment de l’enregistrement au format Hot
Potatoes puis au format HTML, un chemin relatif soit établi entre le fichier d’exercice et
l’image,
tous les fichiers au format Hot Potatoes de l’exercice créés,
tous les fichiers au format HTML générés pour une lecture de l’exercice sur un
navigateur (firefox, internet explorer…).
• choisir des noms de fichier écrit en minuscule sans caractères « spéciaux » : ponctuation,
espaces, lettres accentuées...
• enregistrer les exercices au format Hot Potatoes avant de générer une page HTML.

Guillaume 3 Novembre2014
 Tutoriel Hot Potatoes 6

2. Les différents types d’exercices

2.1. JQuizz

Il permet de réaliser plusieurs types d'exercices à choisir dans le menu déroulant à droite :
• Qcm permet de créer un questionnaire à choix multiple standard pouvant inclure
commentaires, images, éléments multimédia...
• Quiz permet de créer un test à réponse courte où l’apprenant saisit une réponse au clavier
• Hybride permet de créer un quiz où l'apprenant saisit une réponse au clavier mais s'il n'y
arrive pas directement, la question formulée au quiz est transformée en QCM
• Multi-sélection permet de créer un QCM où plusieurs réponses doivent être validées afin que
la réponse soit comptée comme correcte

2.1.1. Démarche pour la création d’un QCM (option Multi-sélection ou Qcm)

6 flèche pour passer à la question suivante et recommencer

8 Générer un fichier HTML

7 Enregistrer 1 Indiquer le titre

2 Indiquer la question à poser

3 Indiquer les 4 Indiquer les commentaires qui seront

donnés à l’apprenant une fois qu’il aura
réponses possibles.
validé ses réponses.
Possibilité de mettre
Si aucun commentaire, le programme en 5 cocher la (les)
autant de réponses
indique un par défaut bonne(s) réponse(s)
voulues en cliquant
sur la flèche

9 Regarder l'exercice dans le navigateur.

Guillaume 4 Novembre2014
 Tutoriel Hot Potatoes 6

Remarques : Qcm diffère profondément de multi-sélection :

• dans Qcm, l'apprenant doit choisir une seule bonne réponse bien que plusieurs réponses
puissent être correctes (étape 5 : cocher « exact »),
• dans multi-sélection, on crée des questions à sélection multiple où l'apprenant effectue un
choix pour chacune des possibilités de réponse affichées ; plusieurs possibilités de réponses
constituent la bonne réponse (étape 5 : cocher chacune des possibilités de réponses
constitutives de la bonne réponse). Il est conseillé d’écrire une rétroaction pour chacune des
possibilités de réponse en ayant à l'esprit que cette rétroaction permettra à l'apprenant de
s'auto-corriger.

2.1.2. Démarche pour la création d’un Quiz (questions à réponse courte) (option Quiz ou
Hybride)

4 flèche pour passer à la question suivante et recommencer

6 Générer un fichier HTML

5 Enregistrer 1 Indiquer le titre
2 Indiquer la question à poser

3 Indiquer les bonnes réponses possibles à la question :

prévoir des réponses fermées
Prévoir les réponses que peuvent proposées les apprenant
(écriture, synonyme…)

Contrairement au QCM, seules des bonnes réponses sont saisies.

Remarque : Hybride combine le Quiz avec le Qcm : l'exercice démarre sous forme de quiz et si après
un certain nombre d'essais (2 par défaut), l'apprenant n'est toujours pas capable de saisir la bonne
réponse au clavier, la même question lui est présentée sous forme de QCM :
• cocher « exact » pour les réponses correctes pour le Quiz,
• cocher « inclure dans le QCM » pour observer ces réponses dans le QCM.

Guillaume 5 Novembre2014
 Tutoriel Hot Potatoes 6

JQuiz fonctionne soit en mode débutant (par défaut), soit en mode avancé. Le passage de l’un à
l’autre se fait par le menu Options / Modus.

Le mode avancé permet de pondérer les questions les unes par rapport aux autres (une question
peut être moins d’importante qu'une autre) et de pondérer les possibilités de réponse (une réponse
peut être partiellement correcte). Cette option permet de noter un exercice.

Pondération des questions en %

poser

Pondération des réponses en %

Guillaume 6 Novembre2014
 Tutoriel Hot Potatoes 6

2.2. JCloze

JCloze permet de créer des exercices à trous.

5 Enregistrer 6 Générer un fichier HTML Flèches pour passer d’un trou à un autre

1 Indiquer le titre
4 Donner un
indice accessible par
l’apprenant (facultatif)

2 Taper ou coller le texte sans y insérer de trous

5 Ajouter d’autres bonnes

3 Sélectionner le mot que l'apprenant doit rechercher (le trou) et le mettre en réponses que le mot
surbrillance puis cliquer sur « Créer un Trou » : le mot devient rouge, italique et sélectionné (facultatif)
souligné
Autres onglets :
« Supprimer un Trou » : positionner le curseur sur le mot sélectionné comme trou puis cliquer sur
l’onglet
« Effacer TOUS les Trous » : supprime tous les mots sélectionnés comme trou
« Créer Trous (Aléatoire) » : crée des trous de façon aléatoire une fois donnée le nombre n, nombre
de mots entre chaque mot sélectionné de façon aléatoire
« Voir les mots enlevés » : permet de modifier un indice ou les autres bonnes réponses une fois le
trou effectué. Utiliser les flèches pour passer d’un trou à un autre.

Guillaume 7 Novembre2014
 Tutoriel Hot Potatoes 6

2.3. JMatch

JMatch permet de créer des exercices de mis en correspondance soit en glisser-déposer , soit en

liste déroulante .

6’ Générer un fichier HTML en liste déroulante

5 Enregistrer
6 Générer un fichier HTML en glisser-déposer (drag'n'drop)
1 Indiquer le titre

paire

2 Placer à gauche les éléments fixes : ici des images ; 3 Placer à droite les éléments qui forment une
le code HTML présent est directement généré après paire avec ceux de la colonne de gauche (paire
l’utilisation de la commande Insertion image sur la même ligne) : au moment de l’exercice,
les différents éléments seront dans le désordre
(Insérer/Image) ou

4 Fixer un élément (facultatif) : au moment de l’exercice, l’élément fixé se positionnera automatiquement à

côté de l'élément de gauche auquel il correspond ce qui peut aider l’apprenant au travail à effectuer

Remarques :
• Création d’une page HTML avec liste déroulante : les images ne peuvent être insérer que
dans la colonne de gauche
• Utiliser des images de poids modeste (redimensionner les images pour une utilisation HTML)
• Utiliser des images de taille modeste : dans la paire encadrée, l’image « w16.gif » à une
largeur de « 85 » et une hauteur de « 75 » (voir gestion des images)

Guillaume 8 Novembre2014
 Tutoriel Hot Potatoes 6

Exemple de mise en correspondance avec Liste déroulante

Exemple de mise en correspondance en glisser-déposer (drag'n'drop)

Guillaume 9 Novembre2014
 Tutoriel Hot Potatoes 6

2.4. JCross
Jcross permet de générer des mots-croisés à partir d’une liste de mots.

3 Cliquer sur l’icône « générer une grille à partir d’une liste

de mots » : les mots sont agencés de façon automatique

1 Indiquer le titre

2 Saisir chacun des mots sur une

ligne séparée

7 Enregistrer 8 Générer le fichier 5 Pour chaque mot horizontaux et verticaux, le

sélectionner (zone grisée), indiquer la définition du

mot puis valider en cliquant sur : la

définition apparait sur la même ligne que le mot

Lieu de remplissage des

définitions

Mot vertical sélectionné Définition validée

4 Cliquer sur « Définitions » pour saisir les

définitions pour chaque mot
6 Valider les mots croisés une
fois toutes les définitions
remplies

Remarque : il est possible de créer les mots croisés en saisissant chacune des lettres dans la grille
manuellement (non intéressant).

Guillaume 10 Novembre2014
 Tutoriel Hot Potatoes 6

Cliquer sur le nombre

pour proposer un mot
dans la zone de
remplissage puis
valider

Exemple de mots croisés

2.5. JMix

Jmix génère des exercices où l'apprenant remet dans l'ordre des segments courts de phrases
proposés dans le désordre.

4 Enregistrer
5’ Générer un fichier HTML en liste de segments
5 Générer un fichier HTML en glisser-déposer (drag'n'drop)

1 Indiquer le titre

2 Saisir la (les) phrase(s) à reconstituer en effectuant

un retour à la ligne pour chacun des éléments

3 Saisir dans « variantes acceptées » une autre phrase

sémantiquement possible avec les segments proposés
(facultatif)
Guillaume 11 Novembre2014
 Tutoriel Hot Potatoes 6

Segments choisis se positionnent

dans l’ordre du choix

Liste des segments à choisir (simple clic)

Exemple d’exercice généré avec (création d’une liste de segments à sélectionner dans l’ordre pour former
la phrase)

Segments choisis et glisser –déposer

dans l’ordre sur les lignes

Segments à choisir

Exemple d’exercice généré avec (création de segments à glisser-déposer dans l’ordre pour former la
phrase)

Guillaume 12 Novembre2014