Display follow-up question on same page

Question

Already consulted:
https://www.soscisurvey.de/help/doku.php/en:create:dynamic
https://www.soscisurvey.de/help/doku.php/en:create:simple-filters

I have 2 questions on the same page and would like to display the second one only if the participant answered Yes to the first question. Any way I could hide/display follow-up questions based on clicked answer (rather than Next button)?

Comments

> Any way I could hide/display follow-up questions based on clicked answer (rather than Next button)?

The first manual that you linked above provides a solution. Please specify how far you get. You may also post a pretest URL that directly (!) links to the questionnaire page in question, i your JavaScript does not work as expected.

---

Ah yes, I read the first manual again and understood how to apply my custom code!
Things are working great. Thanks!

---

The codes are working if there is only one pair of such questions on the page, what if I have 2+? At the beginning of the page, I ask a yes/no question with a follow-up if they answer yes. At the end of the page, I do the same. Only the last pair of questions works, the first one only displays the yes/no question, never the follow-up question.

I modified the code from "Exemple 1: Visible Selection" (https://www.soscisurvey.de/help/doku.php/en:create:dynamic). I'm guessing I should have a more complex code as explained under "Exemple 3", but since my questions are not the same, nor dropdowns, I'm not too sure how to customize the code. Thanks!

---

When using multiple such "filters", make sure to use unique function and variable named on the page. Use, for example, a toggle1() für the first filter an a toggle2() for the second.

---

Ah yes! I see! It's working now.

Here are my codes if others need help with the same sort of situation:

CODE FOR FIRST QUESTION

<script type="text/javascript">
<!--
var optionAa = document.getElementById("SE03_01a");
var optionBb = document.getElementById("SE03_02a");
var question1 = document.getElementById("SE04_qst");

function toogle1() {
  if (optionAa.checked) {
    question1.style.display = "";
  } else {
    question1.style.display = "none";
  }
}
  
SoSciTools.attachEvent(optionAa, "click", toogle1);
SoSciTools.attachEvent(optionBb, "click", toogle1);
 
toogle1();
// -->
</script>

CODE FOR THE SECOND QUESTION ON PAGE

<script type="text/javascript">
<!--
var optionA = document.getElementById("SE10_02a");
var optionB = document.getElementById("SE10_03a");  
var question = document.getElementById("SE11_qst");  
 
function toogle2() {
  if (optionA.checked) {
    question.style.display = "";
  } else {
    question.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle2);
SoSciTools.attachEvent(optionB, "click", toogle2);
 
toogle2();
// -->
</script>