Creating a button, by clicking a button, without leaving passage | Sugarcube 2.31.1

Authoring Twine
1

Very close to having a fun and seamless branching dialog system down in my twine game, one of my last hurdles is:
How can I say click a button that says “How long have you lived here?” and after I click that, not only does the text box switch text without leaving the passage(which this code already does), but creates a new button that says ‘What did you do back then?’
Using chapel’s custom speechbox macro if anyone is curious.

This is my code so far.

<span id = "cap_name"><<SeaCaptain>>Like what?<</SeaCaptain>></span>\

<div class="btn-group">
	<div class="container">
		<<button 'Whats your name?'>>\
		  <<replace '#cap_name'>>\
		  	<<SeaCaptain>>Enoch. Pleased to meet ya'.<</SeaCaptain>>\
		  <</replace>>\
		<</button>>\
		\
		  <<button 'Do you live in Drogg Harbor?'>>
		    <<replace '#cap_name'>>\
		  	  <<SeaCaptain>>Ay. Since I was a boy.<</SeaCaptain>>\
		    <</replace>>
		    <<$set $backThen to true>>\
		<</button>>\
		\
		  <<button 'What did you do there back then?'>>
		    <<replace '#cap_name'>>\
		  	  <<SeaCaptain>>Fished with me father. Ran up and down the cover all summer, and sat at the lighthouse watching storms all winter. Back then it was ... peaceful.<</SeaCaptain>>\
		    <</replace>>
		  <</button>>\
		<</if>>\
			<<button 'I had other questions''Captain dialog'>>
		<</button>>\

	</div>\
</div>
2

You can just make a “hidden” button and then reveal it using a little jQuery (which is included with SugarCube). For example:

<span id="cap_name"><<SeaCaptain>>Like what?<</SeaCaptain>></span>\

<div class="btn-group">
	<div class="container">
		<<button 'What\'s your name?'>>
			<<replace '#cap_name'>>\
				<<SeaCaptain>>Enoch. Pleased to meet ya'.<</SeaCaptain>>\
			<</replace>>
		<</button>>
		<<button 'Do you live in Drogg Harbor?'>>
			<<replace '#cap_name'>>\
				<<SeaCaptain>>Ay. Since I was a boy.<</SeaCaptain>>\
			<</replace>>
			<<$set $backThen to true>>
		<</button>>
		<<button 'How long have you lived here?'>>
			<<replace '#cap_name'>>\
				<<SeaCaptain>> ... text goes here ... <</SeaCaptain>>\
			<</replace>>
			<<run $('#hidbtn').css('display', 'initial')>>
		<</button>>
		<span id="hidbtn" style="display: none">\
			<<button 'What did you do there back then?'>>
				<<replace '#cap_name'>>\
					<<SeaCaptain>>Fished with me father. Ran up and down the cover all summer, and sat at the lighthouse watching storms all winter. Back then it was ... peaceful.<</SeaCaptain>>\
				<</replace>>
			<</button>>
		</span>\
		<<button 'I had other questions''Captain dialog'>>
		<</button>>
	</div>\
</div>

So, the hidden button is within the “hidbtn” <span> element, and it’s hidden using style="display: none". Then, when you want to make it visible, you just use the jQuery .css() method to change the style attribute of that element to “display: initial”. (I also cleaned up your indentation a little, removed some unnecessary \s, and changed “Whats” to “What\'s” so the apostrophe will be there.)

Just let me know if you have any questions on how any of that works.

Enjoy! :slight_smile:

1 Like