Make entire clickable in Sugarcube

FIF

Hello,
I'm quickly falling in love with Sugarcube. My game looks 100x better already.

Here's a few more questions...

1. How do I make a <li> element (which has a list of radio buttons) clickable?

radiobutton {
	border: solid #000060 0.09em;
  white-space: 0.3em;
	padding: .45em 0.45em 0.45em 0.45em;  
	border-radius: 0 em;
  color:#ffffff;
	background-color:black;
	font-family: "Arial Black", "Gadget", sans-serif;
}

and

<ul>
<li><<radiobutton "$job" "1" checked>> 1</li>

<li><<radiobutton "$job" ""2"">> 2</li>

<li><<radiobutton "$job" "3">> 3</li>

</ul>

<<button "Choose my job" "Job Path">><</button>>

is my current code. I've tried a display: block but that didn't work. Any advice on this one?

TheMadExile

You cannot make the <li> clickable in any way which will also affect the radiobutton, which is what I assume you're looking to do—short of using JavaScript simply to prove that it can be brute forced.

What you actually want to do is to use a <label> element—which is better for accessibility anyway. For example:

<ul class="radiolist">
<li><label><<radiobutton "$job" "1" checked>> 1</label></li>
<li><label><<radiobutton "$job" "2">> 2</label></li>
<li><label><<radiobutton "$job" "3">> 3</label></li>
</ul>
<<button "Choose my job" "Job Path">><</button>>

And the CSS:

ul.radiolist label {
	display: block;
	color: #fff;
	background-color: #000;
	border: 0.09em solid #000060;
	font-family: "Arial Black", "Gadget", sans-serif;
	margin: 0.3em;
	padding: 0.45em;
}

You may need to tweak the style, of course, but that should put you on the right track.


Additionally. If you wanted to get rid of the list-styling on the <ul>, simply add something like the following before the other rule.

ul.radiolist {
	list-style: none;
	margin: 0;
	padding: 0;
}

PS: You had too many quotes around the 2 in your original <<radiobutton "$job" ""2"">>. Do not double up your quotes like that. Something to keep an eye on.

PPS: Your original CSS had several syntax errors, which were causing parts of it to be ignored. Something else to keep an eye on.

FIF

Le-sigh. Thanks for your help. You rock. I'll try that. More questions to follow.

DairynGM

I am also falling in love with SugarCube. :P

FIF

DairynGM wrote: »

I am also falling in love with SugarCube. :P

But changing over is NOT easy.

DairynGM

I know. But so far, at least for me, I'm finding for every step I take backwards to make a change, I realize I can take two steps forward in making the whole game look or function nicer.

Just today, it's been adding auto-reading text with a player-changeable delay variable, a way better sidebar than the one I'd thrown together, and easier implementation of passage-specific backgrounds.

...And, y'know, I would have settled for just a save-to-file function.

FIF

DairynGM wrote: »

I know. But so far, at least for me, I'm finding for every step I take backwards to make a change, I realize I can take two steps forward in making the whole game look or function nicer.

Just today, it's been adding auto-reading text with a player-changeable delay variable, a way better sidebar than the one I'd thrown together, and easier implementation of passage-specific backgrounds.

...And, y'know, I would have settled for just a save-to-file function.

For me I was able to add more in the sidebar (like a picture) which is sweet. There is so much more I can do with it, but I'll save what I have in mind for the next game. Didn't know about the backgrounds. Thank you!

Enjoy buddy!