Two choices in list of radiobuttons

Question

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

Answer 1

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.

Comments

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.

---

Ah, thanks Greyelf.  Yes, that is a better way to do it.

Much appreciated.

---

Thank you both for your help, this is precisely what I needed! this forum's awesome :)

---

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