[Sugarcube] Easiest way to set link target based on Javascript variable

OpaOpa

Hello,

This is a pretty basic question, but I've been struggling to come up with a clean answer to it. If I have the title of a passage I'd like to link the player to in Javascript, is there an easy way of building a link to that passage? I know enough jQuery to potentially grab the anchor element and manually alter its data-passage attribute, but it seems like there has to be an easier way.

For example, given a passage which starts with this:

<<script>>
var nextPassage = state.peek(10).title;  
<</script>>

...is there an easy way to generate a link that sends the user to the passage they visited 10 steps ago? I was hoping it would be as easy as this:

[[Step into the time machine|$nextPassage]]

...but it seems it's not quite that simple. Again, I have enough jQuery under my belt to grab elements and alter them (and if I were just trying to spit out some text, that's what I'd do: define a <div> in the passage and then, after setting nextPassage, use jQuery to grab the div and insert the appropriate text), but I assume there's a simpler way.

Thank you!

OpaOpa

Well, in trying to find the answer to another question, I ended up tripping over my answer to this one. I had been assuming that state.active.variables should be kept read-only! With that as a link between the JS and the passage text, dropping this into the passage works perfectly:

<<script>>
var backTen = state.peek(10).title;
state.active.variables["backTen"]=backTen;
<</script>>

The time machine's destination is set to $backTen.

<<link "Step into the time machine" $backTen>>

The one thing I wanted to mention is that the link-creation markup version of this didn't work for me, I had to use the link macro. Specifically, using this:

[[Travel back in time|$backTen]]

...linked to a new passage called "$backTen", instead of evaluating $backTen as a variable. The SugarCube documentation says you can use variable names in the link markup, so I'm not sure why this didn't work for me.

I don't know why I can only find the answers to my questions after I post them. Hopefully this helps someone else!

TheMadExile

You don't need to bother with a separate story $variable in the first place. You can simply do the following:

[[Step into the time machine|state.peek(10).title]]

However, if you absolutely wanted to use a $nextPassage variable for some reason, then you could accomplish that like so:

<<set $nextPassage to state.peek(10).title>>\
[[Step into the time machine|$nextPassage]]

Still, I'd advise against creating unnecessary story $variables.

OpaOpa

TheMadExile wrote: »

You don't need to bother with a separate story $variable in the first place. You can simply do the following:

[[Step into the time machine|state.peek(10).title]]

However, if you absolutely wanted to use a $nextPassage variable for some reason, then you could accomplish that like so:

<<set $nextPassage to state.peek(10).title>>\
[[Step into the time machine|$nextPassage]]

Still, I'd advise against creating unnecessary story $variables.

And that's even easier than I what I found. I didn't realize you could invoke Javascript quite so easily.

Thank you!

edit: Ah, I actually just tried those both, and neither worked for me. This is using the Twine 2 web tool, version 2.0.8. This:

[[Step into the time machine|state.peek(10).title]]

...creates a link to a passage called "state.peek(10).title", while this:

<<set $nextPassage to state.peek(10).title>>
[[Step into the time machine|$nextPassage]]

...first throws an error because "state" is undefined, then creates a link to a passage called "$nextPassage". Is this the result of a difference in versions?

greyelf

Both the Auto Create New Passage and Autocomplete Link Target Passage features of Twine 2 only support basic markup links. This is why it is creating those new passages with invalid names like state.peek(10).title and $nextPassage.

You will need to edit each of the new passages with invalid names and rename them.