Sie sind auf Seite 1von 22

Tutoriel Hot Potatoes 6

1.

La barre doutils .............................................................................................................................................. 3

2.

Les diffrents types dexercices ...................................................................................................................... 4


2.1.

3.

JQuizz ...................................................................................................................................................... 4

2.1.1.

Dmarche pour la cration dun QCM (option Multi-slection ou Qcm) ....................................... 4

2.1.2.

Dmarche pour la cration dun Quiz (questions rponse courte) (option Quiz ou Hybride)..... 5

2.2.

JCloze....................................................................................................................................................... 7

2.3.

JMatch ..................................................................................................................................................... 8

2.4.

JCross..................................................................................................................................................... 10

2.5.

JMix ....................................................................................................................................................... 11

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 lapprenant lorsquil
valide une rponse ............................................................................................................................................ 13
3.3. Onglet Boutons : libell des boutons faire apparaitre pour valider, naviguer dune question
une autre, dun exercice un autre .................................................................................................................. 14

4.

5.

3.4.

Onglet Apparence : modifier laspect des pages HTML produites.................................................. 14

3.5.

Onglet Autres (les cases cocher diffrent selon les exercices produits) ...................................... 16

3.6.

Permettre lapprenant daccder des ressources ........................................................................... 16

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


4.1.

Redimensionner les images .................................................................................................................. 18

4.2.

Insertion de limage dans lexercice : .................................................................................................... 18

4.3.

Configuration de limage insrer ........................................................................................................ 18

Insrer des fichiers Hotpotatoes dans Moodle............................................................................................. 19


5.1

Prparation des fichiers de lexercice Hotpotatoes .............................................................................. 19

5.2

Insertion dans Moodle .......................................................................................................................... 20

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6


Hot Potatoes est un logiciel gratuit (freeware) tlchargeable sur le site suivant :
http://web.uvic.ca/hrd/hotpot/index.php#downloads.
Il permet de crer de manire intuitive 5 types d'exercices diffrents interactifs puis de les publier au
format HTML sur internet (autovaluation des lves, exercices en ligne). Il permet dobtenir
diffrentes stratgies d'apprentissage et comptences chez l'apprenant.
Aucune connaissance de programmation nest ncessaire : quel que soit les exercices, vous devez
entrer vos donnes, textes, questions, rponses et le logiciel qui fonctionne sous JavaScript crera
le code HTML.
Ecran daccueil au lancement du logiciel :

Pour crer les 5 types dexercices diffrents, soit le choisir dans le menu droulant Potatoes soit
cliquer directement sur lune des pommes de terre :
JQuiz est un programme qui permet de crer des questionnaires choix multiples ou un
questionnaire o llve doit taper la rponse, extension .jqz
JMix est un programme qui permet de crer un exercice o l'lve doit remettre en ordre des
segments de phrase, extension .jmx
JCross est un programme qui permet de crer des mots-croiss, extension .jcw
JMax est un programme qui permet de crer 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 crer des exercices trous, extension .jcl.
Chacun des programmes possde des options qui permettent de personnaliser les productions :
insertion de feedbacks qui permet l'apprenant de comprendre ses erreurs,
intgration de liens HTML externes qui permet lapprenant de construire son apprentissage,
insertion de multimdia (vidos, 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 crer un ensemble cohrent sur un site informatique.
Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

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

Fonctions classiques

Icones

Nouvel exercice

Ajoute une ressource associe lexercice


Ctrl R

Ctrl N

Ctrl O

Fonctions plus spcifiques

Ouvrir un fichier d'exercice


au format Hot Potatoes

F6

Enregistrer
Ctrl S

Ctrl F6

Crer une page HTML pour navigateurs


(extension .htm)
Crer une page HTML dynamique pour
navigateurs (extension .htm)

Enregistrer sous

Insrer une image depuis un fichier local

Quitter

Insrer une image depuis une adresse Web

Annuler

Insrer un lien vers un fichier local

Couper

Insrer un lien vers une adresse Web

Copier

Insrer des caractres unicode

Coller

Dfinir les paramtres de la page Web (titre,


message, boutons)

Ctrl Q

Ctrl Z

Ctrl X

Ctrl C

Ctrl V
Voir le fichier d'aide (en
anglais)

La barre d'outils peut tre modifie, une fois lun des programmes lancs, dans le menu options de la
barre d'outils afin d'y faire figurer les icnes qui correspondent aux fonctions les plus utilises.
Quelques rgles respecter durant la ralisation dun exercice :
crer un dossier au nom de lexercice o seront enregistrs :
le dossier images o seront stockes tous les fichiers images de lexercice : cette
organisation est indispensable pour quau moment de lenregistrement au format Hot
Potatoes puis au format HTML, un chemin relatif soit tabli entre le fichier dexercice et
limage,
tous les fichiers au format Hot Potatoes de lexercice crs,
tous les fichiers au format HTML gnrs pour une lecture de lexercice sur un
navigateur (firefox, internet explorer).
choisir des noms de fichier crit en minuscule sans caractres spciaux : ponctuation,
espaces, lettres accentues...
enregistrer les exercices au format Hot Potatoes avant de gnrer une page HTML.

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

2. Les diffrents types dexercices


2.1. JQuizz
Il permet de raliser plusieurs types d'exercices choisir dans le menu droulant droite :
Qcm permet de crer un questionnaire choix multiple standard pouvant inclure
commentaires, images, lments multimdia...
Quiz permet de crer un test rponse courte o lapprenant saisit une rponse au clavier
Hybride permet de crer un quiz o l'apprenant saisit une rponse au clavier mais s'il n'y
arrive pas directement, la question formule au quiz est transforme en QCM
Multi-slection permet de crer un QCM o plusieurs rponses doivent tre valides afin que
la rponse soit compte comme correcte

2.1.1. Dmarche pour la cration dun QCM (option Multi-slection ou Qcm)

6 flche pour passer la question suivante et recommencer

8 Gnrer un fichier HTML


1 Indiquer le titre

7 Enregistrer

2 Indiquer la question poser

3 Indiquer les
rponses possibles.
Possibilit de mettre
autant de rponses
voulues en cliquant
sur la flche

4 Indiquer les commentaires

qui seront
donns lapprenant une fois quil aura
valid ses rponses.
Si aucun commentaire, le programme en
indique un par dfaut

5 cocher la (les)
bonne(s) rponse(s)

9 Regarder l'exercice dans le navigateur.


Guillaume

Novembre2014

Tutoriel Hot Potatoes 6


Remarques : Qcm diffre profondment de multi-slection :
dans Qcm, l'apprenant doit choisir une seule bonne rponse bien que plusieurs rponses
puissent tre correctes (tape 5 : cocher exact ),
dans multi-slection, on cre des questions slection multiple o l'apprenant effectue un
choix pour chacune des possibilits de rponse affiches ; plusieurs possibilits de rponses
constituent la bonne rponse (tape 5 : cocher chacune des possibilits de rponses
constitutives de la bonne rponse). Il est conseill dcrire une rtroaction pour chacune des
possibilits de rponse en ayant l'esprit que cette rtroaction permettra l'apprenant de
s'auto-corriger.
2.1.2. Dmarche pour la cration dun Quiz (questions rponse courte) (option Quiz ou
Hybride)

4 flche pour passer la question suivante et recommencer

6 Gnrer un fichier HTML


5 Enregistrer
1 Indiquer le titre
2 Indiquer la question poser

3 Indiquer les bonnes rponses possibles la question :


prvoir des rponses fermes
Prvoir les rponses que peuvent proposes les apprenant
(criture, synonyme)

Contrairement au QCM, seules des bonnes rponses sont saisies.


Remarque : Hybride combine le Quiz avec le Qcm : l'exercice dmarre sous forme de quiz et si aprs
un certain nombre d'essais (2 par dfaut), l'apprenant n'est toujours pas capable de saisir la bonne
rponse au clavier, la mme question lui est prsente sous forme de QCM :
cocher exact pour les rponses correctes pour le Quiz,
cocher inclure dans le QCM pour observer ces rponses dans le QCM.

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6


JQuiz fonctionne soit en mode dbutant (par dfaut), soit en mode avanc. Le passage de lun
lautre se fait par le menu Options / Modus.

Le mode avanc permet de pondrer les questions les unes par rapport aux autres (une question
peut tre moins dimportante qu'une autre) et de pondrer les possibilits de rponse (une rponse
peut tre partiellement correcte). Cette option permet de noter un exercice.

Pondration des questions en %


poser

Pondration des rponses en %

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

2.2. JCloze
JCloze permet de crer des exercices trous.

5 Enregistrer

6 Gnrer un fichier HTML

Flches pour passer dun trou un autre

1 Indiquer le titre

4 Donner un
indice accessible par
lapprenant (facultatif)

2 Taper ou coller le texte sans y insrer de trous

5 Ajouter dautres bonnes


3 Slectionner le mot que l'apprenant doit rechercher (le trou) et le mettre en
surbrillance puis cliquer sur Crer un Trou : le mot devient rouge, italique et
soulign

rponses que le mot


slectionn (facultatif)

Autres onglets :
Supprimer un Trou : positionner le curseur sur le mot slectionn comme trou puis cliquer sur
longlet
Effacer TOUS les Trous : supprime tous les mots slectionns comme trou
Crer Trous (Alatoire) : cre des trous de faon alatoire une fois donne le nombre n, nombre
de mots entre chaque mot slectionn de faon alatoire
Voir les mots enlevs : permet de modifier un indice ou les autres bonnes rponses une fois le
trou effectu. Utiliser les flches pour passer dun trou un autre.

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

2.3. JMatch
JMatch permet de crer des exercices de mis en correspondance soit en glisser-dposer
liste droulante

5 Enregistrer

, soit en

6 Gnrer un fichier HTML en liste droulante


6 Gnrer un fichier HTML en glisser-dposer (drag'n'drop)
1 Indiquer le titre

paire

2 Placer gauche les lments fixes : ici des images ;

3 Placer droite les lments qui forment une

le code HTML prsent est directement gnr aprs


lutilisation de la commande Insertion image

paire avec ceux de la colonne de gauche (paire


sur la mme ligne) : au moment de lexercice,
les diffrents lments seront dans le dsordre

(Insrer/Image) ou

4 Fixer un lment (facultatif) : au moment de lexercice, llment fix se positionnera automatiquement


ct de l'lment de gauche auquel il correspond ce qui peut aider lapprenant au travail effectuer
Remarques :
Cration dune page HTML avec liste droulante : les images ne peuvent tre insrer 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 encadre, limage w16.gif une
largeur de 85 et une hauteur de 75 (voir gestion des images)

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

Exemple de mise en correspondance avec Liste droulante

Exemple de mise en correspondance en glisser-dposer (drag'n'drop)

Guillaume

Novembre2014

Tutoriel Hot Potatoes 6

2.4. JCross
Jcross permet de gnrer des mots-croiss partir dune liste de mots.

3 Cliquer sur licne gnrer une grille partir dune liste


de mots : les mots sont agencs de faon automatique

1 Indiquer le titre
2 Saisir

chacun des mots sur une

ligne spare

7 Enregistrer

5 Pour chaque mot horizontaux et verticaux, le

8 Gnrer le fichier

slectionner (zone grise), indiquer la dfinition du


mot puis valider en cliquant sur
: la
dfinition apparait sur la mme ligne que le mot

Lieu de remplissage des


dfinitions

Mot vertical slectionn

4 Cliquer sur Dfinitions pour saisir

les

dfinitions pour chaque mot

Dfinition valide

6 Valider les mots croiss une


fois toutes les dfinitions
remplies

Remarque : il est possible de crer les mots croiss en saisissant chacune des lettres dans la grille
manuellement (non intressant).

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 croiss

2.5. JMix
Jmix gnre des exercices o l'apprenant remet dans l'ordre des segments courts de phrases
proposs dans le dsordre.

4 Enregistrer

5 Gnrer un fichier HTML en liste de segments


5 Gnrer un fichier HTML en glisser-dposer (drag'n'drop)

1 Indiquer le titre

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


un retour la ligne pour chacun des lments

3 Saisir dans
Guillaume

variantes acceptes une autre phrase

smantiquement possible avec les segments proposs


(facultatif)
11
Novembre2014

Tutoriel Hot Potatoes 6

Segments choisis se positionnent


dans lordre du choix

Liste des segments choisir (simple clic)

Exemple dexercice gnr avec

(cration dune liste de segments slectionner dans lordre pour former


la phrase)

Segments choisis et glisser dposer


dans lordre sur les lignes

Segments choisir

Exemple dexercice gnr avec

Guillaume

(cration de segments glisser-dposer dans lordre pour former la


phrase)

12

Novembre2014

Tutoriel Hot Potatoes 6

3. Personnalisation des exercices


Les exercices sont dans un format natif avec des onglets en anglais, une apparence Gris-Noir Il est
possible de personnaliser lapparence des exercices (menu Options puis choisir Configurer aspect
page Web .

3.1. Onglet Titre/Consignes : sous titre et consignes faire apparaitre


chaque question

Titre fourni la cration de


lexercice

Page HTML correspondante

3.2. Onglet Messages : choisir les indicateurs et messages faire apparaitre


lapprenant lorsquil valide une rponse

Guillaume

13

Novembre2014

Tutoriel Hot Potatoes 6

3.3. Onglet Boutons : libell des boutons faire apparaitre pour valider,
naviguer dune question une autre, dun exercice un autre

Fichier HTML
suivant

3.4. Onglet Apparence : modifier laspect des pages HTML produites

Ouverture dune palette


couleur puis cliquer sur la
couleur voulue (1)

Apparence par dfaut de la


page HTML prcdente

Fentre de prvisualisation
des modifications

Guillaume

Lieu dinscription automatique


du code couleur (1) ou o on
colle le code couleur choisi (2)
14

Bouton pour faire une recherche


par code couleur aprs ouverture
dune page HTML (copier et coller
le code voulu) (2)
Novembre2014

Tutoriel Hot Potatoes 6

Code couleur de diffrents


critres modifis et
consquence sur laspect de la
page HTML

216 codes couleur hxadcimaux


RVB (rouge, vert, bleu)
Ouverture aprs avoir cliquer sur

Autres possibilits dapparence :


insrer une image comme fond d'cran des pages HTML produites en remplissant Image
darrire-plan (ne pas oublier de copier cette image dans le dossier images).
Modifier la police des pages produites (utiliser des polices standards). Il est possible dinscrire
dans le champ les polices par ordre dcroissant de prfrence en les sparant d'une virgule
(dans lexemple ci-dessus, le navigateur tentera d'abord d'afficher la page HTML avec la
police Geneva et s'il ne la trouve pas il tentera d'afficher la page HTML avec la police
Arial puis sil ne la trouve pas avec la police Sans-serif .
Guillaume

15

Novembre2014

Tutoriel Hot Potatoes 6

3.5. Onglet Autres (les cases cocher diffrent selon les exercices produits)

pour que les apprenants puissent refaire les exercices sans rpondre de manire machinale,
pour que des apprenants diffrents est une prsentation de lexercice diffrente, cocher
Modifier lordre des propositions chaque chargement de la page ,

si un exercice comprend de nombreuses questions, cocher Afficher un nombre limit de


propositions chaque chargement de la page qui permet de limiter le nombre de questions
chaque chargement (tirage alatoire des questions qui permet de gnrer chaque
chargement un nouvel exercice).

3.6. Permettre lapprenant daccder des ressources

Ressources en lignes : adresse de la page HTML fournir en cliquant sur


saffiche lendroit o se trouve le curseur

Nom du lien

. Laide

Le curseur se trouvait aprs le titre


Lieu o sinstalle le code HTML du lien
vers un fichier HTML externe qui
souvrira dans une nouvelle fentre

Lien vers la
page HTML du
3RB cr

Guillaume

16

Novembre2014

Tutoriel Hot Potatoes 6

Document ressource en cliquant sur


soit en important un document ressource au
format HTML (Inclure un document ressource coch), soit en saisissant ou en collant
un texte

Lieu pour coller ou saisir un texte


Inclure un document ressource coch
La page HTML est compose de 2 cadres : cadre de gauche avec le document ressource et cadre de
droite avec lexercice.

Document ressource

Guillaume

Exercice

17

Novembre2014

Tutoriel Hot Potatoes 6

Lien vers un fichier local dj cr (traitement de texte, diaporama, fichier pdf) en


cliquant sur
ou en utilisant le menu Insrer/Lien/Lien vers un Fichier local une fois le
fichier ressource Enegistrer dans le dossier de lexercice. Laide saffiche lendroit o se
trouve le curseur.

4. Gestion des images


Les fichiers images ont pour extension courantes : .gif, .jpg, .jpeg ou .png.

4.1. Redimensionner les images


Cest un travail effectuer avant dinsrer les images dans lexercice. Il consiste : redimensionner le
poids des images pour une utilisation HTML (image de 50-100 Kilo-octets max) en utilisant un logiciel
gratuit comme FastStone Photo Resizer (freeware) qui a lavantage de pouvoir redimensionner en
une fois un grand nombre dimages. Si les images ne sont pas redimensionnes, le chargement de la
page HTML sera long.
Tlchargement ladresse : http://www.faststone.org/FSResizerDownload.htm

4.2. Insertion de limage dans lexercice :


Soit laide des 2 icones suivantes
: respectivement insrer une image
prsente sur Internet et insrer une image prsente sur le disque dur
Soit laide du menu : Insrer/Image

4.3. Configuration de limage insrer


Le fichier Hot potatoes doit tre pralablement enregistr. A l'insertion de limage, la bote de dialogue
suivante souvre :

Nom du fichier
Chemin relatif pour accder au fichier : ici
le fichier bainmarie.jpg est dans le
dossier images

2 Texte qui s'affiche dans une infobulle


1 Taille de limage (largeur et hauteur)

lorsque le curseur de la souris reste


quelques instants sur l'image de la page
HTML :
Ce texte rend la page accessible aux
personnes souffrant d'un handicap visuel,
Ne pas lutiliser si le mot deviner est
associ limage,
Utilisation possible comme indice.

modifier si possible en gardant les proportions

3 Permet de transformer tous les paramtres saisis en code


Permet d'accder
une autre image
Guillaume

HTML (les diffrents paramtres saisis sont entre guillemets) : <img


src="images/bainmarie.jpg" alt="bainmarie.jpg" title="bainmarie"
width="116" height="116"></img>
18

Novembre2014

Tutoriel Hot Potatoes 6


Si les images n'apparaissent pas lors de la cration de la page HTML, vrifier que les images sont
prsentes dans un dossier images , dossier lui-mme prsent dans un dossier o se trouvent les
fichiers Hotpotatoes et fichiers HTML gnrs.
Si vous dplacez les fichiers, conserver la mme arborescence et les mmes noms de dossiers et
fichiers (copier le dossier du nom de lexercice o tous les fichiers et dossiers se trouvent).
Si les images napparaissent que sur votre ordinateur personnel, vous avez cr un chemin absolu
(chemin qui fait rfrence larborescence du disque dur de lordinateur) et non relatif (chemin qui fait
rfrence la position qu'occupe l'image sur le serveur).
Exemple prcdent pour limage bainmarie :
Chemin relatif : images/bainmarie.jpg
Chemin absolu : ../Mesdocuments/mon_travail/TRAAM/TRAAM_dechets/images/bainmarie.jpg

5. Insrer des fichiers Hotpotatoes dans Moodle


5.1 Prparation des fichiers de lexercice Hotpotatoes
Zipper les fichiers HTML gnrs puis zipper les fichiers du dossier Image laide dun logiciel de
compression (ZipCentral) : slectionner les fichiers puis clic droit et slectionner dans le menu
droulant Add to Zip

1 fichiers HTML slectionns

2 Menu droulant aprs le clic droit

3 cliquer sur Add to Zip : donner un


nom dans la fentre qui souvre au fichier
.zip puis cliquer sur ouvrir puis sur
OK dans la nouvelle fentre qui
souvre : le fichier .zip senregistre
lendroit de votre choix

Adresse pour tlcharger ZipCentral sous le nom ZCFRSETUP.EXE :


https://www2.ac-lyon.fr/serv_ress/reseau/utilitaires/utilitairesstations.html

Guillaume

19

Novembre2014

Tutoriel Hot Potatoes 6

5.2 Insertion dans Moodle


Se connecter son cours Moodle
Cliquer sur Ajouter une activit puis sur Hot Potatoes

Cliquer dans la fentre qui souvre sur Ajouter puis aller chercher le fichier .zip cr
prcdemment.
Dzipper en effectuant un clic droit sur le fichier .zip et en slectionnant Dcompacter (zip)

Fichier .zip importer


Guillaume

20

Novembre2014

Tutoriel Hot Potatoes 6


Effectuer un clic droit sur le fichier zip (inutile) pour le Supprimer .
Effectuer un clic droit sur un des fichiers .htm afin de le Spcifier comme fichier principal
(fichier par o dmarre lexercice).

Fichier .zip supprimer

Fichier .html dsign


comme fichier principal

Guillaume

21

Novembre2014

Tutoriel Hot Potatoes 6


Crer un dossier images en cliquant sur Crer un dossier et en nommant le dossier puis
cliquer sur OK.
Attention : le nom du dossier doit tre le mme que celui cr dans lexercice Hot Potatoes.

Ouvrir le dossier Images .


Cliquer sur Ajouter puis aller chercher le fichier Images.zip cr prcdemment.
Dzipper en effectuant un clic droit sur le fichier .zip et en slectionnant Dcompacter (zip)
Effectuer un clic droit sur le fichier zip (inutile) pour le Supprimer .
Cliquer sur le bas de la page Moodle sur Enregistrer et revenir au cours

Le fichier .htm dclarer comme fichier principal apparait comme exercice Hot Potatoes

Guillaume

22

Novembre2014

Das könnte Ihnen auch gefallen