Javaskript für eigene Lernsoftware
bearbeitet von 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.:
~~~HTML
<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:
~~~HTML
<div id="runde4">
<img …/>
<form action="#runde5">…</form>
</div>
~~~
(Statt `div` kann es auch `section` sein.)
Mit `[id^=runde]:not(:target) { display: none }`{:.language-css} 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.](https://codepen.io/gunnarbittersmann/pen/boepRK)
Zum Bildwechsel habe ich eine Methode `setSrc(number)`{:.language-js} vorgesehen. Da genügt erstmal die im Pen auskommentierte Variante; die andere ist für *responsive images*{:@en} (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()`{:.language-js} und `hide()`{:.language-js}. Diese Methoden geben das Elementobjekt zurück, sodass sie aneinandergehängt werden können (*chaining*{:@en}): bspw. `figureElement.setImage(12).show()`{:.language-js}.
Fehlt nur noch ein bisschen Anwendungslogik …
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)