Trouble with using timed macro inside click macro

Authoring Twine
1

Twine Version: 2.3.9
Story Format: Sugarcube 2.31.1

Okay, so, I am very new to Twine - this is my first story. I’m actually pretty new to coding, full stop. So please bear with me.

I’m trying to have it so that text is revealed within a passage after the player clicks a link. And then within that some of the text that’s revealed is delayed by a couple seconds. To accomplish that I’ve got:

<span id="output1"><<click "stopped.">> <<replace "#output1">> He went outside.<<timed 1.25s>>He ate an apple.<</timed>>
<</replace>><</click>></span>

So far, so good. The trouble is, I what the “apple” within that timed text to become the text the player can click for the next chunk of text to be revealed - and I want “apple” to be revealed on that timer.

So the below doesn’t work, but hopefully shows what I’m trying to do:

<span id="output1"><<click "stopped.">> <<replace "#output1">> She went outside.<<timed 1.25s>>She ate an 
<span id="output2"><<click "apple">><</timed>><<replace "#output2">>enormous red apple. <<timed 1.25s>>It was delicious.<</timed>>
<</replace>><</click>></span>
<</replace>><</click>></span>

The error that keeps popping up seems to me to be saying that it breaks the click & replace macros because it can’t find the /replace /click /span bit because the first /timed bit is getting in the way.

Is there another way to do this?

2

The problem is that you have HTML elements and macros crossing over top of each other, which just leads to broken code. To show you an example, this is a part of your code that’s broken:

<<timed 1.25s>>
	She ate an
	<span id="output2">
		<<click "apple">>
		<</timed>>
	<</click>>
</span>

Do you see how the <<timed>> macro starts outside of both the <span> and the <<click>>, but ends inside of them? Code can’t work properly when that happens.

I’d recommend writing your code using a standard indentation method, in order to prevent problems like that. To do that, anytime you have an element with “head” and “tail” parts, you should indent by one more TAB starting on the line after the “head” part, and then you should indent by one less TAB once you get to the “tail” part. This way you can easily make sure that both the “head” and “tail” parts of an element are aligned with each other.

Once we untangle your code and use indentation (along with backslashes “\” to prevent line breaks) we get this code:

<span id="output1">\
	<<link "stopped.">>\
		<<replace "#output1" t8n>>\
			She went outside.\
			<<timed 1.25s t8n>>\
				She ate an \
				<span id="output2">\
					<<link "apple.">>
						<<replace "#output2" t8n>>\
							enormous red apple.\
							<<timed 1.25s t8n>> \
								It was delicious.\
							<</timed>>\
						<</replace>>
					<</link>>\
				</span>\
			<</timed>>\
		<</replace>>
	<</link>>\
</span>

Note that I changed your use of the depreciated <<click>> macro to use the <<link>> macro instead.

Additionally, I added t8n to the <<replace>> and <<timed>> macros, so that the text fades in, rather than suddenly popping into view.

Also, if you don’t want to have to put in all of those backslashes like that, then you could either wrap all of that code within a <<nobr>> macro or add a “nobr” tag to the passage, and then just use the HTML <br> element to force line breaks where/if you need them.

Finally, you might want to run the published HTML code from your game through SugarValidator, since it will help you catch problems like that.

Hope that helps! :grinning:

4

Yeah, the tabbed formatting is really helpful with the nobr (I’m lazy so use that instead of slashing each line) for tracking opening and closing of the tags. I’ve generally used the nobr macro and it’s worked well for me. If you have heavily formatted pages, adding the tag to the passage will remove any breaks you have.

I hadn’t seen the SugarValidator before, that’s a great tool, thanks for sharing!

5

Thank you! Thank you! That worked a treat!

And I really appreciate the explanation and the link to SugarValidator.