How to display the results from a checkbox list(sugercube2)[Solved]

Authoring Twine
1

This is a list of Traits the player can choose from below, I’m not sure how to go about displaying the selected traits from this list on a separate passage.

<input type="checkbox" id="$stdy" value="Sturdy" class="chkGroup"> Sturdy
<input type="checkbox" id="$hkeye" value="Hawkeye" class="chkGroup"> Hawkeye
<input type="checkbox" id="$ufg" value="Unflinchable" class="chkGroup"> Unflinchable
<input type="checkbox" id="$dkpf" value="Drunk Proof" class="chkGroup"> Drunk Proof
<input type="checkbox" id="$lif" value="Light Footed" class="chkGroup"> Light Footed
<input type="checkbox" id="$spsk" value="Slippery Skin" class="chkGroup"> Slippery Skin
<input type="checkbox" id="$ttn" value="Tactician" class="chkGroup"> Tactician
<input type="checkbox" id="$lpfl" value="Low Profile" class="chkGroup"> Low Profile
<input type="checkbox" id="$dsma" value="Disarming Alure" class="chkGroup"> Disarmming Alure
<input type="checkbox" id="$ctcw" value="Cat Claws" class="chkGroup"> Cat Claws
<input type="checkbox" id="$fsth" value="Fast Healer" class="chkGroup"> Fast Healer
<input type="checkbox" id="$sdch" value="Second Chance" class="chkGroup"> Second Chance

although I do have a way to limit how many checkboxes the player can check off. so I don’t need much help on this part.

<<script>>
$(document).one(':passagerender', function (ev) {
	function selectiveCheck (event) {
		var i, checkedChecks = document.querySelectorAll(".chkGroup:checked");
		$("#result").empty();
		for (i = 0; i < checkedChecks.length; i++) {
			if (checkedChecks.length < max + 1) {
				$("#result").wiki($(checkedChecks[i]).attr("value") + " ");
			} else if (event.target != checkedChecks[i]) {
				$("#result").wiki($(checkedChecks[i]).attr("value") + " ");
			}
		}
		if (checkedChecks.length >= max + 1)
			return false;
	}

	var checks = $(ev.content).find(".chkGroup");
	var max = 6;
	for (var i = 0; i < checks.length; i++) {
		checks[i].onclick = selectiveCheck;
	}
});
<</script>>

anyway, thanks in advance :smiley:

2

When working with the <<script>> macro in SugarCube 2, you have access to the State global variable. Through it, you can access its variables object and thus other variables. In other words, $traitList is, from a pure JavaScript view, actually State.variables.traitList.

Looking at your existing code, it could be changed to the following:

$(document).one(':passagerender', function (ev) {
	// Set initial state of trait list to empty array
	State.variables.traitList = [];
	
	function selectiveCheck (event) {
		
		var i, checkedChecks = document.querySelectorAll(".chkGroup:checked");
		
		$("#result").empty();
		// Reset array listing
		State.variables.traitList = [];
		
		for (i = 0; i < checkedChecks.length; i++) {
			if (checkedChecks.length < max + 1) {
				$("#result").wiki($(checkedChecks[i]).attr("value") + " ");
				// Push new trait
				State.variables.traitList.push($(checkedChecks[i]).attr("value"));
			} else if (event.target != checkedChecks[i]) {
				$("#result").wiki($(checkedChecks[i]).attr("value") + " ");
				// Push new trait
				State.variables.traitList.push($(checkedChecks[i]).attr("value"));
			}
		}
		
		if (checkedChecks.length >= max + 1) {
			return false;
		}
		
	}

	var checks = $(ev.content).find(".chkGroup");
	var max = 6;
	for (var i = 0; i < checks.length; i++) {
		checks[i].onclick = selectiveCheck;
	}	
});

Now, every time the internal for loop iterates through elements with the “:checked” property, it is also making a new array of traits. With every click of elements with a class of “.chkGroup”, a new array is re-created.

With the knowledge that State.variables.traitList is $traitList, you can access the variable either by its JavaScript name within another <<script>> macro usage or its variable name ($traitList) in another passage.

3

Thanks a bunch dude, that helped out a lot :smiley: