0 votes
in SoSci Survey (dt.) by s066381 (260 points)

Liebes Support-Team,

ich möchte ein Bild in meinen Survey integrieren, dass an bestimmten Stellen anklickbar ist. Auf Klick sollen sich kleine Info-Kästchen öffnen (auf dem Bild) und wieder schließen lassen. Diese Klicks möchte ich im Datensatz jeweils als eigene Variable speichern.

Für meine Testversion, bei der ich allerdings die Klicks noch nicht speichern musste, habe ich hierfür Image Maps mithilfe eines Image Map Generators verwendet. Mit der Anforderung, dass nun die Klicks gespeichert werden, bin ich nun allerdings ziemlich überfragt. Ich habe lediglich schon festgestellt, dass ich hierfür interne Variablen anlegen müsste.

Daher zunächst eine offene Frage: wäre das überhaupt mit SoSci Survey umsetzbar? Oder wäre alternativ ein Workaround mit einem bestehenden Fragetypen, z.B. mit "SVG als Auswahl", eine Lösung?

Ich bin über jede Einschätzung dankbar. Herzlichen Dank vorab!

1 Answer

0 votes
by SoSci Survey (301k points)

Mit der Anforderung, dass nun die Klicks gespeichert werden, bin ich nun allerdings ziemlich überfragt.

Lesen Sie sich in der Anleitung mal ein paar Kapitel zu JavaScipt durch - und fragen Sie die Suchmaschine Ihres Vertrauens danach, was es mit JavaScript und Event Handlern auf sich hat.

Der Klick löst ein Event aus - und Sie müssen einen Event Handler schreiben, der auf diesen Klick reagiert und dann einen Wert in eine interne Variable (die Anleitung dazu sollten Sie auch lesen) schreibt.

Wenn Sie einen ersten Code gebaut haben, posten Sie diesen gerne im Online-Support, gerne auch einen Link zur Fragebogen-Seite, und beschreiben Sie, was noch nicht funktioniert. Dann sehen wir uns das konkret an.

by s066381 (260 points)
Vielen Dank für die Anregung!

Ich habe mittlerweile einen Code gebastelt. Meine Image Map soll später mal aus drei anklickbaren Areas bestehen, die nach dem gleichen Prinzip hochzählen. Ich habe der Einfachheit halber mich erstmal an einer Area versucht. Meine Variable im Datensatz zählt leider nicht hoch, wenn ich auf die Area klicke (weißer Kreis links oben in meinem Fragebogen: https://sosci.zdv.uni-mainz.de/zukunft/). Die interne Variable IV01 liegt auf der Fragebogenseite vor dem Code.

<style>

#wrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#natureImage{ display: block; width: 100%; }

</style>

<div id="wrapper">
    <img id="natureImage" src=Interaktiv1.png usemap="#natureMap" alt="" />
    <map name="natureMap" id="natureMap">
        <area id="abc" coords="1385,261,116" shape="circle" href="javascript:countclickabc()"/>
        <area id="def" coords="380,957,116" shape="circle" href="">
        <area id="ghi" coords="1150,1840,116" shape="circle" href="">
    </map>
</div>


<script>

// Ausgangswert für Zählvariable ist Null
let countabc = 0;

// Klicks für die Area abc registrieren und Funktion ansteuern
var clickabc = document.getElementById('abc');
clickabc.addEventListener('click', countclickabc);

// Hochzählen, wenn auf die Area abc geklickt wird
function countclickabc() {
countabc += 1;
  };

// Das versteckte Eingabefeld identifizieren
var inputabc = document.getElementById("IV01_01");

// Den Wert hineinschreiben
inputabc.value = countabc;

</script>
by SoSci Survey (301k points)
Der Code läuft von oben nach unten durch ... und dann nicht mehr. Wenn Sie also nach dieser Änderung

countabc += 1;

dieselbe Änderung in die interne Variablen schreiben wollen, dann müssen Sie das mit in die Funktion schreiben, die beim Klick aufgerufen wird:

function countclickabc() {
  countabc += 1;
  inputabc.value = countabc;
};

Und nehmen Sie vielleicht noch ein console.log() in die Funktion mit hinein, damit Sie einfacher sehen, ob überhaupt etwas passiert.
by s066381 (260 points)
Hoppla, das habe ich nicht bedacht - logisch. Tatsächlich passiert in der Konsole gar nichts. Nun ist auch die Variable im Datensatz leer (zuvor immer 0).
by SoSci Survey (301k points)
Okay, dann wird die Funktion offenbar nicht aufgerufen. Ich habe in der Browserkonsole die countclickabc() mal manuell angestoßen, und da zählt es dann auch sauber in der internen Variable.

Warum funktioniert es nicht? Ich habe ein wenig mit dem Quellcode gespielt und denke, ich habe das Problem gefunden. Erstmal ist es hilfreich, die <area>s "sichtbar" zu machen.

Dafür habe ich mal folgende <area> ergänzt:
<area shape="rect" coords="0,0,100,100" href="test.html" title="TEST">

Wenn man jetzt den Mauszeiger links oben ins Bild bewegt, wird er wegen dem href zur Hand und es erscheint der Mouseover "TEST". Nicht wirklich sichtbar, aber besser als nichts.

Vor allem "sieht" man aber auch, dass die <map> nicht zusammen mit dem BIld skaliert. Während das Bild von der Originalgröße von 1980 auf 780 Pixel verkleinert wurde, ist die <map> in Originalgröße, und damit sind die Kreis-<area>s weiß außerhalb des sichtbaren Bereichs.

Bad news: Man kann die <map> wohl nicht ohne weiteres mit dem Bild skalieren:
https://stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images

Das hier wäre m.E. noch die bequemste (Script-)Lösung:
https://stackoverflow.com/a/48370297

Alternativ (!) könnte man das Bild gleich in der Breite 780 Pixel hochladen und einbinden. Oder zumindest die Koordinaten auf diese Größe anpassen. Das klappt aber dann nur solange, wie niemand den Fragebogen auf einem kleineren Bildschirm (z.B. Smartphone) ausfüllt. Insofern ist das Script vermutlich schon eine sinnvolle Überlegung.
by s066381 (260 points)
Fantastisch, das hat das Problem gelöst. Ich habe ein Script eingebaut, das die Image map responsive skaliert. Jetzt funktioniert es, vielen Dank für die Hilfe :)
by s066381 (260 points)
Ich muss (leider) doch nochmal hierauf zurückkommen. Ich habe die Image Map mitterweile so ausgebaut, wie ich sie benötige. Es hat alles wunderbar funktioniert und die Klicks wurden korrekt gespeichert.

Ich brauche diese Image Map auf mehreren Seiten, da die Probanden in Abhängigkeit der vorherigen Angaben auf eine bestimmte Seite weitergeleitet werden (mit PHP-Filterführung). Die Image Map ist dabei immer gleich, es unterscheidet sich nur der Inhalt, der oberhalb auf der Seite gezeigt wird.

Nun frage ich mich: Ist es möglich, dass ich den gesamten Code für die Image Map einfach kopiere und die Klicks in derselben Variable gespeichert werden? Dafür würde ich dieselbe interne Variable auf verschiedenen Seiten integrieren. Oder wird die Variable auch überschrieben, wenn eine Seite aufgrund der Filterführung übersprungen wird (der TN die Seite aber nicht sieht?).
Seit ich den Code für die Image Maps auf verschiedene Seiten kopiert habe, funktioniert die Speicherung nämlich nicht mehr und ich bin nicht dahinter gekommen, woran das liegen könnte...
by SoSci Survey (301k points)
> Nun frage ich mich: Ist es möglich, dass ich den gesamten Code für die Image Map einfach kopiere und die Klicks in derselben Variable gespeichert werden?

Im Prinzip ist die ImageMap und alles, was an Script dazu gehört ja "nur" HTML-Code, oder? Wenn Sie diesen nicht direkt in den Fragebogen schreiben, sondern in einer Rubrik Ihrer Wahl einen "Text" erstellen, Darstellung "HTML-Code" und den Code dort hinein packen, können Sie diesen Text auf allen Seiten platzieren, wo er benötigt wird.

Sofern die Kennungen der internen Variablen variieren, können Sie das einfach via Platzhalter erledigen und mit folgender PHP-Einbindung.

show('TX01', ['%var%' => 'IV01']);

Habe ich die Frage korrekt verstanden?

> Oder wird die Variable auch überschrieben, wenn eine Seite aufgrund der Filterführung übersprungen wird (der TN die Seite aber nicht sieht?).

Seiten und Fragen, die übersprungen werden, werden von SoSci Survey nicht "ausgeführt", haben also keine Wirkung auf die Daten.

> Seit ich den Code für die Image Maps auf verschiedene Seiten kopiert habe, funktioniert die Speicherung nämlich nicht mehr

Verfolgen Sie bitte mal in der Debug-Information und in der Browser-Fehlerkonsole (https://www.soscisurvey.de/help/doku.php/de:general:browser-tools), wo was gespeichert und/oder überschrieben wird.
by s066381 (260 points)
Die Image Map besteht aus HTML und Script Code, den ich in einem Textbaustein in HTML-Darstellung habe. Dazu habe ich eine CSS-Datei, die ich auf der Seite über HTML-Code einbinde, aber das sollte keinen Einfluss haben.

Zwei (Rück)Fragen:
1) Verstehe ich es richtig, dass ich dieselbe interne Variable für alle Seiten mit Image Map nutzen kann und es nicht zu einer Überschreibung kommtt? Das würde die Erhebung wesentlich pragmatischer gestalten, da ich bei 16 verschiedenen Seiten mit Image Maps sehr viele interne Variablen hätte, die ich nachher wieder in einer zusammenfassen muss.

2) Könnte es sein, dass die Klicks in der internen Variable erst dann gespeichert werden, wenn der TN auf die nächste Seite der Umfrage geht? Mein Design sieht nämlich vor, dass bei Klick auf manche <area>s unmittelbar auf eine externe Seite weitergeleitet wird, somit die Umfrage an dieser Stelle quasi abgeschlossen ist (bei anderen <area>s öffnen sich Infoboxen). Unterfrage hierzu: Das bedeutet dann auch, dass wenn TN <area>s mit Info-Boxen öffnen, aber die Umfrage dann abbrechen, nichts gespeichert wird, oder?
by SoSci Survey (301k points)
> 1) Verstehe ich es richtig, dass ich dieselbe interne Variable für alle Seiten mit Image Map nutzen kann und es nicht zu einer Überschreibung kommtt?

Nun, es ist halt eine Variable. Wenn Sie dort auf Seite eins eine 2 hinei schreiben und auf Seite vier eine 3, dann steht am Ende nur 3 im Datensatz. Wenn Seite vier nie angezeigt wird, dann bleibt es bei der 2.

> 2) Könnte es sein, dass die Klicks in der internen Variable erst dann gespeichert werden, wenn der TN auf die nächste Seite der Umfrage geht?

Sie können in der internen Variable auswählen, ob die Daten erst beim Klick auf "Weiter" übermittelt werden (Standard) oder ob sie schon im Hintergrund an den Server übermittelt werden sollen. Klicken Sie dafür die (einzelne) interne Variable im Fragenkatalog an.

> Mein Design sieht nämlich vor, dass bei Klick auf manche <area>s unmittelbar auf eine externe Seite weitergeleitet wird

Solange die Weiterleitung mittels SoSciTools.submitPage() passiert, sollten die Daten sauber übermittelt werden.

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...