Bei der Grafischen Positionierung können die Befragten Positionen auf einem Bild markieren (z.B. auf einer Landkarte oder auf einer Abbildung) oder Elemente auf einem Bild positionieren.
Hintergrundbild: Das Bild, auf welchem Positionen markiert oder Elemente platziert werden können, laden Sie zunächst im Befragungsprojekt hoch (Mediendateien im Fragebogen). Danach können Sie es in der Frage vom Typ Grafische Positionierung als Bild (URL) auswählen. Beim Speichern trägt SoSci Survey die Abmessungen des Bilds normalerweise korrekt ein.
Wenn die Befragten Positionen auf dem Bild markieren sollen, dann klicken Sie links in der Navigation auf Symbol hinzufügen. Als Symbol (Bild) wählen Sie hier die Markierung, welche verwendet werden soll. Sie können festlegen, wie viele dieser Markierungen die Befragten mindestens im Bild machen sollen, und wie viele maximal zulässig sind.
Geben Sie auch eine Beschreibung für die Art der Markierung ein. Diese wird den Befragten unter Umständen angezeigt, zum Beispiel bei der Verwendung unterschiedlicher Symbole oder wenn Sie die Legende explizit aktivieren.
Hinweis: Die Markierung wird relational zum Hintergrundbild skaliert. Wenn das Hintergrundbild sehr groß ist (hier gilt die Bildgröße in Pixeln), dann werden die Markierungen sehr klein dargestellt. Ob eine Legende angezeigt wird, können Sie im Karteireiter Markierung einstellen.
Optional können Sie weitere Symbole hinzufügen. Das ist dann sinnvoll, wenn die Befragten im Bild unterschiedliche Markierungen anbringen sollen, zum Beispiel positive und negative Auffälligkeiten.
Wenn die Befragten unterschiedliche Elemente in dem Bild platzieren sollen, laden Sie Bilder dieser Elemente zunächst im Befragungsprojekt hoch (Mediendateien im Fragebogen).
Erstellen Sie anschließend über Symbol hinzufügen (links in der Navigation) für jede Element ein Symbol. Wählen Sie im Symbol bei Symbol (Bild) jeweils das Element aus. Eventuell möchten Sie über Mindestanzahl und Höchstzahl Markierungen festlegen, dass das Element genau einmal auf dem Hintergrundbild platziert werden darf.
Standardmäßig können die Befragten die Symbole oder Elemente überall im Bild platzieren. Im Karteireiter Bereiche kann definiert werden…
Ein Bereich braucht jeweils eine Bezeichnung des Bereichs (diese wird im Variablenlabel und in der barrierefreien Darstellung angezeigt) und eine Definition des Bereichs. Die Definition beinhaltet die Form (Kreis „circle“, Rechteck „rect“, Polygon „poly“) und die Pixelkordinaten (links oben = 0,0). Wie genau die Angabe erfolgt, erläutert die Erklärung direkt im Formular.
Um Polygone zu definieren können Sie einfach in der Vorschau des Hintergrundbilds bei Bild und Bereiche klicken und damit eine Form zeichnen. Unter dem Bild wird dann ein Eingabefeld „poly …“ angezeigt. Kopieren Sie diese Anzeige in das Feld für Definition des Bereichs.
Tipp: Definieren Sie als letzten (oder einzigen) Bereich einen Bereich mit der Definition all, wenn Sie unabhängig der anderen Bereiche eine Markierungen überall im Bild erlauben möchten.
Der Fragetyp „Grafische Positionierung“ speichert Rohdaten und Zähldaten.
Die Rohdaten sind eine durch Leerzeichen getrennte Liste, an welcher Position (Pixel, gemessen von links oben = 0,0) welches Symbol platziert wurde. Dies kann beispielsweise wie folgt aussehen:
54,48,1 139,51,1 141,147,2
Hier wurde das Symbol 1 an den X-Y-Positionen 54,48 und 139,51 sowie das Symbol 2 an der X-Y-Position 141,147 platziert. Es wird jeweils der Mittelpunkt des platzierten Symbols angegeben.
In einer weiteren Variable wird ausgegeben, in welche vordefinierten Bereichen diese Symbole jeweils fallen. Beispielsweise
2 1 1
Das erste Symbol wurde hier im vordefinierten Bereich 2 platziert. Die anderen beiden Markierungen wurden im Bereich 1 platziert.
In weiteren Variablen wird die Anzahl der Markierungen pro Bereich ausgegeben.
Das HTML-Element der Frage löst ein „change“ Event aus, wenn eine neue Markierung gesetzt, eine bestehende Markierung verschoben oder entfernt wird. Der Folgende JavaScript-Code zeigt die Events der grafischen Positionierung GP01 per console.log() in der Browserkonsole an.
window.addEventListener("load", function() { s2.GP01.addEventListener("change", console.log); });
Das change Event beinhaltet in der Eigenschaft detail folgende Informationen:
"change" (string) – Die Art der Änderung"add" – Eine Markierung wurde gesetzt"move" – Eine Markierung wurde verschoben"remove" – Eine Markierung wurde gelöscht"x" (int) – Die X-Koordinate der Markierung (Mittelpunkt), gemessen von links"y" (int) – Die Y-Koordinate der Markierung (Mittelpunkt), gemessen von oben"symbol" (int) – Die Nummer des Symbols (nur relevant, wenn in der Frage mehrere Symbole definiert wurden)"area" (int) – Die Nummer des Bereichs, in welchem die Markierung liegt (ggf. nach dem Verschieben)"markerID" (int) – Eine eindeutige Nummer für die Markierung"question" (string) – Die Kennung der Frage"markerIndex" (int) – Der Index der Markierung (ändert sich, wenn vorige Markierungen entfernt werden)"markerType" (int) – Wie "symbol" aber um -1 verschoben (zählt ab 0)
Das Event „position“ erlaubt es, die Position einer Markierung zu beschränken. Die aufgerufene Funktion kann dafür ein Objekt mit modifizierten Eigenschaften für x und y zurückgeben.
Der folgende JavaScript-Code würde die Platzierung von Markierungen auf eine horizontale Linie einschränken. Dadurch funktioniert die grafische Positionierung wie eine Skala, die mehrere Markierungen (Mehrfachauswahl) erlaubt.
window.addEventListener("load", function() { s2.GP01.addEventListener("position", function(pos) { pos.y = 50; return pos; }); });
Mit folgendem JavaScript-Code sind nur Vielfache von 30 Pixeln als Positionen auf einer Linie möglich.
window.addEventListener("load", function() { s2.GP01.addEventListener("position", function(pos) { pos.y = 50; pos.x = Math.round(pos.x / 30) * 30; return pos; }); });
Sie können den Befragten einen Knopf anbieten, um alle Markierungen auf einmal zu entfernen. Wenn in der Methode clear() ein Text angegeben wird, wird dieser Text mit den Auswahloptionen „OK“ und „Abbrechen“ angezeigt.
<div style="text-align: center; margin: 2em 0;"> <button type="button" id="dropButton">Nochmal neu anfangen</button> <script> document.getElementById("dropButton").addEventListener("click", function() { s2.GP01.clear("Sind Sie sicher?"); }); </script> </div>
GP01 muss hier durch die Kennung der grafischen Positionierung ersetzt werden.