Soundguide - Teach yourself English

Mettre en forme du texte dans un module de Hot Potatoes

Rodolphe Maurel — 2012-03-07T17:43:52Z

Comment mettre du texte en forme dans Hot Potatoes

Les menus de Hot Potatoes ne nous permettent pas de mettre en forme le texte à notre guise. Rien de très gênant, quelques lignes de code à copier-coller vont nous permettre de le faire très simplement.

Il est important que le code respecte les standards du W3C. Il nous faut donc du code XHTML. Lorsque je crée une page avec Hot Potatoes, je vérifie systématiquement qu'elle respecte ces standards en la soumettant au "Markup Validation Service".

Mise en forme du texte

- Pour mettre du texte en rouge

donnera Texte

- Pour souligner

donnera Texte

- Pour barrer du texte

donnera Texte

Vous trouverez plein d'autres astuces ici.

Créer une info-bulle au survol du texte

donnera

He put his hat on and left the room.

Notez ici comment on crée un trait pointillé de 2 pixels d'épaisseur et comment le curseur est transformé en point d'interrogation.

Créer un menu déroulant

Ce petit bout de code vous permettra de créer un menu déroulant qui pourra fournir une aide lexicale par exemple.

donnera

- Faire un bouton

donnera

Jmatch avec beaucoup d'items

Rodolphe Maurel — 2012-01-01T12:00:11Z

Vous voulez faire une activité jmatch avec beaucoup d'items ? Inutile de faire plusieurs fichiers. Voici une façon simple de procéder.

Nous avons vu, que pour une activité jmatch, il fallait limiter le nombre d'items à une dizaine pour que ce soit confortable pour l'utilisateur.

Mais supposons que vous vouliez construire une activité avec, par exemple, une trentaine de mots interrogatifs. Voici comment faire pour éviter de faire 3 fichiers.

Nous allons mettre tous nos mots interrogatifs dans le fichier jmatch et demander de n'en afficher que 10. 10 items seront alors pris au hasard dans la liste.

Ceci se configure dans le menu habituel Options => Configurer aspect page web. Il faut aller dans le menu Autres et cocher la case.

Il suffit d'indiquer ensuite de créer un lien qui renvoie sur notre page (ainsi si l'on a créé un fichier nommé match.htm, nous allons faire un lien sur match.htm). Ceci se fait dans le menu Option => Configurer aspect page web => Onglet Boutons.

C'est aussi simple que ça.

Intégrer une vidéo dans un exercice

Rodolphe Maurel — 2011-12-22T10:13:00Z

Nous allons voir la manière la plus simple d'intégrer une vidéo dans un exercice jcloze ou jquiz.

I - La vidéo est sur Internet et je n'ai pas envie de la télécharger.

La procédure ici consiste à ne plus télécharger la vidéo, mais à l'intégrer directement.

Tout site de diffusion en streaming propose un code d'intégration. Il faut trouver "Partager", ou "Share", et ensuite "Intégrer" ou "Embed".

Par exemple, dans youtube

II - La vidéo est sur mon ordinateur et je souhaite l'intégrer

Une technique très simple consiste à utiliser son compte gmail et profiter du gdrive, espace qui permet de stocker et partager ses documents (entre autres).

Nous allons mettre notre vidéo dans notre gdrive

Lisez ensuite votre vidéo en cliquant dessus. Faites Fichier => Intégrer et vous trouverez le code d'intégration.

III - Insérer ce code dans jquiz ou jcloze.

Il vous suffit de faire Fichier => Ajout ressource, de cocher la case et de coller le code, et le tour est joué.

Faire des liens entre les activités

Rodolphe Maurel — 2011-01-19T18:16:00Z

Comment faire des liens entre nos activités Hot Potatoes

Supposons que vous ayez créé une activité nommée "activite1.htm" et une autre nommée "activité2.htm". Ces 2 activités peuvent, bien sûr, être issues de n'importe lequel de modules de Hot Potatoes.

Nous allons mettre un bouton dans "activite1.htm" qui nous conduira dans "activite2.htm".

Dans notre fichier "activite1.htm", nous allons aller dans Outils => Configurer aspect page web => onglet Boutons.

Il sera utile de prévoir à l'avance les liens vers les fichiers suivants. Cela évitera de devoir rouvrir les fichiers pour faire les liens. Ainsi, on peut par exemple prévoir que :

"activite1.htm" => "vocabulaire1.htm" => "activite2.htm" => "vocabulaire2.htm" => "activite3.htm" => "vocabulaire3.htm"

Un exemple d'activité jquiz avec des photos

Rodolphe Maurel — 2010-09-12T21:28:28Z

Comment faire apparaître une image différente à chaque question...

Nous allons ici apprendre à faire une activité très simple : un QCM dont les questions porteront sur des images.

Problème : si l'on met l'image en document ressource (voir article, nous aurons toujours la même image pour toutes les questions, ce qui n'est pas notre but. Nous voulons en effet une image différente pour chaque question (voir l'exercice de démonstration).

Nous allons pour commencer télécharger quelques images de Londres libres de droits

Faites attention de ne pas donner chaque image le nom de ce qu'elle représente (ex : picadilly.jpg), cela donnerait la solution à l'élève (le nom de l'image apparaitrait sous le curseur.

Pour chaque image, 3 choix seront proposés à l'élève.

Ouvrez donc le module jquiz et enregistrez votre fichier dans le même répertoire que vos photos. Attention, cette étape est très importante.
Écrivez le titre de votre activité (ex : London - Places of interest)
Au lieu de saisir une question, insérez votre première image.
Sélectionnez le code d'insertion de l'image (CTRL + A)
Utilisez la combinaison de touches shift + CTRL + Z en même temps. Vous verrez du code se rajouter de part et d'autre de votre code d'insertion d'image.
Entrez les 3 choix possibles et n'oubliez pas de cocher la bonne réponse.
Répétez ces opérations pour chaque question.
Lorsque vous avez fini, allez dans Ajout ressource.
Cochez la case et validez.

Le but est bien entendu de faire construire le QCM par les élèves. Je le fais faire chaque année aux élèves de SEGPA.

Ajouter une ressource à un module (jquiz par exemple)

Rodolphe Maurel — 2010-09-11T21:46:26Z

Comment ajouter une ressource...

Il est possible d'ajouter une ressource (image, texte...) dans chaque module.

Vous pouvez par exemple intégrer une image (ne pas oublier de cocher la case) ou copier-coller du texte

Vous pouvez aussi rajouter une vidéo au format flv en consultant cet article.

Lorsque vous aurez ajouté votre ressource, vous aurez l'impression que rien ne s'est passé. Ce n'est que lorsque vous exporterez la page web que vous verrez votre ressource. Si ce n'est pas le cas, vérifiez que vous n'avez pas oublié de cocher la case.

Mettre un ascenseur dans la partie ressource (à gauche)

SI jamais votre texte ressource est long, il serait préférable que la partie de gauche ait un ascenseur. Ceci n'a pas été prévu dans Hot Potatoes, mais Stan Bogdanov nous donne la solution (en anglais).

Changer la taille des 2 colonnes

Il se peut aussi que votre ressource soit petite et que vous n'ayez pas besoin de la moitié de la page et que vous préfériez diminuer le colonne de gauche et agrandir celle de droite. Stan nous donne aussi la solution (en anglais).

Jcloze

Rodolphe Maurel — 2010-09-11T21:46:24Z

Comment faire des textes à trous

Le module jcloze permet de faire des textes à trous. Rien de très compliqué.

Saisissez votre texte, ou alors copiez-collez-le. Double cliquez sur un mot et utilisez le bouton "Créer un trou".

Pour chaque trou, il est possible de donner un indice.

Le menu de configuration offre quelques possibilités intéressantes :

Inclure la liste des mots enlevés.
Inclure les mots enlevés dans un menu déroulant au lieu d'une case de saisie
Inclure dans votre page les caractères spéciaux dont les élèves auront besoin (caractères accentués en espagnol par exemple). Personnellement, je fais souvent 2 pages, la première avec un menu déroulant, la seconde avec des cases de saisie.

Jquiz

Rodolphe Maurel — 2010-09-11T21:46:20Z

Le module Jquiz

Ce module permet de réaliser des quiz et QCM.

Plusieurs types de questions sont possibles grâce au menu déroulant situé en haut à droite.

On passe à la question suivante en utilisant le menu déroulant situé en haut à gauche.

Le mode quiz : l'élève aura devant lui une case de saisie et devra saisir la réponse. Il faut réserver ce mode à des questions faciles. N'oubliez pas de cocher la bonne réponse.

Le mode QCM : plusieurs choix sont proposés à l'élève (3 en général, réponse exacte, réponse approximative et réponse plus éloignée de la bonne réponse).

Le mode Multi-sélection : ce mode va vous permettre d'intégrer une question avec plusieurs bonnes réponses. Par exemple :

Le mode Hybride : ce mode permet de proposer à l'élève un quiz qui peut se transformer en QCM au bout de x tentatives infructueuses. Le nombres d'essai se configure dans le Options => Configurer aspect page web => Autres.

Typologies d'exercices

Le quiz est à mon avis le type d'exercice qui offre le plus de possibilités.

Notez que les questions de ce quiz arrivent de manière aléatoire. Ceci est rendu possible grâce à la possibilité de modifier l'ordre des propositions à chaque chargement de page.

Un exercice de compréhension / traduction. Nous verrons ultérieurement comment mettre une ressource à gauche de la page.
Un exercice de compréhension orale. Il s'agit ici d'un mode quiz auquel j'ai rajouté un fichier audio et un bout de code pour faire un menu déroulant.
Un exercice de vocabulaire à partir d'une image.

Un bon exercice à faire en classe pour cerner un thème est de demander à chaque élève de préparer une question. Ainsi, vous obtenez à la fin un QCM d'une trentaine de questions fait par les élèves. Ils sont ravis lorsqu'il est publié.

Jmix

Rodolphe Maurel — 2010-09-11T21:46:09Z

Jmix permet de mettre les mots d'une phrase dans le désordre. L'élève devra les ré-ordonner. Je m'en sers beaucoup pour les activités grammaticales, j'ai en effet l'impression d'arriver à faire faire à l'élève de la grammaire à son insu.

Rien de difficile donc si vous avez lu l'article sur jmatch et que vous avez réussi votre premier exercice.

Le tout est de rentrer les mots ou groupes de mots séparément, c'est à dire qu'il faudra appuyer sur entrée entre chaque mot.

Enregistrez votre fichier une fois votre phrase saisie. Notez aussi que vous pouvez ne saisir qu'un seul mot, lettre par lettre.

Exportez ensuite la page web. Tout comme pour le module jmatch, vous avez 2 solutions :

icône 6 de gauche : il faudra cliquer sur les mots
icône 6 de droite : il faudra déplacer les mots

Il est possible que la combinaison des mots offre plusieurs solutions. Entrez la deuxième phrase possible dans le champ "Variantes acceptées".

Astuce

Vous remarquerez que, si vous avez exporté avec l'icône "6" de droite, la page web contient 3 lignes sur lesquelles vous reconstruirez la phrase.

Voici comment faire si vous ne souhaitez avoir qu'une seule ligne.

Ouvrez le fichier djmix6.js avec un éditeur de texte. Ce fichier se trouve dans c :\Program Files\Hotpotatoes6\sources.
Trouvez la ligne var DropTotal = 3 ; (utilisez la fonction Rechercher (ctrl +f)
Changez le 3 en 1
Enregistrez le fichier.

Hot Potatoes - Initiation

Rodolphe Maurel — 2010-09-11T21:45:42Z

Les bases pour débuter sur Hot Potatoes et bien plus.

Présentation

Hot Potatoes est sans doute le plus connu des exerciseurs. Ses 6 modules permettent de créer des textes à trous, des exercices d'association, des QCM, des exercices de remise dans l'ordre des mots et enfin des mots croisés [1])

Téléchargement

La suite Hot Potatoes a été crée par Martin Holmes et Stewart Armeil. Elle peut être téléchargée ici. Si elle est gratuite (hormis la fonction Masher dont on peut aisément se passer), elle n'est cependant pas libre.

Le principe de Hot Potatoes est très simple et peut être résumé en 3 actions : - Vous faites votre exercice dans un des modules et le sauvegardez.

Vous configurez l'aspect de votre page (langue, couleurs, boutons...).
Vous l'exportez ensuite et créez un page web (format html).

Notez cependant que le format d'exportation (html) est lui libre, ce qui nous permettra ultérieurement de pouvoir modifier et personnaliser notre exercice.

Les 6 modules de Hot Potatoes

Je vous suggère de commencer ce tutoriel par Jmatch. Les éléments récurrents ne seront vus qu'une fois.

Jmatch : fabriquer des exercices d'association.
Jmix : fabriquer des exercices de remise en ordre des mots.
Jcloze : fabriquer des textes à trous.
Jquiz : fabriquer des quiz et des QCM
Jquiz : ajouter une ressource à un QCM
Son & vidéo : ajouter une ressource à un QCM
Jquiz : Un exercice simple avec des images différentes à la place des questions

[1] Notez que pour les mots-croisés, on préfèrera utiliser EclipseCrossword, qui permet, non seulement de faire des pages interactives comme Hot Potatoes, mais aussi de sauvegarder la grille et les définitions pour les reprendre dans un traitement de texte (voir à ce sujet cet article.

Soundguide - Teach yourself English

Mettre en forme du texte dans un module de Hot Potatoes

Mise en forme du texte

Créer une info-bulle au survol du texte

Créer un menu déroulant

Jmatch avec beaucoup d'items

Intégrer une vidéo dans un exercice

I - La vidéo est sur Internet et je n'ai pas envie de la télécharger.

II - La vidéo est sur mon ordinateur et je souhaite l'intégrer

III - Insérer ce code dans jquiz ou jcloze.

Faire des liens entre les activités

Un exemple d'activité jquiz avec des photos

Ajouter une ressource à un module (jquiz par exemple)

Mettre un ascenseur dans la partie ressource (à gauche)

Changer la taille des 2 colonnes

Jcloze

Jquiz

Jmix

Astuce

Hot Potatoes - Initiation

Présentation

Téléchargement

Les 6 modules de Hot Potatoes

Mise en forme du texte

Créer une info-bulle au survol du texte

Créer un menu déroulant

I - La vidéo est sur Internet et je n'ai pas envie de la télécharger.

II - La vidéo est sur mon ordinateur et je souhaite l'intégrer

III - Insérer ce code dans jquiz ou jcloze.

Mettre un ascenseur dans la partie ressource (à gauche)

Changer la taille des 2 colonnes

Astuce

Présentation

Téléchargement

Les 6 modules de Hot Potatoes