Trying to make a multiple choice segment within a passage

Authoring
1

So what I’m trying to do is create a game where within some passages, there are multiple choice dialogue options (of 4 choices) that go 3 levels deep, where the 3rd level just has a final piece of text and a continue button. Each link has to go to a different set of answers. For that reason, I can’t use the replace macro, since that—as far as I can tell—only lets you replace the text once, not twice in a row.

I realize that this is exactly what passages are for, but the reason I don’t want to just go to a new passage is that I have gifs (and potentially sound) going on the page, so I don’t want the whole page to reload. I know there’s a way to make the contents of another passage show up within the passage you’re working on, but I feel like that would have the same issue—if I put choices in there, and you clicked on them, it would still take you away from that page. What I really would like is some kind of way to make an iframe so to speak, where then you could interact with the choices in those passages through the links without leaving the page you’re on, before eventually leaving the passage entirely. But if there’s an easier way to do this while keeping you on the same passage, that would work too—none of the choices after the conversation segment will be remembered/change the story later on except some thing that I mean to make happen in the final continue button.

I don’t know a whole lot of coding, so although I did at one point create a horribly messy javascript thing where it jumped from div to div, showing and hiding them, the divs were changing position and it just got really unwieldy without even working how I wanted. I’m sure there must be an easier way to do this! But I’ve been searching for ages and no answer I’ve come across actually does everything I’m trying to do.

2

Hello!

Well first of all, you can use <<replace>> as many times as you want in your project, it just might end up looking like some weird spaghetti with the different levels…

<<link>>
  <<replace>>
     The next text
             <<link 2>>
                 <<replace>>
                          etx....
                  <</replace>>
             <</link>>
    <<replace>>
<</link>>

The use of the <<include>> macro might be useful in this case (the include macro doesn’t take you to another page, it just puts the content of that included passage in the original one, you do not move screen)

Otherwise, there are custom macro that could be what you are looking for: Cycy’s CTP.

2 Likes
3

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.

2 Likes
4

Oh yeah, I forgot to say that I wanted the previous links & questions to disappear, sorry. :slight_smile: This stuff looks really useful, & just what I was looking for—I’ll try it out! Thanks so much.