Möglichkeiten Info-Boxen (mehrere pro Seite und Speichern als Variable)

Question

Hallo,

wir brauchen bei einer Likert Skala die Möglichkeit alle Items mit einer Info-Box auszustatten, die das Item dann genauer operationalisiert.

Zudem möchten wir das Öffnen der Info-Box als Variable speichern.

Gehe ich richtig in der Annahme, dass man die Variable nur erstellen kann, wenn man die Info-Box auf Mausklick erstellt? Bzw. gibt es eine elegante Lösung, wie man diese Art der diskreten Infobox: ((Titel|Erklärung)) auch als Variable abspeichern kann UND mehrere Info-Boxen auf einer Seite haben kann?

LG und Danke!

Answer 1

Prinzipiell können Sie auch das mouseover-Event einer ((Titel|Erklärung)) Infobox mittels JavaScript aufzeichnen. Dann sollten Sie aber auch die Betrachtungszeit notieren, damit Sie ein versehentliches Überfahren des Buttons nicht als Betrachtung missverstehen.

Wenn Sie sich um das JavaScript kümmern (ja, dies impliziert ein wenig Einarbeitung und Basteln), dann können wir die automatisch erzeugten Infoboxen gerne noch mit einer HTML-ID versehen, damit Sie sie in JavaScript einfacher ansprechen können.

Answer 2

Das klingt spitze! Weil ich gerade im Testen festgestellt habe, dass ein Button nur schwer antippbar ist, weil scheinbar nicht der Text im Button angeklickt werden darf, sondern nur der Button selbst...

(Code: <button type="button" id="infoButton1"><i>Schlafqualität</i></button>   <!--Info-Box --> <div id="infoBox1" style="width: 300px; padding: 1px; background-color: white; border: 2px solid #CCCCCC">   Schlafqualität umfasst das Ein- und Durchschlafen, sowie die empfundene Erholung nach dem Schlaf.   <p style="text-align: center; margin-top: 20px">     <button type="button" id="infoClose1">Schließen</button>   </p> </div>)

Beim Mouseover hab ich das Problem nicht. Daher würde ich das bevorzugen.
Wie müsste man die Programmierung für Speicherung als Variable inkl. Betrachtungszeit angehen?

Comments

> Wie müsste man die Programmierung für Speicherung als Variable inkl. Betrachtungszeit angehen?

Nun, Sie würden wohl eine Funktion aufrufen, wenn die Maus über dem Button ist, welche den aktuellen Zeitstempel ermittelt und zwischenspeichert. Und eine andere, wenn die Maus den Button wieder verlässt.

document.getElementById("infoButton1").addEventListener("mouseover", onMouseOver);
document.getElementById("infoButton1").addEventListener("mouseover", onMouseOut);

Für das Speichern der Zeitdifferenz würden Sie dann eine interne Variable verwenden vgl. https://www.soscisurvey.de/help/doku.php/de:create:questions:internal#interne_variablen_und_javascript

Dabei würden sie wohl den vorherigen Wert der internen Variable erstmal auslesen, in eine Zahl umwandeln und die neue Zeitdifferenz hinzuaddieren.