0 votes
asked by (190 points)
Okay, so the title may have not been clear. Here goes.

I'm trying to put a list of six choices with radiobuttons, but where the number of choices made are limited to 2. So whatever the choices the player makes, they can never be over two. Even before they move on to the next passage. So they can change around until they decide, but only two are valid. Is that somehow possible?

 

I'd appreciate any help at all. And if I wasn't clear enough let me know.
Thanks

Sugarcube  2.21

1 Answer

0 votes
answered by (18.6k points)
edited by

Radiobuttons, by definition, only allow one option to be selected at a time.  If you want more than one to be selected at the same time you'll need to use checkboxes instead.

So, if your passage has something like this:

<input type="checkbox" id='cb1' class='chkGroup'> Check1
<input type="checkbox" id='cb2' class='chkGroup'> Check2
<input type="checkbox" id='cb3' class='chkGroup'> Check3
<input type="checkbox" id='cb4' class='chkGroup'> Check4

Then put this in your JavaScript:

$(document).on(':passagedisplay', function (ev) {
	var checks = document.querySelectorAll(".chkGroup");
	var max = 2;
	for (var i = 0; i < checks.length; i++) {
		checks[i].onclick = selectiveCheck;
	}
	function selectiveCheck (event) {
		var checkedChecks = document.querySelectorAll(".chkGroup:checked");
		if (checkedChecks.length >= max + 1)
			return false;
	}
});

That should prevent more than two checkboxes from being selected.

commented by (121k points)

One potential issue with placing the above solution's JavaScript example within the Story Javasscript area is that that will cause the searching for the associated .chkGroup CSS class to occur for every passage shown to the Reader, which is fine if most/all of those passages are to contain check-boxes.

If the check-boxes are only going to be shown on a single passage (or a limited number of them) then a better solution is to use a <<script>> macro within that passage to execute the following modified version of @HiEv's Javascript. So the final example would look something like the following.

<input type="checkbox" id='cb1' class='chkGroup'> Check1
<input type="checkbox" id='cb2' class='chkGroup'> Check2
<input type="checkbox" id='cb3' class='chkGroup'> Check3
<input type="checkbox" id='cb4' class='chkGroup'> Check4

<<script>>
$(document).one(':passagedisplay', function (ev) {
	var checks = document.querySelectorAll(".chkGroup");
	var max = 2;
	for (var i = 0; i < checks.length; i++) {
		checks[i].onclick = selectiveCheck;
	}
	function selectiveCheck (event) {
		var checkedChecks = document.querySelectorAll(".chkGroup:checked");
		if (checkedChecks.length >= max + 1)
			return false;
	}
});
<</script>>

warning: The original call to $(document).on() was replaced with a call to $(document).one() so that the related anonymous function is only executed a single time.

commented by (18.6k points)
Ah, thanks Greyelf.  Yes, that is a better way to do it.

Much appreciated.
commented by (190 points)
Thank you both for your help, this is precisely what I needed! this forum's awesome :)
commented by (190 points)
Just something else, if you don't mind. How would I call the answers from the checkboxes as variables in other passages? do the choices made become an array, or are they called out separately? ty so much
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...