Reply To: Questionnaire with questions on the same page

[Jeremy]

Hi Daniela,

Not sure what’s happening with Chrome, but use this to sort names instead:

names = names.sort(v=>1-2*(Math.random()>=0.5));

I don’t think using multiple functions is the way to go: the idea is to handle the multiple lines within a single function, defining multiple of them sort of defeats the purpose. One option would be to revise the content of newTrial like this:

newCanvas("screen", "100vw", "100vh")
    .add( 0 , 0 , newCanvas("names-1", "30%", "100%") )
    .add( "center at 50%" , 0 , newCanvas("names-2", "30%", "100%") )
    .add( "right at 100%" , 0 , newCanvas("names-3", "30%", "100%") )
    .print( "center at 50vw" , "middle at 50vh" )
,
...names.map( (r,i) => {
    test = test || newFunction(v=>true).test.is(true);
    test = test.and( getScale(r.name+'-scale-'+r.presented).test.selected() );
    return newText(r.name+": ")
        .after(
            newScale(r.name+'-scale-'+r.presented, 5)
                .log()
                .print()
        )
        .print( "2em" , parseInt(3+(i%3)*3)+"em" , getCanvas("names-"+parseInt(1+i/3)) );
})
,
newButton("Send")
    .print( "center at 50%" , "bottom at 95%" , getCanvas("screen") )
    .wait( test )

Notice the i variable in the map function, that lets us keep track of the index of the name we are parsing. I use it to determine in which of 3 Canvas elements, laid out as columns on a full-page Canvas, I will add the name. I also use it to calculate an appropriate Y coordinate. In this example, I use i%3 because I want columns of 3 names, but of course this is something to adjust to your needs (eg. i%17).

Hope this helps, let me know if you have questions

Jeremy