Hallo liebes soSci.de-Team,
ich habe versucht Informationen per Mausklick einzublenden und die Benutzung mit Hilfe von internen Variablen zu speichern, so wie es im Benutzerhandbuch (https://www.soscisurvey.de/help/doku.php/de:create:popup?s[]=informationen&s[]=per&s[]=mausklick&s[]=anzeigen) steht.
Leider werden mir immer die Fehlermeldungen, es gebe kein Datenfeld mit den Kennungen der einzelnen internen Variablen, angezeigt. Auch werden die Variablen in der Auswertung nicht angezeigt.
Grundsätzlich habe ich den Code aus der Beschreibung verwendet und nur eine kurze Tabelle drumherum gebastelt. Können Sie mir sagen, ob hier (siehe unten) schon ein Fehler vorliegt, oder ob ich diesen eher in der Fragebogenzusammenstellung suchen muss?
Vielen Dank im Voraus!
<script type="text/javascript">
<!--
var info = new infoButton();
// Die folgende Zeile für jeden Knopf wiederholen
info.registerInfo("infoButton1", "infoBox1", "infoClose1", "IV01_01");
info.registerInfo("infoButton2", "infoBox2", "infoClose2", "IV01_02");
//-->
</script>
<script type="text/javascript">
<!--
function infoButton() {
var buttons = new Array();
var boxes = new Array();
var closes = new Array();
var stores = new Array();
function clickButton(evt) {
var sender = SoSciTools.getSender(evt, this);
for (var i=0; i<buttons.length; i++) {
if (sender == buttons[i]) {
// Ausgewählte Box anzeigen
boxes[i].style.display = "";
if (stores[i]) {
stores[i].value = parseInt(stores[i].value) + 1;
}
} else {
// Alle anderen schließen
boxes[i].style.display = "none";
}
}
}
function clickClose(evt) {
var sender = SoSciTools.getSender(evt, this);
var ix = -1;
for (var i=0; i<closes.length; i++) {
if (sender == closes[i]) {
ix = i;
break;
}
}
if (ix == -1) { return; }
boxes[ix].style.display = "none";
}
this.registerInfo = function(buttonID, boxID, closeID, storeID) {
var button = document.getElementById(buttonID);
var box = document.getElementById(boxID);
var close = document.getElementById(closeID);
var store = document.getElementById(storeID);
if (!button) { alert("Es gibt keinen Knopf mit der Kennung "+buttonID); return; }
if (!box) { alert("Es gibt keine Box mit der Kennung "+buttonID); return; }
if (closeID && !close) { alert("Es gibt keinen Knopf Kennung "+closeID); return; }
if (storeID && (!store || (store.nodeName != "INPUT"))) { alert("Es gibt kein Datenfeld mit der Kennung "+storeID); return; }
if (store && isNaN(parseInt(store.value))) {
store.value = 0;
}
buttons.push(button);
boxes.push(box);
closes.push(close);
stores.push(store);
// Initialisieren (Info ausblenden)
box.style.display = "none"; // Box ausblenden
box.style.position = "absolute";
box.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// box.style.left = "50px";
// box.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
box.style.marginTop = "10px";
// Knopf aktivieren
SoSciTools.attachEvent(button, "click", clickButton);
SoSciTools.attachEvent(close, "click", clickClose);
}
}
//-->
</script>
<?php
echo "Entscheiden Sie sich für einen der beiden Kandidaten..." // Anweisung
?>
<table border bgcolor="FF7A00"> <!-- Tabelle -->
<tr>
<th scope="col"><h1>Kandidat 1</h1></th> <!-- 1. Zeile -->
<th scope="col"><h1>Kategorie</h1></th>
<th scope="col"><h1>Kandidat 2</h1></th>
</tr>
<tr>
<td>
<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" id="infoButton1">Mehr Info</button>
<!--Info-Box -->
<div id="infoBox1" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
Hier kommt die Zusatz-Info
<p style="text-align: center; margin-top: 20px">
<button type="button" id="infoClose1">Schließen</button>
</p>
</div>
</td> <!-- 2. Zeile -->
<th scope="row">Kategorie 1</th>
<td>
<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" id="infoButton2">Mehr Info</button>
<!--Info-Box -->
<div id="infoBox2" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
Hier kommt die Zusatz-Info
<p style="text-align: center; margin-top: 20px">
<button type="button" id="infoClose2">Schließen</button>
</p>
</div>
</td>
</tr>
<tr>
<th scope="row">Entscheidung</th>
<td colspan="2"> Entscheide dich für einen der beiden Kandidaten:<br>
<form>
<fieldset>
<input type="radio" id="k1" name="Entscheidung" value="Kandidat 1">
<label for="k1"> Kandidat 1</label>
<input type="radio" id="k2" name="Entscheidung" value="Kandidat 2">
<label for="k2"> Kandidat 2</label>
</fieldset>
</form>
</td> <!-- 8. Zeile -->
<td>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
var info = new infoButton();
// Die folgende Zeile für jeden Knopf wiederholen
info.registerInfo("infoButton1", "infoBox1", "infoClose1");
info.registerInfo("infoButton2", "infoBox2", "infoClose2");
//-->
</script>
