Timeout and button click conditions

[Yanru]

Hi Jeremy,

I’m trying to program a rating task. I want to set a time limit for the rating, so that after, say, 10s, the participants cannot continue the current rating anymore, a message shows that tells the participants to rate faster, and the participants can click on the “continue” button to proceed to the next trial. But I also want the participants to rate all the scales before they could click on “continue”. If it’s possible, I would also like to log participants’ incomplete rating when the timeout happens.

My current problem is that even in the case of a timeout, participants’ still need to select all the scales before they could continue to the next trial, or else they get stuck in the current trial and clicking “continue” does not result in anything.

Here is my code:

PennController.Template("items.csv", variable =>

    PennController("main",


             newText("sentence", variable.sentence)
             .settings.css("font-size", "18px")

             ,

             newCanvas("canvas", 1000, 200)
             .add(0, 20, getText("sentence"))
             .print()

             ,

             newScale("good", 6)
             .button()
             .radio()
             .before(newText("good1", "not good at all").cssContainer({height:'100%',display:'flex','flex-direction':'column', width: "15em", "text-align": "right"}).css("margin-top","auto"))
             .after(newText("good2", "very good").cssContainer({height:'100%',display:'flex','flex-direction':'column'}).css("margin-top","auto"))
             .labelsPosition("top")
             .log("last")
             ,

             newCanvas("goodCanvas", 1000, 40)
             .add(0,0, getScale("good"))
             .print()
             ,

             newScale("natural", 6)
             .button()
             .radio()
             .before(newText("naturaltext1", "not natural at all").cssContainer({height:'100%',display:'flex','flex-direction':'column', width: "15em", "text-align": "right"}).css("margin-top","auto"))
             .after(newText("naturaltext2", "very natural").cssContainer({height:'100%',display:'flex','flex-direction':'column'}).css("margin-top","auto"))
             .labelsPosition("top")
             .log("last")
             ,

             newCanvas("naturalCanvas", 1000, 40)
             .add(0,0, getScale("natural"))
             .print()
             ,

             newSelector("shuffle") // shuffle the positions of the scales
             .add(getCanvas("goodCanvas"), getCanvas("naturalCanvas"))
             .shuffle()
             .disableClicks()
             ,

             newCanvas("space", 1, 100)
             .print()
             ,

             newText("faster", "Please rate faster!")
             ,
             
             newTimer("timeout", 10000)
                   .callback(getCanvas("canvas").remove())
                   .callback(getCanvas("goodCanvas")
                   .remove()
                   ,
                   getCanvas("naturalCanvas")
                   .remove()
                   ,
                   )
                   .callback(getText("faster").print())
                   .start()
                   .log()
              ,
                   
             newButton("continue", "continue")
             .settings.center()
             .print()
             .wait(getScale("good").test.selected()
                  .and(getScale("natural").test.selected()
                  )
             )
                   .callback(getTimer("timeout").stop())
                   .log()
                   
             ,
    )
    )
    ;

Thanks a lot in advance for your help!

Regards,
Yanru

[Yanru]

Oh, sorry I don’t know how to put the codes in a code block… Can somebody teach me how to do that? …

[Jeremy]

Hi,

Here’s a bare-bone illustration:

newTrial(
    newScale("first", 7).radio().log().print()
    ,
    newScale("second", 7).radio().log().print()
    ,
    newText("warning").hidden().print()
    ,
    newVar("timed out", false)
    ,
    newTimer("timeout", 10000)
        .callback( 
            getScale("first").disable(),
            getScale("second").disable(),
            getText("warning").text("You need to be faster").visible(),
            getVar("timed out").set(true)
        )
        .start()
    ,
    newButton("Continue")
        .print()
        .wait(
            getVar("timed out").test.is(true)
            .or(
                getScale("first").test.selected()
                .and( getScale("second").test.selected() )
                .failure( getText("warning").text("You need to select all the scales").visible() )
            )
        )
)

As long as you call .log() on the Scale elements, selections will be saved in the results file. If there’s no line for a Scale element, it means no selection was made on it

Jeremy

[Yanru]

Thank you, Jeremy!

[Author]

Posts