Tap to show new paragraph? Sugarcube 2

Question

I'm new to this sort of thing so forgive me if this is a basic question - I couldn't find it anywhere on Google.

Basically what I want is to have one paragraph show up, and then when the user clicks, either anywhere on the screen or on a dedicated "continue" button, have a new paragraph show up below it. So it all stays in one passage and shows up in increments instead of all at once.

Kind of like the Seedship game intro.

I'm pretty new to all this coding stuff so a simple explanation would be appreciated. Thanks.

Answer 1

To make text appear paragraph by paragraph, you can use nested <<linkreplace>> macros:

First paragraph.

<<linkreplace "Continue" t8n>>\
	Second paragraph.

	<<linkreplace "Continue" t8n>>\
		Third paragraph.
	<</linkreplace>>\
<</linkreplace>>\

This might not work if you want the text to appear sentence-by-sentence within a paragraph and you want the continue link to be outside that paragraph. In that case you can have the text hidden with CSS and show is using javascript when the link is clicked.

The Seedship intro actually uses a combination of the two approached. Here's the full passage:

And when they knew the Earth was doomed, they built a ship.

<span id="fadein1" style="display:none">Less like an ark, more like a seed: dormant but with potential.</span>

<span id="fadein2" style="display:none">In its heart, a thousand colonists in frozen sleep, chosen and trained to start civilisation again on a new world.</span>

<br><br>

<<linkreplace $continue_text t8n>>
	<script>$("#fadein1").fadeIn();</script>
	<<linkreplace $continue_text t8n>>
		<script>$("#fadein2").fadeIn();</script>

		<<linkreplace $continue_text t8n>>
			To control the ship they created an artificial intelligence. Not human, but made to think and feel like one, because only something that thought and felt like a human could be entrusted with the future of the human race. Its task is momentous but simple: to evaluate each planet the ship encounters, and decide whether to keep searching, or end its journey there.

			<br><br>

			<<linkreplace $continue_text t8n>>
				The ship's solar sails propel it faster and faster into the darkness, and the AI listens as the transmissions from ground control fade and then cease. When all is quiet it enters hibernation to wait out the first stage of its long journey.

				<br><br>

				<<continueLink [[Intro 2]]>>
			<</linkreplace>>
		<</linkreplace>>
	<</linkreplace>>
<</linkreplace>>
<div class="skip-intro-link">
	<<link "Skip intro">>
	<<goto "Generate planet">>
<</link>>
</div>

I'm not sure how you'd get it to work with clicking anywhere on the screen rather than just on the continue link, but I expect it's possible.

Answer 2

Here is another answer which will let you tap anywhere on the screen to continue. It uses jQuery (built into Sugarcube 2) and some CSS.

$(document).click(function(e) {
	if($("span.continue-block").length) {
		$("span.continue-block").first().removeClass('continue-block');
	}
	e.stopPropagation();
	return false;
});

All that does is remove the "continue-block" class from the first found span when you click anywhere on the screen.

And for the CSS:

span.continue-block {
  display: none;
}

...which just hides each instance of span.continue-block.

Wrap each passage in a <span class="continue-block"></span> for this to work.

Comments

if($("span.continue-block")) 

 

This will always be true, since it will always return a jQuery object. If you want to see if the element(s) exist, use length: 

if($("span.continue-block").length)