Label of radio buttons on the right side.

Community Help
1

I try to build a simple quiz (to use it interactiv in quarto).

I’m looking for a way to neatly left-justify the radio buttons below each other and also put longer questions on the right. My favorite thing would be if I could put the radiobuttons and the “labels” into a table.

| right | wrong | Qestion                | answer |
|-------|-------|------------------------|--------|
|   o   |   o   | The earth is a planet. | right  |
|   o   |   o   | The sun is a star.     | right  |
|   o   |   o   | Pluto is a planet.     | wrong  |
|   o   |   o   | Pluto is a star.       | wrong  |

At this stage I have the inputs in the results:

viewof MC1 = Inputs.form({
rf1_1: Inputs.radio(["right", "wrong"], {label: "The earth is a planet."}), 
rf1_2: Inputs.radio(["right", "wrong"], {label: "The sun is a star."}), 
rf1_3: Inputs.radio(["right", "wrong"], {label: "Pluto is a planet."}), 
rf1_4: Inputs.radio(["right", "wrong"], {label: "Pluto is a star."})     
})

Points = {
const Sum = 
    (MC1["rf1_1"] == "right")*1 + 
    (MC1["rf1_2"] == "right")*1 + 
    (MC1["rf1_3"] == "wrong")*1 + 
    (MC1["rf1_4"] == "wrong")*1 
    return(Sum)
  
}
2

This can be done with a viewof cell that changes it’s content as users interact with it. There are a few ways to do that, but my favorite is the nanomorph library. I’ve used it in this notebook to make a quick mock up of how you might make a multiple choice quiz like this.

3

Thank you very much, this has been very helpful and has brought me a lot further! I’ll now try to develop something further myself and maybe ask again if I get stuck again. :slight_smile:

4

:thinking: