MINESWEEPER

Comment intégrer le Démineur dans une page Canvas

Canvas accepte les iframes dans tous les champs du Rich Content Editor : une grille de Démineur sans hasard s’ajoute à une page, un devoir ou une annonce en un seul collage en vue HTML.

Temps nécessaire
Environ 2 minutes
Où
Pages > Add Page
Vue de l’éditeur
HTML Editor (</>)
Grille qui tient
9x9, 344 x 472
<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) : chaque grille se termine par la logique, et personne dans la classe ne perd sur un pile ou face. Le cadre fait 344 × 472 pixels.

Le paragraphe après l’iframe est le lien de mention qui garde l’intégration gratuite. Canvas conserve ses styles en ligne : il a donc sur la page le même aspect que dans l’aperçu du générateur.

Ce qui coince se trouve presque toujours hors de l’éditeur : la liste de domaines autorisés d’un administrateur, un filtre web de l’établissement, ou une grille trop large pour la mise en page du cours.

Ajouter le jeu à une page Canvas

  1. Copie l’extrait pour la classe

    Copie le code ci-dessous, ou crée le tien avec le générateur d’intégration et ajoute &noguess=1 à l’adresse src. Prends les deux parties : l’iframe et le paragraphe de mention d’une ligne en dessous. Canvas conserve tous les attributs de cet extrait quand il enregistre la page.

  2. Crée une page : Pages > View All Pages > Add Page

    Dans ton cours, clique sur Pages dans la navigation du cours. Si le cours a une page d’accueil, clique d’abord sur View All Pages, puis sur Add Page, et donne un titre à la page. Tout autre élément qui utilise le Rich Content Editor convient aussi : un devoir (Assignment), une discussion, une annonce ou la description d’un questionnaire (Quiz).

  3. Passe le Rich Content Editor en vue HTML

    Clique sur l’icône HTML Editor (le bouton </> en bas à droite de l’éditeur, intitulé « Switch to the HTML view »). Canvas ouvre l’éditeur HTML mis en forme, avec numéros de ligne. Clique à l’endroit où le jeu doit aller et colle l’extrait. Si tu préfères ne pas toucher au HTML, utilise plutôt Insert > Embed dans la barre de menus de l’éditeur, colle le code dans le champ Embed Code et clique sur Submit.

  4. Reviens à l’éditeur visuel et vérifie l’aperçu

    Clique de nouveau sur l’icône HTML Editor pour revenir à l’éditeur visuel. La grille doit apparaître en aperçu actif dans l’éditeur. Si tu vois plutôt l’iframe sous forme de ligne de texte, elle a été collée dans l’éditeur visuel et non en vue HTML : annule, passe en vue HTML et colle de nouveau.

  5. Save & Publish, puis affiche en tant qu’élève

    Clique sur Save & Publish (ou sur Save pour la garder comme brouillon non publié). Ouvre ensuite la page en Student View (le bouton de la page Settings du cours) et joue une partie pour vérifier que la grille se charge, que les clics sont pris en compte et que toute la grille tient.

Le cadre est vide : les domaines autorisés de l’administrateur

Canvas enregistre l’iframe sans broncher : un rectangle vide sur la page publiée vient donc rarement de l’éditeur. Vérifie ces points dans l’ordre :

  • Content Security Policy. Un administrateur Canvas peut activer la politique de sécurité du contenu (Content Security Policy) pour tout l’établissement (Admin > le compte > Settings > Security). Une fois activée, Canvas ne laisse les pages encadrer que les domaines de la liste Allowed Domains, plus ceux de Canvas lui-même et ceux des outils LTI installés. Demande à ton administrateur d’ajouter play-minesweeper.games sous Domain Name et de cliquer sur Add Domain. Les administrateurs peuvent aussi désactiver la politique pour un seul cours dans ses Settings, mais la plupart préféreront ajouter le domaine. Les enseignants ne peuvent modifier ni l’un ni l’autre de ces réglages.
  • Filtre web de l’établissement. Si le jeu ne s’ouvre pas non plus dans un onglet de navigateur normal sur le réseau de l’établissement, c’est le filtre qui bloque le domaine, pas Canvas. Nos notes sur le Démineur à l’école expliquent quoi demander au service informatique.
  • Une adresse en http://. Canvas est servi en HTTPS et les navigateurs refusent d’y afficher des cadres non sécurisés. L’extrait utilise https:// ; garde-le ainsi si tu modifies l’URL.

Pour faire la différence, ouvre la page, puis la console de développement de ton navigateur. Un message qui mentionne « Content Security Policy » et frame-src désigne la liste des domaines autorisés ; un filtre affiche en général sa propre page de blocage dans le cadre.

Là où Canvas retire l’iframe

Canvas nettoie chaque champ du Rich Content Editor d’après sa liste de HTML autorisé quand tu enregistres. L’iframe passe dans les pages, les devoirs, les discussions, les annonces, les questionnaires et le plan de cours (Syllabus). Deux endroits se comportent différemment :

  • Les descriptions d’événements du calendrier suppriment toute iframe qui n’est pas un média ou un lancement d’application propre à Canvas. Mets le jeu sur une page et lie cette page depuis l’événement.
  • Les attributs non pris en charge sont retirés sans avertissement, par exemple allow-top-navigation dans une valeur sandbox. L’extrait n’en utilise aucun : si tu l’as modifié et que quelque chose a cessé de fonctionner, compare-le avec l’original.

Choisir une taille adaptée à la mise en page du cours

Une page Canvas se trouve à côté de la navigation globale et, quand il est ouvert, du menu de navigation du cours : sur un ordinateur portable, la colonne de contenu est donc bien plus étroite que l’écran. Le cadre ne redimensionne pas sa grille ; choisis donc une taille qui tient dans l’affichage le plus étroit qu’utilisent tes élèves :

  • Débutant 9×9 : 344 × 472 pixels. C’est l’extrait ci-dessus. Tient à côté des deux menus, dans l’application Canvas Student et sur téléphone.
  • Intermédiaire 16×16 : 536 × 664 pixels. Tient sur un ordinateur portable ; à réserver aux élèves plus âgés. Remplace le src par ?size=intermediate&noguess=1 et ajuste la largeur et la hauteur en conséquence.
  • Expert 30×16 : 956 pixels de large. Plus large qu’une colonne de contenu Canvas sur la plupart des ordinateurs portables ; mets plutôt un lien vers le jeu.

Règle la largeur et la hauteur en vue HTML plutôt qu’en faisant glisser le cadre dans l’éditeur visuel, pour que les valeurs restent exactes. Si la grille paraît coupée en bas, la hauteur est trop petite ; s’il reste de l’espace vide en dessous, tout va bien.

L’utiliser en classe

La séance de Démineur pour les enseignants est une activité de logique de 15 minutes conçue pour cette grille précise, avec des pistes de discussion. Une page Canvas s’y prête bien : la grille en haut, les règles que les élèves doivent trouver en dessous, et un lien vers les fiches de Démineur à imprimer pour s’entraîner sur papier ou à la maison. Ajoute la page à la liste de tâches des élèves depuis les options de la page si tu veux qu’elle figure dans la liste de tout le monde pour le cours.

Questions sur l’intégration dans Canvas

Canvas autorise-t-il les iframes dans les pages ?

Oui. iframe figure dans la liste d’autorisation de l’éditeur HTML de Canvas avec les attributs src, width, height, frameborder, loading et allow qu’utilise cet extrait, et style et title sont autorisés sur tous les éléments. Canvas retire les balises object et embed des pages, et les iframes des descriptions d’événements du calendrier, mais une iframe dans une page, un devoir, une discussion, une annonce ou un questionnaire est conservée.

Pourquoi le cadre du Démineur est-il vide dans Canvas ?

La cause habituelle est la Content Security Policy. Quand un administrateur Canvas l’active sous Admin > Settings > Security, Canvas n’autorise que les cadres provenant des domaines de la liste Allowed Domains, et toutes les autres iframes restent vides. Demande à ton administrateur Canvas d’ajouter play-minesweeper.games à la liste. L’autre cause fréquente est un filtre web de l’établissement qui bloque les sites de jeux.

Quelle taille donner à l’iframe dans Canvas ?

Utilise la grille Débutant, en 344 sur 472 pixels, pour la plupart des pages : elle tient dans la zone de contenu avec la navigation du cours ouverte, et sur téléphone. La grille Intermédiaire, en 536 sur 664 pixels, tient sur un ordinateur portable. La grille Expert fait 956 pixels de large et est trop large pour une page Canvas normale.

Peut-on utiliser Insert > Embed au lieu de l’éditeur HTML ?

Oui. Dans le Rich Content Editor, choisis Insert > Embed dans la barre de menus (ou clique sur l’icône Embed de la barre d’outils, sous l’icône Options si ta fenêtre est étroite), colle l’extrait dans le champ Embed Code et clique sur Submit. Le résultat est la même iframe.

Est-ce que cela marche dans l’application Canvas Student ?

Les pages contenant la grille s’ouvrent dans l’application comme tout autre contenu de page. L’extrait comprend max-width:100%, si bien que le cadre se rétrécit sur un téléphone au lieu de déborder, et les joueurs posent les drapeaux avec un appui long. Utilise la grille Débutant si les élèves se servent surtout de téléphones.

L’intégration va-t-elle pister mes élèves ?

Non. Le jeu ne demande aucun compte, n’affiche aucune publicité et ne charge aucun traceur tiers. Les meilleurs temps restent dans le navigateur qui les a réalisés, et les victoires en mode sans hasard, celles que distribue cet extrait, 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.