Variables in html

Authoring Twine
1

Twine Version: 2.3.14
Story Format: Sugarcube 2.34.1

I have these links that disappear after a few second and play a css animation before they disappear:

CSS:

@keyframes qte{
  0% {color: #ff2108;}
  100% {color: black;}
}

In passage:

<span id="QTE"> 
	<a data-passage="Next Passage" style= "animation: qte 3s">This link disappears in 3 seconds!</a>
</span>
	
<<timed 3s>>
	<<replace "#QTE">>
		Ah you missed it.
	<</replace>>
<</timed>>
<<silently>>[[Next Passage]]<</silently>>

Right now I want to show many of these links in several passages. The text is the same, but the timing across different passages are different. For example, the first passage have “A” “B” “C” “D”, all 5 seconds long, then second passage these same links only lasts 3 seconds, and 1 second in the next passage.

Changing every link individually is kinda cumbersome, and there are quite a lot of passages that have them, so I thought of plugging in a temporary variable for each passage, but the problem is that I couldn’t figure out how to put it in the “style” part in <a>

I tried some examples online and here is what I have:

<<set _time = 3>>
	<span id="QTE">
		<<= '<a data-passage="Next Passage" style= "animation: qte +_time+s">This link disappear in 3 seconds </a>' >>
	</span>
<<timed _time+'s'>>
	<<replace "#QTE">>
		Ah you missed it
	<</replace>>
<</timed>>

It works in <<timed>> but not in <a>

Is there a way to use the temp variable like this or just a generally easier way to create these links? I’m still new to HTML.

2

You can use HTML Attribute Directive markup to dynamically assign the result of an expression as the value of the element’s style attribute.

<<set _time to "3s">>
<span id="QTE">
	<a data-passage="Next Passage" @style="'animation: qte ' + _time">This link disappear in 3 seconds </a>
</span>
<<timed _time>>
	<<replace "#QTE">>
		Ah you missed it
	<</replace>>
<</timed>>

In your first example you have a Markup based Link within a <<silently>> macro call, which causes the generated link to not be shown. Why are you doing that?

3

Thanks! It worked. Also thanks for your older posts on the Twine forum, they’ve helped me too.
I’m doing the <<silently>> thing so the twine editor would show the arrow to the passage linked in <a> Is there a better way to do that?

4

The “find link references” feature of the Twine 2.x application doesn’t know not to search comments, so you can use this behaviour to trick the Story Map into showing connection arrows when there are no actual Markup links within a Passage…
(untested SugarCube example)

Blah Blah content of a Passage....

/* [[Name of Target Passage]] */
5

Didn’t know you could do comments in the editor! Thanks a bunch.

6

Support for comment is story format specific, see the Comment section of the SugarCube documentation.