Wie kann ich auf Elemente des Auswahl-Abfolge-Bausteins genau zugreifen?

Question

Hallo,

ich habe mir nun ausreichend Kenntnisse in JavaScript, HTML und CSS angeeignet um die gewünschte Glücksspielfunktion in gutem Design umzusetzen und bereits ein Skript verfasst, dass das Spiel (außerhalb von Sosci Survey) abspielen lässt. Um das Ganze nun äquivalent in Sosci Survey zu übersetzen, muss ich mit JavaSkript, sofern ich es richtig verstanden habe, auf die einzelnen Elemente des Auswahl-Abfolge-Bausteins (also Fragen, Teilfragen, Antwortalternativen) zugreifen, um Design und Interaktion zu verändern. Wie ist dieser genaue Zugriff möglich bzw. wo kann ich sehen, welche id bzw. welches tag die einzelnen Elemente des Bausteins genau haben?

Vielen Dank im Voraus!

Answer 1

Kennen Sie die Entwickler-Konsole Ihres Browsers? Wenn nicht, dann sehen Sie sich diese unbedingt an - am besten in Firefox oder Chrome. Dort gibt es u.a. den "Inspektor". Mit diesem kann man (sichtbare) Elemente in der Fragebogen-Seite anklicken und bekommt direkt die HTML-IDs. angezeigt.

Allerdings hilft das bei der AUswahlabfolge (und anderen JavaScript-basierten Fragen) nur bedingt. Denn dahinter stecken teils recht unterschiedliche Scripte. Wenn SIe hier etwas konkretes ansprechen möchten, fragen Sie gerne hier im Support nach.

Wenn Sie das Spiel bereits umgesetzt haben, ist das aber vielleicht gar nicht erforderlich. Im Prinzip können Sie es komplett in den Fragebogen übernehmen (einfach der HTML und JS und CSS einbinden) - Sie müssen dann nur noch dafür sorgen, dass die erhobenen Daten abgespeichert werden. Und das funktioniert ganz einfach über interne Variablen:

• Eigene Formularelemente verwenden
• Interne Variablen

Comments

Ich habe nun das Auswahlabfolge-Element meinem Szenario wie folgt angepasst (exemplarisch für eine Frage):

<script type="text/javascript">
function onSelect(evt) {
  var info = evt.detail;
  alert("In Frage " + info.question + " wurde für die Teilfrage " + info.item + " die Option " + info.value + " ausgewählt.");
}
 
var question = document.getElementById("AB01_qst");
question.addEventListener("select", onSelect);
</script>Ich habe nun das Auswahlabfolge-Element meinem Szenario wie folgt angepasst (exemplarisch für eine der Fragen):
<!-- begin question(SZ01) -->
<div id="SZ01_qst" class="s2question spacing">
<div class="titleSpacing"></div>
<div class="selClickSubs" style="min-height: 5px; height: auto !important; height: 5px">
<div id="sub_SZ01_01" class="selClick" style="">
<div class="selClickQuestion">
                Versuchen Sie genau, die Zusammenhänge zwischen dem Druck einer Taste und dem Gewinn zu erkennen!
                <input id="SZ01_01a" name="SZ01_01a" type="hidden">
            </div>
            <table class="selClickOptions" id="Spielautomat" onclick="Taste">
<thead>
    <td id="BELLAGIO">BELLAGIO</td>
                </thead>
    <tr>
        <td id="Bildschirm"> <img src="Bildschirm.png">
            <div id="Ergebnis">???</div>
        </td>
            </tr>
<colgroup id="buttons">
<col style="width: 48%"><col style="width: 4%"><col style="width: 48%"></colgroup>
<tbody><tr>
<td class="selClickOption selClickAvailable" id="spades">
<input name="SZ01_01" id="SZ01_01o1" tabindex="50" type="radio" value="1" class="option" style="display: none;">
<label for="SZ01_01o1" >♠</label>
</td>
<td id="Lücke"></td>
<td class="selClickOption selClickAvailable" id="diamonds">
<input name="SZ01_01" id="SZ01_01o2" tabindex="50" type="radio" value="2" class="option" style="display: none;">
<label for="SZ01_01o2" >♦</label>
</td>
</tr>
</tbody></table>

Ich habe den Style meinen Vorstellungen entsprechend angeglichen, aber den CSS-Teil bewusst weggelassen, damit der Code nicht noch länger wird. Ich möchte nun zuletzt, dass durch die Auswahl der Tasten "Spades" oder "Diamonds" im Baustein Ergebnis (aktueller Inhalt ???) in 2/3 der Fälle "Gewinn" und in 1/3 der Fälle "Verlust" (bestenfalls für eine kurze Zeit) angezeigt wird. Wie ich die Wahrscheinlichkeiten durch die Generation von Zufallszahlen manipulieren kann ist mir bewusst, allerdings habe ich Probleme eine Reaktion auf die Auswahl der Tasten zu erwirken (die entsprechende Erklärung [Auswahl-Abfolge -> Auf Auswahl reagieren] hat mir bisher leider nicht weitergeholfen). Ich habe in diesem Kontext bisher mit onclick gearbeitet, aber es gelingt mir hierbei damit nicht, das gewünschte Resultat zu erreichen.

Es wäre sehr nett, wenn mir jemand eine Rückmeldung dazu geben könnte, wie ich die Interaktion erstellen kann bzw. welche Funktion geeignet ist.

---

Ich denke, wir sollten diese Frage in einer neuen Frage klären - in den Kommentaren wird es mit Code schnell unübersichtlich.

Wo ich im Moment nicht sicher bin: Verwenden Sie eine von SoSci Survey ausgegebe Frage (der o.g. HTML-Code scheint zumindest von SoSci Survey erzeugt zu sein) oder haben Sie nur den HTML-Code kopiert?

Und wie weit sind Sie mit dem 1/3 v. 2/3 schon gekommen? In Ihrer Funktion oben sehe ich davon noch nichts. Aber genau in der onSelect()-Funktion wäre das ja unterzubringen.

Vielleicht zwei Anregungen für Feedback: Sie können entweder das alert() nutzen wie oben im Beispiel, aber das muss man immer manuell wegklicken. Oder Sie legen ein <div> an (also genauer: zwei davon), welches über der Frage liegt (position: absolute) und blenden dieses nach Bedarf ein (display: block) und aus (display: none).