Einfacher Programmieren mit Snap 6.1

Anlässlich der SnapCon 2020 veröffentliche Jens Mönig die Version 6.1.0 von Snap!, welche nun eine Darstellung erlaubt, die sich eng an das textbasierte Programmieren anlehnt. In den Systemeinstellungen kann über den Menüpunkt „Fade blocks“, die farbenfrohe Umrandung einzelner Befehlsbausteine reduziert werden.

Übliche Darstellung von Snap!
Die übliche Darstellung von Snap! ist bewusst farbenfroh, damit die verschiedenen Blöcke gut voneinander unterschieden werden können.
Neue Darstellung von Snap!
Mit der neuen Einstellung lassen sich die Umrandungen der Blöcke komplett ausblenden. Damit wird die „Textstruktur“ von Snap ! sichtbar.

Selbstverständlich können über den entsprechenden Regler auch beliebige Zwischenstufen eingestellt werden.

Hyperblocks

Wichtiger als diese oberflächliche Gestaltung sind aber die Änderungen unter der Haube. So verfügt Snap! nun über sogenannte Hyperblocks, welche einerseits den Umgang mit grösseren Datenmengen (Bildern, Musik, Datensätzen) vereinfachen und Snap! in Bezug auf diese Anforderungen auch viel schneller machen.

Am Beispiel eines Bildes mit invertierten Farben soll gezeigt werden, was genau damit gemeint ist. Die Vereinfachung eines solchen Programms erfolgt in drei Schritten:

  1. Klassische Programmierung mit for-Schlaufen
  2. Programmierung mit dem map()-Befehl von Snap!
    Den gleichen Befehl findet man in etwas unterschiedlichen Varianten auch in der statistischen Programmiersprache R, wo er zu einem übersichtlicheren Code führt.
  3. Die Programmierung mit Hyperblocks

Klassische Programmeriung mit for-Schlaufen

Werden in Snap! for-Schlaufen verwendet, um mehrdimensionale Datensätze zu bearbeiten, kann es schnell unübersichtlich werden. Bilddateien werden in Snap! als Liste von Listen mit den vier Elementen R-, G-, B- und Alphakanal dargestellt. Um alle Pixel zu ändern, müssen zuerst die einzelnen Pixellisten aufgerufen und diese dann in einer verschachtelten for-Schlaufe bearbeitet werden. Durch die vielen Programmschritte steigt die Gefahr von Programmierfehlern und das Programm braucht auch ziemlich viel Zeit, um das neue Bild zu berechnen.

Variante mit for-Schlaufe
Für Programmieranfänger sind verschachtelte for-Schlaufen meist nur mit grosser Mühe nachzuvollziehen.

Progammierung mit dem map()-Befehl

Mit dem map()-Befehl wird das Programm nicht nur wesentlich übersichtlicher, es lauft auch um ein Vielfaches schneller als bei der for-Variante.

Variante mit map-Befehl
Die Variante mit dem map()-Befehl lässt schon wesentlich deutlicher erkennen, was das Snap!-Programm eigentlich tut.

Allerdings ist die Anwendung des map()-Befehls konzeptionell anspruchsvoller, weil die Datenstruktur hier bereits weiter abstrahiert wurde. In der Regel braucht es etwas Übung, bis eine solche Umsetzung problemlos gelingt.

Nachtrag vom 31.7.2020: Der Snap!-Entwickler bh schlug vor, den map()-Block wie folgt zu vereinfachen:

vereinfachter map-Block
Mit der Verwendung von lokalen Variablen kann der map()-Block noch einmal eleganter und effizienter verwendet werden.

Programmierung mit Hyperblocks

Die Verwendung von Hyperblocks abstrahiert die zugrunde liegenden Prozesse, ist aber konzeptionell einfacher zu verstehen als die weiter oben vorgestellten Methoden. Jens Mönig spricht im Zusammenhang mit Hyperblocks bezeichnenderweise von einer „fast naiven“ Programmierung.

Variante mit Hyperblocks
Der Vergleich mit der for-Variante zeigt deutlich, wie mächtig Snap! durch die Hyperblocks geworden ist.

Die wenigen Zeilen sind nicht nur wesentlich einfacher zu lesen, auch die Programmausführung wird dadurch noch einmal wesentlich beschleunigt. Damit erfüllen die Hyperblocks die ursprünglichen Zielsetzungen, Snap! für die Verwendung mit grösseren Datenmengen fit zu machen gleich zweifach: Ein einfacher zu lesender Programmcode geht mit einer für Multimedia-Experimente nun genügend schnellen Programmausführung Hand in Hand.

Verwendung im Unterricht

Schülerinnen und Schüler fertigen mit ihren Smartphones täglich neue Bilder an und verwenden dabei gerne auch Farbfilter. Deren Funktionsweise kann nun mit dem RGB-Farbmodell und wenigen Zeilen Code in Snap! einfach nachvollzogen werden. Die Invertierung eines Bildes ist nur eine Möglichkeit der Bildverfremdung, welche mit dem gezeigten kurzen Code möglich wird. Durch das Setzen der Parameter in liste1 können weitere Farbeffekte erzielt werden.

Farbfilter
Das Originalbild (links) wird invertiert (Mitte) und durch die Anpassung der Parameter farblich weiter verändert (rechts).

 

Schnupperlehrbrief mit Datenbankaktivität in Moodle

Spätestens ab der 2. Klasse der Sekundarstufe I wird die berufliche Orientierung ein Thema. Die Schülerinnen und Schüler sollen die Berufswelt theoretisch und praktisch kennenlernen. Ein besonders geeignetes Mittel dazu sind die Schnupperlehren.

Bevor die Schülerinnen und Schüler eine solche Schnupperlehre antreten, müssen sie häufig eine Schnupperlehrbewerbung schreiben. Den meisten Lernenden fällt dies nicht leicht, weshalb die zuständigen Lehrpersonen solche Schreiben meist mehrfach korrigieren müssen.

Da liegt es nahe, diese zeitaufwändige und im Gegensatz zur Korrektur von Lehrstellenbewerbungen wenig sinnvolle Arbeit zu automatisieren. In Moodle eignet sich dazu die Datenbankaktivtät. Drei Schritte sind notwendig, damit dies funktioniert.
1. Definieren der entsprechenden Eingabefelder,
2. Bereitstellen eines Eingabeformulars,
3. Schreiben eines Ausgabeformulars.

Eingabefelder

Bei den Eingabefeldern kann man sich auf wenige Typen beschränken. Für Namen, Adresszeilen, Telefonnummer und Interessen bietet sich das Textzeilenfeld an. Daten können mit dem Datumsfeld erfasst werden. Für Inhalte mit unterschiedlichen Ausprägungen, z.B. Schulfächer und Niveaus eignet sich das Einfachauswahl-Feld.

Bei der Definition der Eingabefelder lohnt es sich, das Design vorher zu planen, da diese in Moodle anschliessend nicht mehr beliebig umgestellt werden können.

Dateifelder
Für die Generierung der Datenbank wurden nur wenige Feldtypen verwendet.

Eingabeformular

Sind die Felder erst einmal alle definiert, kann das Eingabeformular entworfen werden. Dabei kann eine beliebige HTML-Seite gestaltet werden. Die eigentlichen Eingabefelder werden mit doppelten eckigen Klammern markiert: [[Beruf]]. Sie können an beliebigen Orten auf der HTML-Seite platziert werden.

Definition Eingabeformular
Das Eingabeformular wurde mit einem schlichten linearen Design entworfen.

Wenn die Lernenden einen neuen Eintrag erstellen, sehen sie folgende Eingabemaske.

Eingabeformular
Die Lernenden tragen die entsprechenden Informationen ins Eingabeformular ein.

Ausgabeformular

Genau gleich funktioniert das Erstellen des Ausgabeformular. Zusätzlich gibt es dort noch die Möglichkeit, weitere Funktionen über doppelte Hashtags einzufügen. So erzeugt z. B. ##edit## eine Schaltfläche, um zum Eingabemodus zurückzukehren. Für die Feinanpassung des Formulars kann man zusätzlich JavaScript einbinden.

Um beispielsweise die Anrede automatisch richtig zu verwenden, kann folgendes Script verwendet werden:

function anrede(anrede)
  {
  str = "geehrte"
  if (anrede=="Herr") str=str+"r";
  return str+" "+anrede;
  }

Dieses wird dann an der entsprechenden Stelle im Formular (auf HTML-Ansicht umstellen) wie folgt eingebunden:

<p>Sehr 
<script>
  document.write(anrede("[[Anrede]]"),
  " ",name("[[Person]]"))
</script>
</p>

Praktischerweise schreibt man die JavaScript-Elemente zuerst in einem passenden Editor, bevor man sie in das entsprechende Editierfeld in Moodle einfügt:

Entwurf im Editor
Für die Datenbankvorlage wurden vier Funktionen in JavaScript definiert, welche mithilfe der .split()-Methode die Eingaben der Lernenden etwas gefälliger formatieren.

Eine weitere Anpassung wurde für die Zeitspanne vorgenommen. Wenn z. B. das Anfangs- und Enddatum der möglichen Schnupperlehre in den gleichen Monat fallen, wird der Eintrag „vom 5. Oktober 2020 bis 16. Oktober 2020“ auf „vom 5. bis 16. Oktober 2020“ verkürzt. Das Briefdatum wird jeweils automatisch auf das letzte Speicherdatum gesetzt, wozu die Option ##timemodified## eingesetzt und mit JavaScript entsprechend formatiert wird.

Wurden alle Felder richtig eingesetzt und die entsprechenden Feinanpassungen mit JavaScript vorgenommen, kann der von der Datenbankaktivität derart generierte Text in eine Textverarbeitung kopiert und allenfalls noch nachbearbeitet werden. In der Regel ist dies aber nicht mehr notwendig.

Generierter Brief
Der Briefinhalt wurde aus der Einzelansicht der Datenbank direkt nach Word kopiert und muss nur noch minimal angepasst werden (z.B. Unterschrift).

Anmerkung

Gestaltet man die Listenansicht in der Datenbankaktivität entsprechend, erhält man als Lehrperson zusätzlich einen guten Einblick in den Stand der geplanten Schnupperlehren der Schülerinnen und Schüler.

Listenansicht der Datenbank
Die Listenansicht kann den eigenen Bedürfnissen angepasst werden. Hier werden die Verfasser(unkenntlich gemacht), die gewünschten Berufe und die möglichen Schnupperlehrtermine angezeigt.

Datenbankvorlage

Die Vorlage kann hier heruntergeladen werden: Datenbankvorlage.
Anschliessend kann die Datenbankvorlage in eine eigene Datenbankaktivität importiert und angepasst werden.

Feld zum Import von Datenbanken
Mit dem entsprechenden Dialog können Datenbankvorlagen in das eigene System importiert werden.

Damit die Vorlage verwendet werden kann, müssen nach dem Import noch die Felddefinitionen am Ende der entsprechenden Seite bestätigt werden.