0 votes
by (350 points)
How do I make it so someone can just click the screen to make the story move forward when there's no choices to be made-- instead of having a link every time?

3 Answers

0 votes
by (180 points)
edited by
You can create a div with a link inside and make the div be 100% of the page. Note that Sugarcube translates all twine links to
<a class="link link-internal" data-passage="next" tabindex="0"></a>
But you can still use the twine [[Blank|Blank|]] links too.


Click on Me
<div class="mydiv">
<a class="link link-internal" data-passage="next" tabindex="0"></a>


div.mydiv {
        width: 100%;
        height: 100%;

div.mydiv a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */



0 votes
by (159k points)

If your story has many Passages where you want to include this feature then you could automate the process by using Javascript like the following which checks for a known special Passage Tag ('page-click'), and each time it encounters such a Passage it automatically monitors for a click event on the #story element of the page. It then uses the Passage Name stored in a known story variable ($nextPassage) to determine which Passage to transition to.

1. The following example should be placed within your project's Story Javascript area.

/* Each time a Passage gets rendered. */
$(document).on(':passagerender.page-click', function () {
	/* Check if the new current Passage has been assigned the special 'page-click' tag. */
	if (tags().includes('page-click')) {
		/* If so then listen for a click event on the #story element. */
		$('#story').one('click', function () {
			/* Once the click occurs determine the name of the next Passage to display. */
			var next = State.variables.nextPassage;
			/* And if the indicated next passage actually exists. */
			if (Story.has(next)) {
				/* Then transition to it. */

2. Assign all the Passages you want to be able to the new "Click page to transition" feature a page-click  Passage Tag, you will also need to add a <<set>> macro like the following to the same Passage to indicate the name of the Passage to transition to.

<<set $nextPassage to "Next">>

3. [optional but recommended] Assign a default (real/existing) Passage name to the $nextPassage story variable within your project's StoryInit special passage, this insures that Javascript in point 1 won't cause an error if you forget to do the <<set>> macro calls required in point 2.

/% Set the follow to the name of a Passage that actually exists in your project. %/
<<set $nextPassage to "Nowhere">>

Now comes the part that may require some customisation by you, because I don't know anything about the styling of your story.

background: The default CSS styling of a SugarCube 2 based project is setup so that the main HTML elements (html, body, #story, #passages & .passage) that make up the Main Passage area of the page use the minimum vertical (height) space as necessary.

This means that by default the clickable region of the main Passage area available to the Reader is limited to the area that the Passage's content uses. So if the content of the Passage fills the whole page then the Reader can click anywhere in the Main Passage area, but if that content is a single sentence that only takes up the first line of the area then by default that is where the Reader will need to click which isn't that acceptable.

To overcome this limitation you can use CSS within your projects Story Stylesheet area to increase the height of the #story element either:

1. only for the page-click tagged Passages like so:

html[data-tags="page-click"] #story {
	height: 100vh;

2. for the whole project like so:

#story {
	height: 100vh;

warning: Based on the styling requirements of your particular project, you may need to modify the value of the above height property, or even uses additional CSS rules.

+1 vote
by (44.7k points)
edited by

Put this in your JavaScript section:

$(document).on(':passagedisplay', function (ev) {
	if ($("#passages a").length === 1) {
			$("#passages a")[0].id = "NextLink";

$('#story').on('click', function (e) {
	if ($('#NextLink') && (time() > 200) && (!tags().includes("DisableClick"))) {

What that does is look at the passage to see if there is only one link.  If there is, it sets that link's ID to "NextLink".  Also, there is a trigger placed on the Story window, that when it is clicked, if a link named "NextLink" exists and the passage has been displayed for more than 200ms, then trigger that link.

If you have a button or some other element on the page which might be clicked, and you don't want it to go to the next passage in that case, just add "DisableClick" to that passage's tags.

If you have any problems with it skipping pages, just increase "(time() > 200)" to a larger number, like 300 (300ms = 0.3 seconds).

You still have to put a link somewhere, so it knows where to go, but the user can click anywhere to trigger it.  Generally speaking, it's probably a good idea to put a link anyways, so that they don't think that the story is at a dead end.

by (159k points)

I'm curious why you've setup the click event listener to permanently intercept all click events sent to any child element of the #story element, instead of only conditionally setting up a click event listener within your :passagedisplay event handler?
by (44.7k points)

Because that wouldn't work.

The "click" event carries over to the next passage. If I did it your way it wouldn't work, because the one() function would trigger immediately and then never trigger again in that passage. That's why I only let it trigger after a 200ms delay.

Also, it's not like it harms anything. It's not on mousemove or something like that which could eat up processor time a lot, since it only triggers on a click.

by (350 points)
Your response seems the most concise, so I'll upvote yours, in case anyone else needs help on this they can look at your response.

I cannot make heads or tails of anything anyone is saying in this thread, though. I am a beginner using Twine because I didn't want massive amounts of coding. I'm just a writer.

So I guess I'll have to make do with the continue links for now.

Thank you for trying to help!