Creating a Twine Link Using Javascript

Authoring Twine
1

Twine Version: Sugarcube 2.5.1

Sorry in advance if the post is confusing: I’m a Javascript newbie, and fairly new to Twine, and there’s still a lot I don’t understand about both.

I want to know how to modify an HTML element to replace it with a Twine passage link using Javascript. Here’s the “user interface” page I’ve set up in Twine, so you have some context for what I want to happen:

image
image1918×1045 124 KB

When you click a square on the map image, the click event calls a JS function to move you about the map. This function also changes some text on screen to reflect your changed location, by modifying the .innerHTML property of several DIV elements.

I want some of the text on the page – specifically, the text under the header “Patrol Report” – to display text that functions as a regular Twine passage link. However, I have no idea how to go about doing this. I tried copying and pasting the HTML code for a Twine hyperlink into the .innerHTML. This results in a hyperlink that’s styled properly, but when I click on it, it fails to redirect me to my desired passage (hence the orange text).

How do I go about achieving this? It seems like a solution would have something to do with the Wikifier function, but after trawling through the documentation and a few forum posts, I’m still confused I’m not sure how to use that.

An abbreviated version of the function is below. I’m not including the full code, because it’s long.

> function MoveMapLoc(MapLocation) {
>  
>      /*BLOCK 4 - Update Patrol Line*/
>        let PatrolLine = document.getElementById("PatrolLine");
>   
>   /* Check the value of the MapLocation variable*/
>   if (MapLocation == "Railyard") {
>     PatrolLine.innerHTML = "<a data-passage='Quest Interface' class='link-internal macro-link' role='link' tabindex='0'>Bells ring, people yell, and smoke rises. I watch a group of men hoisting crates of anonymous goods into the empty belly of a car. I walk towards them...</a>";}
1 Like
2

you can use data-passage to make the connection in your html code. Below is a link that might help you :slight_smile:

From the page:
<area shape="rect" data-passage="passage1" coords="6,13,216,285" />

1 Like
3

Thanks Manon! That is good to know and will be helpful to me. However, I want to know how to create a passage link in Javascript for text specifically, not the image map. When I click the image map, I don’t want it to take you to a new link, but to change some text on-screen, which will function as a Twine Passage link.

4

If the “text” you want to create a Passage Transition link for is processed by SugarCube’s Wikifier then you can use the same data-passage special attribute as the previous <area> element based example, except on an anchor <a> element.
eg. the following is taken from the special attribute documentation.

<a data-passage="PassageName">Do the thing</a>

If you really want to use JavaScript to clause a Passage Transition then you can use the Engine.play() function, which is what the <<link>> macro itself uses internally.

5

Okay, I’ll try this out. Thanks Greyelf.