Zeichnen in Freitextaufgaben mit Sketch/Minipaint

Moodle Plugin Sketch

Sketch ist ein Moodle Plugin, um in Moodle-Aufgaben eigene Zeichnungen, Bilder oder Handschriften zu erstellen und einzufügen. Dieses kann zum Beispiel dazu benutzt werden, um komplizierte mathematische Formeln zu erstellen. Das Plugin Sketch verwendet die online Mal- und Zeichnungsapplikation Minipaint.

In unterstützten Aufgabentypen erscheint das Symbol eines Stiftes zum Benutzen von Sketch. Falls der Stift nicht in der ersten Symbolzeile zu sehen, dann benutzen nach dem Anzeigen von zusätzlichen Symbolen.

Über die Menuleiste kann über "Einfügen" ebenfalls Sketch erreicht werden.

Nach dem Anklicken öffnet sich das Sketch-Overlay. Dies ist ein umfangreiches Zeichen- und Bildbearbeitungstool. Oben befindet sich die Menüleiste, in der die einzelnen Funktionen von Sketch auszuwählen sind. In der Toolbar direkt darunter sind die Einstellungen des aktiven Zeichentools. Auf der linken Seite befindet sich die Zeichentoolleiste, in der zwischen den einzelnen Tools gewechselt werden kann. Im Zentrum befindet sich die Zeichenfläche. Rechts sind generelle Einstellungen und Informationen zu finden. Zuletzt ist unten in der Mitte ein Button, mit dem die Zeichnung in die Abgabe eingefügt wird.

In Moodle kann Sketch bzw. Minipaint in folgender Demo ausprobiert werden (falls Sie nicht so schon von dort kommen):

• Tragen Sie sich in den Demokurs ein: E-Prüfungen: Infos und Moodle "Test" ausprobieren
• Gehen Sie in den Bereich Zeichnungen in Moodle Trainieren: Zeichen mit Sketch/Minipaint in Freitextaufgaben
• Betreten Sie die erste Aufgabe.

Das Minipaint kann auch außerhalb von Moodle ausprobiert werden:

• Minipaint
• github von minipaint

Menüleiste

Die Menüleiste enthält die Buttons

• File – Hier können Dateioperationen wie das speichern, öffnen und drucken des Bildes durchgeführt werden.
• Edit – Dieses Menü enthält Bearbeitungsfunktionen wie Rückgängig, Einfügen, Kopieren, Löschen und Markieren.
• Image – Hier sind Einstellungen zum Bild untergeordnet. Dazu gehören zum Beispiel Größe oder aber auch Deckkraft
• Layers – Dieses Menü enthält Optionen für verschiedene Ebenen. Hier können z.B. Ebenen nach hinten oder vorne verschoben werden.
• Effects – Unter Effects sind viele Filter zu finden, so zum Beispiel auch das Schärfen oder Weichzeichnen.
• Tools – Hier finden sich größere Bearbeitungstools, welche in den anderen Menüpunkten keinen Platz gefunden haben.
• Help – Enthält Informationen über Tastenkürzel, Spracheinstellungen und Verlinkungen zum Hersteller.

Toolbar

Im Folgenden werden die vorhandenen Tools von oben nach unten erläutert. Die Toolbar war die Leiste an der linken Seite.

• Select object tool – Mit diesem Tool können verschiedene in Ebenen angeordnete Objekte markiert werden. Leider funktioniert dieses Tool nicht unbedingt wie erwartet und es bedarf etwas Geduld bis man sein Objekt markiert hat. Sichtbare Teile der gewünschten Auswahl müssen genau getroffen werden z.B. die Linie eines Rechtecks treffen. Außerdem lassen sich aktive Ebenen damit verschieben. Dazu klickt und zieht man den Mauszeiger. Die markierte Ebene wird sich proportional zur Maus mitbewegen.
• Selection – Hiermit kann in einem Bild eine Markierung erstellt werden. Da die Markierung auf Bildpunkten arbeitet, muss ein Layer erst in ein Raster konvertiert werden.
• Brush – Dies ist ein Tool, welches bei aktiviertem Smart Brush eine schnelle und grobe Einfärbung ermöglicht, umso länger man eine kontinuierliche Linie zeichnet, umso dicker wird dieser.
• Pencil – Dies ist das Tool um gleichmäßig dicke Freilinien zu zeichnen.
• Pick Color – Hiermit kann eine Farbe aus einer Beliebigen existenten Ebene gezogen werden.
• Erase – Dieses Tool löscht den Bereich unter der Maus in der aktiven Ebene.
• Magic Wand Tool – Mit diesem Tool löscht man ähnliche Farben.
• Fill – Mit diesem Tool kann man eine verbundene Fläche einfärben.
• Line – Hiermit lassen sich gerade Linien und Pfeile zeichnen.
• Rectangle – Hiermit lassen sich gefüllte / ungefüllte / runde / kantige Rechtecke und Quadrate zeichnen
• Circle – Hiermit kann man vom Zentrum aus gefüllte / ungefüllte Kreise und Elipsen zeichnen.
• Search Images – Tool zum Suchen von Bildern mittels Schlüsselwörtern. Kurs - oder Prüfungsleitung entscheidet über Verwendung. Von einer Verwendung ohne explizite Genehmigung wird abgeraten.
• Text – Tool zum Einfügen von Text. Dazu klickt man an gewünschter Stelle und schreibt. Wenn man Text ändern will muss hier auch der Text exakt getroffen werden.
• Gradient – Aufziehen eines Farbverlaufs.
• Clone Tool – Dieses Tool funktioniert ebenfalls nur auf Bildpunkten. Man benutzt es, indem man die Position, welche geklont werden soll rechtsklickt und dort wohin geklont werden soll linksklickt.
• Crop – Mit dem Tool lassen sich Ebenen zuschneiden.
• Blur tool – Dieses Tool ist zum verschmieren von Bildpunkten
• Sharpen tool – Dieses Tool schärft Kanten unter dem Tool
• Desaturate – Dieses Tool entfernt die Farbe unter dem Tool und verwandelt sie in Graustufen

Ebenen und ihre Modi - Vektorgrafik vs. Bitmap{#layer-modi}

Ebenen oder auch engl. "Layers" sind übereinander gezeichnete Flächen, welche unabhängig voneinander bearbeitet werden können. Man kann sie mit mehreren Lagen Transparentpapier vergleichen. So wie das Papier können diese einzeln bearbeitet und umsortiert werden.

Außerdem benutzt jede Ebene intern 2 verschiedene Arten um Grafiken zu Speichern. Das sind zum einen Vektorgrafiken, welche unabhängig vom Zoomfaktor immer scharf sind. Und Bitmaps, welche eine festgelegte Anzahl an Bildpunkten in horizontaler und vertikaler Richtung darstellen. Ein Layer benutzt standardmäßig Vektorgrafiken zur Zwischendarstellung. Jedoch können manche Tools (noch) nicht auf Vektorgrafiken arbeiten, weshalb eine Ebene erst konvertiert werden muss. Dies kann man über die MenüpunkteLayers > Convert to Raster tun. Dabei gehen aber die relativen Informationen der Vektorgrafik verloren, da diese auf ein festes Raster angewendet werden.

Ebenenliste

Um das Arbeiten mit Ebenen zu vereinfachen, gibt es auf der rechten Seite ein Toolfenster mit der Überschrift Layers. Es kann sein, dass dieses nicht zu sehen ist. Dann sollten andere Fenster wie Preview oder Colors über das nach oben zeigende Dreieck minimiert werden. Alternativ kann man in der rechten Seitenleiste auch nach unten scrollen. In diesem Toolfenster lassen sich die einzelnen ebenen leicht Auswählen, Löschen oder Ausblenden. Auch können hier Ebenen hinzugefügt werden.

In dem Toolfenster Layer details direkt darüber lassen sich Position, Größe, Farbe und Deckkraft der aktiven Ebene bearbeiten.
{#layer-tool-window}

Beispiele

Im Folgenden werden einige Beispiele erläutert, welche Sie mitklicken können. Nutzen Sie den Test: Zeichen mit Sketch/Minipaint in Freitextaufgaben

Sketch Beispiel 1: Linien, Kreise, Rechtecke, Freitext, Text

Nutzen Sie für dieses Beispiel im Test "Zeichen mit Sketch/Minipaint in Freitextaufgaben", die erste Aufgabe Experimentieren Sie in diesem Test mit den Tools herum:

• Zeichnen Sie Ellipsen und Kreise mit dem Circle Tool
  • Dieses Tool erlaubt das Umstellen zwischen Circle und Ellipsen in einer Toolbar unter der Hauptmenüleiste
• Zeichnen Sie Rechtecke und Quadrate, auch hier gibt es sonderfunktionen
• Benutzen Sie einmal das Pencil und das Brush Tool um Freihandtext zu schreiben.
  • Versuchen Sie die Unterschiede zu entdecken.
• Als letztes können Sie auch das Text Tool testen.

Folgendermaßen könnte nun ein Bild aussehen:

Sketch Beispiel 2: Arbeiten mit Ebenen

Nutzen Sie für dieses Beispiel im Test Aufgabe 2". In Beispiel soll geübt werden Ebenen anzuwenden.

Wir werden nun mindestens einen grünen Kreis und ein blaues Rechteck erzeugen. Dann sollen diese getauscht werden:

Dazu wählen wir in der Ebenenliste den Kreis aus und verschieben ihn mithilfe des Pfeil nach oben in der Ebenenliste nach oben.

Das Resultat sollte ungefähr so aussehen:

]

Nun wollen wir die Zeichnung verschieben. Dafür müssen beide Ebenen aber erst zusammengefasst werden. Um Ebenen zusammenzufassen, müssen diese in der Ebenenliste direkt über einander liegen. Und die Ebene, die oben liegt, muss ausgewählt sein. Nun kann über Layers > Merge Down die Ebene verschmolzen werden.

Beispiel 2: Merge

Jetzt kann über das Select object tool die neue Ebene verschoben werden. Auch kann man dies über das Layer Detail Window tun.

Beispiel 2: Verschieben des gemergten Kreises und Rechtecks

Im Layer Detail Window kann eine Ebene auch Skaliert werden:

Beispiel 2: Vergrößern

Zuletzt können wir alles löschen, indem wir in der Ebenenliste auf das rote X neben der Ebene drücken.

Sketch Beispiel 3: Verändere Bilder aus der Aufgabenstellung in Moodle Tests

In diesem Beispiel wird gezeigt, wie man Bilder, welche in der Aufgabenstellung vorgegeben sind, bearbeiten kann. Da Sketch eher ein Bildbearbeitungsprogramm ist, als eine Zeichnungssoftware, lassen sich hier natürlich auch Bilder einfügen.

Gehen Sie im Test Zeichen mit Sketch/Minipaint in Freitextaufgaben auf Aufgabe 3.

Hier werden wir die Bildvorlage bearbeiten.

Im ersten Schritt müsst Ihr also das vorgegebene Bild kopieren, entweder indem Ihr das Bild markiert und die Tastenkombination Strg + C benutzt, oder über Rechtsklick > Grafik Kopieren. Ersteres hängt vom Browser ab.

Beispiel 3: Kontextmenü eines Bildes im Webbrowser

Ist das Bild kopiert, könnt Ihr wie in den vorherigen Beispielen das Sketch im HTML Editor des Antwortfeldes öffnen. Nun müsst Ihr dieses nur noch mithilfe von Strg + V oder im Menü über Edit > Paste einfügen.

Beispiel 3: Kontextmenü Sketch Edit

Wichtig ist, einmal ins Sketchfenster zu klicken, ansonsten wird das Bild in der Antwort eingefügt. Wir fügen nun in dem vorhandenen Bild ein Kreis als Bearbeitungsschritt ein.

Ergebnis

Das bearbeitete Bild lässt sich nun mit einem Klick auf den Button in der Mitte unten einfügen.

Sketch Beispiel 4: Verändere Bilder aus der Antwortvorlage in Moodle Tests {#sketch-ex4}

Im letzten Beispiel ist ein Bild bereits als Vorlage im Antwortfeld vorgegeben. Um dieses Zu bearbeiten, kann es einfach markiert werden durch Anklicken.

Mit dem Öffnen des Sketchfensters wird es automatisch in Sketch geöffnet. Auch hier Zeichnen wir einen Kreis und fügen das Bild mit dem Button unten in der Mitte wieder ein.

Bild bearbeitet

Wieder erwarten, kann das bearbeitette Bild als Kopie erscheinen. Das Original muss dann gelöscht werden. Dazu muss das Bild markiert und dann mit der Entf Taste gelöscht werden.