MINESWEEPER

Minesweeper in eine Canvas-Seite einbetten

Canvas nimmt iframes in jedem Feld des Rich Content Editors an. Ein Minesweeper-Spielfeld ohne Raten kommt also mit einem einzigen Einfügen in der HTML-Ansicht in eine Seite, eine Aufgabe oder eine Ankündigung.

Zeitaufwand
Etwa 2 Minuten
Wo
Pages > Add Page
Editor-Ansicht
HTML Editor (</>)
Passendes Spielfeld
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>

Ein Anfänger-Spielfeld 9×9 im Modus ohne Raten (noguess=1), jedes Spielfeld lässt sich also mit Logik lösen, und niemand in der Klasse verliert durch einen Münzwurf. Das Fenster ist 344 × 472 Pixel groß.

Der Absatz nach dem iframe ist der Quellenlink, der das Einbetten kostenlos hält. Canvas behält seine Inline-Styles, auf der Seite sieht er also genauso aus wie in der Vorschau im Generator.

Was schiefgeht, liegt fast immer außerhalb des Editors: die Liste erlaubter Domains eines Administrators, ein Webfilter der Schule oder ein Spielfeld, das zu breit für das Kurslayout ist.

Das Spiel in eine Canvas-Seite einfügen

  1. Den Code für den Unterricht kopieren

    Kopier den Code unten oder erstell deinen eigenen im Generator und häng &noguess=1 an die src-Adresse. Nimm beide Teile: das iframe und den einzeiligen Absatz mit der Quellenangabe darunter. Canvas behält beim Speichern der Seite jedes Attribut dieses Codes.

  2. Eine Seite anlegen: Pages > View All Pages > Add Page

    Klick in deinem Kurs in der Kursnavigation auf „Pages“. Hat der Kurs eine Startseite, klick zuerst auf „View All Pages“, dann auf „Add Page“, und gib der Seite einen Titel. Jedes andere Element mit dem Rich Content Editor funktioniert auch: eine Aufgabe, eine Diskussion, eine Ankündigung oder die Beschreibung eines Quiz.

  3. Den Rich Content Editor in die HTML-Ansicht schalten

    Klick auf das Symbol für den HTML-Editor (die Schaltfläche </> unten rechts im Editor, beschriftet mit „Switch to the HTML view“). Canvas öffnet den formatierten HTML-Editor mit Zeilennummern. Klick dorthin, wo das Spiel hin soll, und füg den Code ein. Willst du kein HTML anfassen, nimm stattdessen in der Menüleiste des Editors Insert > Embed, füg den Code in das Feld „Embed Code“ ein und klick auf „Submit“.

  4. Zurückschalten und die Vorschau prüfen

    Klick erneut auf das HTML-Editor-Symbol, um in den visuellen Editor zurückzukehren. Das Spielfeld sollte dort als Live-Vorschau erscheinen. Siehst du das iframe stattdessen als Textzeile, wurde es in den visuellen Editor statt in die HTML-Ansicht eingefügt: rückgängig machen, in die HTML-Ansicht wechseln und neu einfügen.

  5. Save & Publish, dann als Schüler ansehen

    Klick auf „Save & Publish“ (oder „Save“, um sie als unveröffentlichten Entwurf zu behalten). Öffne die Seite dann in der Student View (die Schaltfläche auf der Einstellungsseite des Kurses) und spiel eine Runde, um zu prüfen, dass das Spielfeld lädt, Klicks ankommen und das ganze Spielfeld hineinpasst.

Das Fenster ist leer: die erlaubten Domains des Admins

Canvas speichert das iframe ohne Beanstandung, ein leeres Rechteck auf der veröffentlichten Seite ist also selten ein Editor-Problem. Prüf der Reihe nach:

  • Content Security Policy. Ein Canvas-Administrator kann die Content Security Policy für die ganze Institution einschalten (Admin > das Konto > Settings > Security). Ist sie aktiv, lässt Canvas Seiten nur noch Domains von der Liste „Allowed Domains“ einbetten, dazu die eigenen und die installierter LTI-Tools. Bitte deinen Admin, play-minesweeper.games unter „Domain Name“ einzutragen und auf „Add Domain“ zu klicken. Admins können die Richtlinie auch für einen einzelnen Kurs in dessen Einstellungen abschalten, die meisten tragen aber lieber die Domain ein. Lehrkräfte können keine dieser Einstellungen ändern.
  • Webfilter der Schule. Öffnet sich das Spiel im Schulnetz auch in einem normalen Browser-Tab nicht, sperrt der Filter die Domain, nicht Canvas. Unsere Hinweise zu Minesweeper in der Schule erklären, worum du die IT bitten kannst.
  • Eine http://-Adresse. Canvas wird über HTTPS ausgeliefert, und Browser verweigern unsichere Fenster darin. Der Code nutzt https://; bleib dabei, wenn du die URL bearbeitest.

Um die Ursachen zu unterscheiden, öffne die Seite und dann die Entwicklerkonsole deines Browsers. Eine Meldung mit „Content Security Policy“ und frame-src heißt: Es liegt an der Liste erlaubter Domains. Ein Filter zeigt meist seine eigene Sperrseite im Fenster.

Wo Canvas das iframe entfernt

Canvas bereinigt jedes Feld des Rich Content Editors beim Speichern anhand seiner HTML-Allowlist. Das iframe übersteht das in Seiten, Aufgaben, Diskussionen, Ankündigungen, Quizzen und im Syllabus. Zwei Stellen verhalten sich anders:

  • Beschreibungen von Kalenderterminen entfernen jedes iframe, das nicht zu Canvas’ eigenen Medien oder App-Starts gehört. Setz das Spiel auf eine Seite und verlinke die Seite im Termin.
  • Nicht unterstützte Attribute werden stillschweigend entfernt, zum Beispiel allow-top-navigation in einem sandbox-Wert. Der Code nutzt keins davon – hast du ihn bearbeitet und etwas funktioniert nicht mehr, vergleich ihn mit dem Original.

Eine Größe wählen, die ins Kurslayout passt

Eine Canvas-Seite sitzt neben der globalen Navigation und, wenn es geöffnet ist, dem Kursnavigationsmenü. Die Inhaltsspalte ist auf einem Laptop also viel schmaler als der Bildschirm. Das Fenster skaliert sein Spielfeld nicht, wähl also eine Größe, die in die schmalste Ansicht deiner Schüler passt:

  • Anfänger 9×9 – 344 × 472 Pixel. Der Code oben. Passt neben beide Menüs, in die Canvas-Student-App und auf Handys.
  • Fortgeschritten 16×16 – 536 × 664 Pixel. Passt auf einen Laptop; nimm es für ältere Schüler. Ändere src auf ?size=intermediate&noguess=1 und Breite und Höhe passend dazu.
  • Experte 30×16 – 956 Pixel breit. Auf den meisten Laptops breiter als eine Canvas-Inhaltsspalte; verlinke stattdessen das Spiel.

Leg Breite und Höhe in der HTML-Ansicht fest, statt das Fenster im visuellen Editor zu ziehen, damit die Zahlen exakt bleiben. Wirkt das Spielfeld unten abgeschnitten, ist die Höhe zu klein; ist darunter leerer Platz, ist alles in Ordnung.

Im Unterricht einsetzen

Die Minesweeper-Unterrichtseinheit für Lehrkräfte ist eine 15-minütige Logik-Aktivität für genau dieses Spielfeld, mit Impulsen für das Gespräch. Eine Canvas-Seite eignet sich gut dafür: oben das Spielfeld, darunter die Regeln, die die Schüler finden sollen, und ein Link zu den Minesweeper-Arbeitsblättern zum Ausdrucken zum Üben auf Papier und für Hausaufgaben. Setz die Seite über die Seitenoptionen auf die To-do-Liste der Schüler, wenn sie für die Stunde bei allen auf der Liste stehen soll.

Fragen zum Einbetten in Canvas

Erlaubt Canvas iframes in Seiten?

Ja. iframe steht auf der HTML-Editor-Allowlist von Canvas, mit den Attributen src, width, height, frameborder, loading und allow, die dieser Code nutzt, und style und title sind an jedem Element erlaubt. Canvas entfernt object- und embed-Tags aus Seiten und iframes aus Beschreibungen von Kalenderterminen, aber ein iframe in einer Seite, Aufgabe, Diskussion, Ankündigung oder einem Quiz bleibt erhalten.

Warum ist das Minesweeper-Fenster in Canvas leer?

Meist liegt es an der Content Security Policy. Schaltet ein Canvas-Administrator sie unter Admin > Settings > Security ein, erlaubt Canvas nur noch Fenster von Domains auf der Liste Allowed Domains, und jedes andere iframe bleibt leer. Bitte deinen Canvas-Admin, play-minesweeper.games in die Liste aufzunehmen. Die andere häufige Ursache ist ein Webfilter der Schule, der Spieleseiten sperrt.

Wie groß sollte das iframe in Canvas sein?

Nimm für die meisten Seiten das Anfänger-Spielfeld mit 344 mal 472 Pixeln: Es passt bei geöffneter Kursnavigation in den Inhaltsbereich und auf Handys. Das Fortgeschrittenen-Spielfeld mit 536 mal 664 Pixeln passt auf Laptops. Das Experten-Spielfeld ist 956 Pixel breit und zu breit für eine normale Canvas-Seite.

Kann ich statt des HTML-Editors Insert > Embed nutzen?

Ja. Wähl im Rich Content Editor in der Menüleiste Insert > Embed (oder klick auf das Embed-Symbol in der Werkzeugleiste, bei schmalem Fenster unter dem Options-Symbol), füg den Code in das Feld Embed Code ein und klick auf Submit. Heraus kommt dasselbe iframe.

Funktioniert es in der Canvas-Student-App?

Seiten mit dem Spielfeld öffnen sich in der App wie jeder andere Seiteninhalt. Der Code enthält max-width:100%, das Fenster wird auf dem Handy also schmaler, statt überzulaufen, und Flaggen setzt man durch langes Drücken. Nimm das Anfänger-Spielfeld, wenn deine Schüler überwiegend Handys nutzen.

Verfolgt die Einbettung meine Schüler?

Nein. Das Spiel braucht kein Konto, zeigt keine Werbung und lädt keine Tracker von Drittanbietern. Bestzeiten bleiben in dem Browser, in dem gespielt wurde, und Siege im Modus ohne Raten – genau die gibt dieser Code aus – werden nie an die öffentliche Bestenliste übermittelt.

Alles auf dieser Seite beginnt mit einem Code aus dem Generator: einem Spielfenster und einer einzeiligen Quellenangabe mit Link darunter. Wähl Spielfeldgröße und Design, entscheide, ob die optionale „Powered by“-Zeile im Spiel erscheinen soll, und kopier dann den Code.

Minesweeper-Generator öffnen

Ebenfalls nützlich: der Minesweeper-Widget-Generator mit allen iframe-Optionen, die Minesweeper-Spielanleitung und eigene Spielfeldgrößen.