Reply To: multiple choice buttons (Scale element)

[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