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

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!!