Gunnar Bittersmann: Javaskript für eigene Lernsoftware

Beitrag lesen

@@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 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
0 62

Javaskript für eigene Lernsoftware

Jenni
  • html
  • javascript
  1. 0
    TS
    • html
    • javascript
    • projekt
    1. 0
      Jenni
      1. 1
        TS
        • menschelei
        • projekt
        1. 0
          Jenni
          1. 0

            Didaktik erarbeiten und in der Software abbilden

            TS
            1. 0
              Jenni
              1. 0
                TS
              2. 0
                Rolf B
  2. 3
    Rolf B
  3. -1
    hmm
    1. 0
      Gunnar Bittersmann
      • javascript
      1. 0
        hmm
        1. 0
          Gunnar Bittersmann
          1. 0
            Mitleser
            1. 0
              Gunnar Bittersmann
              1. 0
                Mitleser
        2. 0
          Robert B.
          • javascript
          • jquery
          • meinung
          1. 1
            JürgenB
            • meinung
            • menschelei
            1. 0
              Tabellenkalk
              1. 0
                Rolf B
                1. 3
                  MudGuard
                  1. 0
                    Robert B.
                    • menschelei
                  2. 0
                    kackb00n
                  3. 0
                    Rolf B
                    1. 0
                      Auge
                    2. 0
                      Robert B.
                      • meinung
                      • menschelei
                      • zu diesem forum
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Robert B.
                        2. 0
                          Tabellenkalk
                          1. 0
                            Rolf B
    2. 0
      Rolf B
      1. 0
        JürgenB
      2. 0
        hmm
        1. 0
          Tabellenkalk
          1. 0
            hmm
            1. 0
              Gunnar Bittersmann
              • menschelei
              1. 0
                hmm
                1. 0
                  Matthias Apsel
          2. 0
            MudGuard
            1. 0
              Tabellenkalk
              1. 0
                Gunnar Bittersmann
                • css
                • menschelei
        2. 0
          Gunnar Bittersmann
          • humor
          • menschelei
        3. 2
          Rolf B
          1. 0
            Jenni
  4. 0
    Felix Riesterer
    1. 0
      Jenni
      1. 0
        Felix Riesterer
        1. 0
          Jenni
          1. 0
            Felix Riesterer
            1. 0
              Jenni
              1. 0
                JürgenB
  5. 0
    marctrix
    • html
    • javascript
    • literatur
  6. 1
    Regina Schlauklug
    1. 0
      hmm
      1. 0
        Gunnar Bittersmann
        1. 0
          hmm
          1. 1

            Button? button!

            Gunnar Bittersmann
            • html
          2. 0
            Matthias Apsel
    2. 0
      Jenni
      1. 0
        Regina Schlauklug
  7. 0
    Gunnar Bittersmann