Calliope Simulator
Das Modul einbinden
Um das Modul nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features
erfolgen (siehe auch Abschnitt "Javascript"):
Das Modul verwenden
Für die Verwendung sind folgende Schritte zu erledigen:
- Im Calliope Editor MakeCode ein Programm anlegen oder öffnen.
- Das Teilen Symbol oben rechts anklicken, mit "Publish project" bestätigen und aus dem Link die ID kopieren, das ist der hintere Teil nach dem /.
- Den HTML Tag
<div class="calliope-sim" data-config="..."></div>
an der gewünschten Stelle im Schulbuch einfügen und in der Konfiguration (siehe nächster Abschnitt) die gewünschte Höhe sowie die ID übergeben.
Konfiguration vornehmen
data-config
- Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig
-
makeCodeID
Die ID von MakeCode, siehe oben Schritt 2. -
width
Damit wird die Breite des Elementes festgelegt (Standardwert: 300px). -
link
Es kann optional ein Link angezeigt werden, der das Projekt in MakeCode öffnet (Standardwert: false).
Beispiel mit Breite 200px
<div class='calliope-sim' data-config='{"makeCodeID":"_fJ6c3qb4A9Du", "width":"200px"}'></div>
Beispiel mit Standardbreite und Link
<div class='calliope-sim' data-config='{"makeCodeID":"_fJ6c3qb4A9Du", "link": true}'></div>