Self-removing linkreplace for interactive options and hiding them when not needed?

Question

So, what I'm trying to accomplish is having two options that are hidden by an if statement until something in the passage reveals them, then when one option is selected, it hides the other.  I've got the hiding until needed portion working, and I've got the removal of the unselected portion working, they just don't work together.

Bear in mind, I had not heard of Twine before three days ago, and the last coding I did was in QBasic on Windows 3.1 and 95.  So... yea.

This is essentially what I have to hide the options if there is no KD. (forgive my formatting, or lack thereof)

Useless flair included for context.

You <<set _lid to either("on", "off")>>\
	<<if _lid == "on">>\
		<<print "take the lid off of the pot,">>\
	<</if>>\
fill the pot with water, and set the pot on the stove.  You turn the stove on, and bring the water to a boil.  \
	<<set _kd to either("yes", "no")>>\
	<<if _kd == "no">>\
		<<print "As you">>\
		<<else>>\
		<<print "You">>\
	<</if>>\
reach in the cupboard for the KD, \
	<<if _kd == "no">>\
		<<print "your hand finds nothing.  Somebody cooked it all and didn't buy more.">>
<<linkreplace "Cook something else?" >>
You walk over to the freezer and pull out some frozen perogies.<</linkreplace>>
<<linkreplace "Angrily pour the water down the drain.">>
Whoever ate the last of the Kraft Dinner will pay dearly!<</linkreplace>>
<<else>><<print "grab a box, and pour it into the water.">><</if>>

The method to remove the other unselected option, makes use of this.  But it seems that DIV ID and SPAN ID can't be hidden by IF statements.  So is there a way to pull this off , or am I grasping at straws.  It's easy enough to just have each option link to a new passage, but I was trying to have each passage be it's own scene.

I'm crazy, aren't I?

DeadlyWhatever

Answer 1

I don't know what you tried, since you didn't show that, however, <div> and <span> elements most certainly can be hidden by <<if>> macros—it's not even a matter of being hidden, the "losing" paths simply aren't rendered.

Other issues:

1. Don't use strings, or numbers, in place of booleans when you clearly want booleans.
2. Using the print macro to output static text is utterly pointless.

 

Try something like the following:

<<silently>>
	<<set _lid to either(true, false)>>
	<<set _kd to either(true, false)>>
<</silently>>
\You <<if _lid>>take the lid off of the pot,<</if>> fill the pot with water, and set the pot on the stove.
\ You turn the stove on, and bring the water to a boil.
\ <<if not _kd>>As you<<else>>You<</if>> reach in the cupboard for the KD,
\ <<if not _kd>>
	\your hand finds nothing.  Somebody cooked it all and didn't buy more.

	<div id="no-kd-choices">
	\<<link "Cook something else?">>
		<<replace "#no-kd-choices">>You walk over to the freezer and pull out some frozen perogies.<</replace>>
	<</link>>
	<<link "Angrily pour the water down the drain.">>
		<<replace "#no-kd-choices">>Whoever ate the last of the Kraft Dinner will pay dearly!<</replace>>
	<</link>>
	\</div>
<<else>>
\grab a box, and pour it into the water.
<</if>>

 

Comments

So I was just crazy.  This works perfectly, thank you!  The problem that I was running into was clearly just me butchering the <div id> code when I tried to splice it in.  It would cut off any code below it including the <<else>> and <</if>>.  I learn best by doing, so I retyped everything you wrote, as is.

After seeing your work, I realized that my formatting is atrocious and is probably why I run into as many problems as I do, though this is the first I had to get help with.  The <<print>> comes from my experience with QBasic where it was required.  I'll rewrite all the code I have so far, cutting out the <<print>>'s and reformatting it as I do, to really commit it to memory.

Thanks again,

DeadlyWhatever

Answer 2

edit: I see TME has also supplied an answer.

1. You can use Custom Styles to assign an ID to an area of text and then used the <<replace>> macro to alter the contents of that ID'ed area.

The quick brown @@#jumper;fox@@ jumps over the lazy dog.

<<link "Change the jumper">>\
	<<replace "#jumper">>cat<</replace>>\
<</link>>

2. You can use a similar technique to reveal text that was hidden using CSS like so:

a. Add CSS like the following to your Story Stylesheet area to create a CSS hidden class.

.hidden {
	display: none;
}

b. Use Custom Styles to assign the relevant text an ID and to assign that same text with the new hidden CSS class. Use the <<removeclass>> macro to remove the hidden class from the ID'ed text.

The quick brown fox jumps over the lazy dog@@#reaction;.hidden;, who then got up and chased it@@.

<<link "Show the dog's reaction">>\
	<<removeclass "#reaction" "hidden">>\
<</link>>

3. The <<addclass>> macro can be used to add the hidden class to ID'ed text.

The quick brown fox jumps over the lazy dog@@#reaction;, who then got up and chased it@@.

<<link "Hide the dog's reaction">>\
	<<addclass "#reaction" "hidden">>\
<</link>>

 

Comments

Thank you for responding.  TheMadExile has solved the issue I was having, but I wrote these into a test piece of story, and I can see many future uses for these.  Especially the <<addclass>>, so thank you for bringing it to my attention.  I know almost nothing of CSS, HTML, and JavaScript, but am always eager to learn.

DeadlyWhatever