Radio buttons in a semi circle

[einGlasRotwein]

Hello everyone,

this is a more complicated question, but maybe there are some CSS/HTML magicians here who have a solution. I would like to arrange my radio buttons in such a way that the form a semi circle. Here's why: With an array of horizontal radio buttons, the end points are furthest away from the mouse, so if I'm lazy, I will be more likely to pick the middle option.

If I arrange the radio buttons in a semi circle, they all have the same distance from the mouse.

Is there way how I can modify the plugin to achieve this? Or is there so much hacky black magic involved that it's just not worth it? I'm grateful for a "feasibility analysis" :-)

Thank you
Juli

[jodeleeuw]

Hi Juli,

I don't have a solution to offer, but since you asked for a feasibility analysis I'd say that the difficulty level is medium-ish. My strategy would be to:

1. Create a container <div> with position: relative style.
2. Create the set of radio buttons and labels as children of the container.
3. Calculate with JS the coordinates of the buttons relative to the container div.
4. Style the buttons with position: absolute and put them in the right spots using the JS-calculated coordinates.

If you make progress but get stuck feel free to follow up here for pointers. This is also the kind of question that is not specific to jspsych, so perhaps stack overflow would also be a good place for advice about the CSS needed to solve it.