Wie kann man Choice-Set-Optionen per Mausklick aufdecken lassen?

Question

Hallo liebes SoSci-Survey-Team,

ich möchte in meinem Fragebogen gerne eine Aufgabe zur Informationssuche integrieren. Dabei soll den Teilnehmern ein Choice-Set, bestehend aus mehreren Optionen, welche mit unterschiedlichen Attributen beschrieben sind, präsentiert werden. Die einzelnen Attribute sollen verdeckt sein und per Mausklick aufgedeckt werden müssen, wobei immer nur ein Attribut gleichzeitig angezeigt werden soll. Dabei soll aufgezeichnet werden, welche Attribute wann, wie oft und in welcher Reihenfolge aufgedeckt wurden, bevor sich der Teilnehmer für eine Option entschieden hat.

Ich habe eine erste Version mit InfoButtons und einer Tabelle für die Struktur erstellt. Das Aufdecken klappt damit, allerdings gefällt mir die Darstellung nicht so gut. Mir wäre es lieber, wenn man die entsprechende Stelle wirklich aufdecken würde und nicht, dass sich an versetzter Stelle eine Infobox öffnet.

Gibt es eine Möglichkeit, obengenanntes Setting anders umzusetzen? Vielleicht unter dem Einsatz von Platzhaltern?

Ich freue mich über jede Anregung und Rückmeldung

Answer 1

Mit ein wenig HTML und JavaScript können Sie dieses Design ganz nach Ihren Vorstellungen gestalten. Sie könnten z.B. Blöcke (DIV-Elemente) über die entsprechenden Informationen platzieren und diese (a) beim Mausklick verschwinden lassen und (b) dies auch im Datensatz speichern.

Für eine einzelne Tabellenzelle mit Information könnte das z.B. so aussehen:

<td style="position: relative">123 (die verdeckte Info)
  <div id="info01" style="background-color: red; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">Klick!</div>
</td>

<script type="text/javascript">
function ShowBox(id, store) {
  var box = document.getElementById(id);
  var out = document.getElementById(store);
  out.value = "1";    

  box.addEventListener("click", function() {
    box.style.display = "none";
    out.value = "2";
  }
}

// Das hier wird dann für jede Box wiederholt
new ShowBox("info01",  "IV01_01");
</script>

Klar, dass Sie für IV01_01 u.s.w. noch interne Variablen anlegen und auf die Seite ziehen müssen :)

Comments

Vielen Dank für die schnelle Antwort. Ich denke, damit könnte es klappen. Allerdings habe ich versucht den Code einzupflegen, was nicht komplett geklappt hat. Zwar wird das DIV-Element angezeigt, aber es verschwindet bei einem Mausklick leider nicht.
Ich weiß nicht, ob das ein Fehler meinerseits bei der Einbindung des Codes ist, oder ob es vielleicht mit den Einstellungen meines Browsers (Firefox Vers. 89 mit Win 10) zusammenhängt. Die interne Varibale habe ich angelegt.

---

Posten Sie gerne einen Pretest-Link direkt (!) zur betroffenen Seite. Werfen Sie auch mal einen Blick in die Fehlerkonsole Ihres Browsers. Womöglich kommen Sie bei solchen Sonderwünschen nicht ganz umhin, sich ein klein wenig mit JavaScript auseinanderzusetzen.

---

Nochmals vielen Dank für Ihre Hilfe! Ich habe das ganze jetzt über mehrere Akkordeontexte und Java Script gelöst. Das Script zählt jedes Aufrufen eines Textes. Die Anordnung der Texte habe ich über Tabellenelemente vorgegeben.

Hier das JS:
<script type="text/javascript">
function counter(varID) {
  return function() {
    var input = document.getElementById(varID);
    var count = parseInt(input.value);
    if (isNaN(count)) {
      count = 0;
    }
    count++;
    input.value = count;
  }
}
 
document.getElementById("IS02_media").addEventListener("show", counter("IS01_01"));
document.getElementById("IS03_media").addEventListener("show", counter("IS01_02"));
...
document.getElementById("IS31_media").addEventListener("show", counter("IS01_30"));
</script>

Zusätzlich zu der Klickanzahl würde ich auch gerne einen Zeitstempel für das Anzeigen eines Textes in einer zusätzlichen Variable speichern. Allerdings nur beim ersten Mal. Dafür sollte ich noch eine neue Frage aufmachen, oder?

---

Ich kann Ihnen hier zumindest noch einen kurzen Tipp geben. Und zwar würden Sie am besten die counter()-Funktion "aufbohren".

function counter(varIDCount, varIDTime) {
  return function() {
    var inputCount = document.getElementById(varIDCount);
    var inputTime = document.getElementById(varIDTime);
    var count = parseInt(inputCount.value);
    if (isNaN(count)) {
      count = 0;
    }
    count++;
    inputCount.value = count;
    // Zeit (einmalig) aufzeichnen
    if (!inputTime.value) {
      inputTime.value = Date.now();
    }
  }
}

Vorsicht: Der JS-Zeitstempel ist in Millisekunden, nicht in Sekunden wie der Unix-Zeitstempel.

---

Vielen Dank für die Hilfe!

Durch einfügen einer neuen Internen Variable und deren Kennung in
document.getElementById("IS02_media").addEventListener("show", counter("IS01_01", "Neue_Interne_Variable_01));
hat es geklappt und ich kriege alle Daten, die ich brauche!