Styled checkboxes and Sugarcube variables format

Authoring Twine
1

Hello everybody!
My name is Georg. I come from Austria and am a fairly inexperienced user.
I am currently building a quiz using Sugarcube. As a part of this, I had to make a multiple choice input piece using checkboxes which works as long as I use the standard ones from Sugarcube.
Now I wanted to style them and used CSS to make them look better. I found some code which I will adapt to my needs next.
However, the checking and unchecking works, but the system no longer registers that the variable is changing.
What am I doing wrong?

Here’s the code from the passage:

<label class="container">$antwort1 <input type="checkbox" id="$antwort1Wahl" name="$antwort1Wahl" value="1"> <span class="checkmark"></span> </label>

$antwort1 is the text that is displayed by the checkbox.
$antwort1Wahl is the variable that should switch between 0 and 1 when the box is activated.

The CSS-code used to style it came from here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

Thank you for your help!

1 Like
2

The reason why that doesn’t work is that standard HTML elements won’t set SugarCube variables like that.

You might want to take a look at the code for my <<checkboxPlus>> widget to see if that does what you want. (Click “Jump to Start” in the UI bar there to see a bunch of other Twine/SugarCube sample code you could use.) Once you’d added the widget and CSS code to your project, then you’d simply do this:

<<checkboxPlus "$antwort1Wahl" $antwort1>>

If you wanted the checkbox label to be styled differently, simply include a class name as a third parameter like this:

<<checkboxPlus "$antwort1Wahl" $antwort1 "checkboxTextStyle">>

The <<checkboxPlus>> widget uses true and false values, but you could tweak it to use 1 and 0 if you wanted to.

Hope that helps! :slight_smile:

1 Like
3

First of all, thank you for the quick answer. I’ll try to include this and make it work.

Second: If it does, should I credit you and how?

4

That’s up to you. You can just refer to me as “HiEv” and if you want to link to the sample code as well, I certainly wouldn’t mind. :wink:

1 Like
5

For completeness sake it should be noted that you can achieve the same result using SugarCube’s own <<checkbox>> macro combined with the CSS from the linked w3school example.

<label class="container">$antwort1 <<checkbox "$antwort1Wahl" 0 1>> <span class="checkmark"></span> </label>
1 Like
6

Thank you all very much. Greyelf’s hint helped a lot too.

You are amazing people!