Mon premier exercice créé avec Hot Potatoes

Nous allons créer ensemble, pas à pas, un exercice interactif avec JMatch. Celui-ci crée des exercices de mise en correspondance. Comme nous voulons faire un exercice beaucoup plus attrayant que les exercices du même type fait sur papier, nous allons créer un exercice de correspondance entre un mot et une image animée pour exercer le vocabulaire des métiers.

Nous avons besoin d'images animés que nous pouvons téléchargées sur Internet. Les images utilisées sont téléchargées à partir du site avec des images animées www.picto.qc.ca

Voilà les 4 images que nous avons téléchargées pour les utiliser dans notre exercice de correspodance.

1. Créer un dossier "images"; mettre les images dans ce dossier et placer ce dossier dans le dossier "html" ou vous allez mettre le fichier avec l'exercice que vous êtes en train de créer. Pourquoi? Ainsi, le dossier avec les images sera toujours avec le fichier de l'exercice. Si vous déplacez le dossier "html" le dossier "images" qui est à l'intérieur accompagnera toujours le fichier de l'exercice dont il fait partie. A côté du dossier "html" faites un dossier "hpot" pour les fichiers Hot Potatoes.

2. Lancer le logiciel Hot Potatoes et puis choisir la patate JMatch pour commencer la création de l'exercice de correspondance. Voici l'écran que vous devez avoir:

3. Ecrire le titre -  Les métiers

4. Dans la colonne à gauche écrire les métiers dont nous avons les images - couturier, cuisinier, infirmier et chimiste.

5. Insérer les images. Dans la colonne à droite, en face du mot couturier nous allons insérer l'image correspondante. Comment? D'abord on clique sur la case où nous voulons mettre l'image, donc à droite de couturier dans la case. Ainsi nous sommes sûrs que l'image se placera dans cette même case et non pas dans une autre.Puis nous cliquons sur insérer dans le menu en haut et nous choisissons Image depuis fichier local.

Si nous n'avons pas encore enregistré le fichier que nous sommes en train de faire, le logiciel nous demande d'enregistrer et nous enregistrons en cliquant sur la disquette . Nous choisissons de le mettre dans le dossier hpot - là ou nous avons décidé de mettre nos fichiers hot potatoes.

Nous continuons avec l'insertion de l'image. On refait les dernières actions: on clique sur la case où nous voulons mettre l'image, donc à droite de couturier dans la case. Ainsi nous sommes sûrs que l'image se placera dans cette même case et non pas dans une autre.Puis nous cliquons sur insérer dans le menu en haut et nous choisissons Image depuis fichier local.

Nous allons dans notre dossier image et choisissons l'image du couturier et voilà l'écran qui s'ouvre:

Ici vous pouvez choisir comment sera alignée votre image et avec Width et Height vous pouvez changer ses dimensions; vous avez intérêt à laisser Maintain aspect ratio coché pour ne pas déformer l'image en changeant les dimensions. Nous trouvons que notre image est un peu trop grande et nous mettons pour Width 150 au lieu de 202; nous pouvons observer que Height change automatiquement de 135 à 99, puis on clique sur .

Voici l'écran que vous aurez:

Vous n'avez pas dans la case une image mais des inscriptions du type que vous voyez à sa place. C'est normal.

Vous continuez de la même façon pour insérer les autres images.

Les 4 images insérées vous devez enregistrer en cliquant sur , si vous oubliez de le faire, l'ordinateur vous le demandera un pas plus tard.

Votre fichier hot potatoes est déjà prêt.

Il faut maintenant créer le fichier htm/ou html/ Cliquez sur ou sur selon le type de navigateur que vous avez. Il y a deux ; vous devez cliquer sur le second  . Le logiciel vous propose d'enregistrer un fichier html; enregistrez-le dans votre dossier "html" en lui donnant un nom, par exemple metier.html /sans accent/

Puis le logiciel vous demande si vous voulez voir l'exercice et vous faites Oui: et voilà ce que vous avez:

C'est votre exercice. Il est déjà prêt. Il y a un petit problème: les consignes ne sont pas en français. Il n'y a pas de problème. Ouvrez votre fichier metier au format Hot Potatoes et choisissez Option - Configurer le résultat.

Voilà l'écran:

Ici vous cliquez sur ouvrir et vous allez dans Program  Files, puis dans Hot Potatoes et vous choisissez le fichier french5_2.cfg pour avoir les consignes en français.

Maintenant vous pouvez revenir sur le fichier metier au format hot potatoes et refaire le fichier html en cliquant de nouveau sur . Cette fois ci vous devrez remplacer l'ancien fichier metier.html et à la fin vous devrez avoir le même exercice mais avec des consignes en français.

Si vous avez bien travaillé vous devez avoir comme exercice, sur votre écran, quelque chose comme ça: