multiple choice buttons (Scale element)

[karmacoma]

Hi Jeremy,

I tried to create multiple choice buttons using the method you suggested here (i.e. running the function after printing each Scale element). However, it seems that I can only select and unselect the last Scale element (e.g. “Other”), and all the previous elements (e.g. “He/Him/His”, “She/Her/Hers”, etc.) don’t work now. I’ve attached my script below; do you know what might be the problem?

Thank you!

PennController.ResetPrefix(null)

newTrial("survey",
    newFunction("unselectbutton", () => {
    $(".PennController-Scale input[type='radio']").click(function(){
        $(this).attr("toggle", $(this).attr("toggle") != "true" );
        if ($(this).attr("toggle")=="false") $(this).removeAttr("checked");
    })
}),

 
    newText("<p><b>What are your preferred gender pronouns?</b></p>")
        .print()
        .css("font-size", "16px")
        .css("font-family", "Helvetica Neue")
    ,
    
    newScale("He/Him/His")
        .log()
        .print()
        .css("font-size", "16px")
        .css("font-family", "Helvetica Neue")
    ,
    
    getFunction("unselectbutton")
        .call()
    ,
     newScale("<p>She/Her/Hers</p>")
        .log()
        .print()
        .css("font-size", "16px")
        .css("font-family", "Helvetica Neue")
    ,
    
     getFunction("unselectbutton")
        .call()
         ,
    
      newScale("They/Them/Theirs")
         .log()
        .print()
        .css("font-size", "16px")
     .css("font-family", "Helvetica Neue")
    ,
   getFunction("unselectbutton")
        .call()
         ,
    
    newScale("<p>Ze/Hir<p>")
        .log()
        .print()
        .css("font-size", "16px")
        .css("font-family", "Helvetica Neue")
    ,
    getFunction("unselectbutton")
        .call(),
    
    newScale("Other", "Other:")
        .log()
        .print()
        .css("font-size", "16px")
       .css("font-family", "Helvetica Neue")
   
    ,
    getFunction("unselectbutton")
        .call(),
    
     newTextInput("OtherInput", "")
        .log()
        .settings.before(getScale("Other"))
        .print()
        .size(150,20)
    ,
    
    newButton("next")
        .print("center at 50%", "center at 50%")
        .css("font-size","15px")
        .wait()
        
    )

[Jeremy]

Hi,

First let me reiterate that this method is more of a hack, and is meant to allow for unselection. Multiple parallel selections is another matter. I’ll see about adding a checkbox feature in the next release of PennController.

In your case you’ll need to use a different method. I suggest you use a single Scale element and use a Var element at the very end of your trial to list which options are checked then. Here is how it would look like:

newTrial("survey",
    newText("<p><b>What are your preferred gender pronouns?</b></p>")
        .print()
        .css("font-size", "16px")
        .css("font-family", "Helvetica Neue")
    ,
    newTextInput("other","")
        .log()
        .before( newText("Other: ") )
        .size(150,20)
    ,
    newScale("pronouns", "He/Him/His", "She/Her/Hers", "They/Them/Theirs", "Ze/Hir", "Other:")
        .vertical()
        .print()
        .css({"font-size": "16px", "font-family": "Helvetica Neue", "line-height": "2em"})
        .label(4, getTextInput("other") )
    ,
    newFunction( ()=> $(".PennController-pronouns input").each(function(i,e){
        $(e).attr("name","pronouns-"+i);
        $(e).click( ()=>{
            if ($(e).attr("toggle")==1) $(e).removeAttr("checked");
            $(e).attr("toggle", 1-($(e).attr("toggle")==1));
        });
    }) ).call()
    ,
    newButton("next")
        .print("center at 50%", "center at 50%")
        .css("font-size","15px")
        .wait()
    ,
    newVar("selections")
        .set( v => new Array(...document.querySelectorAll(".PennController-pronouns input"))
            .filter(e=>e.checked)
            .map(e=>e.value)
            .join("+") 
        )
        .log()
)

Note that I used the .label command on the Scale element, which lets you use another PennController element as a label rather than a plain string. Note also that I used the line-height CSS property to increase the spacing between the options.

This Function element basically does the same job as the one you copied from the other topic, except that it additionally renames each of the scale’s options so they are now independent from one another, thus allowing for parallel selection (they share a single name by default, which means only one option can be selected at a time).

The Var element does some javascript magic to see which options on the scale are checked by the end of the trial, and lists all the checked ones in a string, separated by the + character (which is purely arbitrary, just don’t use a comma because it would mess with the CSV format of the results file)

Jeremy

[karmacoma]

Hi Jeremy,

Thank you, this works perfectly!

[Author]

Posts