Teilen, Einbetten, Drucken

Der Link

Dein Programm steht vollständig in der Adresse. Es wird nirgends gespeichert und geht nur an die, denen du den Link gibst. Der Knopf Teilen neben „Ausführen“ öffnet einen Dialog mit dem Link zum Kopieren. Abschnitte, Titel und Aufgabe stehen im Programm selbst und reisen deshalb mit. Wer den Link öffnet, sieht CodeNatter in seiner Sprache (Deutsch oder Englisch) – das Programm bleibt dasselbe.

Groß anzeigen zeigt den Link als QR-Code im Vollbild – für den Beamer: Die Klasse scannt ihn mit dem Handy. Sehr lange Programme passen nicht mehr in einen QR-Code; dann sagt die Anzeige das.

Einbetten

Unter Einbetten bekommst du einen fertigen Schnipsel für Moodle, WordPress und überall sonst, wo du HTML einfügen darfst. Per JavaScript legst du eine leere Stelle an, und das Skript setzt das Beispiel hinein:

<div data-codenatter="https://codenatter.de/?view=result#world(...)"
     data-title="Kara: Beeren einsammeln" data-height="300"></div>
<script src="https://codenatter.de/embed.js" async></script>

Das Skript gehört einmal auf die Seite, gleich wie viele Beispiele darauf stehen. Es passt jedes an seine Höhe an – kein Rollbalken im Rahmen, kein abgeschnittenes Ende.

Ohne Skript

Manche Systeme werfen <script> aus dem Text. Dann nimmst du den Rahmen selbst. Er kommt ohne alles aus, behält aber die Höhe, die du ihm gibst (der Dialog schätzt sie aus der Länge des Programms):

<iframe src="https://codenatter.de/?view=result#world(...)"
        style="width:100%;height:300px;border:0"
        loading="lazy" title="Kara: Beeren einsammeln"></iframe>
<script src="https://codenatter.de/embed.js" async></script>

Womit das Beispiel startet

Parameter	Zeigt
`?view=result`	nur das Ergebnis, läuft sofort los
`?view=split`	Editor und Ergebnis
`?view=editor`	nur den Editor, ohne Knöpfe zum Ausführen
`&block=Gerade`	startet mit diesem Abschnitt

Die Parameter stehen vor dem #, dahinter beginnt das Programm. Die Ansicht gehört zur Einbettung: Wer den Link direkt aufruft, bekommt die volle Seite. In jeder eingebetteten Ansicht führt ein Link In CodeNatter öffnen ins volle Werkzeug.

Was eingebettet erhalten bleibt

Was jemand in einem eingebetteten Beispiel ändert, übersteht ein Neuladen der Seite, solange der Tab offen ist (im Sitzungsspeicher des Browsers, nicht auf einem Server). Mit Zurücksetzen kommt das ursprüngliche Programm zurück. Auf einem geteilten Schulrechner bleibt nach dem Schließen des Tabs nichts zurück.

Drucken

Ein gedrucktes Blatt zeigt Titel, Aufgabe, das Programm und das Ergebnis – ohne Knöpfe, Reiter und Regler. Karas Welt kommt mit weißer Wiese und schwarzem Gitter aufs Papier, damit man mit dem Bleistift hineinschreiben kann. Unten auf dem Blatt stehen Titel und Adresse der Seite.