Click and Replace Multiple Choices in One Passage

Question

Hello! I'm using Sugercube2 and I've been attempting to make a multiple-choice option that continues its result on the same passage, and removes the other links. I've been looking around, and I managed to do something like that? It works, though I'd like to implement more than just 2 choices. Is there an easier way to do this? Or how can I add to the code below that I can use a 3rd, or even a 4th choice? Thanks!

 

You have to say something. Either \
<span id="something">\
    <<click "say something">>\
        <<replace "#something">>say something <</replace>>\
        <<replace "#nothing">>say nothing.<</replace>>\
        <<replace "#output">>
       You have chosen to say something. He is amused.<</replace>>\
    <</click>> \
</span>\
or \
<span id="nothing">\
        <<click "say nothing">>\
        <<replace "#something">> say something<</replace>>\
        <<replace "#nothing">>say nothing.<</replace>>\
        <<replace "#output">>
       You have chosen to say nothing. He is not amused.<</replace>>\
    <</click>> \
</span>.\

<span id="output"></span>\

Answer 1

Here's a slightly simplified version of what you have now: 

You have to say something.  Either\
<<nobr>>
    <span id='options'>
        <<link 'say something'>>
            <<replace '#options'>>
                say something or say nothing.
            <</replace>>
            <<append '#options'>>
                <br><br>You have chosen to say something. He is amused.
            <</append>>
        <</link>>
        or
        <<link 'say nothing'>>
            <<replace '#options'>>
                say something or say nothing.
            <</replace>>
            <<append '#options'>>
                <br><br>You have chosen to say nothing. He is not amused.
            <</append>>
        <</link>>.
    </span>
<</nobr>>

Note the use of the <<link>> macro; the <<click>> macro has been deprecated for years at this point, so you should probably stop using it going forward.  

Anyway, here's a widget that will hopefully make things easier on you:

<<widget 'choiceLink'>>\
	<<nobr>>
		<<set _linkGroup to $args[0]>>
		<<set _linkText to $args[1]>>
		<<set _result to $args[2]>>
		
		<<link _linkText>>
			<<append _linkGroup>>
				<<- '\n\n' + _result>>
			<</append>>
			<<run $(_linkGroup + ' a').off().addClass('no-link')>>
		<</link>>
		
	<</nobr>>\
<</widget>>

This code deactivates the links, if you also want to make them not look like links anymore, add this to your CSS:

a.no-link {
  color: #eee;
  cursor: default;
}

a.no-link:hover {
  color: #eee;
  text-decoration: none;
}

To use the widget:

<<choiceLink '#element' 'link text' 'output text'>>

Using the above example:

You have to say something.  Either\
<<nobr>>
    <span id='options'>
        <<choiceLink '#options' 'say something' 'You have chosen to say something. He is amused.'>>
        or
        <<choiceLink '#options' 'say nothing' 'You have chosen to say nothing. He is not amused.'>>.
    </span>
<</nobr>>

The links must all be grouped into the same element, and if you have other links in there, they'll get broken, so you'll need to use the longer method for more complicated scenarios.  The output will get inserted two new-lines after the end of the given element. 

Comments

Thank you so much! I really appreciated your help, Chapel!!

---

The above choiceLink widget contains an error.

It references the _linkGroup and _result temporary variable within the <<link>> that it creates, but the actual value those variables isn't determined until after the link is selected. This results in the value of those variables always being equal to the parameters passed to last invocation of the choiceLink widget on the current Passage.

The <<link>> within the widget should be wrapped within a <<capture>> macro so that the correct values are used when the relevant link is selected.

<<widget 'choiceLink'>>\
	<<nobr>>
		<<set _linkGroup to $args[0]>>
		<<set _linkText to $args[1]>>
		<<set _result to $args[2]>>
		<<capture _linkGroup, _result>>
        	<<link _linkText>>
            	<<append _linkGroup>>
                	<<- '\n\n' + _result>>
            	<</append>>
            	<<run $(_linkGroup + ' a').off().addClass('no-link')>>
        	<</link>>
		<</capture>>
	<</nobr>>\
<</widget>>