Javaskript für eigene Lernsoftware

[Gunnar Bittersmann]

@@Jenni

Mir ist es egal, ob die ganze Html-Datei wechselt (inkl. Bild) oder nur das Bild.

Kann man machen. Du verweist von jedem Formular auf die nächste Seite. Auf der Seite runde4.html also bspw.:

<img …/>
<form action="runde5.html">
	<input type="number"/>
	<button>weiter</button>
</form>

(Mit JavaScript fängst du falsche Eingaben ab und springst zurück zu runde1.html.)

Du kannst aber auch alles auf eine Seite packen und von Bereich zu Bereich springen:

<div id="runde4">
	<img …/>
	<form action="#runde5">…</form>
</div>

(Statt div kann es auch section sein.)

Mit [id^=runde]:not(:target) { display: none } werden alle Bereiche außer dem der aktuellen Runde ausgeblendet.

---

Oder du hast nur jeweils ein img-Element und ein form-Element im Markup und tauschst das angezeigte Bild über die Änderung des src-Attributswerts aus.

Dazu packst du erstmal alle Bild-URIs in ein Array. Ich hab da mal was vorbereitet.

Zum Bildwechsel habe ich eine Methode setSrc(number) vorgesehen. Da genügt erstmal die im Pen auskommentierte Variante; die andere ist für responsive images (je nach Viewportgröße werden andere Dateien des Bildes in unterschiedlichen Auflösungen geladen).

Desweiteren gibt es fürs figure- und form-Element die Methoden show() und hide(). Diese Methoden geben das Elementobjekt zurück, sodass sie aneinandergehängt werden können (chaining): bspw. figureElement.setImage(12).show(). Du kannst ja ab Zeile 103 ein bisschen damit rumspielen.

Fehlt nur noch ein bisschen Anwendungslogik …

LLAP 🖖