Text einblenden und Zeitmessung bei Klick auf Start-Button

Question

Ich brauche für meinen Fragebogen Folgendes:

Wenn die 5. Seite meines Fragebogens angezeigt wird, soll zunächst nur ein "Start"-Button zu sehen sein.
Mit dem Klick auf den "Start"-Button soll auf derselben Seite ein Text erscheinen und die Zeitmessung starten.
Die Zeitmessung soll mit Klick auf den üblichen "Weiter"-Button zur nächsten Seite enden, sodass ich auf diese Weise die Lesedauer für den Text erhoben habe.
(Die Zuweisung eines Textes erfolgt zudem randomisiert, den Zufallsgenerator habe ich auf der vorangehenden Seite eingebaut.)

• Ist das richtig, dass die gesamte 5. Seite dann schon geladen ist, also auch der Text, selbst wenn er noch nicht angezeigt wird? (Damit keine Messverzerrungen durch Ladezeiten entstehen.)

• Wie füge ich einen solchen Start-Button hinzu und lasse daraufhin den Text anzeigen?
  (Weder https://www.soscisurvey.de/help/doku.php/de:create:functions:buttoncode noch https://www.soscisurvey.de/help/doku.php/de:create:popup erschien mir hier hilfreich.)

• Ist das richtig, dass ich für diese Zeitmessung nur eine einzige interne Variable benötige?

• Welchen Code brauche ich für den Latency-Timer?

Danke für jede Hilfe!!

Answer 1

Vorab: Wenn wir über Lesezeiten sprechen und Ihre Text länger ist als 2 Zeilen, dann befinden wir uns wahrscheinlich in einem Bereich, wo 2 Sekunden Ladezeit mehr oder weniger keine Rolle spielen.

Generell ist das gewünschte Vorgehen natürlich möglich, erfordert aber, dass Sie sich ein wenig in JavaScript einlesen. Konkret sollten Sie sich ansehen, wie Sie mit JavaScript Elemente ein- und ausblenden und wie Sie mittels Event-handlern auf Knopf-Klicks reagieren.

Ist das richtig, dass die gesamte 5. Seite dann schon geladen ist, also auch der Text, selbst wenn er noch nicht angezeigt wird?

Ja, das wäre ein übliches Vorgehen. Sie würden einen Weiter-Knopf mittels HTML-Code erstellen und in ein <div> setzen. Mittels JavaScript sorgen sie dann dafür, dass erstmal das Text-<div> ausgeblendet wird. Und wenn man den Knopf klickt, dann wird das Knopf-<div> ausgblendet und dafür das Text-<div> eingeblendet.

Wie gesagt: Wenn Sie eine exaktere Messung haben möchten, dann ist ein wenig Einlesen und Basteln mit HTML und JavaScript angesagt. Es schadet aber generell nicht, wenn man sich mit den Basics auskennt - immerhin basiert das komplette Internet auf dieser Technik.

Wir hlefen genre weiter, wenn Sie festhängen. Posten sie dann gerne Ihren bisherigen Code und einen Pretest-Link direkt (!) zur Seite im Fragebogen. Aber die Arbeite müssen Sie erstmal selbst machen.

Ist das richtig, dass ich für diese Zeitmessung nur eine einzige interne Variable benötige?

Wenn Sie nur die Differenz speichern möchten, dann ja. Wenn Sie noch etwas anderes speichern möchten (z.B. Zeit zwischen Laden der Seite und Klick auf "Start"), dann brauchen Sie entsprechend mehr interne Variablen.

Comments

Vielen Dank für die Antwort!

Ich glaube, ich habe jetzt eine Lösung gefunden und wäre dankbar, wenn Sie einmal drüberschauen würden.
Hier ist der Pretest-Link (der allerdings zu einer Seite vorher leiten muss als die betreffende Seite 5, da dort der Zufallsgenerator ist): https://www.soscisurvey.de/text_zugang2/?act=McARnUalomLWjKArr7gE2qpA
(Der richtige Text fehlt bisher noch auf S. 5, dort sind momentan nur dieselben vier Buchstaben wie jene der Textkennung zu sehen.)

Seite 5 ist wie folgt aufgebaut:
1) PHP: library('LatencyTimer');

2) Baustein der internen Variablen (FF02_1 und FF02_02)

3) HTML: <div id="text">

4) PHP:
if (value('FF01') == 1) {
  text('GM_Sg');
} elseif (value('FF01') == 2) {
  text('GM_Pl');
} elseif (value('FF01') == 3) {
  text('ST_Sg');
} elseif (value('FF01') == 4) {
  text('ST_Pl');
} elseif (value('FF01') == 5) {
  text('DO_Sg');
} elseif (value('FF01') == 6) {
  text('DO_Pl');
}

5) HTML:
<button type="button" id="fertig" style="font-size: 18px; font-weight: bold; color: blue" onclick="weiterShow()">
FERTIG</button>

6) HTML: </div>

7) HTML:
<button type="button" id="start" style="font-size: 18px; font-weight: bold; color: blue" onclick="textShow()">
START</button>

<script type="text/javascript">
<!--
var button1 = document.getElementById("start");
var button2 = document.getElementById("fertig");
var text = document.getElementById("text");
text.style.display = "none";

window.addEventListener("load", function() {
  document.getElementById("submit0").style.display = "none"
});

window.addEventListener("load", function() {
    var timer = new LatencyTimer();
    document.getElementById("start").addEventListener("click", timer.eventHandler("FF02_01"));
    document.getElementById("fertig").addEventListener("click", timer.eventHandler("FF02_02"));
});

function textShow() {
  text.style.display = "";
  button1.style.display= "none";
}

function weiterShow() {
  document.getElementById("submit0").style.display = "";
  text.style.display = "none";
  button2.style.display= "none";
}

</script>


Ich habe den Fragebogen einmal veröffentlicht und durchgeklickt, bei den erhobenen Daten wird mir für die Variablen dann Folgendes angezeigt:
- FF02_1 = -7 (erster Klick der Seite)
- FF02_02 = 1251
-> Das sind 1251 ms vom Klick auf den Startbutton bis zum Klick auf den Fertigbutton, richtig?

Danke im Voraus für eine erneute Rückmeldung!

---

Auf den ersten Blick sieht das ganz ordentlich aus.

> Das sind 1251 ms vom Klick auf den Startbutton bis zum Klick auf den Fertigbutton, richtig?

Ja. Wobei ich Ihnen ohne nachzusehen nicht sagen kann, wie sie ein mehrfaches Klicken des Start- oder Stop-Knopfes auf die Messung auswirkt. Ob die Zeiten ungefähr stimmen können Sie ja testen, wenn Sie nach 2 Sek. "Start" Klicken und nach weiteren 5 Sekunden "Stop".