Zeiterfassung eines ausgeklappten Info-Buttons

Question

Ich habe in meiner Befragung anhand eines HTML- und JavaScript Codes einen anklickbaren Info-Button eingebunden. Dieser Info-Button gibt den Probanden zusätzliche Informationen.

Nun möchte ich nachverfolgen, wie lange dieser Info-Button bei den Probanden ausgeklappt war (vorausgesetzt das er angeklickt wurde) und habe dafür eine Interne Variable mit den Kennungen IV02_01 und IV02_02 aufgesetzt.

Dank eines beispielhaften Codes auf eurer Anleitungs-Seite (Link) habe ich bereits folgenden (noch nicht ganz funktionstüchtigen) Code angelegt:

<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" onclick="buttonShow()">(i) Mehr Infos zur Prüfung der Kundenbewertungen</button>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
 <p>  Es findet keine Echtheitsprüfung der Kundenbewertungen statt. </p>
Damit ist nicht sichergestellt, dass die dargestellten Bewertungen von Verbrauchern stammen, welche die bewerteten Produkte tatsächlich erworben haben.
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IV01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
if (!intVar.value) {
  intVar.value = "1";
}
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}

window.addEventListener("load", function() {
    var timer = new LatencyTimer();
    document.getElementById("infoBox").addEventListener("click", timer.eventHandler("IV02_01", true));
    document.getElementById("infoBox").addEventListener("click", timer.eventHandler("IV02_02", true));
});

//-->
</script>

Allerdings erfasst dieser Code für IV02_01 bislang nur den Zeitraum vom Laden der Befragungsseite bis zum Schließen des Info-Buttons. Für IV02_02 ist der Wert stets = 0.

Wie kann ich den Code nun korrigieren, um die Dauer, die der Info-Button ausgeklappt war, zu erfassen?

Wenn ich mich recht entsinne benötige ich ja eigentlich nur noch den Zeitraum zwischen Laden der Befragungsseite bis zum Öffnen des Info-Buttons, damit ich mir anhand einer dritten Internen Variable die Differenz der beiden Zeiträume ausrechnen lassen kann.

Answer 1

Ich würde dringend empfehlen, die Zeitmessung nicht an das "click" Event der InfoBxo zu hängen, sondern direkt in den beiden Funktionen buttonShow() und buttonHide() zu ergänzen. Also z.B.

function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
  timer.eventHandler("IV02_02", true);
}

Ändert das schon etwas am Problem? Wenn nicht, dann erstellen und posten sie bitte einen Pretest-Link direkt zur betroffenen Seite. Danke.

Comments

Das hat leider nicht geholfen und zuvor funktionierende Teile des Codes sogar unwirksam gemacht, daher habe ich es wieder aus dem Code entfernt.

Hieruntern finden Sie einen Link zum Pre-Test: https://www.soscisurvey.de/kundenbewertungen2026/?act=bm9Vv4CXuoCTGHZoxa7Wi8Oz

Und hierunter ein Link zur Debug-Vorschau:
https://www.soscisurvey.de/kundenbewertungen2026/?act=i1oRCyRQ3wA0HrpSoljw6LZT

Der Link führt Sie direkt zu der gefragten Seite des Fragebogens

---

> zuvor funktionierende Teile des Codes sogar unwirksam gemacht

Haben Sie den den unterne Teil um window.addEventListener herum entfernt? Beides Zusamme funktioniert nicht, weil beim mehrfachen Aufruf ja eine -6 gespeichert wird (s. Anleitung zum LatencyTimer), sofern Sie keinen dritten Parameter setzen.

Das Problem, warum das Öffnen nicht aufgezeichnet wird ist, dass die InfoBox ja beim Öffnen überhaupt nicht angeklickt wird. Daher wird das folgende Event nicht ausgelöst:

document.getElementById("infoBox").addEventListener("click", ...)

---

Ich habe nun auch den unteren Teil um window.addEventListener herum entfernt, allerdings kriege ich mit folgendem Code nun gar keine Antwort auf meine IV02_01 und IV02_02.

Leider weiß ich auch nicht mehr weiter.

<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" onclick="buttonShow()">(i) Mehr Infos zur Prüfung der Kundenbewertungen</button>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
 <p>  Es findet keine Echtheitsprüfung der Kundenbewertungen statt. </p>
Damit ist nicht sichergestellt, dass die dargestellten Bewertungen von Verbrauchern stammen, welche die bewerteten Produkte tatsächlich erworben haben.
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IV01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
if (!intVar.value) {
  intVar.value = "1";
}
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
  timer.eventHandler("IV02_01", true);
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
  timer.eventHandler("IV02_02", true);
}

//-->
</script>

---

Wenn ich den Debug-Link von oben aufrufe, ist dort noch der alte JavaScript-Code hinterlegt.

Was im Code oben noch fehlt, ist die Zeile

var timer = new LatencyTimer();

Diese können Sie z.B. oberhalb von

function buttonShow()

unterbringen.

---

Entschuldigen Sie bitte die Umstände! Ich habe den Code nur in einer experimentellen Zelle hinterlegt gehabt, sie wurden vermutlich in eine andere Zelle zugewiesen.

Nun habe ich den Zeiterfassungs-Code für alle Zellen vereinheitlicht und auch die Zeile

var timer = new LatencyTimer();

ergänzt, allerdings immernoch mit ausbleibendem Erfolg. Ich bin hier mittlerweile leider sehr frustriert und komme auf keine richtige Lösung, nachfolgend finden Sie der Vollständigkeit halber nochmals den aktuellen Code:

<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" onclick="buttonShow()">(i) Mehr Infos zur Prüfung der Kundenbewertungen</button>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
 <p>  Es findet keine Echtheitsprüfung der Kundenbewertungen statt. </p>
Damit ist nicht sichergestellt, dass die dargestellten Bewertungen von Verbrauchern stammen, welche die bewerteten Produkte tatsächlich erworben haben.
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
var info = document.getElementById("infoBox");
var intVar = document.getElementById("IV01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
if (!intVar.value) {
  intVar.value = "1";
}

var timer = new LatencyTimer();
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
  timer.eventHandler("IV02_01", true);
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
  timer.eventHandler("IV02_02", true);
}

//-->
</script>

---

Ich empfehle, dass Sie den JavaScript-Code (der ja überall gleich ist) separat in einen Text im Fragenkatalog speichern - dann brauchen Sie das nicht in unterschiedlichen Varianten immer einzeln anzupassen.

Ich habe jetzt nochmal tiefer in den Code des LatencyTimer geschaut und eine Funktion ergänzt, welche mit dem bisherigen Vorgehen besser zusammenspielt. Bitte versuchen Sie folgendes. Erstmal eine Ergänzung:

var timer = new LatencyTimer();
var itemOpen = timer.createItem("IV02_01", true);
var itemClose = timer.createItem("IV02_02", true);

Und dann zwei Ersetzungen, und zwar

timer.eventHandler("IV02_01", true);

tauschen gegen

itemOpen.registerEvent();

und

timer.eventHandler("IV02_02", true);

gegen

itemClose.registerEvent();

> Ich bin hier mittlerweile leider sehr frustriert

Na, fragen Sie mich mal ;)

---

Es hat geklappt!!! Sie sind ein Held, vielen liebe Dank!!

IV02_01 erfasst nun die Zeit vom laden der Seite bis zum anklicken des Info-Buttons und IV02_02 erfasst nun die Zeit, wie lange der Info-Button ausgeklappt war (bzw. Zeit zwischen anklicken und wegklicken).

Wenn jemand statt den Info-Button nach dem öffnen zu schließen auf der Befragungsseite direkt auf "Weiter" klickt, so erfasst IV02_02 naturgemäß nichts. Kann dieses Szenario irgendwie vorgebeugt werden, oder muss diese kleine Einschränkung so hingenommen werden?

Ich will Ihre Geduld außerdem nicht weiter strapazieren, werde allerdings aus der Anleitung zum LatencyTimer nicht schlauer:

Wie kann ich mit multiStore konkret verhindern, dass bei mehrfachem anklicken des Info-Buttons die Werte von IV02_01 und IV02_02 = -6 werden? Ich will schließlich nicht die Reaktionszeiten aus der ersten Erhebung verlieren. Stattdessen könnten die Reaktionszeiten einfach z.B. aufaddiert werden.

Erneut vielen Dank für den Support, ich werde meinen Forschungskollegen, welche ebenfalls Experimente durchführen, SoSci Survey definitiv ans Herz legen!

---

> Wenn jemand statt den Info-Button nach dem öffnen zu schließen auf der Befragungsseite direkt auf "Weiter" klickt, so erfasst IV02_02 naturgemäß nichts.

Sie können eine dritte interne Variable anlegen und dort eine Zeit speichern, wenn der Weiter-Knopf geklickt wird. Das können Sie wie folgt erreichen:

var itemClose2 = timer.createItem("IV02_03", true)

window.addEventListener("load", function() {
  s2.attachCheck(function() {
    itemClose2.registerEvent();
    return true;
  });
});

> Wie kann ich mit multiStore konkret verhindern, dass bei mehrfachem anklicken des Info-Buttons die Werte von IV02_01 und IV02_02 = -6 werden?

Tragen Sie für diesen Parameter bitte mal die Kennungen weiterer interner Variablen ein:

var itemOpen = timer.createItem("IV02_01", true, "IV02_04");

> ich werde meinen Forschungskollegen, welche ebenfalls Experimente durchführen, SoSci Survey definitiv ans Herz legen!

Danke. Der Einstieg in die anspruchsvolleren Funktionen ist nicht ganz trivial, aber man bekommt dafür fast jede Freiheit, die man sich im Forschungsdesign wünschen kann :)

---

Hat alles nun geklappt dank Ihrer Unterstützung. Besten Dank nochmals!!