Spacing "scale" radio buttons apart

[KateK]

Hi all,

I am trying to create an experiment where participants are prompted to select a button that indicates the correct part of a picture that is displayed above the buttons.

There are three “fields” in the picture that each contain a different possible answer. I’d like the button spacing to reflect the way the picture is divided, but am unsure how to space the buttons.

Right now, it is written as,

 newScale("score",   "A", "B", "C")
    .settings.css("font-size", "20px").settings.css("font-weight", "normal")
    .radio()
    .labelsPosition("top")
    .print()
    .wait()

The buttons end up collapsed on the left-hand side of the screen with this code. Is there a way to put space between each button so that their position reflects the part of the picture they are beneath?

Another solution I could see working is uploading plain boxes as clickable pictures labeled “A”/”B”/”C”, but I am still not sure how I would space those.

Any help would be sincerely appreciated!

[Jeremy]

Hi,

Use CSS to control the Scale element’s aesthetics

Another solution would be to inject some HTML in the labels:

newScale("score",   
    "<span style='margin: 2em;'>A</span>",
    "<span style='margin: 2em;'>B</span>",
    "<span style='margin: 2em;'>C</span>"
)
    .css({"font-size": "20px", "font-weight": "normal"})
    .radio()
    .labelsPosition("top")
    .print()
    .wait()

Jeremy

[KateK]

Jeremy,

Thank you so much for your help (and for all of your dedication to PCIbex!) – the HTML worked great.

I have another follow up question, about the ordering elements. We are considering another possible variant that will be arranged as:

1) show image scene
2) radio button scale beneath image scene
3) print question about scene

I’m not sure why, but I can’t seem to get the image to load – and, the text won’t print underneath the buttons.

I have linked a mock-up of one item here for your reference: https://farm.pcibex.net/r/APIRqC/

I appreciate your insight!

Kate

[Jeremy]

Hi Kate,

The name of the file in Resources is RadioButtonsSentence.png but you reference RadioButtonSentence.png in your table

The Text element is in fact printed on the page after you click A, B or C, because of the wait command on the Scale element coming before print on the Text element. The trial finishes immediately, because there is no further command to run, so you don’t even have time to effectively see the text on the page

Jeremy

[KateK]

Dear Jeremy,

Thanks so much for this! Is there a way for me to provide corrective feedback if a participant presses the button indicating a wrong answer? Can I still use test-selected with this sort of radio button setup?

I appreciate your help!
Kate

[KateK]

To provide more context, here is what I have right now, which I thought would work… but it is unfortunately giving me an error message of “Command ‘getScale’ unknown on Scale element ‘score’.”

newScale("score",   
    "<span style='margin: 5em;'>A</span>",
    "<span style='margin: 5em;'>B</span>",
    "<span style='margin: 5em;'>C</span>"
)
    .css({"font-size": "20px", "font-weight": "normal"})
    .radio()
    .labelsPosition("top")
    .print()
    .getScale("score").test.selected(row.AdultlikeAns) 
        .success( newText("Good job! We will now begin the experiment").print() )
        .failure( newText("Sorry, you gave the wrong answer. Please be more careful. We will now begin the experiment.").print() )
    .log()
    .log("Category", row.Catg)
    .log("Image", row.Image)
    .log("Sentence", row.Text)
    .log("AdultlikeAns", row.AdultlikeAns)
)

• This reply was modified 1 year, 9 months ago by KateK.

[KateK]

Sorry for the multiple consecutive comments!

I was able to implement corrective feedback with the HTML scale by modifying the CSV file, but my experiment is now stuck in the “Practice” trial and can’t move past it – it just gets stuck after the feedback and the “Experimental Trial” doesn’t even show up in the sequence – I’m not totally sure why, because I didn’t make any big changes to the script. Any insight as to why Experimental Trial disappeared would be super helpful!

Here is a link to the project: https://farm.pcibex.net/r/GwLzuJ/

[Jeremy]

Hi,

Your code currently embeds every line starting from Template("CompQuantAdultStudy2022.csv", inside the wait command of the “practice” Scale element, because its closing parenthesis only comes at the end of the code. You need to take three closing parentheses out of the block of six below the getScale("score") lines, and move them up to replace the comma currently below the closing parenthesis of the failure command of the “practice” Scale element. This way, you’ll be closing not only the wait command, but also the “practice” newTrial and Template commands before getting to the “experimental-trial” ones

Jeremy

[Author]

Posts