Hello, I’m new to the site and a beginner on Twine. I searched the forum but couldn’t find an exact answer to my question:
I want the choice of clicking this or that radiobutton to make different sentences appear in the same passage.
For example, with the famous Pie example :
If the choice is to tick blueberry, the sentence “Well done, it’s my favourite too!” is displayed
If the choice is cherry or coconut cream, the sentence “Not bad, but I prefer blueberry!” is displayed.
I’ve seen the solution with the “Check answer” button but I’d like the simple fact of choosing a box to trigger the action.
Because of how the <<radiobutton>> macro is set up, it is a bit complicated to have extra text popup on the page when clicking on an option (compared to other interactive macros like <<link>> or <<button>>
To do this, you will need to use an event listener to do so: aka have some JavaScript code check if there are any changes on the page from player interaction.
There is however a neat Custom macro by Maliface that doesn’t require you to mess with JavaScript and custom event listeners.
Thanks for your help, Manon, but I’m afraid it’s a bit too complicated for me. I thought there would be a simple solution, internal to Sugarcube. Would my idea be feasible using buttons rather than checkboxes?
if you click button 1 → the sentence A appears
if you click button 2 → sentence B appears
etc
The code you propose doesn’t seem to work, unfortunately.
I’ve found this code (on this forum or on another one, I don’t remember), which works in combining radiobuttons + a button.
<<button "Click">>
<<set $pie to "blueberry">>
<<replace "#blueberry">>Well done, it’s my favourite too!<</replace>>
<</button>> Blueberry <span id="blueberry"></span>
Essentially both this code and the one involving a “check your answer” button, uses the <<replace>>macro - a macro that will replace the content of an element that you defined on the page (in the example above, it’s <span id="blueberry"></span>, in the one your provide, it’s @@#result;@@).
Note: @@ is the same as <span>, see the documentation.
(May I suggest this guide for SugarCube too it might help to get how SugarCube works in general)
Thanks A LOT, Manon.
I’ll definitely will dive into your guide. The only one I knew is the “official” one, on motoslave net, which I find not very educational for beginners.
The one on motoslave is a documentation, which is technically different from a guide.
A documentation for a program will be technical, telling as is what code does, using technical terms to each element. It may include warnings for users (like don't ever use this, this is in the code because otherwise it won't work, but don't use it!).
On the other hand, a guide will explain things in plainer terms (potentially being not technically correct for the sake of understanding), often have more examples (plain or interactive).
When you get the hangs of the basic terms, the documentation is the place to go to look up stuff
If you want to use event listeners, you can do it like this:
What's my favourite pie?
* <label><<radiobutton "$pie" "blueberry" autocheck>> Blueberry?</label>
* <label><<radiobutton "$pie" "cherry" autocheck>> Cherry?</label>
* <label><<radiobutton "$pie" "coconut cream" autocheck>> Coconut cream?</label>
<span id="response"></span>
<<done>>
<<script>>
$("#radiobutton-pie-0").on("click", function (event) {
$("#response").text("Well done, it’s my favourite too!");
});
$("#radiobutton-pie-1").on("click", function (event) {
$("#response").text("Not bad, but I prefer blueberry!");
});
$("#radiobutton-pie-2").on("click", function (event) {
$("#response").text("Not bad, but I prefer blueberry!");
});
<</script>>
<</done>>
Those "#radiobutton-pie-0", "#radiobutton-pie-1" and so on are the ids of the radiobutton elements. You can find what they are by right-clicking on the radiobutton and selecting “inspect element”. You’ll see something like this:
Thanks a lot too @svlin
That’s exactly what I was looking for !
I guess this is some java script and not only sugarcube?
I’ll use it for my project, but will definitely have a look at the guides that @manonamora mentionned.
I’m glad it helped! For the record, I didn’t mention it in my reply since I didn’t want to complicate matters, but if you want one button to give one unique message and all the others to give the same message, you can use this instead, which will save you the trouble of copy-pasting the same text multiple times:
<<done>>
<<script>>
$("#radiobutton-pie-0").on("click", function (event) {
$("#pie").text("Well done, it’s my favourite too!");
});
$("input[name='radiobutton-pie'][id!='radiobutton-pie-0']").on("click", function (event) {
$("#pie").text("Not bad, but I prefer blueberry!");
});
<</script>>
<</done>>
it might help to get how SugarCube works in general)