If I understand correctly, you have a question and answer structure something like the following…
Click to see structure example
Question 1
Option 1
Question 2 - Variation 1
Option 1
Question 3 - Variation 1
Option 1
Final message 1
Continue
Option 2
Final message 2
Continue
Option 3
Final message 3
Continue
Option 4
Final message 4
Continue
Option 2
Question 3 - Variation 2
Option 1
Final message 5
Continue
Option 2
Final message 6
Continue
Option 3
Final message 7
Continue
Option 4
Final message 8
Continue
Option 3
Question 3 - Variation 3
Option 1
Final message 9
Continue
Option 2
Final message 10
Continue
Option 3
Final message 11
Continue
Option 4
Final message 12
Continue
Option 4
Question 3 - Variation 4
Option 1
Final message 13
Continue
Option 2
Final message 14
Continue
Option 3
Final message 15
Continue
Option 4
Final message 16
Continue
Option 2
Question 2 - Variation 2
Option 1
Question 3 - Variation 5
Option 1
Final message 17
Continue
Option 2
Final message 18
Continue
Option 3
Final message 19
Continue
Option 4
Final message 20
Continue
Option 2
Question 3 - Variation 6
Option 1
Final message 21
Continue
Option 2
Final message 22
Continue
Option 3
Final message 23
Continue
Option 4
Final message 24
Continue
Option 3
Question 3 - Variation 7
Option 1
Final message 25
Continue
Option 2
Final message 26
Continue
Option 3
Final message 27
Continue
Option 4
Final message 28
Continue
Option 4
Question 3 - Variation 8
Option 1
Final message 29
Continue
Option 2
Final message 30
Continue
Option 3
Final message 31
Continue
Option 4
Final message 32
Continue
Option 3
Question 2 - Variation 3
Option 1
Question 3 - Variation 9
Option 1
Final message 33
Continue
Option 2
Final message 34
Continue
Option 3
Final message 35
Continue
Option 4
Final message 36
Continue
Option 2
Question 3 - Variation 10
Option 1
Final message 37
Continue
Option 2
Final message 38
Continue
Option 3
Final message 39
Continue
Option 4
Final message 40
Continue
Option 3
Question 3 - Variation 11
Option 1
Final message 41
Continue
Option 2
Final message 42
Continue
Option 3
Final message 43
Continue
Option 4
Final message 44
Continue
Option 4
Question 3 - Variation 12
Option 1
Final message 45
Continue
Option 2
Final message 46
Continue
Option 3
Final message 47
Continue
Option 4
Final message 48
Continue
Option 4
Question 2 - Variation 4
Option 1
Question 3 - Variation 13
Option 1
Final message 49
Continue
Option 2
Final message 50
Continue
Option 3
Final message 51
Continue
Option 4
Final message 52
Continue
Option 2
Question 3 - Variation 14
Option 1
Final message 53
Continue
Option 2
Final message 54
Continue
Option 3
Final message 55
Continue
Option 4
Final message 56
Continue
Option 3
Question 3 - Variation 15
Option 1
Final message 57
Continue
Option 2
Final message 58
Continue
Option 3
Final message 59
Continue
Option 4
Final message 60
Continue
Option 4
Question 3 - Variation 16
Option 1
Final message 61
Continue
Option 2
Final message 62
Continue
Option 3
Final message 63
Continue
Option 4
Final message 64
Continue
…and you’ve discovered/workout what an indentation nightmare it would be to implement it with <<link>> plus <<replace>>, or <<linkreplace>> macros. Even if you use ‘child’ Passages and the <<include>> macro to abstract away some of the complexity.
The following explains how to use CSS to hide & dynamically reveal sections of a flattened variation of the above structure.
1: Flattening the structure.
note: Due to the potential length of the final solution I will only be showing the code for the 1st & 2nd questions, but that should be enough to understand the general mechanics of the technique, because each further section works on the same principles.
Question 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
Question 2 - Variation 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
Question 2 - Variation 2
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
Question 2 - Variation 3
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
Question 2 - Variation 4
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
2: Apply an unique identifier to each section.
I will be using Custom Styling markup to apply an identified to each section, but the same outcome can be achieved using a HTML element like <div> that has an id attribute value assigned to it, which is what the Custom Styling markup is generating.
You will note that I’m using a basic structure for the identifier:
- it starts with a
#character to indicate the CSS Selector is an ID based one. - the letter & number before the standard dash
-character represents which Question it relates to - and the letter & number after the dash represents the Variation of that Question.
You don’t have to use this convention, just make sure however you name your identifiers that they are all unique!
Question 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@#q2-v1;
Question 2 - Variation 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v2;
Question 2 - Variation 2
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v3;
Question 2 - Variation 3
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v4;
Question 2 - Variation 4
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
3: Use CSS to hide all sections.
First you need to add CSS like the following to the Story > Stylesheet area of your project…
.hidden {
display: none;
}
It defines a CSS class based rule named hidden that uses the an element’s display property to suppress the rendering of that element and all its content.
You apply the new hidden CSS class to each section by appending it to the end of its unique identifier like so…
Question 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@#q2-v1.hidden;
Question 2 - Variation 1
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v2.hidden;
Question 2 - Variation 2
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v3.hidden;
Question 2 - Variation 3
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
@@#q2-v4.hidden;
Question 2 - Variation 4
<<link 'Option 1'>>/* do something */<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
So at this point, if you view the Passage in a web-browser you will see only the first Question and its Options.
4: Dynamically revealing a specific section.
When the end-user selects Option 1 of Question 1 you want the #q2-v1 identified section to be “revealed”, and that can be achieve by simply using the <<removeclass>> macro remove the hidden CSS class from that section’s element.
eg. Change the Option 1 link of Question 1 to be…
Question 1
<<link 'Option 1'>>
<<removeclass '#q2-v1' 'hidden'>>
<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
And when you view Question 1 in a web-browser and select the Option 1 link the Question 2 - Variation 1 section will be “revealed”.
Now all you need to do is update all the <<link>> macros to call a <<removeclass>> macro that targets the identifier of the correct section to “reveal”.
note: You didn’t state what should happen to either: the links of a previously answered Question; or the previous Question itself.
1: If you want the previous links to “disappear” then all you need to do is wrap those set of links in an identifier and then use an <<addclass>> macro to apply the hidden CSS class to it. The code would look something like…
Question 1
@@#links-q1;
<<link 'Option 1'>>
<<addclass '#links-q1' 'hidden'>>
<<removeclass '#q2-v1' 'hidden'>>
<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
@@
2: If you want those set of links to be replaced with text that indicates which Option was selected, then again wrap them in an identifier but use a <<replace>> macro instead this time.
Question 1
@@#links-q1;
<<link 'Option 1'>>
<<replace '#links-q1'>>Option 1 was selected<</replace>>
<<removeclass '#q2-v1' 'hidden'>>
<</link>>
<<link 'Option 2'>>/* do something */<</link>>
<<link 'Option 3'>>/* do something */<</link>>
<<link 'Option 4'>>/* do something */<</link>>
note: Depending on how you format your code you may notice additional blank lines appearing between the “revealed” sections, this is generally a result of all line-breaks in your code being automatically converted into HTML <br> elements.
One simple way to remove all unwanted <br> elements it to either: wrap the entire contents of all sections within a single <<nobr>> macro; or to add the special nobr Passage Tag to the Passage. Then you can manually structure the content being displayed using HTML elements like Paragraph <p>, Unorder List <ul> or manual Line Break <br>.
<<nobr>>
<p>Question 1</p>
@@#links-q1;
<ul id="links-q1">
<li>
<<link 'Option 1'>>
<<replace '#links-q1'>>Option 1 was selected<</replace>>
<<removeclass '#q2-v1' 'hidden'>>
<</link>>
</li>
<li><<link 'Option 2'>>/* do something */<</link>></li>
<li><<link 'Option 3'>>/* do something */<</link>></li>
<li><<link 'Option 4'>>/* do something */<</link>></li>
</ul>
@@
/* ALL OTHER SECTIONS... */
<</nobr>>
You may notice that I moved the “Set of Links” identifier used in the previous two examples from the element begin created by the Custom Styling markup to the Unorder List <ul> element being used to layout the Options. This can be done because that <ul> element wraps all of the options, so there is no need for an additional element to do that.
Hopefully all of the above has given you enough information to implement the behaviour you want.