PHBern
Erstellen einer interaktiven Wikiseite
Das Programming-Wiki bietet eine Reihe von speziellen Sprachelementen, um interaktive Programmelemente in eine normale Wikiseite einzubauen. Hierfür wird in der Editieransicht der Seite eine zusätzliche Toolbar angezeigt:
Als wichtigste Funktion dient diese Toolbar zur Auswahl der Programmiersprache, in der Programmelemente innerhalb dieser Wikiseite verarbeitet werden sollen. Die Programmiersprache wird global für die ganze Seite bestimmt (es ist also nicht möglich sowohl Java als auch Pascal Programme in der gleichen Seite zu verwenden). Wenn Sie in der aktuellen Seite hingegen keine interaktiven Elemente verwenden, wählen Sie das leere Element in der Sprachliste aus. Die weiteren Schaltflächen dieser Toolbar dienen vorallem der einfacheren Bedienung und erstellen an der aktuellen Cursorposition die von Programming-Wiki unterstützten Spezialtags.
Programming-Wiki Sprachelemente
Interaktive Elemente werden im ProgrammingWiki über eine eindeutige id bestimmt. Diese ID muss vom Autor einer Wikiseite nicht angegeben werden, sondern wird automatisch beim Speichern der Seite generiert. In den nachfolgenden Codebeispielen sind diese ID's nur als Beispiel mit angegeben.
- Eval Element
- Dieses Element erstellt eine Codebox und eine Ausführen Schaltfläche.
- Sie können Vorgabeprogrammtexte hinterlegen
<eval id="4b015480e4573"> System.out.println("Hallo Welt"); </eval><eval id="4b015480e4d33"> System.out.println("Hallo Welt"); </eval>
- Code Element
- Erstellt eine einfache Codebox. Diese kann selbst nicht ausgeführt werden. Wird eine folgende Evalbox ausgeführt, werden auch alle Codebox Elemente bis zur vorherigen Evalbox mit ausgeführt.
- Besonders hilfreich sind versteckte Codeboxen, die dem Betrachter der Wikiseite nicht angezeigt werden, jedoch bei einer darauffolgenden Evalbox mit ausgeführt werden. Um eine Codebox zu verstecken, geben Sie das Attribut hidden oder versteckt mit an.
<code id="4b015480e22d4"> int add(int a,int b) { return a+b;} </code>
<code id="4b015480e2aa7" hidden> ... </code><code id="4b015480e35c6" versteckt> ... </code>
- Check Element
- Erstellt eine Prüfschaltfläche und ist für einfache Kontrollzwecke gedacht.
- Es muss eine Prüffunktion angegeben werden, die einen Wahrheitswert zurückliefert. Diese ist abhängig von der verwendeten Programmiersprache.
- Es wir beim Klick auf die Prüfschaltfläche der gesammte Quellcode, der in allen Codeboxen definiert wurde ausgeführt.
<check> return fibonacci(11)==89 && fibonacci(12)==144; </check>
Da auf dieser Seite noch keine Funktion für fibonacci erstllt wurde, wird das Beispiel-Prüfelement auf dieser Seite einen Misserfolg liefern. Wenn Sie wollen, können Sie in der vorherigen Codebox diese Funktion definieren, um das Prüfelement zu testen.
- Canvas Element
- Erstellt eine Zeichenfläche für verschiedene Zeichenfunktionen und Turtlegrafiken.
- Alle Canvas Elemente einer Seite werden nummeriert. Das erste Element wird etwa in Java über canvas oder canvas1 angesprochen. Das zweite Element mit canvas2 usw.
- Über die Parameter lässt sich die Dimension der Zeichenfläche bestimmen.
<canvas></canvas> <canvas width=300 hight=200></canvas> <canvas w=500 h=300></canvas>
|
Das Programm rechts wurde von Schülerinnen | | <eval id="4b015480e550d">Turtle a = new Turtle(1); canvas.clear(); int y=1; int [] f = new int[3]; java.util.Random zufall = new java.util.Random();</eval> for(int z=1;z<=3;z++) for(int x=1;x<=300;x++) {
for(int g=0; g<=2;g++)
f[g] = zufall.nextInt(255);
a.penColor(f[0], f[1], f[2]);
a.forward((x/y)/10);
a.right(10);
y=+2;
} |
Weitere Informationen zu Canvas und Java finden Sie hier Canvas Befehle und Turtle Befehle.
Aufgabe
Erstellen Sie eine eigene interaktive Wikiseite mit ProgrammingWiki. Klicken Sie dazu auf den Ihnen zugeteilten Link in nachfolgender Liste: