Nikolaus interaktiv

Beschreibung des Moduls

Ein schönes Beispiel zum Einsatz von interaktivem SVG und HTML, durch JavaScript dynamisch in einem DOM verbunden: Das Haus vom Nikolaus. Mit Maus.

Habe ich für JOHAN (10) gemacht, um ihn für "Graphentheorie" zu erwärmen ;-) Also die klassische

Aufgabe: Finde EULER-Weg von Start nach Ende!

Dabei kann Kind motiviert werden verschiedene Lösungsstrategien zu entwickeln durch (a) Ausprobieren und (b) Nachdenken, Erforschen. Z.B. mal die Eckengrade zählen und beobachten, dass bis auf genau zwei sonst alle gerade sind. Welche Ecken haben ungerade Eckengrade und wo fängt man eigentlich an/hört auf (START/FINISH-nodes)?

Jetzt ohne SMIL, ganz mit JavaScript stattdessen. Die SVG-Grafik ist also zunächst statisch und wird mit JavaScript nachträglich zum Leben erweckt. Wenn alles funktioniert, wird danach Markup für SVG ersetzt durch JavaScript, das die DOM-Elemente (hier: SVG-Elemente) erzeugt und passend als Baumstruktur zusammenfügt. Dabei wird wesentlich das model zur Datenmodellierung verwendet. Binding ist zunächst unidirektional (view → model), kann später aber bidirektional erweitert werden für echtes MVC-feeling. Externe libraries wie angular.js von Google könnten da verwendet werden, müssen aber nicht.

// TODO  Grafik *komplett* dynamisch mit JS im DOM als view aus model erzeugen
// TODO  Eine config für diese Komponente `evo.math.ui.svg.Nikolaus` ausdenken
// TODO  Den modularen code in OOP code für Komponente übersetzen (ist ja vorbereitet)
// ...
// ⇒ Schliesslich nur noch in Ihr HTML (Moodle, WordPress, ...) eintippen:  

    evo.math.ui.svg.Nikolaus.create({
        /* my literal cfg object */
    }).render("myDiv"); 

// zwischen Anfang und Ende eines passenden script tags.  Fertig.  Das war's.  

In dieser Version werden bewusst keine externen libraries verwendet, wie etwa die ausgezeichnete lib JSXGraph von Prof. Alfred Wassermann und seinem Team, sondern nur die Bordmittel einer modernen ECMA-262-Implementierung in zeitgemässem Browser und DOM. Da JavaScript geradezu einlädt eigene APIs zu entwickeln, ist es nicht verwunderlich, dass es viele gute high-level APIs gibt (libraries wie JSXGraph, Raphael, SnapSVG, ...), die einen speziellen Zweck erfüllen. Diese werde ich in anderen Beispielen benutzen. Hier wird erstmal von Hand gekocht, keine Fertiggerichte!