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>