ICM und Making mit dem BBC micro:bit

Adaptionen und praktische Anleitung zur Umsetzung eines Making-Beispiels mit Flipped/ Inverted Classroom

Folien zum Vortrag zur ICM Beyond 2020 hier.

Ausgangslage ist ein OER-Schulbuch zu Computational Thinking mit dem BBC micro:bit aus dem ein zur flipped Umsetzung besonders geeignetes Beispiel ausgewählt wurde.

Lesen Sie gerne auch den Artikel zur ICM Beyond 2020 zur detailierten Vorgehensweise und/ oder kommen Sie in den Workshop am 11.02.2020, 16:30 Uhr, Raum HOG 204, PH NÖ – Campus Baden.

Sollten Sie noch gar keine Erfahrung mit dem micro:bit haben, können Sie sich die Einführung samt Video auf dieser Website ansehen und danach mit den Eiskarten zu micro:bit etwas experimentieren bevor sie weitermachen.

Die ICM Adaption besteht aus einem Erklärvideo
und zusätzlich folgenden Hilfestellungen:

  1. Tutorial mit Spoilern (exploratives, selbstgesteuertes Lernen)
    1. Tutorial – Teil 1
    2. Tutorial – Teil2
  2. Flussdiagramme (Erklärvideo mit  eingebetteten Fragen, optional)
  3. Fertiger Programmcode als Pictorial

 

#05 Senden/ Empfangen

Aktivität: Senden/ Empfangen – Bluetooth Datenübertragung
Schwierigkeitsgrad: Mittel

Man braucht dafür 2 Microbits, die sich in derselben Gruppe befinden.

Öffne https://makecode.microbit.org um den Editor zu starten. Du kannst entweder blockbasierend (Abbildungen links) oder in JavaScript (Abbildungen rechts) arbeiten.

Schritt 1 (Microbit A):
Wähle unter dem hellrosa gefärbten Begriff Funk den Block setze Gruppe 34 (radio.setGroup(34)) und ziehe ihn auf die leere Fläche rechts. Dort sind schon die blauen Klammern beim Start und dauerhaft vorbereitet. Anschließend lösche die Klammer dauerhaft, sie wird hier nicht benötigt. Ziehe dazu den Block auf die mittlere Blockbibliothek (Papierkorbsymbol erscheint) und lösche durch loslassen. Ändere die Gruppe auf z.B. 34

Blockbasierend

  radio.setGroup(34);

JavaScript

Schritt 2 (Microbit A):
Ziehe nun unter dem rosa gefärbten Begriff Eingabe den Block wenn Knopf A gedrückt (input.onButtonPressed(…)) auf die leere Fläche rechts und gib gleich den unter dem blau gefärbten Begriff Grundlagen befindlichen Block zeige LEDs (basic.showLeds(…)) dazu. Zeichne dort einen Pfeil nach rechts zur Anzeige der Kommunikationsrichtung ein. Etwa so…

input.onButtonPressed(Button.A, function () {
    basic.showLeds(`
        . . # . .
        . . . # .
        # # # # #
        . . . # .
        . . # . .
        `)
});

Schritt 3 (Microbit A):
Nun warten wir 1000 ms mit dem blauen Block pausiere (ms) 100 (basic.pause(100)), fügen diesen unterhalb des zeige LEDs Blocks ein und ändern diesen auf 1000 ms. Danach senden wir an den zweiten Microbit die Zeichnfolge „diamond“ mit dem hellrosa Befehl sende Zeichenfolge “ “ (radio.sendString(“ „)) und ändern die Zeichenfolge auf diamond. Abschließend zeigen wir noch das soeben gesendete Symbol zur Kontrolle an, nämlich „Diamond“. Das erledigst du mit dem blauen Befehl zeige Symbol ♥ (basic.showIcon(…)) das du noch auf das Symbol umstellen musst.

input.onButtonPressed(Button.A, function () {
    basic.showLeds(`
        . . # . .
        . . . # .
        # # # # #
        . . . # .
        . . # . .
        `)
            basic.pause(1000)
    radio.sendString("diamond")
    basic.showIcon(IconNames.Diamond)
});

Schritt 4 (Microbit A):
Nun warten wir nochmals 1000 ms mit dem blauen Block pausiere (ms) 1000 (basic.pause(1000)) und fügen diesen unterhalb des zeige Symbol ♦ Blocks ein. Danach zeigen wir das Ende der Übertragung mit zeige Symbol ü (basic.showIcon(…)) an, bevor wir nach weiteren 1000 ms pausieren alle LEDs durch den Block zeige LEDs (basic.showLeds(…)) löschen.

input.onButtonPressed(Button.A, function () {
    basic.showLeds(`
        . . # . .
        . . . # .
        # # # # #
        . . . # .
        . . # . .
        `)
    basic.pause(1000)
    radio.sendString("diamond")
    basic.showIcon(IconNames.Diamond)
    basic.pause(1000)
    basic.showIcon(IconNames.Yes)
    basic.pause(1000)
    basic.showLeds(`
        . . . . .
        . . . . .
        . . . . .
        . . . . .
        . . . . .
        `)
});

Super, du hast den ersten Teil zum Senden geschafft! Nun geht es weiter zum zweiten Teil, den zum Empfangen der Nachricht.

Schritt 5 (Microbit A):
Ziehe unter dem hellrosa gefärbten Begriff Funk den Block wenn Datenpaket empfangen recievedString (radio.onDataPacketReceived(…)) auf einen leeren Bereich der Fläche rechts und ändere receivedString in diamond. Danach zeigen wir die erfolgreiche Übertragung mit zeige Symbol ü (basic.showIcon(…)) an, bevor wir nach weiteren 1000 ms pausieren das empfangene Symbol anzeigen. Das macht der Block zeige Symbol ♥ (basic.showIcon(…)) den du noch auf das Symbol umstellen musst.

radio.onReceivedNumberDeprecated(function (receivedNumber) {
    basic.showIcon(IconNames.Yes)
    basic.pause(1000)
    basic.showIcon(IconNames.Heart)
})

Gratuliere, nun bist du mit dem ersten Microbit des Beispiels Senden/ Empfangen fertig! Nimm dir nun den zweiten Microbit vor bzw. gehe zu deinem Teammitglied.

Schritt 6 (Microbit B):
Wiederhole Schritt 1 auf Microbit B.

Schritt 7 (Microbit B):
Wiederhole die Schritte 2 bis 4. Ändere den Block wenn Knopf A gedrückt (input.onButtonPressed(…)) auf Knopf B. Zeichne im Block zeige LEDs (basic.showLeds(…)) den Pfeil nach links zur Anzeige der Kommunikationsrichtung ein. Ändere den Block sende Zeichenfolge “ “ (radio.sendString(“ „)) auf die Zeichenfolge auf heart und zeige das Symbol mit dem Block zeige Symbol ♥ (basic.showIcon(…)) an.

Schritt 8 (Microbit B):
Wiederhole den Schritt 5. Ändere im Block wenn Datenpaket empfangen recievedString (radio.onDataPacketReceived(…)) receivedString in heart und zeige das Symbol mit dem Block zeige Symbol ♥ (basic.showIcon(…)) an.

Großartig, du hast es geschafft. Gratuliere!

Auf den nächsten beiden Bildern findest du beide vollständigen Programm für Microbit A und B (blockbasierend und JavaScript).

Radio A: https://makecode.microbit.org/_F9ygHhTeC7z0

 

Radio B: https://makecode.microbit.org/_VDKMUc2VfAp5 

 

Und so sieht die Übertragung von A –> B in echt aus.

Handreichung – App Dev für Smartphone und Tablet in der Schule (Sekundarstufe)

Wollten sie schon immer eine „eigene“ Schul-App mit ihren Schülerinnen und Schülern erstellen? Vielleicht ist das hier die Anwort auf die Frage wie einfach und leicht das heutzutage geht. Sehen sie sich doch das Video und/ oder die Folien dazu an.

Link: Handreichung (pdf)

Link: Präsentation (pdf) + Infos zum Selbermachen

Video:

  Entwicklungswerkzeug Funktionsanalyse
1. Windows App Studio 04m43s
2. MIT App Inventor 2 10m02s
3. Thunkable 14m51s
4. NativeScript
(Playground)
20m00s

Wenn sie sich für eine bestimmte Variante näher interessieren, können sie hier eine detaillierte Anleitung zum Selbermachen „nachlesen“ – und vielleicht gleich selbst mitmachen.

  Entwicklungs-werkzeug Live-Demo (extra Video)
1. Windows App Studio n/a
2. MIT App Inventor 2 okhAppDev19-2
3. Thunkable okhAppDev19-3
4. NativeScript
(Playground)
okhAppDev19-4 

#04 Audio-Alarm

Aktivität: Audio-Alarm – Kopfhörer oder. Lautsprecher spielt lauten Alarm- externe Verbindung mit Krokodilklemmen
Schwierigkeitsgrad: Mittel

Man braucht dafür Köpfhörer z.B. vom Handy od. einen Lautsprecher der mit 2 Krokodilklemmen mit PIN 0 und GND verbunden wird.
Sieh dir das Beispiel Hack Your Headphones dazu an. 
https://www.microbit.co.uk/blocks/lessons/hack-your-headphones/activity

Öffne https://makecode.microbit.org um den Editor zu starten. Du kannst entweder blockbasierend (Abbildungen links) oder in JavaScript (Abbildungen rechts) arbeiten.

Schritt 1:
Wähle unter dem rosa gefärbten Begriff Eingabe den Block wenn geschüttlet (input.onGesture(Gesture.Shake,…) und ziehe ihn auf die leere Fläche rechts. Dort sind schon die blauen Klammern beim Start und dauerhaft vorbereitet, die nicht benötigt werden und durch ein ziehen auf die mittlere Blockbibliothek (Papierkorbsymbol erscheint) gelöscht werden.

Blockbasierend

JavaScript

Schritt 2:
Ziehe nun unter dem grün gefärbten Begriff Schleifen den Block während wahr mache in die rosa Klammer. z.B. so….


 

Schritt 3:
Da der Alarm wie bei einer Sirene klingen soll, benötigen wir 2 Töne, die abwechselnd gespielt werden bis der Dieb erwischt wird. Benutze unter dem orange gefärbten Begriff Musik den Block spiele Note Mittleres C für 1 Takt (music.playTone(262…)) in die grüne Klammer.

Schritt 4:
Wiederhole den Schritt 3 für den zweiten Ton der Siren und ändere den zweiten Ton auf Hohes C (523) ab. Stelle weiters bei beiden Tönen den Takt auf ½ Takt (BeatFraction.Half), um mehr Aufmerksamkeit zur erzeugen.
z.B. so…

Großartig, du hast es geschafft. Gratuliere!

Anmerkung:
Der Alarm wird durch kurzes Schütteln aktiviert und lässt sich durch Drücken der Reset-Taste auf der Rückseite des Microbit abschalten.

#03 Fang das Ei

Aktivität: Fang das Ei – LED lässt ein Ei von oben herab fallen, das mit dem Korb unten aufgefangen werden soll. – Beschleunigungssensor
Schwierigkeitsgrad: Schwer

Öffne https://pxt.microbit.org um den Editor PXT (Programming Experience Toolkit) zu starten. Du kannst entweder blockbasierend (Abbildungen links) oder in JavaScript (Abbildungen rechts) arbeiten.

Schritt 1:
Beim Start des Programms soll der Computer in der obersten Reihe ein Ei vorbereiten (Koordinaten eggX/eggY = 2/0) und ganz unten einen Korb (Koordinaten basketX/y = 2/4) hinstellen.
Durch verschieben des Korbs wird sichergestellt, dass das Ei gefangen werden kann und ganz bleibt. Dazu wird der Microbit nach links und rechts gekippt. Vorsichtig dosiert kann der Korb mittels Beschleunigungssensor auch ziemlich genau gesteuert werden.

Wähle also unter dem rot gefärbten Begriff Platzhalter den Block ändere Platzhalter auf 0 und ziehe ihn in die Klammer beim Start. Klicke auf das kleine, nach unten zeigende Pfeilchen neben dem Wort Platzhalter und wähle dort Rename Variable aus. Benenne die erste Variable basketX und setzte den Wert auf 2. Wiederhole diesen Schritt 2 Mal für den Platzhalter eggX mit Wert 2 und eggY mit Wert 0.
(In JavaScript werden die Variablen zuerst mit 0 initialisiert bevor ihnen ein Wert zugewiesen wird. Daher erscheinen die Variablen doppelt in der Abbildung.)

Blockbasierend                                                    JavaScript

 

Schritt 2:
Nun werden die beiden Elemente auf die LED-Anzeige gezeichnet. Wähle für das Ei den violetten Baukasten LED und dort den Block Zeichne x 0 y 0 und ziehe ihn unterhalb der 3 Variablen an die letzte Stelle der Klammer beim Start. Setzte bei x mit Platzhalter die Variable eggX und bei y die Variable eggY ein.
Füge für den Korb noch einmal im violetten Baukasten über LED und dort den Block Zeichne x 0 y 0 ein. Setzte hier bei x mit Platzhalter die Variable basketX und bei y den Wert für die letzte Zeile, also 4 ein.

 

 

 

 

 

 

 

Schritt 3:
Zu Beginn der Klammer dauerhaft wird immer eine Zeile weitergeschaltet, da das Ei ja durch die Schwerkraft herunterfällt. Somit muss die Anzeige einmal gelöscht werden bevor die nächste Zeile erscheinen kann.
Dazu wählst du im violett gefärbten Baukasten LED den Block schalte Pixel x 0 y 0 und ziehst ihn an erster Stelle in die Klammer dauerhaft (schalte heißt eigentlich ausschalte, dies ist eine unglückliche Übersetzung). Ändere x auf eggX und y auf eggY mit Hilfe des roten Baukastens Platzhalter. Füge nun nochmals den Block schalte Pixel x 0 y 0 ein und ändere x auf basketX und y auf 4.
Nun kann eine Zeile weitergeschaltet werden. Füge über den roten Baukasten ändere Platzhalter auf 0 ein. Nun benötigen wir einen kleinen Trick um 2 Elemente in den Platz der 0 einzusetzen. Gehe in den violetten Baukasten der Mathematik und hole dir dort den Block 0 + 0 und füge ihn in das Feld 0 ein. Die erste Null erhält den Wert eggY und die zweite änderst du per Tastatur in eine 1. Somit steht dort ändere Platzhalter auf (eggY + 1). Nun kann das Ei wieder gezeichnet werden mit LED und Zeichne x 0 y 0. Den Wert x setzte auf eggX und Wert y auf eggY.

    

 

 

 

 

 

 

Schritt 4:
Für die Steuerung des Korbs wird nun der Beschleunigungssensor ausgelesen und in einem Platzhalter zwischengespeichert. Füge den roten Block ändere Platzhalter auf 0 ein und ändere Platzhalter in accX. In den Platz der 0 füge den rosa Block der EingabeBeschleunigung (mg) x hinzu.
Beginne wieder mit dem roten Block ändere Platzhalter auf 0 und ändere Platzhalter in basketX. Die Mittelstellung der Position des Korbs befindet sich bei 2, die durch den Beschleunigungssensor verändert werden soll. Dazu wird im nächsten Schritt eine Berechnung erstellt, die die gemessene Beschleunigung der X-Achse durch 200 teilt um verwertbare Ergebnisse für die Korbposition zu erhalten (accX ÷ 200).

basketX = 2 + minimal(2, maximal(-2, accX ÷ 200))

Die Funktionen minimal und maximal geben den jeweils geforderten Wert der dahinter in Klammer stehenden Zahlenreihe aus.

z.B. minimal(1 ,5, 7, -2) –> -2
od. maximal(1, 5, 7, -2) –> 7

accX kann Werte von ± 1024 darstellen, d.h. bei maximaler Neigung links -1024 und rechts +1024.
D.h. bei maximal(-2, accX ÷ 200) wird der Maximalausschlag nach links (-1024 ÷ 200 ≈ -5) nivelliert und auf maximal -2 festgelegt. Gleiches gilt für den Maximalausschlag nach rechts (1024 ÷ 200 ≈ 5) der mit minimal(2, ≈5) auf minimal 2 nivelliert wird.
Somit erreicht man eine Verschiebung des Korbs um nicht mehr als 2 Positionen nach links (0) oder rechts (4) von der Mittelposition (2) ausgehend.

Füge dazu den violetten Block 0 + 0 ein, in die zweite 0 füge den erweiterten Mathematik Block (…More) minimal von 0 und 0 und in dessen zweite 0 den erweiterten Mathematik Block (…More) maximal von 0 und 0 ein. Dies sieht so aus.

In die allerletzte 0 von maximal von 0 und 0 ziehe den violetten Mathematik Block 0 ÷ 0. Ersetzte dort die erste 0 durch Platzhalter accX und die zweite 0 durch 200 mit der Tastatur. Der Block sieht nun wie folgt aus.

Nun werden die restlichen Teile der Berechnung
          basketX = 2 + minimal(2, maximal(-2, accX ÷ 200))
wie folgt ergänzt.

Abschließend für Schritt 4 soll der nun seiner Position entsprechnd veränderte Korb wieder gezeichnet werden mit LED und Zeichne x 0 y 0. Den Wert x setzte auf basketX und Wert y auf 4.
Der komplette Block der Klammer dauerhaft ohne den Teil der Klammer beim Start folgt

 

 

 

 


Schritt 5:
Zu guter Letzt soll überprüft werden, ob das Ei durch die letzte Zeile unten durchfallen würde (wenn eggY > 4) und ein neues Ei wieder von oben erscheinen soll (ändere eggY auf -1). Allerdings soll hier die Position nicht mittig (2) starten, sondern per Zufall weiter links oder rechts – sonst wäre das Spiel ja zu einfach (ändere eggX auf pick random 0 to 4).
Beginne mit einem dunkelgrünen Logik-Block wenn wahr dann und setzte die Logik 0 = 0 in den Bereich von wahr. In die linke 0 kommt eggY in die rechte 4 und das = wird in ein > umgewandelt.
Danach füge 2 mal den Block ändere Platzhalter auf 0 ein.
Beim ersten Block wird eggY auf -1 geändert und beim zweiten eggX auf pick random 0 to 4. Dies findest du unter dem Bereich Mathematik, engl. random bedeutet zufällig.
Da das Ei nun wie eine Rakete von oben herunter saust und wir keine Zeit bekommen den Korb zu verschieben wird als allerletzter Block eine Pause pausiere (ms) 300 unterhalb der dunkelgrünen Klammer wenn wahr dann eingefügt.

So sieht das vollständige Ergebnis aus, versuche nun das Ei in den Korb fallen zu lassen und fang es ein.

 

 

Großartig, du hast es geschafft. Gratuliere!

#02 Schere Stein Papier

Aktivität: Schere-Stein-Papier – LED „würfelt“ zufällig eine der 3 Symbole. – Schwierigkeitsgrad: Mittel

Öffne https://pxt.microbit.org um den Editor PXT (Programming Experience Toolkit) zu starten. Du kannst entweder blockbasierend (Abbildungen links) oder in JavaScript (Abbildungen rechts) arbeiten.

Schritt 1:

Wähle unter dem violett gefärbten Begriff Eingabe die Klammer wenn geschüttelt und ziehe ihn in die Mitte – dies ist der Startauslöser des Programms. Nun soll sich der Computer eine Zahl zwischen 0 und 2 (0, 1, 2) ausdenken und im Platzhalter zahl merken. Wähle dazu den rot eingefärbten Begriff Platzhalter und dort den Block ändere Platzhalter auf 0. Ziehe diesen Block in die Klammer wenn geschüttelt. Zuletzt wird der Platzhalter noch auf zahl umbenannt mit Rename variable… Die zahl erdenkt sich der Computer mit einem Block aus dem violetten Mathematik-Baukasten, nämlich wähle eine zufällige Zahl zwischen 0 und 2. Danach sieht das Programm etwa so aus.

Blockbasierend

JavaScript

 

 

Schritt 2:

Die nun benötigte Logik zum Anzeigen der 3 Symbole befindet sich im dunkelgrünen Baukasten Logik. Nimm dort die Verzweigung wenn wahr – dann – sonst und ändere sie über das Zahnrädchen auf wenn wahr – dann – ansonsten wenn – dann – ansonsten (engl. if – else if – else). Die Überprüfung ob eine Bedingung wahr ist nimmst du wieder aus dem Logik-Baukasten, nämlich 0 = 0. Und in den ersten Nuller ersetzt du durch die Variable zahl aus dem roten Baukasten Platzhalter. Nun steht zahl = 0 für die wahre Bedingung fest bei der wir das Symbol Papier anzeigen. Zeichne die LEDs mit dem Papier-Symbol wie abgebildet.

 

 

 

 

 

 

Schritt 3:

Nun kannst du analog dazu wenn ansonsten wenn zahl = 1 wahr ist das Stein-Symbol anzeigen lassen. Und zum Schluss ohne eine Bedingung ansonsten das Schere-Symbol. Danach sieht das Programm etwa so aus.

Großartig, du hast es geschafft. Gratuliere!

So sieht das Ergebnis aus, die Anzeige wechselt nach dem Schütteln zwischen folgenden 3 Bildern:

Schere

Stein

Papier

#01 Blinkendes Herz

Aktivität: LEDs zeigen ein blinkendes Herz – Schwierigkeitsgrad: Leicht

Öffne https://pxt.microbit.org um den Editor PXT (Programming Experience Toolkit) zu starten. Du kannst entweder blockbasierend (links) oder in JavaScript (rechts) arbeiten, die Textangabe verweisen in kursiver Schrift auf die JavaScript-Befehle.

Schritt 1:
Wähle unter dem blau gefärbten Begriff Grundlagen den Block zeige LEDs (basic.showLeds) und ziehe ihn in die Klammer dauerhaft (basic.forever).

blockbasierend                                         JavaScript

Schritt 2:
Aktiviere die LEDs so, dass ein Herz daraus entsteht.
z.B. so…

Schritt 3:

Das Herz soll nun eine halbe Sekunde (500 Millisekunden) angezeigt werden, danach löschen wir die Anzeige. Benutze unter dem blau gefärbten Begriff Grundlagen den Block pausiere (ms) (basic.pause) und unter Grundlagen… den Block Bildschirminhalt löschen (basic.clearScreen).

Schritt 4:
Erweitere das Programm um eine Pause von 500 Millisekunden nachdem der Bildschirminhalt gelöscht wurde. So bleibt die Anzeige für einige Zeit merkbar ausgeschaltet.

Großartig, du hast es geschafft. Gratuliere!

 

 

EIS Karten Microbit

Hier finden Sie mehrere Aufgabenkarten zu Microbit für den Unterrricht. Auf allen Karten befindet sich auch ein QR Code zur Lösung und zu weiteren Informationen.

1 Blinkendes Herz
Der erste Start
EIS Karte Microbit #01
2 Schere Stein Papier
Bewegungssensor
EIS Karte Microbit #02
3 Fang das Ei
Oster-Spezial
EIS Karte Microbit #03
4 Audio-Alarm
Lautsprecher/ Kopfhörer
EIS Karte Microbit #04
5 Senden/ Empfangen
Bluetooth Datenübertragung
EIS Karte Microbit #05