MINESWEEPER

Comment intégrer le Démineur dans un cours Moodle

Moodle retire les iframes de presque tout ce que saisissent les utilisateurs, mais il laisse volontairement tranquilles les ressources Page : c’est donc là que va le jeu.

Temps nécessaire
Environ 3 minutes
Ressource
Page
Vue de l’éditeur
Outils > Code source
Solution de repli
URL, affichage : Intégrer
<iframe
  src="https://play-minesweeper.games/embed/?size=beginner&noguess=1"
  width="344"
  height="472"
  frameborder="0"
  style="border:0;max-width:100%"
  loading="lazy"
  title="Minesweeper Game"
  referrerpolicy="no-referrer-when-downgrade"
  allow="clipboard-write"
></iframe>
<p style="font:12px/1.5 Tahoma,'MS Sans Serif',Geneva,sans-serif;color:#555555;margin:6px 0 0;max-width:344px">
  <a href="https://play-minesweeper.games/" style="color:#555555">play-minesweeper.games</a> — free Minesweeper, no download
</p>

Une grille Débutant 9×9 en mode sans hasard (noguess=1), 344 × 472 pixels : chaque grille se résout par la logique, et le cadre tient dans la zone de contenu du thème Boost et de l’application Moodle.

Pour la voie de la ressource URL, il ne te faut que l’adresse : https://play-minesweeper.games/embed/?size=beginner&noguess=1. Le paragraphe après l’iframe est le lien de mention qui garde l’intégration gratuite ; avec une ressource URL, mets plutôt ce lien dans la description de la ressource.

Colle l’extrait via la vue du code source de l’éditeur, et la grille est en ligne. Si ton administrateur nettoie le contenu partout, une ressource URL dont l’affichage est réglé sur Intégrer fait le même travail sans aucun HTML.

Ajouter le jeu sous forme de ressource Page

  1. Active le mode édition dans ton cours

    Ouvre le cours et active le bouton Mode édition en haut à droite. Il te faut un rôle qui peut ajouter des activités, ce que permet le rôle Enseignant standard.

  2. Ajoute une ressource Page

    Dans la section qui doit accueillir le jeu, clique sur Ajouter du contenu et choisis Activité ou ressource (sur Moodle 4.4 et versions antérieures, clique sur Ajouter une activité ou ressource). Choisis Page dans le sélecteur d’activités et donne-lui un nom comme « Échauffement logique : Démineur ».

  3. Ouvre la vue du code source du contenu de la page

    Descends jusqu’au contenu de la page. Dans l’éditeur TinyMCE, ouvre le menu Outils (ou le menu Affichage) et choisis Code source. Sur les sites plus anciens qui utilisent encore l’éditeur Atto, clique d’abord sur le bouton qui affiche plus de boutons, puis sur le bouton HTML. Colle l’extrait dans la fenêtre de code et clique sur Enregistrer dans cette fenêtre.

  4. Enregistre et affiche

    De retour dans l’éditeur visuel, la grille apparaît sous forme d’espace réservé ou de cadre actif. Descends et clique sur Enregistrer et afficher. Moodle ouvre la page terminée, et tu devrais pouvoir jouer une partie tout de suite.

  5. Si la grille manque, utilise plutôt une ressource URL

    Si la page enregistrée n’affiche aucun jeu, ton site nettoie le HTML partout. Supprime la Page, ajoute à la place une ressource URL, mets l’adresse du jeu dans URL externe et, sous Apparence, règle Affichage sur Intégrer. Moodle construit alors le cadre lui-même : il n’y a pas de HTML à retirer.

Pourquoi l’iframe survit dans une Page et pas dans un forum

Moodle protège chaque cours contre le code malveillant en nettoyant le HTML que les utilisateurs enregistrent. Le nettoyeur, HTML Purifier, supprime purement et simplement les iframes. Ce qui compte, c’est quel texte Moodle nettoie :

  • Non nettoyé : le contenu des Pages, les zones texte et média, et les descriptions des activités et des ressources. Moodle les laisse tranquilles exprès, pour que les enseignants puissent ajouter des médias, des scripts et des cadres en ligne. Ton iframe reste exactement telle que tu l’as collée.
  • Nettoyé : tout ce que les élèves peuvent rédiger : messages de forum, travaux remis, pages de wiki, articles de glossaire et de base de données, blogs. L’éditeur affiche l’iframe pendant la saisie, puis elle disparaît à l’enregistrement.
  • Nettoyé, sauf contenu de confiance : les activités qui prennent en charge le texte de confiance, comme les messages de forum et les articles de glossaire. Si un administrateur active Enable trusted content (Site administration > Security > Site security settings dans l’interface anglaise), le texte des rôles disposant de la capacité moodle/site:trustcontent (Enseignant et Gestionnaire par défaut) est marqué comme de confiance et échappe au nettoyage.

Deux réglages d’administration changent la donne. Content cleaning everywhere (Site administration > Development > Experimental settings) nettoie aussi les Pages et les descriptions, et l’iframe disparaît alors de tous les champs de l’éditeur ; la ressource URL permet de contourner le problème. Allow EMBED and OBJECT tags, sur la page Site security settings, est souvent proposé comme solution, mais ne couvre que ces deux anciennes balises et n’a aucun effet sur les iframes.

Pas administrateur ? Tu en as rarement besoin : une Page fonctionne sur un site Moodle par défaut. Sinon, demande à ton administrateur Moodle si Content cleaning everywhere est activé, ou utilise la voie de la ressource URL ci-dessous.

La voie de la ressource URL

Une ressource URL ne demande aucun HTML : rien ne peut donc la retirer. Avec le mode édition activé :

  1. Clique sur Ajouter du contenu > Activité ou ressource et choisis URL.
  2. Saisis un nom et colle https://play-minesweeper.games/embed/?size=beginner&noguess=1 dans URL externe, avec le https://.
  3. Sous Apparence, règle Affichage sur Intégrer.
  4. Ajoute la ligne de mention à la description : « Minesweeper by play-minesweeper.games », avec un lien vers le site.
  5. Clique sur Enregistrer et afficher.

Moodle dessine le cadre et le dimensionne pour remplir la page : la grille s’affiche donc avec de l’espace autour. Si Intégrer ne figure pas dans la liste Affichage, l’administrateur a limité les options d’affichage disponibles pour les ressources URL ; Ouvrir charge alors le jeu dans la même fenêtre, et l’option de fenêtre pop-up (In pop-up) ouvre une fenêtre séparée.

Dépannage

  • La page n’affiche rien là où le jeu devrait être. Ouvre les paramètres de la page et regarde le contenu de la page en Code source. Si l’iframe a disparu, le site nettoie le contenu partout : passe à la ressource URL. Si elle est là, c’est que le cadre est bloqué.
  • Le cadre est là mais vide, ou affiche un message de blocage. Le filtre web de l’établissement bloque le domaine. Ouvre l’adresse du jeu dans un onglet normal sur le réseau de l’établissement pour le confirmer, et consulte nos notes sur le Démineur à l’école.
  • La dernière rangée est coupée. La hauteur a été modifiée ou l’extrait a été raccourci. Remets height="472" dans le Code source ; la grille a besoin de toute la hauteur pour son en-tête et sa ligne d’état.
  • Le jeu s’affiche sous forme de code. Il a été collé dans l’éditeur visuel et non dans la fenêtre Code source. Supprime-le et colle-le de nouveau via Outils > Code source.
  • Le jeu a disparu après une restauration du cours sur un autre site. Les sauvegardes conservent le contenu des Pages, mais un site où Content cleaning everywhere est activé le nettoie à l’affichage de la page. Ajoute de nouveau le jeu sous forme de ressource URL sur ce site.

L’utiliser en classe

La séance de Démineur pour les enseignants est une activité de logique de 15 minutes conçue autour de cette grille. Dans Moodle, mets la grille sur une Page avec, en dessous, les règles que les élèves doivent découvrir, et fais-la suivre d’un forum où ils expliquent une déduction avec leurs propres mots. Pour l’entraînement sur papier ou les devoirs à la maison, mets un lien vers les fiches de Démineur à imprimer ; chaque fiche est fournie avec son corrigé.

Questions sur l’intégration dans Moodle

Pourquoi Moodle a-t-il retiré mon iframe ?

Moodle fait passer la plupart des textes par HTML Purifier, qui supprime toutes les iframes. Le contenu des Pages et les descriptions d’activités en sont exemptés pour que les enseignants puissent ajouter des médias et des cadres en ligne, sauf si ton administrateur a activé Content cleaning everywhere. Dans les messages de forum, les travaux remis, les wikis, les glossaires et les autres endroits où écrivent les élèves, les iframes sont retirées à l’enregistrement. Utilise une Page, une zone texte et média ou une ressource URL en mode Intégrer.

Le réglage « Allow EMBED and OBJECT tags » répare-t-il une iframe retirée ?

Non. Ce réglage n’autorise que les anciennes balises embed et object ; il n’a aucun effet sur les iframes, et cet extrait n’utilise ni l’une ni l’autre. Ce qui décide de la survie d’une iframe, c’est l’endroit où tu la colles (une Page la garde) et, dans les activités de type forum, l’activation du contenu de confiance (Trusted content) et la possession par ton rôle de la capacité moodle/site:trustcontent.

Peut-on mettre le jeu directement sur la page du cours ?

Oui. Ajoute une zone texte et média (appelée Étiquette avant Moodle 4.1) au lieu d’une Page et colle l’extrait via le code source de la même façon. Son texte n’est pas nettoyé non plus. Tiens-t’en à la grille Débutant à cet endroit : la colonne de la page du cours est étroite, et une grille plus grande serait comprimée dans un cadre qui défile.

À quoi ressemble une ressource URL affichée en mode Intégrer ?

Moodle ouvre une page avec l’en-tête du cours et, en dessous, un cadre qui remplit l’espace disponible, avec ton jeu à l’intérieur. Utilise https://play-minesweeper.games/embed/?size=beginner&noguess=1 comme URL externe. Si Intégrer manque dans la liste Affichage, ton administrateur l’a retiré des options d’affichage disponibles des ressources URL ; choisis alors Ouvrir ou la fenêtre pop-up.

Est-ce que cela marche dans l’application Moodle ?

Une Page contenant l’iframe s’affiche dans l’application Moodle, et l’extrait se rétrécit à la taille de l’écran grâce à max-width:100%. Les joueurs posent les drapeaux avec un appui long. Si ton site utilise la voie de la ressource URL, l’application peut ouvrir l’adresse dans le navigateur à la place.

Les élèves ont-ils besoin d’un compte ou d’un plugin ?

Non. Il n’y a rien à installer dans Moodle et aucun compte à créer sur le site du jeu. La grille tourne dans le cadre, n’affiche aucune publicité, et les victoires en mode sans hasard ne sont jamais envoyées au classement public.

Tout ce qui figure sur cette page part d’un extrait du générateur : un cadre de jeu et, en dessous, une ligne de mention avec un lien. Choisis une taille de grille et un thème, décide si tu affiches la ligne facultative « Powered by » à l’intérieur du jeu, puis copie le code.

Ouvrir le générateur d’intégration du Démineur

Également utile : le générateur de widget Démineur et les options de l’iframe, comment jouer au Démineur et les tailles de grille personnalisées.