Implementing radio buttons on Chapbook

Authoring Twine
1

Twine Version: 2.10.0 app
Chapbook Version: 2.3.0

I’m trying to implement some simple radio buttons in my story, since drop-down menus are too much for something so simples as a YES/NO option.

I have this, tested and working OUT of Twine. On my script:

document.addEventListener('DOMContentLoaded', function() {
    var radios = document.getElementsByName('questopt');
    
    radios.forEach(function(radio) {
        radio.addEventListener('click', function() {
            myFunction(this.value);
        });
    });
});

function myFunction(questoption) {
    document.getElementById("questresult").value = questoption;
    var x = document.getElementById("questresult").value;
    document.getElementById("questtxt").innerHTML = x;
}

And the buttons:

<input type="radio" name="questopt" value="No">No<br>
<input type="radio" name="questopt" value="Yes">Yes<br>
<input type="text" id="questresult" readonly>

<p id="questtxt">Your option was?</p>

Nice, but it’s not working on Twine. I have tried putting the code inside the page with [JavaScript], and on the story JavaScript, and nothing.

Is there any way to make it work?

2

note: Chapbook’s {cycling link} insert can be used to implement binary choices like Yes / No.

warning: the following “radio button” solution makes use of Chapbook’s own variable binding behaviour when it comes to <input> elements. As the story format’s Developer could change how that behaviour works at any time, this solution could stop working in future releases of Chapbook.

If you use your web-browser’s Web Developer Tools to inspect the HTML generated by the {text input} insert you will see that it contains a custom <variable-binding> element.
eg. the following Passage content…

{text input for: 'colour'}

…generates the following HTML…

<variable-binding name="colour">
    <input type="text" value="" required="">
</variable-binding>

It is this <variable-binding> element that Chapbook’s runtime engine is using to both: track the <input> element’s change events; and to update the value of the associated variable. And because “radio buttons” are a type of <input> element, you can make use of the this behaviour.

If you change the Passage content part of your example to be…

<variable-binding name="questopt">
   <input type="radio" name="questopt" value="No">No<br>
   <input type="radio" name="questopt" value="Yes">Yes
</variable-binding>

…making sure that the name property of the <variable-binding> element is assigned the name of the target variable, then Chapbook will update that variable when either of those child “radio buttons” are selected.

note: the value assigned to the name property of the child <input> element has no affect on which variable is updated. but that value does control which group a specific “radio button” belongs to. So in the following example, the questopt variable will still be updated, even though the “radio button” elements belong to the apples group.

<variable-binding name="questopt">
   <input type="radio" name="apples" value="No">No<br>
   <input type="radio" name="apples" value="Yes">Yes
</variable-binding>
1 Like
3

I coded it along with the buttons and it worked as expected. It’s even better because I was going to create a var and give it the value, so it’s already done. Very useful, thank you.

(I’m not a big fan of cycling links, at least for this, because one option would be hidden)