Update:
Inzwischen habe ich für meine Moodle-Kurse eine Integration gebaut, die ihr hier findet.
Heute habe ich ein Experiment gestartet:
Mit Skulpt habe ich in mein Moodle Turtle-Grafik eingebunden.
Dafür habe ich -wie hier beschrieben- Skulpt in den Moodle-Ordner hochgeladen und die beiden Javascript-Dateien unter “Website-Administration->Design->Zusätzliches HTML einbinden” eingebunden.
Anschließend habe ich folgenden Code in ein Textfeld eingegeben:
Mit Turtle-Grafik kannst du viele Arten von Bildern und Figuren zeichnen.
- Zeile 1 importiert die turtle-Bibliothek von Python.
- Zeile 2 erstellt eine Turtle
- Zeile 3 steuert die Turtle 100 Einheiten nach vorne.
Führe das Programm aus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<div class="flex-container">
<div class="flex-item skulpt-column">
<div id="editor" cols="40" rows="10">import turtle
turtle = turtle.Turtle()
turtle.forward(100)
</div>
</div>
<div class="flex-item skulpt-column">
<!-- If you want turtle graphics include a canvas -->
<div id="canvas"></div>
<pre id="output"></pre>
</div>
</div>
<script type="text/javascript">
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/python");
function outf(text) {
var mypre = editor.getValue();
mypre.innetextarearHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
function skulpt_clear() {
$("#canvas").empty();
console.info("clear");
}
function skulpt_runit() {
skulpt_clear();
console.info("run");
var prog = editor.getValue();
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.configure({
output: outf,
read: builtinRead,
__future__: Sk.python3,
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'canvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
$("#output").text(err.toString());
});
}
</script>
<style type="text/css" media="screen">
#editor {
position: relative;
height: 400px;
min-width: 300px;
border: 1px solid grey;
}
#canvas {
border: 1px solid grey;
min-width: 300px;
height: 400px;
}
.flex-container {
display: flex;
}
.skulpt-column {
width: 48%
}
</style>
<button type="button" onclick="skulpt_runit()">Run</button>
<button type="button" onclick="skulpt_clear()">Clear</button>
|
Das Ergebnis sieht so aus:
