Intégrer Hot Potatoes dans un site SPIP

Intégrer ce logiciel gratuit de jeux dans un site SPIP

Merci de noter que cette contribution est une astuce pour intégrer simplement des exercices créés grâce au logiciel ’hot potatoes’ dans un article spip, pas un plugin à part entière (mais toute évolution serait la bienvenue) !

Hot Potatoes
Hot Potatoes est un logiciel, très utilisé dans le monde de l’éducation, compatible PC, Mac et Linux.

Il est entièrement gratuit, pourvu qu’on s’enregistre sur le site officiel (et qu’on ne crée pas des activités gratuites), et offre une interface assez simple pour créer des exercices divers que l’on peut facilement mettre en ligne, puisque le code généré est du HTML. De nombreux sites scolaires, ou à vocation éducative l’utilisent déjà. Quelques unes des fonctionnalités proposées se retrouvent par ailleurs dans le plugin Jeux.

Avec Hot Potatoes, vous pouvez facilement créer :
-  des QCM
-  des exercices de mise en relation
-  des textes à trous
-  des questions ouvertes
-  des mots croisés
-  des textes à remettre dans l’ordre
tout en y insérant du texte, des images, des clips vidéos, en paramétrant des compteurs-temps, les messages, la façon de gérer les résultats, en reliant les activités entre elles...
En bref, tout ce que peut faire le plugin jeu, et même un peu plus (mais en moins beau)...

Hot Potatoes dans spip
Une fois que l’on a créé son activité sur Hot Potatoes, on a la possibilité de l’exporter en fichier html. Le logiciel génère en effet une (ou plusieurs) page(s) qu’il est directement possible d’utiliser.

Si on veut faire figurer assez simplement des exercices générés avec Hot Potatoes dans un article créé avec Spip, il suffit de deux ou trois manipulations :
-  Il suffit simplement de rajouter une boucle dans le gabarit ’article.html’, à l’endroit des boucles portfolio :

pour faire apparaître l’exercice dans une thickbox (si le plugin est activé) :

<BOUCLE_documents_hotpotatoes(DOCUMENTS) {id_article} {mode=document} {extension IN htm, html} {par num titre, date} {doublons}>
<a href="#URL_DOCUMENT?keepThis=true&TB_iframe=true&height=550&width=600"  class="thickbox"  type="#MIME_TYPE">#LOGO_DOCUMENT<br/></a>
</BOUCLE_documents_hotpotatoes>

Nota bene :
height=500 correspond à la hauteur de la fenêtre thickbox, width à sa largeur, c’est donc configurable.

autre possibilité, faire apparaître l’exercice directement dans la page de l’article, par le biais d’une iframe.
Voici le bout de code proposé dans le forum de cet article par émile :

<BOUCLE_documents_hotpotatoes(DOCUMENTS) {id_article} {mode=document} {extension IN htm, html} {par num titre, date} {doublons}>
<iframe name="cwindow" style="border:15px dotted #ADC7D6" width=600 height=480 src="#URL_DOCUMENT"></iframe><br/>
</BOUCLE_documents_hotpotatoes>

-  Après avoir rédigé et enregistré votre article, vous avez la possibilité d’ajouter des pièces jointes. Ajoutez donc à l’article où vous souhaitez voir figurer votre exercice le fichier HTML généré par Hot Potatoes.

-  concernant l’upload d’images, de sons, ou de vidéos ou autres que vous sohaiteriez ajouter à votre exercice, plusieurs solutions sont esquissées dans le forum ci-dessous.

-  Dernière petite touche, personnalisez le logo de la dist « html.png » (dossier /dist/vignettes/) afin que les visiteurs comprennent qu’en cliquant sur le logo ’html’, ils pourront commencer un exercice.

et voilà... vos visiteurs pourront s’amuser avec vos exercices.

Voici un exemple de cette intégration dans un site scolaire :
http://www.collegedevinci.fr/Somme-de-nombres-relatifs

Discussion

12 discussions

  • il est faux de dire « qu’il est entièrement gratuit pourvu qu’on s’incrive sur le site officiel » ; une des conditions est la publication gratuite des productions sur le web. Lire attentivement la licence...

    Hot Potatoes is free for use by individuals working for state-funded educational institutions which are non-profit making, on the condition that the material you produce using the program is freely available to anyone via the WWW

    une production sur intranet est illégale si on fonctionne avec une simple inscription...

    A part cela, ce plugin m’intéresse fichtrement MAIS résout-il le problème des exercices qui intègrent des images dont l’adresse enregistrée dans le fichier html est nécessairement fausse ?

    je m’explique, hotpot génère une page avec une adresse pour l’image qui ne peut être chargée qu’en plus du fichier html.
    Pour détourner le pb, je reprends le fichier html et intègre dans le chemin /IMG/jpeg/ etc...

    mais cela n’est pas accessible à mes collègues débutants, or spip l’est...
    bref, est-il possible de régler ce pb ?

    merci de toute façon :)

    Répondre à ce message

  • J’ai fait la même chose mais en incluant l’exo directement dans l’article.
    C’est là.
    Si cela t’intéresses.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom