Leporello – bebilderte Schritt-für-Schritt-Anleitung

Drei Dateien, kein Server und keine Installation nötig:

Datei	Zweck
`index.html`	Anzeige (Viewer) für Schüler
`anleitung.js`	Texte und Bilder – diese Datei wird ausgetauscht
`editor.html`	Erstellen und Bearbeiten der `anleitung.js`

Anleitung anschauen

index.html per Doppelklick im Browser öffnen. anleitung.js muss im selben Ordner liegen.

Große Seitenknöpfe bzw. ← →: Bild für Bild (geht automatisch in den nächsten Schritt über)
« Schritt zurück / Schritt weiter », Nummern oder Umschalt + ← →: Schritt für Schritt
Thumbnails: direkt zu einem Bild des Schritts springen
Klick auf das Bild: Vollbild. Auf Tablets funktioniert Wischen.
Direktlinks: index.html#3 (Schritt 3) oder index.html#3.2 (Schritt 3, Bild 2)

Mehrere Anleitungen mit derselben Seite

Der Code bleibt einmal vorhanden, nur die Datei wechselt. Im Editor beim Speichern den Dateinamen vergeben, z. B. anleitung_regenbogen.js, und neben index.html legen. Aufruf:

index.html → lädt anleitung.js
index.html?a=regenbogen → lädt anleitung_regenbogen.js (aus demselben Ordner)
index.html?a=ordner/datei.js → Datei aus einem Unterordner
index.html?a=https://…/datei.js → Datei von einer anderen Adresse (nur wenn dieser Server das erlaubt, CORS)

Diese Adressen kannst du als Links in Moodle, auf der Schulseite oder in einer Mail verwenden. Schüler können außerdem unten „Eigene Anleitung öffnen …“ wählen oder eine .js-Datei auf die Seite ziehen. Die Datei wird dabei nur im eigenen Browser gelesen, nichts wird hochgeladen.

Anleitung erstellen

editor.html öffnen, Überschrift eintragen.
Fotos in den Bilderpool ziehen oder über „Bilder hinzufügen …“ einlesen (werden nach Dateiname sortiert).
Bilder anklicken (markieren) und über „Neuer Schritt aus Markierten“ oder „↳ Markierte Bilder hierher“ einem Schritt zuordnen. Alternativ per Ziehen.
Reihenfolge mit ‹ › oder per Ziehen ändern, Text zu jedem Schritt schreiben (**fett**, [Linktext](https://…); Webadressen werden automatisch zu Links).
„Speichern“ (Dateiname links daneben, z. B. anleitung_regenbogen.js) – die Datei im Download-Ordner in den Ordner der index.html kopieren.

Zum Weiterbearbeiten im Editor „Öffnen …“ und die anleitung.js wählen.

Bilder werden beim Einlesen auf 1600 px Kantenlänge verkleinert (einstellbar) und direkt in die anleitung.js eingebettet. Die Seiten lassen sich unverändert auf einen Webspace hochladen.

Bilder nachträglich verkleinern oder zuschneiden

Praktisch, wenn die anleitung.js zu groß geworden ist (die Gesamtgröße steht oben in der Statuszeile, die Größe eines einzelnen Bildes erscheint beim Darüberfahren mit der Maus).

Alle Bilder verkleinern: Oben im Bilderpool Größe (z. B. 1280 px) und Qualität wählen, dann „Alle Bilder verkleinern“. Das gilt für alle Bilder in den Schritten und im Pool. Bilder, die dadurch nicht deutlich kleiner würden, bleiben unverändert.
Einzelnes Bild bearbeiten: Unter dem Bild auf ✎ klicken.
- Zuschneiden: Den hellen Rahmen verschieben, an den Griffen ziehen oder außerhalb des Rahmens einen neuen Ausschnitt aufziehen. Unter Format lässt sich ein festes Seitenverhältnis wählen (4:3, 3:4, 16:9, 1:1), „Ganzes Bild“ setzt den Ausschnitt zurück.
- Drehen mit ⟲ ⟳ in 90°-Schritten.
- Größe legt die längste Kante des Ergebnisses fest.
- „Übernehmen“ speichert die Änderung im Editor, Abbrechen oder Esc verwirft sie.
- „Original wiederherstellen“ macht alle Änderungen an diesem Bild rückgängig. Das geht nur, solange die Datei im Editor geöffnet ist.

Danach wie gewohnt speichern, sonst bleiben die Änderungen nur im Editor. Tipp: Unter einem neuen Dateinamen speichern, dann bleibt die alte Fassung als Sicherung erhalten.