Matthias Scharwies: Wiki: gutes Beispiel für SetInterval() ?

problematische Seite

Servus!

Als Beispiel für setInterval() gibt es im Wiki einen Farbwechsler, der mit

main.style.backgroundColor = backgroundColors[Math.floor(Math.random() * backgroundColors.length)

umschaltet.

Allerdings wäre ein anderes Beispiel wahrscheinlich besser geeignet, da Hintergrundfarben ja eher über das Setzen einer Klasse mit className oder ClassList geändert werden sollten.

Hat jemand eine Idee für ein wirklich interessantes Beispiel?

Evtl einen Timer / Stoppuhr, ähnlich wie hier?

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. problematische Seite

    Tach!

    Allerdings wäre ein anderes Beispiel wahrscheinlich besser geeignet, da Hintergrundfarben ja eher über das Setzen einer Klasse mit className oder ClassList geändert werden sollten.

    Das könnte man ja so umbauen, dass diese Klassen geändert werden. Aber das eigentliche Problem ist dabei, dass sowas Periodisches heutzutage über Animationen gelöst werden kann.

    Hat jemand eine Idee für ein wirklich interessantes Beispiel?

    Animationen kann man dann nicht mehr nehmen, wenn die Daten nicht vorherbestimmbar sind. Zum Beispiel, wenn sie regelmäßig neu vom Server geholt werden müssen, um sie live anzeigen zu können. Das wäre aber zu aufwendig als Beispiel.

    (Vielleicht) weniger praxisrelevant, dafür aber ohne Server lösbar wäre eine Animation einer Spielfigur in einem X×Y-Feld, die sich per Zufall fortbewegt. Wenn der Zufallswert zwischen 0 und 0.6 liegt, bewegt sie sich weiter wie bisher. Der restliche Bereich der möglichen Werte wird geviertelt und steht für eine der vier Richtungen. Somit geht sie zu 70% in eine Richtung und zu je 10% in eine andere. Bei 25% für jede Richtung wäre das sonst vermutlich zu unruhig. Aber eigentlich wird das auch viel zu aufwendig, eine Zeile für setInterval() und 100 für den Rest.

    dedlfix.

    1. problematische Seite

      Hallo,

      (Vielleicht) weniger praxisrelevant, dafür aber ohne Server lösbar wäre eine Animation einer Spielfigur in einem X×Y-Feld, die sich per Zufall fortbewegt. Wenn der Zufallswert zwischen 0 und 0.6 liegt, bewegt sie sich weiter wie bisher. Der restliche Bereich der möglichen Werte wird geviertelt und steht für eine der vier Richtungen. Somit geht sie zu 70% in eine Richtung und zu je 10% in eine andere. Bei 25% für jede Richtung wäre das sonst vermutlich zu unruhig. Aber eigentlich wird das auch viel zu aufwendig, eine Zeile für setInterval() und 100 für den Rest.

      so kompliziert ist das aber garnicht, wenn man es etwas einfacher macht: Random Walk.

      Gruß
      Jürgen

      1. problematische Seite

        Tach!

        so kompliziert ist das aber garnicht, wenn man es etwas einfacher macht: Random Walk.

        Ja, aber das ist für mich nicht Random Walk sondern Random Gewackel. Für Beispiel mit einem gewissen Anspruch auf Sinnhaftigkeit halte ich das weniger geeignet. Oder anders gesagt, das Auge isst mit. Ein bisschen hübsch darf es schon sein.

        dedlfix.

        1. problematische Seite

          Hallo,

          jetzt wackelt es etwas weniger.

          Gruß
          Jürgen

          1. problematische Seite

            Tach!

            jetzt wackelt es etwas weniger.

            Ja, sieht schon deutlich gefälliger aus. So kann man das glatt verkaufen.

            dedlfix.

          2. problematische Seite

            Aloha ;)

            jetzt wackelt es etwas weniger.

            Gefällt mir! Auch und gerade für ein Beispiel. Weckt die Lust am Rumspielen (und das ist genau das, was man zur Selbstmotivierung gut gebrauchen kann).

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. problematische Seite

              Servus!

              @JürgenB

              jetzt wackelt es etwas weniger.

              Gefällt mir!

              Vielen Dank, habe es eingebaut! (Ich habe einige geschweifte Klammern für einzeilige Anweisungsblöcke eingefügt.)

              Weckt die Lust am Rumspielen (und das ist genau das, was man zur Selbstmotivierung gut gebrauchen kann).

              Das ist das was wir brauchen! Das alte Bsp. hab ich mit einem größeren Kommentar drin gelassen.

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
          3. problematische Seite

            @@JürgenB

            jetzt wackelt es etwas weniger.

            Der Bildschirm wackelt. Wenn das Quadrat randomly zum rechten oder unteren Rand walkt, dann wird nach rechts bzw. unten gescrollt. Noch ein overflow: hidden spendieren?

            LLAP 🖖

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

              Hallo Gunnar,

              Der Bildschirm wackelt. Wenn das Quadrat randomly zum rechten oder unteren Rand walkt, dann wird nach rechts bzw. unten gescrollt. Noch ein overflow: hidden spendieren?

              habe ich mal gemacht. Allerdings gibt es jetzt ein Problem mit dem Wiki-Beispiel-css, die Überschrift ist auf schmalen Bildschirmen neben dem Logo zu breit und so nicht mehr ganz sichtbar. Evtl. kann man auf schmalen Viewports die Überschrift unter das Logo setzen?

              Gruß
              Jürgen

  2. problematische Seite

    Lieber Matthias,

    Evtl einen Timer / Stoppuhr, ähnlich wie hier?

    oder die gute alte silly clock?

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      Servus!

      Danke euch beiden für Euren Input! Die Überlegungen von dedlfix muss man auf jeden Fall in das Kapitel integrieren.

      Evtl einen Timer / Stoppuhr, ähnlich wie hier?

      oder die gute alte silly clock?

      Lol, aber wie dedlfix schon sagte:

      Aber eigentlich wird das auch viel zu aufwendig, eine Zeile für setInterval() und 100 für den Rest.

      Ich überleg mir mal was.

      Ich weiß noch nicht genau, ob das mehrmalige Aufrufen von setInterval mit dem start-Button (das dann die Animation immer wieder beschleunigt) ein Bug oder Feature ist.

      Bei einer Uhr hätte man einen Button, der dann von start auf stop wechselt.

      Liebe Grüße,

      Felix Riesterer.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
  3. problematische Seite

    Lieber Matthias,

    Beispiel für setInterval() gibt es im Wiki einen Farbwechsler

    warum eigentlich keinen Bildwechler? Viele Seiten lassen ja in ihrem Header verschiedene Bilder anzeigen. Das kann entweder mit CSS oder mit Klassen oder mit direkter Änderung eines src-Attributs geschehen.

    Was meinst Du dazu?

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      Servus!

      Lieber Matthias,

      Beispiel für setInterval() gibt es im Wiki einen Farbwechsler

      @JürgenB hat noch mal nachgeliefert:

      warum eigentlich keinen Bildwechlser? Viele Seiten lassen ja in ihrem Header verschiedene Bilder anzeigen. Das kann entweder mit CSS oder mit Klassen oder mit direkter Änderung eines src-Attributs geschehen.

      Was meinst Du dazu?

      Ja das wäre auch möglich. Der JS-Bildwechsler, der die Animation mit der Web Animations API steuert, benötigt neben den Start- Stop-Buttons ja auch noch eine Zufallswiedergabe, die man dann über das src- Attribut steuern könnte.

      Ich weiß nicht, wann ich dazu komme, das umzuarbeiten. Wir haben jetzt überall Beamer und keine OHPs mehr. In den meisten Klassenzimmern gibt es sehr gute Doku-Kameras, unter die man seine alten Folien legen kann. Trotzdem muss ich jetzt mal meine Stunden auf digital anpassen.

      Manchmal ist eine ppt-Präsentation in 20min fertig (Word-Dokument in 5 Folien kopieren und formatieren), öfter wird alles gesichtet, gescannt, nochmal recherchiert und dann eine perfekte Lehrprobenstunde entwickelt. Mit einem Presenter und den Medien gleich in der Präsentation kriegst du 50% mehr Stoff unter.

      So viele ToDos, so wenig Zeit. 😟

      Liebe Grüße,

      Felix Riesterer.

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste
      1. problematische Seite

        Lieber Matthias,

        Wir haben jetzt überall Beamer und keine OHPs mehr. In den meisten Klassenzimmern gibt es sehr gute Doku-Kameras, unter die man seine alten Folien legen kann.

        willkommen in der Schule des 21. Jahrhunderts. ;-)

        Trotzdem muss ich jetzt mal meine Stunden auf digital anpassen.

        Rennst Du ab sofort mit Laptop/Notebook/Tablet in Deinen Unterricht, um über HDMI Deine Folien auf den Beamer zu schmeißen? Das hat in der Tat einen großen Einfluss darauf, wie Du Deine Stunden ab jetzt vorbereitest...

        Manchmal ist eine ppt-Präsentation in 20min fertig (Word-Dokument in 5 Folien kopieren und formatieren)

        Echt jetzt? Kein Open-/LibreOffice? ;-)

        öfter wird alles gesichtet, gescannt, nochmal recherchiert und dann eine perfekte Lehrprobenstunde entwickelt. Mit einem Presenter und den Medien gleich in der Präsentation kriegst du 50% mehr Stoff unter.

        LOL! Rieche ich da Ironie? Wenn Du 50% mehr Stoff unter bekommst, gelangt in die Köpfe Deiner SuS dann auch 50% mehr?

        So viele ToDos, so wenig Zeit. 😟

        Das ist wahr. Viel Spaß beim Folieren!

        Liebe Grüße,

        Felix Riesterer.

        1. problematische Seite

          @@Felix Riesterer

          Rennst Du ab sofort mit Laptop/Notebook/Tablet in Deinen Unterricht, um über HDMI Deine Folien auf den Beamer zu schmeißen? Das hat in der Tat einen großen Einfluss darauf, wie Du Deine Stunden ab jetzt vorbereitest…

          Das verstehe ich nicht. Die Inhalte sollten doch das Entscheidende sein, nicht die Mittel der Präsentation.

          LLAP 🖖

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

            Tach!

            Das verstehe ich nicht. Die Inhalte sollten doch das Entscheidende sein, nicht die Mittel der Präsentation.

            Das sag ich ja auch. Aber dann schimpft immer einer, dass Design nicht nur Fassade wäre.

            dedlfix.

            1. problematische Seite

              @@dedlfix

              Das verstehe ich nicht. Die Inhalte sollten doch das Entscheidende sein, nicht die Mittel der Präsentation.

              Das sag ich ja auch. Aber dann schimpft immer einer, dass Design nicht nur Fassade wäre.

              Mir ist absolut schleierhaft, warum 5 Leute es gutfinden, dass du völlig an meinem Posting vorbei antwortest.

              Ich sprach von Mitteln. Was hat das mit Design und Fassade zu tun?

              Natürlich sollte der Inhalt in ein Design verpackt werden, das die Vermittlung des Inhalts unterstützt. Das gilt für computergestützte Präsentationen (PDFs, Keynote, Powerpoint, Impress.js, …) ebenso wie für Polylux-Folien[1]; ist also von dem verwendeten Mittel völlig unabhängig.

              Meine Aussage war, dass die Wahl des Mittels der Präsentation keinen so großen Einfluss darauf hat, wie ein Lehrer seine Stunden vorbereitet.

              LLAP 🖖

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

              1. a/k/a Folien für Overhead-Projektor ↩︎

              1. problematische Seite

                Servus!

                Rennst Du ab sofort mit Laptop/Notebook/Tablet in Deinen Unterricht, um über HDMI Deine Folien auf den Beamer zu schmeißen? Das hat in der Tat einen großen Einfluss darauf, wie Du Deine Stunden ab jetzt vorbereitest…

                Das verstehe ich nicht. Die Inhalte sollten doch das Entscheidende sein, nicht die Mittel der Präsentation.

                Das sag ich ja auch. Aber dann schimpft immer einer, dass Design nicht nur Fassade wäre.

                Mir ist absolut schleierhaft, warum 5 Leute es gutfinden, dass du völlig an meinem Posting vorbei antwortest.

                Ich sprach von Mitteln. Was hat das mit Design und Fassade zu tun?

                Natürlich sollte der Inhalt in ein Design verpackt werden, das die Vermittlung des Inhalts unterstützt. Das gilt für computergestützte Präsentationen (PDFs, Keynote, Powerpoint, Impress.js, …) ebenso wie für Polylux-Folien[1]; ist also von dem verwendeten Mittel völlig unabhängig.

                Meine Aussage war, dass die Wahl des Mittels der Präsentation keinen so großen Einfluss darauf hat, wie ein Lehrer seine Stunden vorbereitet.

                Ich interpretiere dedlfix' Aussage mal als augenzwinkernden Vergleich zur Webdesign-und-Forums-Welt.

                Eigentlich hast du Recht. Trotzdem gibt es während der Lehrerkarriere Phasen, in denen Du sehr viel vorbereitest und andere, in der du vom bereits Erarbeiteten profitierst.

                Gerade am Anfang als Referendar im Einsatz mit 11-16h/Woche musst du alles neu vorbereiten. In deiner ersten Stelle mit 23-25 Wochenstunden denkst du, du hast schon was zu Hause und arbeitest trotzdem alles wieder um. Irgendwann wird's dann besser.

                Dann kommt alle 10-15 Jahre ein neuer Lehrplan mit vielen Umstrukturierungen. Da hab ich immer davon profitiert, dass ich Texte und Bilder immer schon eingescannt und sauber sortiert habe. Dann muss ich nur Canada vom Ordner 10 in Ordner 9 verschieben. Meine Grammatikstunden sind auch nicht an die jeweiligen Lokalthemen der derzeit aktuellen Englischbücher gebunden.

                Jetzt geht's eher drum, das alles zu sichten und dann eben neu zu gliedern. In Geschichte druckst Du nicht jedes gute Bild auf eine OHP-Folie, das kostet schließlich viel Geld! Außerdem kannst du nicht dauernd ein Bild aus der Mappe auf den OHP legen und wieder zurücktun. Mit Präsentationen können diese Bilder leicht und schnell eingebunden werden und plötzlich wird der Unterricht anschaulicher, allerdings auch lehrerzentrierter. Wie Felix schon schrieb, ist dies aber auch ein Dogma, dass anscheinend seinen Höhepunkt überschritten hat.

                Fazit: Wenn die bereits vorbereiteten Stunden gut angelegt sind, kannst du sie wiederverwenden und sparst so Zeit, die du für Bürokram, Elterngespräche und Projekte brauchst. Irgendwann ist aber die Zeit gekommen, wo ein altes Arbeitsblatt ausgedient hat und man dann eine Gruppenarbeit und WebQuest plant, deren Materialien vorher recherchiert und organisiert werden müssen. Die von mir genannten Präsentationen sind unglaublich dicht und intensiv, gehen meist gut in Kombination mit einem Arbeitsblatt.

                Völlig wertlos sind „Ich google mal schnell ein Bild dazu!“ oder „Gibt's da was auf YouTube?“ (entweder 43 min lang oder ein Mini-Projekt von einem 17-jährigen).

                Das wären meine nächsten Projekte: Video-Clips von 2-3 min Länge, bzw interaktive SVG-Infografiken. Mal schau'n, wie lang das noch dauert.

                Herzliche Grüße

                Matthias Scharwies

                --
                Es gibt viel zu tun: ToDo-Liste

                1. a/k/a Folien für Overhead-Projektor ↩︎

                1. problematische Seite

                  Hallo Matthias Scharwies,

                  Dann kommt alle 10-15 Jahre ein neuer Lehrplan mit vielen Umstrukturierungen. Da hab ich immer davon profitiert, [Hervorhebungen von mir]

                  Das wären meine nächsten Projekte: Video-Clips von 2-3 min Länge, bzw interaktive SVG-Infografiken. Mal schau'n, wie lang das noch dauert.

                  Du rechnest also schon mit einem Renteneintrittsalter von 83?

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. problematische Seite

                    Servus!

                    Das wären meine nächsten Projekte: Video-Clips von 2-3 min Länge, bzw interaktive SVG-Infografiken. Mal schau'n, wie lang das noch dauert.

                    Du rechnest also schon mit einem Renteneintrittsalter von 83?

                    Ne, das sollen meine Schüler mit Handy und VideoPad für mich machen. Die kriegen dann nen Döner für jeden fertiggestellten Clip!

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Es gibt viel zu tun: ToDo-Liste
        2. problematische Seite

          Servus!

          Wir haben jetzt überall Beamer und keine OHPs mehr. In den meisten Klassenzimmern gibt es sehr gute Doku-Kameras, unter die man seine alten Folien legen kann.

          willkommen in der Schule des 21. Jahrhunderts. ;-)

          Trotzdem muss ich jetzt mal meine Stunden auf digital anpassen.

          Rennst Du ab sofort mit Laptop/Notebook/Tablet in Deinen Unterricht, um über HDMI Deine Folien auf den Beamer zu schmeißen?

          Ne, eigentlich ist es gut gelöst. PC und Beamer in jedem Klassenzimmer und eine Dokumenten-Kamera, die auch ohne PC funktioniert. Dazu 2 kleine, grüne Seitentafeln, da die WhiteBoard-Stifte immer schnell austrocknen.

          Problem: 2 Klassenzimmer (6.Kl) hat man vergessen und zwei weitere, drunter auch meins (für 6 Stunden), haben die Kamera über den PC laufen, der dann erst hochgefahren werden muss. Anstelle eines Beamers gibt es dort ein lichtschwaches SmartBoard, das nicht mehr richtig kalibriert werden kann. Da geht ohne Powerpoint nix. (Tipp: Daten schon am Montagmorgen vom Stick in das Schüler-Netzwerk ziehen. Wenn man's eilig hat, ist der vergebene Laufwerkbuchstabe schon vorbelegt.)

          Das hat in der Tat einen großen Einfluss darauf, wie Du Deine Stunden ab jetzt vorbereitest...

          Mit einem Presenter und den Medien gleich in der Präsentation kriegst du 50% mehr Stoff unter.

          LOL! Rieche ich da Ironie? Wenn Du 50% mehr Stoff unter bekommst, gelangt in die Köpfe Deiner SuS dann auch 50% mehr?

          Ich glaube schon. Da ja "Ein Bild ... mehr als 1000 Worte" aussagt, sind grade in Geschichte 4-5 Bilder gleich vor der Folie viel aussagekräftiger.

          Allerdings kommt so der bisher so verpönte lehrerzentrierte Frontalunterricht wieder zum Vorschein. Das muss ich dann halt mit den schon ausgearbeiteten Gruppenarbeiten ausgleichen.

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. problematische Seite

            Lieber Matthias,

            Ne, eigentlich ist es gut gelöst. PC und Beamer in jedem Klassenzimmer und eine Dokumenten-Kamera, die auch ohne PC funktioniert. [...] (Tipp: Daten schon am Montagmorgen vom Stick in das Schüler-Netzwerk ziehen. Wenn man's eilig hat, ist der vergebene Laufwerkbuchstabe schon vorbelegt.)

            "Eigentlich gut" gelöst klingt in meinen Ohren nicht sehr überzeugend. Daher jetzt mein Tipp: Willst Du, dass die Technik tut, nimm Deine eigene.

            Allerdings kommt so der bisher so verpönte lehrerzentrierte Frontalunterricht wieder zum Vorschein. Das muss ich dann halt mit den schon ausgearbeiteten Gruppenarbeiten ausgleichen.

            "Muss" man, wenn man der aktuellen pädagogischen Mode, oder besser: dem aktuellen pädagogischen Dogma, dienen will. Spätestens seit der Hattie-Studie habe ich meinen Glauben an dieses Dogma verloren (PDF 328KB).

            Liebe Grüße,

            Felix Riesterer.

    2. problematische Seite

      @@Felix Riesterer

      warum eigentlich keinen Bildwechler? Viele Seiten lassen ja in ihrem Header verschiedene Bilder anzeigen. […]
      Was meinst Du dazu?

      Should I use a carousel?

      LLAP 🖖

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

        Servus!

        @@Felix Riesterer

        warum eigentlich keinen Bildwechler? Viele Seiten lassen ja in ihrem Header verschiedene Bilder anzeigen. […]

        Should I use a carousel?

        Ein Bildwechsler / Bilder-Slideshow anstelle einer Galerie ist imho kein Karussell mit Textinhalt und Links, vor dem auch im Wiki gewarnt wird.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. problematische Seite

          @@Matthias Scharwies

          Viele Seiten lassen ja in ihrem Header verschiedene Bilder anzeigen. […]

          Ein Bildwechsler / Bilder-Slideshow anstelle einer Galerie ist imho kein Karussell

          Eine Bilder-Slideshow ist kein „im Seiten-Header verschiedene Bilder anzeigen“.

          LLAP 🖖

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

        Lieber Gunnar,

        Should I use a carousel?

        die Frage, ob man ein wie unter Deinem Link verstandenes Karussell einsetzen sollte, hängt sicherlich von der Absicht ab, wie es denn genutzt werden sollte bzw. welchen Nutzen es bringen soll. Zu rein illustrativen Zwecken finde ich es absolut in Ordnung - wozu keine sich mit den Bildern wechselnden Linkziele gemeint sind!

        Allerdings muss sich mein Vorschlag die Kritik gefallen lassen, warum man eine solche rein illustrierende Maßnahme mit JavaScript und nicht allein mit CSS-Mitteln löst. Selbst wenn man die Liste der durchzuwechselnden Bilder mit JavaScript erstellt/verwaltet, so ist das Animieren doch mittlerweile längst eine reine CSS-Angelegenheit geworden.

        Liebe Grüße,

        Felix Riesterer.