#TwineTuesday: Highlighting clicked links in the Jonah story format

It’s a common issue in Twine 1.4 when using the Jonah story format. You have different links that connect to passages and, when they are clicked, they load underneath the source passage. This is all well and good. However, how does a player know, outside of the StoryTitle of a passage itself, what they just clicked on? After the source passage is dimmed, how would a player know which of possibly many links across several different passages they just clicked?

In other words, is there a way of highlighting which link was clicked specifically?

The answer to this is surprisingly complex. Because passages are loaded dynamically and players don’t generally leave and come back to the Twine page itself, CSS rules are not quite up to the task. And with each new click, the current passage is updated. This means players are mutating the story as they play and making it their own. However, it also means links cannot be ‘visited’ because the links themselves are fresh with each new click too.

The problem looks like this in practice.


In the above image, both the Start passage content and the two links within it, “Passage1” and “Passage2”, are dimmed. The content of the passage “Passage1” is shown to have loaded underneath the Start passage and thus, it can be assumed, it was the latest link clicked on by a player. However, disregarding the StoryTitle “Passage1” showing, how would a player know which link of the two within the Start passage were clicked?

One solution to this is to change how links are rendered after each click.

view raw visitedLinks.js hosted with ❤ by GitHub

(To use this, copy the above code into a script passage.)

By interrupting the History.display function, we can tell it to change the styles of links clicked: the ‘source’ of each call to the function. That way, they are changed from whatever was the default, usually dimmed with the other content, into something new. In this example, that is a slightly larger font size and the text in the color green.


However, that is not all we can do using this technique. Because it is often useful to stop a player from backtracking through the story too much, we might want to ‘erase’ a link from a passage after they click it too. We can do that easily using this same code with only changing two lines.

Removing lines 33 and 34, we can replace them with the following: “source.style.display = ‘none’;” Now, any link clicked on will have its display property set to ‘none’. It will be removed from the layout of the page and rendered invisible to the player by the browser itself.


By changing the ‘source’ element’s CSS properties, we can highlight it through any number of ways. We can make it bigger, smaller, manipulate its color, or remove it completely if we want. We can even, if the CSS class already exists, change many different things in one go through changing ‘source.className’ as well. It all depends on the author’s wants and how she is planning to present her story to others.