I want all player choices to be radio buttons, so that the player would have to press a "submit" or "continue" button every single time s/he makes a choice. Let's say we have this:

[[set_gender]]:

What is your gender?

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br><br>
<input type="submit" value="Submit">
</form>

... which gives us this:

From what I've read online, inside the </form/> there needs to be a certain action="URL", but since I'm quite new to this, I'm confused as to what I should do next. How do I tell Squiffy that a radio button has a certain consequence?

Thanks.

You should not use "form" tag and "submit" button.
You should insert some javascript codes(see my codes).

[[set_gender]]:
    setTimeout(function(){
        $("#genderSelect").click(function(){
            set("gender",$(":radio[name='gender']:checked").val());
            $("#genderSelect").attr('disabled',true);
            squiffy.story.go("result");
	    });
    },10);

What is your gender?

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br><br>
<button id="genderSelect">done</button>

[[result]]:
You are {gender}.

Thank you very much!

What if I want the player to choose from a list of locations? For example, one radio button goes to [[room1]] and the other to [[room2]]. I've been trying to find a solution for the last hour, but whenever I hit "Continue", Squiffy seems to open both rooms at the same time (both texts are displayed). I think that's because I used two separate functions...

Sorry if my question is stupid, I'm completely new to JS.

Here is the example you want. :)

[[roomList]]:
    setTimeout(function(){
        $("#yourChoice").click(function(){
            set("location",$(":radio[name='location']:checked").val());
            $("#yourChoice").attr('disabled',true);
            squiffy.story.go(get("location"));
        });
    },10);

Which room do you want to go?

<input type="radio" name="location" value="room1" checked> room1<br>
<input type="radio" name="location" value="room2"> room2<br>
<input type="radio" name="location" value="room3"> room3<br>
<input type="radio" name="location" value="room4"> room4<br>

<button id="yourChoice">Go</button>

[[room1]]:
{welcome}

[[room2]]:
{welcome}

[[room3]]:
{welcome}

[[room4]]:
{welcome}

[[welcome]]:
Welcome to {location}.

Thank you story10, it seems to work well. But I have one more question. What if I have options that do totally different things (different categories of action). For example, say that the first three radio buttons would assign a certain string value to an attribute (just like in the first male/female example above), the fourth radio button would then send the player to a different location (like in the second example) and maybe we have a fifth option that makes changes to some existing squiffy attributes. How would I set up a function like that?

Once again, thank you for taking time and helping me.

[[Choice]]:
    setTimeout(function(){
        $("#yourChoice").click(function(){
            set("location",$(":radio[name='location']:checked").val());
            set("gender",$(":radio[name='gender']:checked").val());
            set("otherAttr",$(":radio[name='other']:checked").val());
            $("#yourChoice").attr('disabled',true);
            squiffy.story.go(get("location"));
        });
    },10);


Please answer the questions and click "Done" button.

1. Which room do you want to go?

<input type="radio" name="location" value="room1" checked> room1<br>
<input type="radio" name="location" value="room2"> room2<br>
<input type="radio" name="location" value="room3"> room3<br>

2. What is your gender?

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br><br>

3. *other question*

<input type="radio" name="other" value="answer1" checked> Answer1<br>
<input type="radio" name="other" value="answer2"> Answer2<br>

<button id="yourChoice">Done</button>

[[room1]]:
{welcome}

[[room2]]:
{welcome}

[[room3]]:
{welcome}

[[welcome]]:
Welcome to {location}. You are {gender} and selected {other}.

Sorry, I forgot to mention one thing. I would like only one option to be selectable. Something like this:

[[Choice]]:
    setTimeout(function(){
        $("#yourChoice").click(function(){
            /... stuff
        });
    },10);

@set health = 10

What do you want to do next?

<input type="radio" name="location" value="room1" checked> Go to room 1<br>
<input type="radio" name="location" value="room2"> Go to room 2<br>
<input type="radio" name="location" value="room3"> Go to room 3<br>
<input type="radio" name="form" value="eagle"> Transform into an eagle<br>
<input type="radio" name="form" value="wolf"> Transform into a wolf<br>
<input type="radio" name="health" value="answer1"> Eat a slice of pizza<br> (I want this to increase health by 2)
<input type="radio" name="health" value="answer2"> Eat the whole pizza<br> (... and this by 4)

<button id="yourChoice">Continue</button>

[[room1]]:
Text...

[[room2]]:
Text...

[[room3]]:
Text...

So the problems that I have are two: 1) make only one option selectable, and 2) increase/decrease the value of a number attribute. I know there's @inc and @dec, but it seems that in this case all changes need to be made inside the function.

The following is strongly recommended because it meets what you want without radio buttons and javascript you are not familiar with.

[[Choice]]:
@set yourType=human
@set health = 10

What do you want to do next?

1. [[Go to room1]](room1)
2. [[Go to room2]](room2)
3. [[Go to room3]](room3)
4. [[Transform into an eagle]](eagle)
5. [[Transform into an wolf]](wolf)
6. [[Eat a slice of pizza]](slicepizza)
7. [[Eat the whole the pizza]](wholepizza)

[[room1]]:
Text...

[[room2]]:
Text...

[[room3]]:
Text...

[[eagle]]:
@set yourType=eagle

[[wolf]]:
@set yourType=wolf

[[slicepizza]]:
@inc health 2

[[wholepizza]]:
@inc health 4

I see. But still, is it possible to do this? I only need one example and then I will adapt it to each situation as needed.

[[Choice]]:
    squiffy.set("health",10);
    squiffy.set("yourType","human");
    setTimeout(function(){
        $("#Choice").click(function(){
            var ckdChoice=$(":radio[name='choice']:checked").val();
            if(ckdChoice.startsWith("room")) squiffy.story.go(ckdChoice);
            if(ckdChoice=="eagle" || ckdChoice=="wolf") squiffy.set("yourType",ckdChoice);
            if(ckdChoice.endsWith("pizza")) squiffy.set("health",squiffy.get("health")+(ckdChoice.startsWith("slice")?2:4));
            $("#Choice").attr('disabled',true);
        });
    },10);

What do you want to do next?

<input type="radio" name="choice" value="room1" checked> Go to room 1<br>
<input type="radio" name="choice" value="room2"> Go to room 2<br>
<input type="radio" name="choice" value="room3"> Go to room 3<br>
<input type="radio" name="choice" value="eagle"> Transform into an eagle<br>
<input type="radio" name="choice" value="wolf"> Transform into a wolf<br>
<input type="radio" name="choice" value="slicepizza"> Eat a slice of pizza<br>
<input type="radio" name="choice" value="wholepizza"> Eat the whole pizza<br>

<button id="Choice">Continue</button>

[[room1]]:
Room1

[[room2]]:
Room2

[[room3]]:
Room3

Thanks, this is exactly how I wanted it to look, but unfortunately some things don't work. When I choose one of the rooms and hit "continue", the story doesn't go anywhere. Also, when I choose one of the two pizza choices, it just adds "health = 2" in the bottom section of squiffy (where all variables/attributes are shown), which is wrong because health should either be 12 or 14. The eagle and wolf choices seem to function well.

I fixed and tested the codes. Try again the codes above.

Works perfectly, thank you!

I have another question regarding radio buttons. How do I disable a radio button (so that it's greyed out, but still visible) if a condition is met?
I have in mind something like this:

    function disable() {
        if (attribute=="value") document.getElementById("radio_id").disabled = true;
    }

<input type="radio" name="option" id="radio_id"> option 1 // should be greyed out
<input type="radio" name="option"> option 2 // should be selectable

https://www.w3schools.com/jsref/prop_radio_disabled.asp

Thanks, I tried to use those codes, but I still don't understand why something like this doesn't work:

@set strength = 10
@set form = human

    setTimeout(function(){
        if(strength<12) document.getElementById("no_strength").disabled = true;
        if(form!="wolf") document.getElementById("no_wolf").disabled = true;
    },10);

<input type="radio" name="choice" id="no_strength"> Lift the trunk and throw it aside (requires 12+ strength)
<input type="radio" name="choice" id="no_wolf"> There is blood here. Follow the scent into the woods (requires wolf form)
<input type="radio" name="choice"> Search through the leaves

The first two options should be disabled. I'm obviously doing something wrong, but I don't know what.

I just tried this again without the if conditions and it seems to work, so I can only assume that I'm using the "if" incorrectly, right?

squiffy.get("strength")<12
squiffy.get("form")!=="wolf"

Of course! I feel stupid for not having thought of that. Thank you once again, story10.