Jenni: Javaskript für eigene Lernsoftware

0 62

Javaskript für eigene Lernsoftware

Jenni
  • html
  • javascript
  1. 0
    TS
    • html
    • javascript
    • zusammenarbeit
    1. 0
      Jenni
      1. 1
        TS
        • menschelei
        • zusammenarbeit
        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
    • buch
    • html
    • javascript
  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

Hallo ihr 😀

Ich bin Grundschullehrerin und habe nur ein paar Grundkenntnisse in Html. Von Javascript verstehe ich quasi nix. Da ich für meine Kids aber eine Lernsoftware schreiben möchte, brauche ich eure Hilfe. Ich habe es schon selbst probiert, aber es funktioniert nur so halb.

Ich möchte Folgendes: Es solle eine in eine Html-Datei eingebundene Bilddateien für eine gewisse Zeit (5 Sekunden) erscheinen, dann soll ein Feld aufploppen, in das man eine zweistellige Zahl eintippen muss. Wenn man auf ok klickt, soll die Zahl überprüft werden. Wenn sie stimmt, soll es mit der nächsten Bilddatei weitergehen (für die wiederum eine neue zweistellige Zahl eingegeben werden muss). Das soll etwa zwanzig Mal so weitergehen (20 Bilder und Zahlen) und dann soll ein Abschlussbild erscheinen. Wenn die Eingabe falsch ist, soll das Spiel wieder von Neuem starten.

Mir ist es egal, ob die ganze Html-Datei wechselt (inkl. Bild) oder nur das Bild. Wenn die Html-Datei wechselt, dann brauche ich ja vermutlich einen Code, den ich in jede einzelne Html-Datei einbinde...

Könnt ihr mir helfen? Aktuell bereitet mir die Zeitverzögerung die meisten Schwierigkeiten.

Danke 😀

Jenni

  1. Hello Jenni,

    dann fang vorne an und lege detailliert in normalem Deutsch fest, was die Software in welcher Reiehenfolge leisten soll.

    Danach findest Du hier bestimmt fachliche Unterstützung ;-)

    Liebe Grüße
    Tom S.

    --
    Es gibt nichts Gutes, außer man tut es!
    Das Leben selbst ist der Sinn.
    1. Bis auf das eine n, das zuviel ist, ist alles in normalem Deutsch verfasst.

      Aber für dich :

      • Bild erscheint für 5 sek
      • danach erscheint ein Fenster. Es muss eine Zahl eingegeben werden. Ein Ok-Button muss gedrückt werden.
      • Wenn die Zahl richtig ist, dann erscheint das nächste Bild. Wenn falsch, dann erscheint wieder das erste Bild.
      • das soll sich mit 20 Bildern wiederholen.
      • danach erscheint ein Bild zum Abschluss des Spiels ("alles richtig!")

      Einfacher geht's nicht...

      1. Hello,

        oh, entschuldige bitte. Dann war ich schon betriebsblind.

        Dann sollte ich jetzt erstmal Pause machen bis morgen früh. Hoffentlich sind die Anderen aufmerksamer :-)

        Liebe Grüße
        Tom S.

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. Alles ok. Ich will ja schließlich auch eure Hilfe. Aber ihr tut damit auch etwas Gutes: Ihr helft den Informatikern der Zukunft 😉 (mit denen ich übrigens in einer Nachmittags-AG mit Scratch arbeite 😎).

          1. Hello Jenny,

            das war jetzt auch ehrlich gemeint. Ich habe derzeit den ganzen Tag zukünftige Fachinformatiker in der Erwachsenenbildung vor mir, die leider nicht alle den Eindruck erwecken, dass sie freiwillig im Seminar sitzen. Da bin ich abends tatsächlich schon etwas betriebsblind.

            Allerdings bin ich äußerst gespannt auf andere Erfahrungen in anderen Altersbereichen und deshalb ganz bestimmt auch gerne zur Zusammenarbeit bereit ;-)

            Liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.
            1. Also, die Kleinen machen das ganz super und sind total begeisterungsfähig. Ist ja auch cool... so ein eigenes Computerspiel 😀 Vielleicht sollten deine Großen zur Abwechslung auch mal mit Scratch spielen 😀

              1. Hello,

                Also, die Kleinen machen das ganz super und sind total begeisterungsfähig. Ist ja auch cool... so ein eigenes Computerspiel 😀 Vielleicht sollten deine Großen zur Abwechslung auch mal mit Scratch spielen 😀

                Ich habe jetzt vier Tage Zeit, mir das zu überlegen. Überzeuge mich bitte ;-)

                Liebe Grüße
                Tom S.

                --
                Es gibt nichts Gutes, außer man tut es!
                Das Leben selbst ist der Sinn.
              2. Hallo Jenni,

                Vielleicht sollten deine Großen zur Abwechslung auch mal mit Scratch spielen 😀

                Ich sehe für Scratch keine große Zukunft, es sei denn, die Kollegen beim MIT haben eine Non-Flash Version in der Pipeline. Flash als Grundlage von Scratch 2 ist so gut wie tot. Oder ccratcht ihr mit der Version 1.4 ?

                Rolf

                --
                Dosen sind silbern
  2. Hallo Jenni,

    wenn es "nur so halb" funktioniert, ist dein "von JavaScript verstehe ich quasi nix" aber weit untertrieben :)

    Zeitverzögerte Aktionen erreicht man in JavaScript mit setTimeout. Die Funktion bekommt zwei Parameter: als erstes eine Funktion, die aufgerufen werden soll wenn der Timer abgelaufen ist, und dann die Wartezeit in Millisekunden.

    D.h. du brauchst ein paar Funktionen, die die relevanten Schritte ausführen. Vermutlich hast Du irgendwo einen "Los geht's" Button.

    Klickt man den, kommt als erstes die

    function neueAufgabe() {  
    - irgendwie festlegen, wie die Aufgaben lautet (sprich: Bild und Lösung festlegen) und diese Info an geeigneter Stelle merken  
    - aufgabenzähler erhöhen
    - aufgabeZeigen()  
    }
    
    function aufgabeZeigen() {  
    - Element-Objekt zum Aufgabenbild suchen (document.getElementById)  
    - src-Eigenschaft dieses Objekts auf die URL des Bildes setzen  
    - img-Objekt einblenden (da gibt's diverse Möglichkeiten, incl. Animation wenn es sein soll)  
    **- setTimeout(antwortAnfordern, 5000);**  
    }
    

    Das Bild ist nun sichtbar. Nach 5s kommt die

    function antwortAnfordern() {  
    - Element-Objekt zum Aufgabenbild suchen (aufgabe = document.getElementById(...))  
    - Element-Objekt zum Eingabeformular suchen (eingabe = document.getElementById(...))  
    - aufgabe-Objekt ausblenden  
    - eingabe-Objekt einblenden  
    - fertig - weiter geht's mit dem click-Event des OK Buttons, in der Funktion
    }
    
    function antwortPrüfen() {
    - Antwort falsch?  
    -> aufgabeZeigen() und return;  
      
    - Alle Aufgaben erledigt?  
    -> "Du bist Super" anzeigen und return - Quiz zu Ende.  
    
    - neueAufgabe()
    }
    

    Während der 5 Sekunden, die SetTimeout wartet, ist der Browser frei zur Benutzung, d.h. die Kids könnten durchaus das Bild ins Clipboard kopieren und so aufbewahren. Das könntest Du verhindern, indem Du das Bild mit einem zweiten Bild gleicher Größe überlagerst, das nur aus transparenten Pixeln besteht (mit position:absolute darüberlegen).

    Ist die Seite öffentlich zugänglich, die Du gebaut hast? Wenn ja: magst Du uns die Adresse sagen?

    Rolf

  3. soll der Code für jeden Downloadbar sein? Falls ja, kannst du das z.B. mit Clientseitigem JavaScript machen.

    Les dich dazu einfach zu jQuery ein und kombiniere den bereits erwähnten Timeout mit einer passenden jQuery funktion.

    Mit jQuery kannst du dein HTML dynamisch verändern, also Bilder etc. dynamisch ein und ausbauen.

    1. @@hmm

      Les dich dazu einfach zu jQuery ein

      Nein. jQuery sollte kein Ersatz dafür sein, sich in JavaScript einzulesen.

      Mit jQuery kannst du dein HTML dynamisch verändern

      Das kann man mit JavaScript auch.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Nein. jQuery sollte kein Ersatz dafür sein, sich in JavaScript einzulesen.

        Das kann man mit JavaScript auch.

        jQuery ist ja eine JavaScript Bibliothek um HTML mit JavaScript zu manipulieren. Es heißt ja mit absicht jQuery und nicht phpQuery oder cQuery. Oder hab ich jetzt was falsch verstanden?

        1. @@hmm

          jQuery ist ja eine JavaScript Bibliothek um HTML mit JavaScript zu manipulieren.

          jQuery machte in der Vergangenheit einiges einfacher. Vergangenheit, weil inzwischen viele Gedanken aus jQuery Einzug in JavaScript gehalten haben.

          Die Manipulation des DOM[1] beschränkt sich hier auf Änderungen von Attributen. Das ist in Vanilla-JavaScript so einfach, dass man dafür noch nie jQuery brauchte.

          LLAP 🖖

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

          1. des DOM, nicht des HTML – das kann man nachträglich gar nicht mehr ändern ↩︎

          1. jQuery machte in der Vergangenheit einiges einfacher. Vergangenheit, weil inzwischen viele Gedanken aus jQuery Einzug in JavaScript gehalten haben.

            Nicht nur. Es nahm einem auch einige Kopfschmerzen bei der Umgehung von Browserproblemen / Inkonsistenzen ab. Nahm? Nimmt es immer noch, auch wenn sich die Sachlage gebessert hat.

            1. @@Mitleser

              jQuery machte in der Vergangenheit einiges einfacher. Vergangenheit, weil inzwischen viele Gedanken aus jQuery Einzug in JavaScript gehalten haben.

              Nicht nur. Es nahm einem auch einige Kopfschmerzen bei der Umgehung von Browserproblemen / Inkonsistenzen ab. Nahm? Nimmt es immer noch, auch wenn sich die Sachlage gebessert hat.

              Kannst du konkret „einige“ benennen, wo das immer noch der Fall wäre?

              Am besten mit Einschätzung, wie relevant diese für Jennis Problem wären?

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Nicht nur. Es nahm einem auch einige Kopfschmerzen bei der Umgehung von Browserproblemen / Inkonsistenzen ab. Nahm? Nimmt es immer noch, auch wenn sich die Sachlage gebessert hat. Kannst du konkret „einige“ benennen, wo das immer noch der Fall wäre?

                Das aktuelle jQuery listet 104 Codestellen (Nach "Support:" suchen). Auch wenn wir die fragwürdigen (IE8, uralte Firefox...) weglassen, bleibt noch einiges übrig.

                Deine regelmäßige Empfehlung von "fetch" wäre noch so ein Ding, das lässt sich mit jQuery ähnlich formulieren und man hat auch den IE 11 im Boot.

                Ob das im konkreten Projekt Relevanz hat, bzw. ob man den Overhead von jQuery für diesen Komfort einfach in Kauf nimmt, ist heutzutage nicht mehr pauschal zu beantworten. Zumindest solange der IE 8 noch Relevanz hatte, hätte ich den Einsatz pauschal empfohlen.

                Am besten mit Einschätzung, wie relevant diese für Jennis Problem wären?

                Du hast eine allgemeine Aussage getroffen, die ich allgemein erweitert habe 😉

        2. Moin,

          jQuery sollte kein Ersatz dafür sein, sich in JavaScript einzulesen.

          Das kann man mit JavaScript auch.

          jQuery ist ja eine JavaScript Bibliothek um HTML mit JavaScript zu manipulieren.

          Joa, du kannst auch mit einem Kran eine Hundehütte bauen 😉

          Viele Grüße
          Robert

          1. Hallo,

            Joa, du kannst auch mit einem Kran eine Hundehütte bauen 😉

            wobei man dann nicht nur Ahnung vom Hundehüttenbauen haben muss, sondern auch noch vom Kranführen.

            Gruß
            Jürgen

            1. Hallo,

              Joa, du kannst auch mit einem Kran eine Hundehütte bauen 😉

              wobei man dann nicht nur Ahnung vom Hundehüttenbauen haben muss, sondern auch noch vom Kranführen.

              Die Ahnung von Hunden nicht zu vergessen!

              Gruß
              Kalk

              1. Joa, du kannst auch mit einem Kran eine Hundehütte bauen 😉 wobei man dann nicht nur Ahnung vom Hundehüttenbauen haben muss, sondern auch noch vom Kranführen. Die Ahnung von Hunden nicht zu vergessen!

                ...die 400V Dreiphasen-Spannungsversorgung für den Kran auch nicht.

                Es sei denn, man nimmt einen Transportablen.

                Rolf

                --
                Dosen sind silbern
                1. Hi,

                  Es sei denn, man nimmt einen Transportablen.

                  Muß man denn immer so übertreiben? Für ne Hundehütte reicht's auch etwas kleiner: Mobiler Kran für Hundehütten-Bauer

                  cu,
                  Andreas a/k/a MudGuard

                  1. :D YMMF (You Made My Feierabend)

                  2. Hier ist ja der Kran schon die Hundehütte oder?

                  3. Hallo MudGuard,

                    smarte Lösung - aber hier zeigt sich mal wieder die Unschärfe des Foren-Bewertungssystems. Du hast 3 + bekommen, aber fachlich hilfreich ist dieser Teilbaum nun eigentlich nicht 😂. Eine getrennte Bewertung wie "gefällt mir fachlich" und "gefällt mir menschlich" wäre jetzt sinnvoll.

                    Rolf

                    --
                    Dosen sind silbern
                    1. Hallo

                      smarte Lösung - aber hier zeigt sich mal wieder die Unschärfe des Foren-Bewertungssystems. Du hast 3 + bekommen, aber fachlich hilfreich ist dieser Teilbaum nun eigentlich nicht 😂.

                      Was auch egal ist, da die Bewertung, wie schon -zigfach angemerkt, eben keine explizite Fachlich-Hilfreich-Bewertung ist.

                      Eine getrennte Bewertung wie "gefällt mir fachlich" und "gefällt mir menschlich" wäre jetzt sinnvoll.

                      Au ja, zwei Plus-Minus-Button-Paare, die ganz bestimmt genau so, wie gedacht, benutzt werden würden. Das funktioniert bestimmt so gut, wie geschnitten Brot [1]. <ironie mode="off" />

                      Tschö, Auge

                      --
                      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                      Toller Dampf voraus von Terry Pratchett

                      1. Geschnitten Brot funktioniert. ↩︎

                    2. Moin Rolf,

                      im gegebenen Kontext Hundehütte mit einem Kran aufbauen war der Beitrag auch fachlich hilfreich.

                      Viele Grüße
                      Robert

                      1. @@Robert B.

                        im gegebenen Kontext Hundehütte mit einem Kran aufbauen war der Beitrag auch fachlich hilfreich.

                        Wie kann eine Kranattrappe beim Aufbau einer Hundehütte hilfrteich sein? Du bist auf die Werbung reingefallen?

                        LLAP 🖖

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

                          in dem Kontext ist doch die Attrappe auch fachlich hilfreich – auf einer Metaebene 😉

                          Viele Grüße
                          Robert

                        2. Hallo,

                          eine Kranattrappe

                          Was eine Trappe ist, weiß ich. Was ist Kranat?

                          Gruß
                          Kalk

                          1. Hallo Tabellenkalk,

                            entweder eine österreichische Homepage ohne Punkt, oder fahre in den Oder-Spree Kreis, da weiß das jemand. Alternativ auch sein ähnlich geschriebener Kollege im Mansfelder Land.

                            Rolf

                            --
                            Dosen sind silbern
    2. Hallo hmm,

      muss man denn für die gestellte Aufgabe das HTML zur Laufzeit verändern - genauer formuliert: am lebendigen DOM manipulieren?

      Es sollte doch reichen, Dinge ein- und auszublenden und für die Frage-Bilder ein .src Attribut zu ändern.

      Eine ganz andere Frage, die mir grad so in der Mittagspause einfiel ist aber die nach integrativem Unterricht. Wie weit muss man bei einer solchen Lehr-Anwendung auf Zugänglichkeit achten? Sehbehinderte wird man in einer Regelschule wohl nicht antreffen, die brauchen speziell ausgestattete Schulen, deswegen würde ich das Thema Screenreader-fähigkeit als weniger kritisch ansehen. Aber es ist schon denkbar, dass die Mausbedienung nicht jedem leicht fällt. Die Koordination von Tastaturhand, Maushand und Auge, die man als alter Zocker problemlos drin hat, könnte Kindern das Leben erschweren[1]. Zumindest sollte man also auf eine 100% Steuerbarkeit per Tastatur achten. 100% Maussteuerung geht wohl nur, wenn man 3-4 Antworten zur Auswahl anbietet...

      Rolf


      1. Ja gut, für die künftige Counterstrike-Karriere ist das Training sicher nützlich... ↩︎

      1. Hallo Rolf,

        … Zumindest sollte man also auf eine 100% Steuerbarkeit per Tastatur achten.

        das sollte aber kein Problem sein, wenn man für die Eingaben Formularlelemnte (z.B. Radio- oder Checkboxen) nimmt, und die sensitive Fläche mit Labeln noch auf eine vernünftige Größe bringt.

        Gruß
        Jürgen

      2. muss man denn für die gestellte Aufgabe das HTML zur Laufzeit verändern - genauer formuliert: am lebendigen DOM manipulieren?

        weiß ich nicht, mein gedanken gang war:

        a) jQuery ist leicht

        b) viel html ist ecklich

        c) wenn ich ein basisprogramm fertig habe, möchte ich dieses leicht erweitern können

        d) ich habe nur bock programme zu erweitern die nicht ecklich sind

        1. Hallo,

          html ist ecklich

          das ist richtig, aber mit CSS kannst du die Ecken abrunden!

          Gruß
          Kalk

          1. html ist ecklich

            das ist richtig, aber mit CSS kannst du die Ecken abrunden!

            früher war alles besser... da konnte man die wörter noch so schreiben wie man wollte, damals im mittelalter...

            1. @@hmm

              früher war alles besser... da konnte man die wörter noch so schreiben wie man wollte, damals im mittelalter...

              Dafür konnte man nicht die Worte schreiben, die man wollte. Da wurde man für verbrannt damals im Mittelalter.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Dafür konnte man nicht die Worte schreiben, die man wollte. Da wurde man für verbrannt >damals im Mittelalter.

                für die Freiheit, insbesondere die Freiheit seine Rechtschreibung selbst zu gestalten, muss man halt opfer bringen!

                1. Hallo hmm,

                  Dafür konnte man nicht die Worte schreiben, die man wollte. Da wurde man für verbrannt >damals im Mittelalter.

                  für die Freiheit, insbesondere die Freiheit seine Rechtschreibung selbst zu gestalten, muss man halt opfer bringen!

                  Worte haben mit Orthografie recht wenig zu tun.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
          2. Hi,

            html ist ecklich

            <html> - stimmt, da sind Ecken!

            das ist richtig, aber mit CSS kannst du die Ecken abrunden!

            (html) - ob das so funktioniert? 😉

            cu,
            Andreas a/k/a MudGuard

            1. Hallo,

              (html) - ob das so funktioniert? 😉

              wie gesagt: mit CSS -> html:before{content:"("} und html:after{content:")"}

              Gruß
              Kalk

              1. @@Tabellenkalk

                (html) - ob das so funktioniert? 😉

                wie gesagt: mit CSS -> html:before{content:"("} und html:after{content:")"}

                radial-gradient

                LLAP 🖖

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

          b) viel html ist ecklich

          Unlike a rounded corner.

          LLAP 🖖

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

          a) jQuery ist leicht

          Jein - jQuery ist für einen geübten Programmierer leicht. Für Jenni ist es erstmal eine Komplikation mehr, um - wie Robert schriebte - mit dem Kran eine Hundehütte zu errichten.

          b) viel html ist ecklich

          Die Menge an ecklichem HTML ändert sich durch jQuery nicht, höchstens die Menge an Lianen und Sümpfen im JavaScript-Dschungel. Ohne jQuery ist der Dschungel vielleicht etwas größer, daber dafür viel wegsamer.

          c) wenn ich ein basisprogramm fertig habe, möchte ich dieses leicht erweitern können

          Ja. Wird das durch Basic Javascript statt jQuery-Gewusel verhindert? Wie gesagt: Jenni steigt ein und man muss ihr die Lernkurve nicht auch noch vorsätzlich hochbiegen.

          d) ich habe nur bock programme zu erweitern die nicht ecklich sind

          Ich habe eine gute Nachricht für Dich: Jenni macht das. Du brauchst das nicht zu tun 😂. Aber vielleicht kennt sie ja jQuery bereits, dann spricht nichts gegen den Einsatz. Warten wir mal ab, bis sie die Kiddies nach Hause gescheucht hat und sich dieses eckliche Antwortengewirre hier zu Gemüte geführt hat :)

          Rolf

          --
          Dosen sind silbern
          1. Hier ist aber viel los. Heute Abend setze ich mich dran und probiere das mit dem timeshift mal aus 😀

  4. Liebe Jenni,

    Bilddateien für eine gewisse Zeit (5 Sekunden) erscheinen, dann soll ein Feld aufploppen, in das man eine zweistellige Zahl eintippen muss.

    Was sieht man auf dem Bild? Woher erkennt der Nutzer, welche Zahl er eingeben soll? Steht der Inhalt des Bildes mit der einzugebenden Zahl in einem Verhältnis?

    Wenn man auf ok klickt,

    Woher kommt das ok und warum ist das nötig? Wäre eine Enter-Taste anstelle des Klicks auch erlaubt? Wenn nein, warum nicht? Die Ziffern werden mit Tasten eingegeben, das Beenden der Eingabe erfolgt in einer solchen Situation üblicherweise sowohl mit der Enter-Taste, als auch mit der Maus auf dem entsprechenden Button (hier wohl Dein "ok"?).

    soll die Zahl überprüft werden.

    Wie geschieht die Überprüfung? Ist jedem Bild eine Lösungszahl zugeordnet? Wie ist die Zuordnung gelöst?

    Wenn sie stimmt, soll es mit der nächsten Bilddatei weitergehen [...] und dann soll ein Abschlussbild erscheinen.

    OK.

    Wenn die Eingabe falsch ist, soll das Spiel wieder von Neuem starten.

    Ohne weitere Rückmeldung an den User?

    Könnt ihr mir helfen?

    Wie soll Hilfe aus dem Forum genau aussehen?

    Aktuell bereitet mir die Zeitverzögerung die meisten Schwierigkeiten.

    Inwiefern? Hast Du kein Stichwort, wie man zeitversetzte Aktionen auslöst? Oder funktioniert Dein jetziger Code nicht? Was sollte z.B. ich jetzt für Dich tun?

    Liebe Grüße,

    Felix Riesterer.

    1. Auf den Bildern sieht man Punkte. Die Anzahl muss bestimmt werden. Und zwar möglichst quasisimultan und nicht zählend.

      Mein Code bisher:

      <html>
      <head>
      <title>Hunderterfeld</title>
      </head>
      
      <body onload="Ergebnis()">
      
      <center><h1>Wie viele Punkte sind das?</h1></<center>
      
      <img src="bild1.png">
      
      <script>
      
      function timeout(){
          window.setTimeout('Ergebnis()', 5000 );
      	};
          function Ergebnis (){
            var Eingabe = window.prompt('Ergebnis', '');
      	if (Eingabe != 23) { 
      	location.href = 'falsch.html';
              } else {
                location.href = 'seite1.html'; 
      	};
      	};
      
      </script>
      
      </body>
      </html>
      

      Mein Problem: Mein "timeshift"-Teil funktioniert nicht. Und da ich keine Ahnung von javascript habe (z.B. von den kausalen Zusammenhängen zwischen den einzelnen Zeichen und Klammern), kann ich den Fehler nicht finden. Ich hätte gerne, dass sich das Eingabe-Fenster erst nach 5 Sekunden öffnet. Toll wäre auch, wenn das Bild dann verschwinden würde, aber ich glaube, das kriege ich heute Abend nicht mehr hin 😀

      Aus eurer Sicht sicherlich total stumpf, was ich hier mache, aber aus meiner Sicht ganz wichtig, denn die Lernsoftware, die es für Grundschulkinder gibt, ist total überladen von grinsenden Schmetterlingen und anderem Kram, der von der eigentlichen Übung ablenkt. Es soll eine kleine Übung von vielen werden, die die Kinder machen können. Daher soll der Aufwand jetzt nicht ins Unermessliche steigen...

      1. Lieber Jenni,

        fangen wir mal mit den Grundlagen an.

        <html>
        <head>
        <title>Hunderterfeld</title>
        </head>
        

        Da fehlt eine Angabe zum Doctype und zur verwendeten Zeichenkodierung. Ich repariere das mal ganz schnell:

        <!doctype html>
        <html lang="de">
        <head>
          <meta charset="utf-8">
          <title>Hunderterfeld</title>
        </head>
        

        Wenn Du diese HTML-Datei mit einem vernünftigen Editor speicherst, dort als Kodierung auch "UTF-8" angibst, dann sollten alle deutschen Sonderzeichen auch korrekt wie im Quelltext notiert angezeigt werden.

        <body onload="Ergebnis()">

        Das sollte besser gehen. Vor allem dann, wenn Du weitere solche Lernspiele erstellen willst, solltest Du Dein JavaScript so schreiben, dass Du nur eines programmierst, welches dann in einer eigenen Textdatei (z.B. "spiel.js") abgespeichert und von allen Seiten mit Lernspiel eingebunden wird.

        <center><h1>Wie viele Punkte sind das?</h1></<center>

        Das <center>-Element lässt Du bitte unbedingt weg! Das Warum kannst Du gerne im Kapitel zu CSS-basierten Layouts nachlesen, wenn Du viel Zeit übrig hast.

        <img src="bild1.png">

        Es wird aus der Sicht von JavaScript schwierig zu verstehen, welche Deiner Elemente für Dein Lernspiel wie zu behandeln sind, wenn Du sie nicht in eine passende Struktur verpackst, die von Deinem JavaScript "verstanden" wird.

        Besser vielleicht so:

        <form class="lernspiel">
          <p>
            <img src="bild1.png" alt="sieben schwarze Punkte">
            <input type="number" data-richtig="7">
          </p>
          <p>
            <img src="bild2.png" alt="drei gelbe Punkte">
            <input type="number" data-richtig="3">
          </p>
        </form>
        

        In dieser Struktur wird sofort sichtbar, dass Du ein Bild und ein zugehöriges Zahleneingabefeld in jeweils einem Textabsatz gruppierst. Um es dem JavaScript später so leicht wie möglich zu machen, vergeben wir dem <input> ein spezielles Attribut, welches wir "richtig" nennen. In HTML5 kann man beliebige Attribute notieren, wenn der Attributname mit "data-" beginnt, daher ist der vollständige Attributname "data-richtig". Der Wert dieses Attributes ist dann die erwartete richtige Lösung.

        <script>

        function timeout(){

        Ja, hier wird es jetzt spannend. Da wir ein wiederverwendbares JavaScript schreiben wollen, sollten wir es anders aufziehen. Hier im Wiki gibt es ein Tutorial, in dem beschrieben wird, wie man das besser machen kann.

        Daher soll der Aufwand jetzt nicht ins Unermessliche steigen...

        Tut mir leid, aber Dein Vorhaben ist nicht so einfach, als dass eine Schnellschusslösung wirklich zielführend ist. Wenn Du das so erstellen willst, wie Du das beschrieben hast, vor allem mit dem Gedanken, mehrere solcher Lernspiele zu bauen, dann solltest Du den JavaScript-Teil wirklich nur einmal machen müssen und den Rest über vernünftiges HTML regeln!

        Bist Du bereit, Dich etwas mehr in die Sache zu vertiefen?

        Liebe Grüße,

        Felix Riesterer.

        1. Ich finde es nett, dass du mit helfen möchtest. Aber es geht mir nur um diese 5 Sekunden Wartezeit... Es muss nicht professionell sein und niemand wird sich je meinen Quelltext ansehen.

          1. Liebe Jenni,

            Hi Ich finde es nett, dass du mit helfen möchtest.

            bin nicht sicher, ob ich das kann, ...

            Aber es geht mir nur um diese 5 Sekunden Wartezeit...

            da Du noch keine Erfahrung hast, und von daher nicht weißt, was es alles damit auf sich hat, das umzusetzen.

            Es muss nicht professionell sein

            Es muss funktionieren und Dich in die Lage versetzen, später weitere Lernspiele zu erstellen, weil Du dann weißt, was Du tust. Aber Du kannst schon zu Anfang daran scheitern, dass Du das Wesentliche nicht respektierst.

            und niemand wird sich je meinen Quelltext ansehen.

            Ist das wirklich ein Argument, das uns in dieser Sache weiterhelfen kann?

            Liebe Grüße,

            Felix Riesterer.

            1. Dann frage ich anders: Was muss ich an meinen Skript verändern, dass das Eingabefeld erst nach 5 Sek. auftaucht?

              1. Hallo,

                du musst beim body-onload statt ergebnis timeout aufrufen … und javascript und html und css lernen.

                Gruß
                Jürgen

  5. Hej Jenni,

    JavaScript ist nicht so mein Ding, daher kann ich keine konkrete Hilfe anbieten, aber wie der Zufall es so will, habe ich gerade heute eine gute Kritik über eine Buch aus dem hervorragendem Rheinberg-Verlag gelesen. Vielleicht passt das ja für dich:

    Programmieren lernen mit JavaScript

    Marc

  6. Hi,

    mir war etwas langweilig und habe das mal versucht zu basteln:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Lern-Dingens</title>
      <style>
        /* Formulare, die nicht der aktuelle Schritt sind, sollen ausgeblendet werden */
        form:not(.currentStep) {
          display: none;
        }
        #success:not(.currentStep) {
          display: none;
        }
    
        /* Animation, die das Bild ausblendet */
        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
        /* Zuweisen der animation an das Bild. Wichtig ist hier das delay, welches angibt nach wie vielen Sekunden die animation ausgeführt werden soll */
        .currentStep img {
          animation-duration: .2s;
          animation-name: fadeOut;
          animation-iteration-count: 1;
          animation-delay: 5s;
          animation-fill-mode: forwards;
          display: block;
        }
      </style>
    </head>
    <body>
      <!-- Ein Formular pro Bild/Eingabefeld-Kombination -->
      <!-- Das "Startformular" hat die id "firstStep" und standardmäßig die class "currentStep". Jedes Formular hat novalidate, um die browserseitige validierung zu deaktivieren (wir wollen das selber mit JS machen) -->
      <form id="firstStep" class="currentStep" novalidate>
        <!-- das Bild -->
        <img src="http://via.placeholder.com/350x150" />
        <!-- das eingabefeld, im pattern-Attribut steht der richtige eingabewert (Achtung: Das ist ein regulärer Ausdruck, d.h. manche Zeichen haben eine besondere Bedeutung. Solange nur Ziffern verwendet werden funktioniert das wie erwartet) -->
        <input type="text" pattern="1" required/>
        <!-- Button zum bestätigen der eingegebenen Antwort. Hier mit der Lösung in klammern dahinter, die sollte man dann entfernen :) -->
        <button type="submit">Bestätigen (1)</button>
      </form>
      <form novalidate>
        <img src="http://via.placeholder.com/350x150" />
        <input type="text" pattern="2" required/>
        <button type="submit">Bestätigen (2)</button>
      </form>
      <form novalidate>
        <img src="http://via.placeholder.com/350x150" />
        <input type="text" pattern="3" required/>
        <button type="submit">Bestätigen (3)</button>
      </form>
      <div id="success">Alles richtig!</div>
    
      <script>
        // immer wenn ein formular abgeschickt wird, soll unten stehende funktion ausgeführt werden
        document.body.addEventListener('submit', e => {
          // verhindere dass browser versucht, das formular an einen server zu schicken
          e.preventDefault();
          // mache aktuelles formular inaktiv
          e.target.className = '';
          // prüfe, ob eingabewert im input korrekt ist
          if (e.target.querySelector('input').checkValidity()) {
            // falls ja, mache nächstes Formular aktiv
            e.target.nextElementSibling.className = 'currentStep';
          } else {
            // eingabe war falsch, mache erstes formular aktiv
            // aber erst nach 1ms, um das einblenden/ausblenden des bildes neu anzustoßen
            window.setTimeout(() => {
              document.getElementById('firstStep').className = 'currentStep';
            }, 1);
          }
          // setze formulardaten zurück (falls das gleiche formular später wieder angezeigt wird, sollte die antwort nicht schon drin stehen)
          e.target.reset();
        });
      </script>
    </body>
    </html>
    
    1. wär das html von mir würde gleich jemand sagen:

      da fehlt die lang angabe 😉

      und button ist alt, nimmt input type0button 😱

      und mach das bild ins css 😕

      1. @@hmm

        wär das html von mir würde gleich jemand sagen:

        da fehlt die lang angabe 😉

        Da hätte jemand recht.

        und button ist alt, nimmt input type0button 😱

        Hier würde jemand anderes „Unsinn!“ sagen.

        und mach das bild ins css 😕

        Hier auch.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. und button ist alt, nimmt input type0button 😱

          Hier würde jemand anderes „Unsinn!“ sagen.

                      <form role="form" action="/login" method="post">
                          <label for="email">E-Mail</label>
                          <input class="form-control" data-ng-model="username"
                             data-ng-change="feedback = ''" autofocus id="email" name="email">
                          <label for="password">Password</label>
                          <input class="form-control" data-ng-model="password"
                             type="password" data-ng-change="feedback = ''" id="password" name="password">
                        <input type="submit">
                      </form>
          

          hier hatte ich vor einer weiter zurückliegenden forumsdiskusion button zu stehen!

          1. @@hmm

            hier hatte ich vor einer weiter zurückliegenden forumsdiskusion button zu stehen!

            Und was (wer) hatte dich vom richtigen Weg abgebracht?

            Vorteile von <button>Action!</button> gegenüber <input type="submit" value="Action!"/>:

            • durch die Benennung als button ist der HTML-Quelltext besser lesbar.

            • Die Beschriftung des Buttons ist dort, wo sie hingehört: im Elementinhalt, nicht in einem Attribut. Damit verbunden:

            • In der Buttonbeschriftung kann Markup vorkommen:
              <button>Lights! Camera! <strong>Action!</strong></button>

            • Also auch Bilder: <button><img /></button> oder <button><svg></svg></button>

            Nachteile: keine.

            LLAP 🖖

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

            und button ist alt, nimmt input type0button 😱

            Hier würde jemand anderes „Unsinn!“ sagen.

            https://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
    2. Toll, danke! Das timeshift-Problem hatte ich inzwischen gelöst. Deine Lösung ist aber viel eleganter und du hast es auch geschafft, dass die Bilder wieder ausgeblendet werden. Mir ist aufgefallen, dass es ein wenig fies ist, wenn das ganze Spiel wieder von vorne startet. Ich versuche dein Skript gerade so umzuändern, dass es das aktuelle Bild nochmals einblendet und einen Hinweis ("Das war falsch!") gibt. ... Gelingt mir nur leider nicht ⁉️

      1. Im von mir geposteten Code steht im else-Zweig in Zeile 70 der Kommentar // eingabe war falsch, mache erstes formular aktiv. Ergo musst du die Logik hier anpassen, wenn du im Fehlerfall etwas anders haben moechtest.

        In Zeile 73 wird das Formular mit der ID firstStep gesucht, und dem die Klasse gegeben, welche festlegt, dass es angezeigt werden soll. Das muss also weg. Und stattdessen soll die Klasse dem gerade beantwortetem Formular gegeben werden.
        Die Referenz auf das gerade beantwortete Formular haben wir bereits genutzt, als wir die Klasse in Zeile 64 weggenommen haben (bzw. auf einen Leerstring gesetzt).

        Du solltest also in der Lage sein das Skript selbst soweit umzubauen, dass zumindest der erste Teil deiner neuen Anforderungen erfuellt wird.

        Bezueglich der zweiten neuen Anforderung, dem Anzeigen eines Textes falls falsch beantwortet wurde, wuerde ich wie folgt vorgehen:

        • Neues Element in jedem Formular mit einer Klasse hint und gewuenschtem Inhalt („Das war falsch!“)
        • Jedem Formular im HTML die Klasse firstTry zuweisen
        • Via CSS das neue Element mit der Klasse hint ausblenden, solange das Elternformular die Klasse firstTry hat
        • In Zeile 68, in dem das naechste Formular auf aktiv gesetzt wird, ueberschreiben wir im Moment alle Klassen die das Element zuvor hatte. Das war vorher kein Problem, weil keines der Elemente eine Klasse hatte. Nun haben die aber alle die firstTry Klasse, d.h. wir duerfen hier nicht einfach ueberschreiben sondern muessen hinzufuegen. Das geht am einfachsten in dem du = 'currentStep'; ersetzt mit += ' currentStep';

        Solltest du beim umsetzen Probleme haben, poste bitte deinen umgebauten Code.

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