English version below
Der Code ermöglicht es auf https://www.soscisurvey.de, einem Tool für Onlineumfragen, eine Frage zu erstellen, in der auf einem Bild per Mausklick Punkte markiert werden können. Die Position der Punkte wird sowohl auf dem Bild dargestellt als auch in den Fragebogendaten gespeichert.
Dieser Code entstand im Rahmen der Veranstaltung Projekt Neuroergonomie im Sommersemester 2017 an der TU Berlin. Er ermöglichte es unserer Projektgruppe Probanden in einem Online Fragebogen die fünf von ihnen am häufigsten genutzten U-Bahn Stationen zu markieren.
Die 'Heatmap' funktioniert aus dem Zusammenspiel dreier Komponenten:
- Eine Frage des Type Interne Variable auf SoSciSurvey
- Dem Bild, das angeklickt werden soll, hochgeladen auf SoSciSurvey
- Dem Code in
map.html
der in eineHTML-Code
Komponente in einer Frage kopiert wird
- Erstelle einen Fragebogen auf https://www.soscisurvey.de/
- Lade das Bild hoch, das du benutzen möchtest
- Erstelle eine Frage des Formats Interne Variable und füge sie deinem Frageboben hinzu
- Diese Frage benötigt auf jeden Fall zwei Variablen für die Abmessungen des Bildes, um diese bei der Auswertung zu benutzen
- Für jeden Punkt den du hinzufügen möchtest benötigst du je zwei weitere Variablen für die Koordinaten des Punktes
- Merke dir ausserdem den Namen der Variable (z.B.: 'U501')
- Füge die Interne Variable Frage zu deiner Fragebogenseite hinzu
- Kopiere anschließend den gesamten Code aus
map.html
in eineHTML-Code
Komponente auf deiner Seite. - Im letzten Schritt musst du noch eine wenige Anpassungen im Code vornehmen wie im nächsten Abschnitt beschrieben.
Finde die jeweils dargestellten Abschnitte im Code und passe die Werte an.
Lege die Quelle des Bildes fest, dass verwendet werden soll. In diesem Beispiel ist es test-map.png. Der korrekte Wert für src
findet sich auch unter Bilder und Mediendateien und der Option HTML-Tag.
<img id="bg-img" src="test-map.png">
Lege die Anzahl der Punkte fest die angeklickt werden sollen. In diesem Beispiel ist sie 5.
const maxPoints = 5;
Lege den Namen der Interne Variable fest, um die Daten zu speichern. Hier ist er U501. Du findest ihn z.B. auf der Seite des Fragebogens.
StorageCtrl.initialize('U501', showError);
English version
This code makes it possible to add a 'heatmap' to a question on https://www.soscisurvey.de, a survey tool. It will enable the user to click on a picture to mark certain points. The points will be shown on the picture and their position stored in the survey's database.
This code was created during the project Projekt Neuroergonomie 2017 at the Technical University Berlin.
The 'heatmap' needs three components to work:
- A Interne Variable question on SoSciSurvey
- The picture you want to click on, uploaded to SoSciSurvey
- The code in
map.html
embedded in aHTML-Code
component on your site
- Make a survey on https://www.soscisurvey.de/
- Upload your picture
- Make a Interne Variable question and add it to your questionnaire
- The question needs two variables for storing the size of the image in ervey case
- For every point you want to add you nee two add two more variables for storing the point's coordinates
- Take a note of the variable name (e.g.: 'U501')
- Add the Interne Variable question
- Paste the code from
map.html
into aHTML-Code
component - Customize the code as described below.
Finde the code described below and edit it accordingly.
Set the source of the image you want to use. In this example it's test-map.png.
<img id="bg-img" src="test-map.png">
Set the number of points that should be allowed. In this example it's 5.
const maxPoints = 5;
Set the name of the Interne Variable for saving the data. In this example it's U501.
StorageCtrl.initialize('U501', showError);