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">
$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:
Thank you for your help!
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">>
<<checkboxPlus>> widget uses
false values, but you could tweak it to use
0 if you wanted to.
Hope that helps!
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?
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.
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>
Thank you all very much. Greyelf’s hint helped a lot too.
You are amazing people!