Context-sensitive dialouge options and executing Javascript on clicking Twine links

Authoring Twine
1

Hello everyone!

I have just started using Twine 2 and after some initial experimentation I started my first story in the the story format Snowman 2.0.2.

My question is this: In multiple parts of my story the player revisits the same passages over and over, but with more information than before. I want to hide dialouge options which contain information the player already knows. Sometimes the initial paragraph of the passage may also change depending on where the player comes from.

So far I have been doing that by setting flags after a specific dialouge option was clicked, check them again later on and hide the corresponding option, like so:

<% if (!s.homeKnowledge) { %> 3. \> [[So this home you are talking about is the earth?]] <% } else { %><br><% } %>

This works, but I was wondering whether there are any better or easier ways to do context-sensitive dialouge options?

Similarly, when a player enters a paragraph through different options, like being very pushy or being very understanding, the NPC dialouge will slightly change. I’m also using this to adjust for dialouge that is differently formulated but leads to the same passage. A minor example:

<% if (s.pushy) { %>\> No, sorry. I don't think I can do that. <% } else { %>\> I can't tell you that.<% } %>

So far to do the latter, I have used Javascript to set a flag, when the player is clicking the link for the according dialouge option. However, to do that I have had to use html links in the passages to execute the javascript and then manually jump to a passage with window.story.show(). This works fine, but has the caveat that the connections aren’t shown anymore in the story graph. Is there any way to execute Javascript when clicking on one of the Twine links, the ones in the double square brackets? They don’t have id’s or similar, so I don’t know how to do that.

Thank you for your suggestions!

2

I don’t know much about Snowman, but I do have a trick/hack to help you with the link connection issue.

If you wrap a double square bracket link in an HTML comment, it won’t display in your game but the editor will still see it and draw a connection to the appropriate passage. So you can do your javascript redirect, but have a line that forces the passage connection in the editor.

<!-- [[Passage to Link]] -->

This trick seems to work for all story formats.

3

As you have discovered Snowman doesn’t have the equivalent of a Link with Setter (aka a Setter Link), so you will need to implement your own. You have already found one way to do this, the following example demonstrates another using JavaScript and jQuery.

<% s.variable = 0 %>

<span id="continue">[[Continue|Second]]</span>
<script>
	$('#continue a').one('click', function () { story.state.variable = 1; })
</script>

The above uses:

  1. an ID’ed <span> element to associate an identifier with the markup based link.
  2. a <script> element to delay the execution of the JavaScript until after the <span> and link exists.
  3. the jQuery one() function to associate a single use ‘click’ handler with the link.
  4. the Snowman global story object to access the story’s state collection.
1 Like
4

This is much more sleek and simpler than what I currently have. Exactly what I was looking, thank you very much!