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

Das mit den Platzhaltern ist mir in diesem Kontext noch nicht so ganz klar.

Auf was bezieht sich in Ihrer Antwort das 'JS01' ?

So sieht die Anzeige der einen Frage bei mir im PHP-Code aus:

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



das habe ich jetzt im JavaScript (HTML Code) geändert:

var dropdown = document.getElementById("%questionAN%");
var frage = document.getElementById("%questionQG%_qst");


Aber ich weiß nicht wie ich das mit dem replace() bzw. dem show() machen soll.

---

> Auf was bezieht sich in Ihrer Antwort das 'JS01' ?

Auf die Kennung unter welcher Sie den JavaScript-Code im Fragenkatalog abgelegt haben.

> Aber ich weiß nicht wie ich das mit dem replace() bzw. dem show() machen soll.

So wie in meinem Beispiel - nur dass Sie die Platzhalter natürlich so anpassen, wie Sie sie eingebaut haben, also:

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

---

Es kommen weiterhin diese Meldungen

Für den Platzhalter %qstA% wurde weder ein Eingabefeld mit prepare_input() vorbereitet, noch ein Inhalt mit replace() festgelegt

Für den Platzhalter %qstB% wurde weder ein Eingabefeld mit prepare_input() vorbereitet, noch ein Inhalt mit replace() festgelegt

---

Dann haben Sie höchstwahrscheinlich in Ihrem JavaScript-Code irgendwo doch %qstA% verwendet und nicht %questionAN%, wie Sie im vorletzten Kommentar schrieben?!

---

Ja. Das habe ich ausgetauscht, als es so nicht funktioniert hat und ich dort keinen "Schreibfehler" entdecken konnte, dachte ich ich benenne es noch mal neu, so wie sie es gemacht haben

---

wie würde das dnn mit replace() funktionieren?

---

Nur zur Sicherheit: Sie haben den JavaScript-Code unter einer Kennung (z.B. JS01) im Fragenkatalog in einer Rubrik abgelegt und ihn nur per show() eingebunden und NICHT noch zusätzlich in die Fragebogen-Seite gezogen?

---

achso. Gut dass Sie das sagen.
Jetzt ist die Fehlermeldung weg!

Allerdings zeigt es mir beide Fragen an und nicht nur die 1. (AN)
Die 2. Frage (QG) sollte ja eigentlich erst dazukommen, wenn man bei der 1. Frage (AN) mit Alt (also 1) beantwortet wurde.

---

Zeigt die Debug-Information an, dass beide Fragen erstellt werden? Da ich leider den kompletten Code, den Sie verwenden, nicht kenne, muss ich ein wenig raten...

Posten Sie auch gerne mal einen Pretest-Link direkt (!) zum Anfang des Loops. Dann kann ich mir das JavaScript live ansehen.

---

https://www.cognition.uni-landau.de/sosci/Persoenlichkeit-Interaktion/?act=pVld61NB0H3z6fCVkM44grW3

---

In Ordnung, ich sehe ein Gesicht und darunter zwei Fragen. Was ich im Quellcode nicht finde ist allerdings Ihr JavaScript-Code. Wird dieser aktuell eingebunden?

---

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.