How do I make a dynamic dialogue tree in one passage?

Question

Hi,

 

I'm using Twine 2.2.1 Sugarcube 2.21.0

What I'm trying to do is have a dialogue tree where the player would be presented with several choices. If the player were to select one choice, it can change a variable which causes another choice to appear. I attempted this with the <<replace>> macro.

The problem I ran into is that, since the passage doesn't update, the new choice doesn't appear. My solution to this was to nest <<replace>> but that is heavily limiting and makes the code look awful.

This is what I've come up so far with nesting <<replace>> macros:

<span id="dialogue1">Replace Me</span>


<<link "1">>
	<<replace "#dialogue1">>
		Choice 1
	<</replace>>
<</link>>


<<link "2">>
	<<replace "#dialogue1">>
		Choice 2
	<</replace>>
<</link>>


<<link "3">>
	<<replace "#dialogue1">>
		Choice 3
	<</replace>>
<</link>>


<<link "4">>
	<<replace "#dialogue1">>
		4
		<<replace "#dialogue2">>\
		<<link "5">>
			<<replace "#dialogue1">>
				5
			<</replace>>
		<</link>>
		<</replace>>
	<</replace>>
<</link>>
<span id="dialogue2">Choice 5 goes here</span>

I'd like it to work something like this:

<span id="dialogue1">Replace Me</span>


<<link "1">>
	<<replace "#dialogue1">>
		Choice 1
	<</replace>>
<</link>>


<<link "2">>
	<<replace "#dialogue1">>
		Choice 2
	<</replace>>
<</link>>


<<link "3">>
	<<replace "#dialogue1">>
		Choice 3
	<</replace>>
<</link>>


<<link "4">>
	<<replace "#dialogue1">>
		4
		<<set $choice5 = 1>>
	<</replace>>
<</link>>


<<if $choice5 == 1>>
	<<link "5">>
		<<replace "#dialogue1">>
			5
		<</replace>>
	<</link>>
<<endif>>

It would make dialogue incredibly simple to create and offer limitless potential for complex trees.

While I know that Twine isn't meant to be used with a single passage, this not only makes the dialogue trees cleaner and simpler but it also makes my entire dialogue system easier to implement. I am practically new to JavaScript and HTML but have some experience in programming so I should be able to try out any solution you may offer. 

 

Thanks in advance.

Answer 1

warning: SugarCube only persists Story Variable changes to the History system during the Passage Transition (story moving from one passage to another) process, this behaviour is required for the "History Backward" and "History Forward" features to work.
So if any of the dynamic changes you're planing to make to the output of current Passage include the usage of <<set>> macros to change story variables then thoses changes are unknown to the History system, which means that the Reader can't undo their choices and that those variable changes (and the Reader's choices) will be reset if the web-page is refreshed.

This is why any implement of the 'end-less' page effect (like what you are trying to do) that doesn't include Passage Transitions as part of it is bound to fail from the Reader's point-of-view.

The main reason why it can't work as you would like it to in your second example is because the <<if $choice5 == 1>> statement will only be evaluated during the Passage Transition that first sends the Reader to that passage, and at that time $choice5 won't of been set to 1.

You can use child passages to make your code easier to read like so.

:: Start
@@#dialogue;
@@
@@#links;
<<link "1">><<include "Choice 1">><</link>>
<<link "2">><<include "Choice 2">><</link>>
<<link "3">><<include "Choice 3">><</link>>
<<link "4">><<include "Choice 4">><</link>>
@@

:: Choice 1
<<append "#dialogue">>
	Choice 1
<</append>>
<<replace "#links">><</replace>>

:: Choice 2
<<append "#dialogue">>
	Choice 2
<</append>>
<<replace "#links">><</replace>>

:: Choice 3
<<append "#dialogue">>
	Choice 3
<</append>>
<<replace "#links">><</replace>>

:: Choice 4
<<append "#dialogue">>
	4
<</append>>
<<replace "#links">>
	\<<link "5">><<include "Choice 5">><</link>>
<</replace>>

:: Choice 5
<<append "#dialogue">>
	5
<</append>>
<<replace "#links">><</replace>>

note: The above example is written in Twee Notation and it consists of six passages named:
Start, Choice 1, Choice 2, Choice 3, Choice 4, and Choice 5.

Answer 2

I'm not entirely clear on what you want this to look like, since it looks like you could skip the middle dialogue and go straight to the last one.  Also, you don't show how you'd exit such a dialogue.

That said, I have two bits of sample code which may help.  You can find them here:

Replace sample code

Combining Story Passages sample code

Hopefully looking at them will help you figure out what you're trying to do.

You can actually save that HTML if you want to import it into Twine to take a look at it.  Also, if you click the "Jump to Start" link on the UI bar, at the bottom of the Start page is a link to the images that HTML needs.

Otherwise I'd need a better explanation of how you actually want the dialogues to appear and how/if you want to transition to other passages.

Hope that helps!  :-)