Digitale Lernmedien

Apps und mehr…

Virtuelle Arbeitsmittel mit HTML5 und Javascript

| 4 Comments

 

     

Da Flash langsam am Aussterben ist, hatte ich schon lange vor, langfristig auf das zukunftsfähigere HTML5 bzw. Javascript umzusteigen. Mit HTML5 lassen sich Arbeitsmittel ohne Plugins plattformübergreifend in allen modernen Browsern nutzen, was bei Flash ja nicht (mehr) der Fall ist (z.B. für iOS von Apple gibt es kein Flash-Plugin). Am Wochenende bin ich auf die Software Hype gestoßen. Hype ist eine einfache, grafische HTML5-Animationssoftware. Ich habe sie einfach mal ausprobiert und war begeistert, wie einfach es mit grundlegenden Programmierkenntnissen ist, kleine interaktive Lernmaterialien damit zu erstellen. Hier meine ersten Programmierversuche, die folgendermaßen “funktionieren” (vgl. meine anderen virtuellen Arbeitsmittel):

  • Zunächst werden die roten Plättchen gelegt. Eine Vorschau der Menge wird beim “Überfahren” der Rechenfelder angezeigt. Per Mausklick wird die Menge gelegt.
  • Genauso wird auch die blaue Menge bzw. die Minus-Menge gelegt.
  • Die Mengen lassen sich auf diese Weise nachträglich verändern bzw. variieren, wenn auf die entsprechenden Zahlen in der Rechenaufgabe geklickt wird. Zudem lassen sich Plättchen wenden. Dadurch lässen sich Aufgabenzusammenhänge gut sichtbar machen (z.B. wenn ich die rote Menge erhöhe, erhöht sich auch das Gesamtergebnis usw.).
Es gibt die Rechenfelder in vier Variationen:

Didaktische Überlegungen

Mit diesen Varianten der Arbeitsmittel lassen sich schnell und einfach Aufgaben legen und Zusammenhänge von Teilmengen bei der Addition und Subtraktion strukturiert erkunden. Vorraussetzung für eine sinnvolle Nutzung ist, dass Kinder Mengen am Zwanzigerfeld ohne Zählen erfassen können (quasi-simultane Mengenerfassung). Der didaktische Vorteil besteht dann meines Erachtens darin, dass Mengen ganzheitlich, ohne dass Einzelportionen abgezählt werden müssen, gelegt werden können. Eine “Vorschau” auf die Menge wird beim Überfahren der Rechenfelder simultan sichtbar, durch einen Mausklick wird die Menge bestätigt. Dadurch lassen sich Zahl- und Aufgabenbeziehungen (Teile-Ganzes-Relationen) anschaulich erkunden und sichern. Zum richtigen Zeitpunkt und mit passenden operativen Aufgabenstellungen (“Was passiert mit … wenn …”) kann die Ablösung vom zählenden Rechnen und die Entwicklung operativer Rechenstrategien unterstützt werden. Hier ein Screencast:

 

4 Comments

  1. Vielen Dank für den Hinweis. Ich habe den Fehler ausgebessert.
    Einen Button für die stellenweise Darstellung habe ich einmal experimentell eingefügt.

    Viele Grüße, Christian Urff

  2. Lieber Herr Urff,
    ich habe eben die ausgebesserte Version probiert. Ein Problem gibt es leider immer noch. Zur Verdeutlichung: Geben Sie mal die Rechnung 14+12=26 ein. Jetzt drehen Sie das blaue Plättchen ganz rechts in der zweiten Reihe um, so dass es rot ist (könnte auch ein anderes sein). Bis hierher gut. Wenn ich nun ein weiteres blaues Plättchen hinzufüge, dann ändert sich dieses Blättchen wieder auf blau (was es nicht sollte) und die Anzahlen der Plättchen stimmt nicht mehr mit den Mengen überein. Wenn das behoben ist, dann sollte es tadellos funktionieren.

    Es gefällt mir sehr gut, dass man die Plättchen nun sortieren kann!
    Heute habe ich mich gefragt, ob man beim Sortieren der Plättchen zwei verschiedene Arten einsetzen kann. Zur Zeit wird ja quasi immer das Auffüllen bis zum nächsten Zehner unterstützt. Man könnte doch auch das Stellenweise Addieren unterstützen, indem ganze Reihen von roten und blauen Plättchen untereinander stehen und dahinter die restlichen Einer der roten und blauen (und hier dann erst das Auffüllen bis zum Zehner).
    Wahrscheinlich wird das Hunderterfeld dann aber weniger übersichtlich, was sicher nicht im Sinne eines Einsatzes in der Grundschule wäre.
    Vielen Dank für das bereitstellen der Software! Tolles Angebot von Ihnen.

    Schönen Gruß

    Philip Lenzner

    PS: Ich möchte das virtuelle Hunderterfeld auf dem iPad in meiner Examensarbeit einsetzen und untersuchen, ob die Grundvorstellungen in der Arithmetik dadurch verbessert werden…

  3. Vielen Dank für die Hinweise. Das Problem mit den verschobenen Pfeilen tritt meines Wissens nach nur in älteren Versionen des Internet Explorers auf (der kein vollständiges HTML5 unterstützt).
    Vielen Dank für den Hinweis auf den Fehler. Ich habe den Fehler ausgebessert, so dass er nicht mehr auftreten sollte.

    Viele Grüße,
    Christian Urff

  4. Hallo Herr Urff,
    ich habe mal die neuen HTML5 Arbeitsmittel ausprobiert. Hier ein paar Anmerkungen: Bei der Zahlenreihe: Der Pfeil wird um zwei Plättchen nach rechts verschoben angezeigt… Ansonsten sehr schön!
    Beim Hunderterfeld: Wenn man die einzelnen Plättchen umdreht, dann ändern sich auch die einzelnen Summanden. Soweit super! Hier kann ein Kind auch arbeiten wie am echten Arbeitsmittel. Bei den anderen (iOS-Programmen) fand ich es auch sehr gut, dass der Computer anschließend in einer Animation die Plättchen sortiert anzeigt. Vielleicht kann man hier auch einen Button machen?
    Das einzige Problem taucht erst dann auf, wenn man ein paar Plättchen umgedreht hat (z.B. von rot auf blau) und dann die blaue Zahl ändert. Nun werden die vorher umgedrehten Plättchen ignoriert (bzw. als rot gewertet) und die einzelnen Summanden stimmen nicht mehr überein mit der Anzahl der Plättchen.
    Ich bin angehender Grundschullehrer (kurz vor dem 1. Staatsexamen) und bin sehr angetan von den guten Programmen von Ihnen!
    Schönen Gruß
    Philip Lenzner

Leave a Reply

Required fields are marked *.


This blog is kept spam free by WP-SpamFree.