Filter HTML für Rubriken statt einzelnen Fragen

Question

Hallo,

ich möchte eine Filterfrage mit HTML in meinen Fragebogen einbauen, so dass je nach Beantwortung der einen Frage eine 2. Frage gestellt wird.
Das ist eigentlich auch kein Problem.

Allerdings handelt es sich hier um eine Seite die 24 mal geloopt wird. Ich habe also nicht nur eine frage, sondern eine Rubrik (in meinem Fall AN) in der ich die Frage AN_01 immer wieder dupliziert habe (bis AN_24). Das Selbe ist bei der 2. Frage (QG), die in Abhängigkeit der Antwort der ersten Frage gestellt werden soll, der Fall.

Beide Fragen sind Dropdown-Fragen.

Was muss ich tun, damit der folgende Code für die ganze Rubrik gilt und nicht nur für eine Frage?

<script type="text/javascript">
<!--
var dropdown = document.getElementById("AN");  // Das Eingabefeld der Rubrik AN
var frage = document.getElementById("QG");  // Die Rubrik QG, die ein-/auszublenden ist


function toogle() {
    if (
        (dropdown.value == 1) |

    ) {
        frage.style.display = "";
    } else {
        frage.style.display = "none";
    }
}
 
 
SoSciTools.attachEvent(dropdown, "change", toogle);  // Bei einer Änderung der Auswahl die Anzeige anpassen
SoSciTools.attachEvent(dropdown, "click", toogle);  // Auch beim Klick prüfen - sonst wird die Änderung evtl. erst beim Verlassen des Dropdowns wirksam
toogle();  // Und zu Beginn auch die korrekte Anzeige sicherstellen
// -->
</script>

Answer 1

Speichern Sie den JavaScript-Code bitte als erstes als Text im Fragenkatalog. Das macht das Procedere einfacher.

Auf Ihrer Seite haben Sie ja einen PHP-Code mit loopPage(), der vermutlich ungefähr wie folgt aussieht:

$i = loopPage(24);
$qstA = id('AN', $i+1);
$qstB = id('QG', $i+1);
question($qstA);
question($qstB);

Darunter binden Sie noch den JavaScript-Code ein und verwenden Platzhalter für die Fragekennungen. Das könnte ungefähr (!) so aussehen:

var dropdown = document.getElementById("%qstA%");
var frage = document.getElementById("%qstB%_qst"); 

Die Platzhalter können Sie dann entweder traditionell mittels replace() vorbereiten oder direkt mittels show() in den Text (also Ihren JavaScript-Code) einfügen:

show('JS01', [
  '%qstA%' => $qstA,
  '%qstB%' => $qstB
]);

Comments

vermutlich nicht?
Ich hatte ihn ursprünglich bei "Fragebogen zusammenstellen" auf dieselbe Seite gezogen. Aber das sollte ich ja nicht machen...

Wie müsste ich den JavaScript Code denn in den PHP code einbinden?

---

Haben Sie die Zeilen mit dem show() in Ihrem PHP-Code?

show('JS01', [
  '%qstA%' => $qstA,
  '%qstB%' => $qstB
]);

Vielleicht möchten Sie einfach mal posten, was Sie bisher an PHP-Code haben? Im Moment muss ich auf Basis Ihrer Angaben raten, wie das Gesamtbild bisher aussieht :)

---

Huch, hab es ausversehen oben kommentiert.
Hier noch einmal an korrekter Stelle: Der PHP code

if(!isset($all)){

// Reihenfolge aller Bilder zufällig bestimmen
$set1_a = array_fill(0, 24, 'Set1_');
$set1_n = range(1, 24);


$set1 = array();
for ($i=0; $i<=23; $i++) {
  $set1[] = array($set1_a[$i], $set1_n[$i]);
}


$set2_a = array_fill(0, 24, 'Set2_');
$set2_n = range(1, 24);

$set2 = array();
for ($i=0; $i<=23; $i++) {
  $set2[] = array($set2_a[$i], $set2_n[$i]);
}

$all = array_merge($set1, $set2);

shuffle($all); //Liste zufällig mischen
registerVariable('all');


//Reihenfolge der Bilder in interner Variablen speichern
for ($i=1; $i<=48; $i++){
     put('IV01_'.$i, $all[$i-1][0].$all[$i-1][1]);
}

}


//Bilder + Frage anzeigen
$i = loopPage(48);   //loopToPage('ihx',48);
registerVariable('i');

html('<center><img src="'.$all[$i][0].$all[$i][1].'.jpg"</center>');

if($all[$i][0] == "Set1_"){
   $quest_index = 0;
} else {
   $quest_index = 24;
}

$qstA = 'AN'.sprintf('%02d', $all[$i][1]+$quest_index);
question($qstA);
registerVariable('question');

$qstB = 'QG'.sprintf('%02d', $all[$i][1]+$quest_index);
question($qstB);
registerVariable('question');

show('JS01', [
  '%qstA%' => $qstA,
  '%qstB%' => $qstB
]);

---

Die folgende Zeile (2x) können Sie entfernen:

registerVariable('question');

Abgesehen davon wird mir jetzt, wenn ich den Pretest-Link aufrufe, die Einbindung von JS01 auch schon angezeigt. Das ist schonmal gut.

Jetzt beschwert sich die JavaScript-Konsole im Browser nur noch wie folgt:

> Uncaught SyntaxError: expected expression, got ')'

Das bezieht sich auf folgenden JavaScript-Code:
function toogle() {
    if (
        (dropdown.value == 1) |

    ) {
        frage.style.display = "";
    } else {
        frage.style.display = "none";
    }
}

Da ist einfach das Pipe-Symbol (|) im IF noch falsch, das muss noch raus.

function toogle() {
    if (dropdown.value == 1) {
        frage.style.display = "";
    } else {
        frage.style.display = "none";
    }
}

---

Oh mein Gott. Es funktioniert!
Vielen Vielen Dank für die tolle Hilfe.