Zeichenfläche: Bild als Hintergrund, Strichstärke und -farbe?

Question

Hallo,

in meiner Online-Studie sollen die Versuchspersonen auf der Vorlage zweier Körpersilhouetten diejenigen Körperregionen schraffieren, die in ihrem Fall von einer bestimmten Hautkrankheit betroffen sind. Dazu würde ich gerne den Fragetyp "Einfache Zeichenfläche" nutzen.

Zur genauen Umsetzung habe ich allerdings noch Fragen:
1. Wie kann ich ein Bild als Hintergrund der Zeichenfläche hochladen, auf dem die Versuchspersonen dann zeichnen können?
2. Wie kann ich die Farbe des Zeichenstriches verändern?
3. Ist es möglich, den Versuchspersonen die Möglichkeit zu geben, zwischen bspw. zwei oder drei verschiedenen Strichstärken zu wählen?

Vielen Dank!

Answer 1

Bitte beachten Sie, dass es sich bei der Zeichenfläche "nur" um ein Anwendungsbeispiel für den Fragetyp zur Übertragung von Daten im Hintergrund handelt. Daher ist diese Vorlage auch rudimentär gehalten.

1. Wie kann ich ein Bild als Hintergrund der Zeichenfläche hochladen, auf dem die Versuchspersonen dann zeichnen können?

Dazu darf ich auf folgende Frage im Support verweisen:
https://support.soscisurvey.de/?qa=18380/zeichenfunktion-mit-bild-als-untergrund

1. Wie kann ich die Farbe des Zeichenstriches verändern?

Dort wo Sie im Code ctx.lineWidth = 2; finden, können Sie auch eine Farbe für den Strich definieren, vgl. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle

1. Ist es möglich, den Versuchspersonen die Möglichkeit zu geben, zwischen bspw. zwei oder drei verschiedenen Strichstärken zu wählen?

Ja, aber Sie werden dafür ein wenig JavaScript basteln müssen. Im Prinzip müssen Sie nur per Knopfdruck in einer Variable die gewünschte Strichstärke ablegen - und beim ctx.lineWidth = 2; ersetzen Sie die 2 dann durch die Variable mit der Strichstärke.