#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.

	/*
	The first thing we are doing here is to create a new
	display function, oldDisplay, as a reference to the
	the normal History.display function.

	(Note: History.display does most of the heavy lifting
	in Twine. When a link is clicked, it is what
	grabs the content of the passage from HTML and
	adds it to the screen as text.)
	*/
	History.prototype.oldDisplay = History.prototype.display;

	/*
	Once we have saved a reference to the History.display function,
	we can overwrite it like the following.
	*/
	History.prototype.display = function(name, source, type, callback) {

	/*
	We need to make sure the 'source' element is not null here.
	Because, when this is called for the Start passage, it will be.
	(Start doesn't have a 'source'; it isn't called
	by any other passage.)
	*/
	if(source != null) {

	/*
	Source is the element that did the calling.
	In other words, an 'a' element when the user clicks on it.
	By using its style property, we can change
	its CSS properties.
	*/
	source.style.color = "green";
	source.style.fontSize = "larger";
	}

	/*
	The final step is to call the oldDisplay within the same function
	scope as it would have normally run in before we interrupted the process.

	This is done using the 'apply' and 'this' keywords, telling the code
	to run from the current this (History.display) scope and to apply the same
	to History.oldDisplay using the same arguments passed to the current function scope.
	*/
	this.oldDisplay.apply(this, arguments);
	};

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.