Tap to reveal a new paragraph? Twine 2.3.8, Sugarcube 2.31.1

Authoring Twine
1

I’m a complete novice at Twine, so this will definitely sound like amateur hour lol

Is there any way I can possibly code the story so that I can reveal the text paragraph by paragraph with just a click? I found one way to reveal it by clicking a link, but every time I tested it the “<</linkreplace/>>” would stay onscreen and not be in the background like they were supposed to be. If its even possible in the first place, am I able to reveal the text with the tap of a key as well?

2
Story JavaScript 
function revealFirstHidden(ev) { 
	if(ev.target.nodeName === 'A') return
	const hidden = $('.passage .hide')
	if(hidden.length > 0) {
		let show = hidden.first()
		show.addClass('fadein')
		show.removeClass('hide')
		if(show[0].scrollIntoView)
			show[0].scrollIntoView({behavior: 'smooth', block: 'nearest'})
	}
}

const continueKeys = { " ": true, Enter: true }

$(document).ready(function() { 
	$('html').on('click', revealFirstHidden)
	$('html').on('keypress', function(ev) {
		if(continueKeys[ev.key] && !(ev.ctrlKey || ev.altKey || ev.shiftKey)) {
			revealFirstHidden(ev)
		}
	})
})
Story Stylesheet 
.hide { display: none; }
.fadein {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

Then wrap your paragraphs in:

@@.hide;
Paragraph here
@@

It will display the next paragraph on any click that’s not on an existing link, or if you hit the space or enter key. There might be other clicks it should rule out (buttons?) but for the most part it works pretty well.

1 Like
3

@JoshGrams - Your JavaScript is missing.

@kborb - You’ll need to put HTML elements and macros within a “preformatted text” marker using the </> button, otherwise this forum tends to eat the code. (See the code in your post.)

4

I never even noticed that until you told me lol
Thanks!

Also yeah @JoshGrams was there supposed to be any Javascript there?

5

Oh, man, I’m sorry about that. It was the first thing I put in the message: don’t know how I lost it. Edited back in now.

6

You still didn’t mark the code correctly.

You should type the code as normal in the editor, then select the code and hit the “preformatted text” button in the editor. Once you do that, then code like this <> will be properly displayed like this <<linkreplace>>. (The </> button is between the ” button and the upload button at the top of the editor window.)

7

ohhh i see ^^;

8

That was super helpful!

Total coding newb here as well, would you also tell us whether/how to add color modifiers along with the stuff-hidden-until-click thing? I want my characters to have different text colors for dialogue, which will be revealed with each click - so I also want to keep the current @@hide; thingy running.