Klick auf Item Grafische Positionierung erkennen

Question

Lieber Support,

ich benutze das Item "Grafische Positionierung" auf dem die Teilnehmer meiner Studie etwas einzeichnen sollen.
Während sie das tun, messe ich mit dem folgenden Code die Reaktionszeit (hier als die Zeit zwischen dem Laden der Seite und dem ersten Klick in Millisekunden).

var loaded = 0;
 
window.addEventListener("load", function() {
     loaded = performance.now();
});
 
document.addEventListener("click", function() {
     var clicked = performance.now();
     document.getElementById("IV03_01").value = clicked - loaded; } , 
     { once: true }
);

Um zu vermeiden, dass die Teilnehmer woanders als auf mein Item klicken, wollte ich den zweiten Eventlistener so programmieren, dass er nur auf Klicks auf das dargestellte Item (mit der Kennung "WO01") reagiert.
Leider hat dieser Code nicht funktioniert:

document.getElementByID("WO01").addEventListener("click", function() {
     var clicked = performance.now();
     document.getElementById("IV03_01").value = clicked - loaded; } , 
     { once: true }
);

Wie kann ich dafür sorgen, dass der Eventlistener nur einen Klick auf meinem Item registriert, nicht aber an irgendwelchen anderen Stellen auf der Seite?

Vielen Dank schon einmal!

Answer 1

Suchen Sie bitte einmal die Fehlerkonsole in Ihrem Browser - damit lassen sich JavaScript-Probleme sehr gut eingrenzen.

Spontan fällt mir folgender Fehler auf: getElementByID schreibt man mit einem kleinen d am Ende.

Comments

Das ist genau das Problem. Selbst ohne Tippfehler sehe ich in der Konsole lediglich, dass mit console.log(loaded) in der ersten Funktion die Zeit bis zum Laden der Seite ausgegeben wird.
Wenn ich console.log(clicked) in die zweite Funktion aufnehme, passiert allerdings einfach gar nichts, vollkommen egal wo ich hinklicke. Habe ich die Itemkennung irgendwie falsch eingegeben? Oder noch besser für mich: Kann ich die Kennung so anpassen, dass nur das Bild der grafischen Positionierung damit gemeint ist?

---

> Wenn ich console.log(clicked) in die zweite Funktion aufnehme, passiert allerdings einfach gar nichts, vollkommen egal wo ich hinklicke.

Das liegt vermutlich daran, dass "WO01" ein HTML-Element ist, welches nicht klickbar ist. Posten Sie auch gerne mal einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen, dann werfe ich einen Blick auf die HTML-Struktur und woran man einen Event Handler sinnvoll binden könnte.

Es geht Ihnen darum, den ersten Klick auf das Bild zu registrieren, ja?

---

Aha, das erklärt einiges ;)

Hier ist der Pretest-Link. Am besten wäre es, wenn ich tracken könnte, ob entweder auf das Bild oder auf Weiter geklickt wird. Da die Teilnehmer sich bei späteren Items aussuchen können, ob sie antworten oder nicht. Bei dem gezeigten reicht es aber einfach, wenn ich weiß, wann zum ersten Mal auf das Bild geklickt wurde.

Vielen Dank für's Anschauen!

P.S.: Es kommt eine PHP-Warnmeldung auf der Seite, weil der Timer, der nach 40 Sekunden einen Timeout produzieren soll, mitten im Fragebogen nicht alle Variablen zur Verfügung hat. Das Item funktioniert aber.

---

Der Pretest-Link hat es leider nicht mehr in Ihren Kommentar geschafft.

Um den Klick auf "Weiter" abzufangen, müssten Sie evtl. noch SoSciTools.questionnaire.attachCheck() verwenden. Aber jetzt schauen wir erstmal, ob das überhaupt notwendig wird.

---

Mist, hier ist jetzt aber der Link: https://www.soscisurvey.de/seqcol-conf/?act=5zyfnMPrflWBuFxZjROeIs2x

---

Also, das Element, in welchem das Bild liegt, hat die ID "backWO01".

> Am besten wäre es, wenn ich tracken könnte, ob entweder auf das Bild oder auf Weiter geklickt wird.

Aus der Frage WO01 bekommen Sie im Datensatz ja die Information, ob eine Stelle markiert wurde. Nicht, wenn die Position wieder abgewählt wurde. Ich verstehe noch nicht ganz, weshalb Sie diese Information nochmal parallel aufzeichnen möchten?

---

Ich will eigentlich nicht messen, ob geklickt wurde. Die Teilnehmer sollen einfach Städte auf Karten einzeichnen (später im Experiment können sie auch die eingezeichneten Punkte anderer bearbeiten oder belassen). Für diese Aufgaben möchte ich gern eine Reaktionszeit erfassen. Die ermittle ich aus der Zeit zwischen Laden und erstem Klick (aktuell einfach irgendwo hin). Aber eigentlich ist ja nur interessant, wenn auf das Bild (oder später, wenn die Teilnehmer den schon eingezeichneten Punkt belassen wollen, auch auf Weiter) geklickt wird. Klickt jemand auf die Instrunktion, möchte ich das eigentlich nicht in der Reaktionszeit berücksichtigen.
Deswegen meine Frage, wie meinen Code oben, der die Reaktionszeit erfasst, so umgestalte, dass der Klick nur bei einem Klick auf's Bild registriert wird.

---

Haben Sie es einmal mit "backWO01" versucht ... als Element, dessen "click" Event Sie erfassen?

Tatsächlich liefert die grafische Positionierung aber auch ein "change" Event, wenn ein Punkt gesetzt oder bewegt wird. Versuchen Sie es doch einmal hiermit:

window.addEventListerner("load", function() {
    SoSciTools.questionnaire.GF01.addEventListener("change", ...);
});

Statt der drei Punkt setzen Sie bitte Ihre Funktion ein, welche die Zeit messen soll.

---

Danke für den Tipp, das hat wunderbar geklappt! :)

Ich habe jetzt auch versucht für die Items, bei denen die Teilnehmer nicht unbedingt etwas tun müssen, die Reaktionszeit entweder mit Klick auf das Bild (wie oben besprochen) oder mit Klick auf weiter zu erfassen. Aber das hat nicht gut geklappt. Wie kann ich das noch mit einem Event Listener einbauen? Bzw. bräuchte ich dafür überhaupt einen?

---

Die Frage ist, was genau Sie messen möchten ... den Weiter-Knopf erfassen Sie am besten, indem Sie eine Funktion über SoSciTools.questionnaire.attachCheck(). Dort übergeben Sie einfach Ihre Funktion, welche die Zeit notiert - diese Funktion muss dann nur ein "true" zurückgeben.

Was das Bild angeht ...dafür müssen Sie evtl. das "change" siehe ohne mit dem "click" auf das Bild kommbinieren, also beide EventListener registrieren. Für eine konkretere Antwort wäre ein Pretest-Link direkt zur betroffenen Seite wieder hilfreich.

---

Hier ist erstmal der Pretest-Link: https://www.soscisurvey.de/seqcol-conf/?act=gcdVH2H52D78pqRLklQSBK0z

Damit der PHP-Code auf der Seite funktioniert, leite ich Sie von der ersten Seite danach direkt auf die richtige Seite. Allerdings wollte ich Ihnen die ganzen Fehlermeldungen ersparen und das Item inklusive roten Punkt richtig anzeigen lassen.

Im Endeffekt möchte ich das gleiche machen wie für meine WO-Items: Ich möchte einfach die Zeit messen, bis die Teilnehmer eine erste Rekation zeigen. Da diese Items allerdings nicht beantwortet werden müssen, sondern auch einfach "Weiter" zu klicken eine legitime Antwort ist, reicht es jetzt nicht mehr, nur einen Klick auf das Bild abzufangen.
Ich habe versucht den folgenden Code einfach so zu erweitern, dass nicht nur Klick auf Bild, sondern auch Klick auf "Weiter" erfasst wird. Meine Kenntnisse in Javascript sind aber eher mäßig, deswegen bin ich da nicht wirklich weitergekommen.

<script type="text/javascript">
<!--
var loaded = 0;

window.addEventListener("load", function() {
     loaded = performance.now();
});

document.getElementById('backSQ01').addEventListener("click", function() {
     var clicked = performance.now();
     document.getElementById('IV04_18').value = clicked - loaded;
     }, {once: true} );

</script>

Deswegen meine Frage, wie ich das geschickt anstellen kann :)

Vielen Dank schon einmal (und auch danke für die umfangreiche Hilfe bisher)!

---

Also im Prinzip scheint der Event Listener zu funktionieren. Ich habe testweise einmal folgenden eingesetzt:

document.getElementById('backSQ01').addEventListener("click", console.log);

Der erzeugt schön bei jedem Klick (egal ob auf den Punkt oder sonstwo auf dem Bild) eine Ausgabe in der Konsole.

Mein erster Versuch wäre einmal, das "once" zu entfernen und das einfach mit einer Variable zu erledigen:

var loaded = 0;
var clickDone = false;


window.addEventListener("load", function() {
     loaded = performance.now();
});

document.getElementById('backSQ01').addEventListener("click", function() {
     var clicked = performance.now();
     console.log(loaded, clicked);
     if (!clickDone) {
         clickDone  = true;
         document.getElementById('IV04_18').value = clicked - loaded;
     }
});

Dies scheint soweit gut zu funktionieren...

---

Danke für die Info. Der Code an sich funktioniert auch gut, auch once: true klappt gut :)
Ich habe es nur nicht geschafft, dass ich die Reaktionszeit erfassen kann, wenn entweder auf das Bild oder auf Weiter geklickt wird (SQ01 muss nämlich nicht beantwortet werden, eine Reaktionszeit brauche ich aber trotzdem).

---

Okay, dann binden Sie noch folgenden weiteren Code ein:

function onClick() {
     var clicked = performance.now();
     console.log(loaded, clicked);
     if (!clickDone) {
         clickDone  = true;
         document.getElementById('IV04_18').value = clicked - loaded;
     }
    return true;
}

Genau, das ist im Prinzip Ihr Code, wie Sie ihn schon haben. Den hängen wir nun aber nicht nur an das Bild, sondern auch an den Weiter-Knopf:

document.getElementById('backSQ01').addEventListener("click", onClick);
SoSciTools.questionnaire.attachCheck(onClick);

---

Das ist super! Vielen lieben Dank, genau das hat mir noch gefehlt, aber ich bin einfach nicht draufgekommen, wie ich das machen kann :)

Und noch einmal vielen Dank für die ausführliche Hilfe!!