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

  • 1

    bonjour, j’utilise Spip version 2.1.13. Grace à vos explications je suis parvenu à intégrer un exercice à trous sans image créé avec hotpotatoes sans trop de difficultés.
    Mon problème est de parvenir à intégrer un exercice contenant une image. Malgré mes efforts, au lieu d’afficher l’image, l’exercice apparait comme ceci « familytree.jpeg ». J’ai pourtant créée une structure identique à spip en ayant un dossier jpg et un dossier html. Je suis sans solution.
    je vous remercie par avance de m’aider.
    Autre question : dans ce site là, il est question d’un plug in hot potatoes. J’ai beau chercher je ne trouve pas. Ca vous dit quelque chose ?
    http://sites86.ac-poitiers.fr/spip.php?article34

    Bonne fin de weekend

    • Si votre image ne s’affiche pas, c’est vraisemblablement parce que le chemin pour la trouver a été changé. Par défaut, je crois que votre page html hot potatoes va chercher l’image dans le même répertoire. Si vous chargez le fichier html par spip, il ne va pas charger l’image, et si vous la chargez ensuite toujours par spip, il n’ira pas la mettre dans le même répertoire. Le plus simple à mon avis est d’aller copier vos images via ftp dans le répertoire ad hoc, c’est-à-dire le même que là où il enregistre vos fichiers html (je présume que ce doit être /IMG/htm qui doit être créé pour l’occasion).
      En cas de doute, affichez le code source (ctrl u sous firefox) pour visualiser l’adresse de l’image incriminée.
      Cordialement

    Répondre à ce message

  • 1

    Voici comment je fais pour ne pas passer par le FTP

    Je crée un dossier pour mon projet Hot potatoes.

    Dans ce dossier je crée un sous dossier « html » et un sous dossier « jpg » si je travaille avec des images jpg, un sous dossier « gif » si je travaille avec des images gif.
    Je crée mon exercice de telle manière que les images soient dans leur dossier respectif. Je crée les exercices Hot Potatoes dans le dossier « html ».

    Quand tout est terminé je télécharge directement les fichiers html qui vont se placer dans /IMG/html/ du site (pas besoin de créer le dossier html, il est créé au premier téléchargement).
    Je télécharge les images de la même manière (c’est à dire comme d’habitude). Elles vont se placer dans IMG/jpg toujours automatiquement.

    Je place le fichier html de l’exercice spip dans ma page (comme je le fais pour une image ou un document. Je ne touche pas aux photos.
    Les liens relatifs exercices-images fonctionnent puisque la structure créé au départ se retrouve à l’identique dans le site.

    Ça demande seulement un peu d’organisation mais ça reste simple. On peut bien sûr produire plusieurs exercices dans le même dossier.

    Je ne sais pas si j’ai été assez clair ? C’est sûr qu’un plugin ce serait mieux.

    • Bonjour,

      peut on en faire de même avec le logiciel Netquizz, je préfère la présentation des exercices à celui de hot potatoes

    Répondre à ce message

  • Bonjour,

    Pas encore sous spip 2.0 mais 1.9c, j’ai finalement tenté une démarche très amateure pour essayer d’afficher un exercice hot pot : téléchargement du fichier html en doc joint et intégration de celui-ci dans l’article. Clic dessus et le questionnaire s’affiche et fonctionne. On perd certes tout l’environnement de la page spip, mais l’exercice ne se trouve pas limité par un cadre en pop-up. Comme ce sont des questions à partir d’une lecture, j’ai simplement ajouté le fichier pdf en doc joint, à lire avant de répondre. Autre tentative pour plus de convivialité, j’ai téléchargé le fichier-lecture pdf en doc joint, mais comme il ne va pas se mettre dans le même dossier que le fichier html, le lien qui l’appelle dans ce fichier ne fonctionnera pas. Solution : par ftp, télécharger le fichier pdf dans IMG/html. Là, en le téléchargeant « par la force » dans ce dossier, il retrouve son copain html et la paire fonctionne parfaitement. Pas tenté avec des images, mais cela devrait le faire pareil. Inconvénient, il faut un accès ftp.

    Bricolage mais en attendant un plugin ou de me mettre à la version spip 2, ça le fait.

    Cordialement et meilleurs voeux de développement à spip en 2009 !

    Répondre à ce message

  • 1

    bonjour,

    j’utilise et spip et hotpotatoes depuis longtemps. Mais pour le moment je n’arrive pas à intégrer directement les activités générées par hotpotatoes directement dans mon squelette : comment fais-tu émilie ?

    d’avance merci

    • Salut Lanus,
      Spip2 résout pas mal de problèmes.
      On peut télécharger directement le document hotpot.htm
      Pour avoir la page hotpot.htm dans l’article coller dans le corps de l’article :
      <iframe name="cwindow" style="border:15px dotted #ADC7D6" with=600 height=480 src="#URL_DOCUMENT"></iframe>
      Dimensions et couleurs modifiables.
      Voilou, c’est tout.

    Répondre à ce message

  • 1

    Le pb du chargement par ftp n’en est pas un, d’ailleurs tu as trouvé la bonne solution, je crois. Par contre je ne comprends pas pourquoi tu veux modifier ton fichier hot potatoes, si tu as récupéré les images Grace à l’article Spip, tu sais où elles sont, elles sont toujours au même endroit, dans le dossier IMG où un de ses sous-dossiers, même s’il est protégé, il suffit de le définir une fois dans hot potatoes comme dossier de lieu des images, il s’agit seulement de lire les images, au moment où tu fais l’article dans hot potatoes. Non ?

    • Vu comme ça, après discussion, ça roule :)

      il va juste falloir que je leur fasse admettre que l’exo réalisé l’est pour le site spip et qu’il ne peut être réalisé sur un fichier indépendant sur leur poste perso...(dans ma démarche, ils réalisaient d’abord l’exo en local puis le basculait sous spip d’où la modif du chemin nécessaire. Là, effectivement, si je construis d’abord l’article, puis si je charge les images et ENSUITE, si je réalise l’exo , j’ai le beurre, l’argent du beurre et le sourire de la crémière !)

      Ou encore cette seconde démarche qui est tout à fait réalisable...

      Merci beaucoup, je vais intégrer cela dans les sites peda de mon établissement :)

      C’est le plugin dont nous avions besoin.

    Répondre à ce message

  • Aussi peut-être créer pour simplifier un répertoire IMG/gif ou autre suivant les types utilisés, sur son disque dur, puis faire son exo hotpot à partir de là, lors de l’insertion des images juste ajouter / devant <img src="IMG/gif/aigle.gif" alt="aigle.gif" title="aigle" width="300" height="224"></img> ce qui donne /<img src="IMG/gif/aigle.gif" alt="aigle.gif" title="aigle" width="300" height="224"></img> peut-être pas trop dur pour un débutant ? non ?

    Répondre à ce message

  • 1

    Pour les images, en intra-net ou ou extra-net, stocker toutes les image dans le dossier /IMG/gif ou jpg ou png de votre site spip avant de faire les exercices Hot Potatoes, lors de la réalisation des exercices aller chercher les images dans ce dossier. (Non ?)

    • non :)
      primo :car cela suppose un accés en ftp et les débutants ne savent pas faire et cela réduit considérablement la simplicité de spip
      deuxio :je verrouille l’accès aux dossiers /IMG and co car certains dossiers récupèrent des doc qui sont dans la zone accès restreint, donc charger l’image depuis un espace qui ne se laisse pas explorer suppose de connaitre la syntaxe exacte du chemin et du nom de l’image (ne pas oublier que certains persistent à nommer leurs images avec des espaces que le serveur corrige mais ...bon bref, ils ne savent pas faire)
      bref, le plus simple que j’ai trouvé est de créer l’article qui va supporter le fichier html, charger les images comme d’hab dans cet article sans en insérer le code dans l’article évidemment...
      et là ouvrir le fichier html pour insérer le chemin avant de le charger lui aussi dans l’article

      si un script auto pouvait corriger les chemins dans ce type de plugin, ça simplifierait tout !
      je soumets :) je ne sais pas faire...

    Répondre à ce message

  • Oui, les résultats sont enregistrés, aller là et cliquer sur le bouton consulter, là il y a des gens qui ont joué le jeu et se sont enregistrés. Perso, je préfèrerais utiliser les ressources du plugin jeux. J’ai pas encore trouvé le temps de chercher comment le modifier pour enregistrer les résultats en dehors de le bd de Spip, dans un fichier txt, mais je vais m’y coller un jour. Le pb c’est que je suis assez mauvais en info. Je suis instit de base et je ne suis interéssé par l’info que pour ce qu’elle permet de faire. Heureusement qu’il y a des gens compétents sur Spip contrib qui font des trucs sympas, j’en profite pour les remercier.
    La boucle que j’utilise c’est çà

    <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>

    Je ne télécharge qu’un article.
    Si j’en veux plusieurs je prends celle là

    <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">[(#TITRE|sinon{<:info_document:>})]<br/></a>
    </BOUCLE_documents_hotpotatoes>

    , là j’ai les titres des documents et une fenêtre Thickbox.
    Pour les images, ça marche comme j’ai dit regarde là.
    Pour les liens à l’intérieur des articles Hotpot, c’est comme pour le fichier des images sauf que les pages hot potatoes sont stockées dans le fichier IMG/html/ et renommer par spip de htm en html .
    Cela veut dire que lorsque tu fais tes liens précédent et suivant dans tes articles, il faut que tu upload-es toutes tes pages dans ce dossier par ftp avant de tirer tes liens à partir de hotpot.
    Je sais que c’est confu mais moi et l’info... Soyez tolérant.

    Répondre à ce message

  • A emile,

    Je suis allé voir ton intégration directe et je la trouve intéressante vu les liens vers l’exercice (ou article ?) suivant et précédent. L’inscription au début de l’exercice permet-elle l’enregistrement des résultats ou uniquement leur envoi par courriel ? Et pour les images ? Comme expliqué sur ton dernier post ? Question boucle : que rajouter ou modifier ?

    Merci pour tes précisions. Entre les deux propostions avec hot pot, ce serait génial d’arriver à un plugin qui permette ce que vous faites, voire plus.

    Cordialement.

    Répondre à ce message

  • PS.
    Pour la boucle cliquer sur squelette dans le pied de l’article.

    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