Help showing text for different choices within the same passage

Authoring Twine
,
1

Twine Version:
[2.5.1.0]

I hate to ask for help again so soon, but I just can’t wrap my head around this one, and it seems like such a basic function but I can’t find anything for it.

What I would like:
To be able to replace or append text to a single passage depending on what you link you choose, while “deactivating” said link and updating variables on the ChapelR meter.

What the code currently does:
It replaces the text just fine (though I would like to be able to append it to the dialogue in the order that the links are clicked. Currently only able to have it show right after the link itself), and the stats do change the ChapelR meter once I go to a different passage (though it would be nice to have it update within this passage right when the links are clicked), but the if statements with the temporary variable to make the options “inactive” don’t work at all.

I’ve used the “inactive-link” css class in other, less complicated passages and it works just fine.

<span id="dialogue">What do you want to ask?</span>

<<if _who>>
	<span class="inactive-link">"Who"</span>
<<else>>
<<link '"Who?"'>>
	<<set $stat_a += .05>>
	<<replace "#dialogue">>
    <<set _who to true>>
	"Who?" you say.
	<</replace>>
<</link>>
<</if>>

<<if _what>>
	<span class="inactive-link">"What?"</span>
<<else>>
<<link '"What?"'>>
    <<set _what to true>>
	<<set $stat_a += .05>>
	<<replace "#dialogue">>
	"What?" you say.
	<</replace>>
<</link>>
<</if>>

<<if _where>>
	<span class="inactive-link">"Where?"</span>
<<else>>
<<link "Where?">>
    <<set _where to true>>
	<<set $stat_a += .05>>
	<<set $stat_b += .025>>
	<<replace "#dialogue">>
	"Where?" you ask.
	<</replace>>
<</link>>
<</if>>

[[Next Passage]]

I tried using capture, but I find it too confusing and it didn’t work anyway. I know I can do this all with multiple passages and global variables, but that would end up being a lot of both, seeing as this kind of thing would come up a lot.

Thank you for reading!

2

Using nested replace macros in a passage is tricky so I usually use story variables and refresh the page, displaying what has and hasn’t been clicked.
You can reuse this code for dialogue in your game just replace whatever is getting pushed into the $reply array with desired text. Note its best to use curly quote brackets to show speech dialogue or will have to escape them which isn’t always possible. When leaving the passage its wise to unset story variables which only are needed in this passage. You might want to made a widget and put all the unsets in there then just call it if you have many dialogue screens like this.

<<if $reply is undefined>>\
<<set $reply = []>>\
<</if>>\
<b>What do you want to ask?</b>
<<if  $reply is not undefined>>\ 
<<for _i =0;_i < $reply.length;_i++>>\
$reply[_i]<br>
<</for>>\
<</if>>\


<span class="who">\
<<if $option1clicked is not true>>\
<<link '"Who?"'>>
	<<set $stat_a += .05>>
	<<set $reply.push("“Who?” You say.")>>\ 
	<<set $option1clicked to true>>\
	<<script>>state.display(state.active.title, null)<</script>>
<</link>>
<<else>>\
<span class="inactive-link">Who?</span>
<</if>>\
</span>\

<span class="what">\
<<if $option2clicked is not true>>\
<<link '"What?"'>>
	<<set $stat_a += .05>>
	<<set $count += 1>>\
	<<set $reply.push("“What?” You say.")>>\ 
	<<set $option2clicked to true>>\
	<<script>>state.display(state.active.title, null)<</script>>
<</link>>
<<else>>\
<span class="inactive-link">What?</span>
<</if>>\
</span>\

<span class="where">\
<<if $option3clicked is not true>>\
<<link '"Where?"'>>
	<<set $stat_a += .05>>
	<<set $stat_b += .025>>
	<<set $reply.push("“Where?” You say.")>>\ 
	<<set $option3clicked to true>>\
	<<script>>state.display(state.active.title, null)<</script>>
<</link>>
<<else>>\
<span class="inactive-link">Where?</span>
<</if>>\
</span>\

<<link "Next Passage">>
<<unset $reply>>
<<unset $count>>
<<unset $option1clicked>>
<<unset $option2clicked>>
<<unset $option3clicked>>
<<goto "Next Passage">>
<</link>>
1 Like
3

I’m so sorry it took me so long to respond! I actually figured it out using js, and the result is pretty neat.

In the passage:

Welcome to the main passage.
<div id="output"></div>

<div id="links">
  <span class="link" data-append="Appended text for Option 1">Option 1</span>
  <span class="link" data-append="Appended text for Option 2">Option 2</span>
</div>

In javascript:

$(document).ready(function() {
  $('.link').click(function(event) {
    var appendText = $(this).attr('data-append');
    $('#output').append(appendText + '<br>');
    $(this).addClass('inactive-link');
    $(this).removeAttr('data-append');
    $(this).off('click');
  });
});

In CSS:

.link {
  color: blue; /* Active link color */
  cursor: pointer; /* Change cursor on hover */
}

.link.inactive-link {
  color: gray; /* Inactive link color */
  cursor: default; /* Reset cursor for inactive links */
  pointer-events: none; /* Disable pointer events for inactive links */
}


.link:hover {
  color: red; /* Change to the desired color on hover */
}

Hopefully this can be helpful for others.

4

Hmm… I missed this the first time around, but can’t you just do this?

<<linkappend "Option 1">><<append "#output">>Appended text for Option 1<</append>><</linkappend>>

For ease of use, you can put it into a widget like this:

<<widget "linkadd" container>><<linkappend _args[0]>><<append `_args[1] || ".passage"`>>_contents<</append>><</linkappend>><</widget>>

And use it with (these both append directly to the passage):

<<linkadd "try">>rhubarb rhubarb rhubarb<</linkadd>>
<<linkadd "test" ".passage">>hubbub hubbub hubbub<</linkadd>>
5

I just tried it, and the problem is it replaces the link instead of adding the text above all the links. Using <div id=> has been working to add text where I want it. Unless I missed something, in which case that’s on me.

While what I have above sorta works, I couldn’t change variables with it so I’m unfortunately back to square one.

6

Alright, unless there is something that hasn’t gone wrong in testing so far, this code works 100%

JS

$(document).ready(function() {
  $(document).on('click', '.link', function() {
    var linkId = $(this).attr('id');
    var appendText = $(this).attr('data-append');
    var variablesAttribute = $(this).attr('data-variables');

    $('#appendedText').append(appendText + '<br>');

    if (variablesAttribute) {
      var variableUpdates = variablesAttribute.split(';');
      for (var i = 0; i < variableUpdates.length; i++) {
        var variableData = variableUpdates[i].split(',');
        var variableToUpdate = variableData[0].trim();
        var newValue = parseFloat(variableData[1].trim());

        if (!isNaN(newValue) && state.active.variables[variableToUpdate] !== undefined) {
          state.active.variables[variableToUpdate] = newValue;
        }
      }
    }

    $(this).addClass('inactive-link');
    $(this).off('click');
  });
});

Passage

Welcome to the main passage.

<div id="output"></div>

<div id="appendedText"></div>

<a id="link1" 
class="link" 
data-append="Appended text for Option 1" 
data-variables="val1, 1">
Option 1
</a>
<br>

<a id="link2" 
class="link" 
data-append="Appended text for Option 2" 
data-variables="val1, 2; 
val2, 0.6">
Option 2
</a>
<br>

<a id="link3" 
class="link" 
data-append="Appended text for Option 3" 
data-variables="val1, 2; val2, 0.6">
Option 3
</a>
7

<<linkappend>> appends content to itself, <<append>> puts it somewhere else.

For a link that adds text somewhere else you want

<<link "Option 1">><<append "#output">>Appended text for Option 1<</append>><</link>>
8

Yes, but <<link>> continues to be a link after you click it. So I used <<linkappend>> to make a link that turns into plain text after you click it, and then put <<append>> inside to put the text somewhere else. You have to be careful that there’s no other text in the linkappend, but otherwise it works.

But the OP has a javascript solution that they’re happy with, so I didn’t bother discussing it further…