Reply To: Dot-memory test

[Jeremy]

Hi Ebru,

You could get there by using the Selector element, if you created one per cell, but the code would quickly become cumbersome. A more concise solution would be to use three Scale elements, one per row, that you set as checkboxes. Then you manipulate the aesthetics to make a checked option appear as a black square, and an unchecked option as a white square

The test part in wait is a little tricky, because up to PennController 2.0, .test.selected does not behave as expected on a checkbox Scale. However, one can write some concise javascript code to test that the right boxes are (un)selected

Here’s the script:

Template("dotmemorization.csv", row =>
    newTrial("dot-pattern",
        defaultScale.checkbox().center().log().print()
        ,
        newScale("row1", " ", " ", " "),newScale("row2", " ", " ", " "),newScale("row3", " ", " ", " ")
        ,
        getScale("row1").select(row.r1c1==1?0:-1).select(row.r1c2==1?1:-1).select(row.r1c3==1?2:-1),
        getScale("row2").select(row.r2c1==1?0:-1).select(row.r2c2==1?1:-1).select(row.r2c3==1?2:-1),
        getScale("row3").select(row.r3c1==1?0:-1).select(row.r3c2==1?1:-1).select(row.r3c3==1?2:-1)
        ,
        newTimer(850).start().wait()
        ,
        getScale("row1").unselect(0,"log").unselect(1,"log").unselect(2,"log").remove(),
        getScale("row2").unselect(0,"log").unselect(1,"log").unselect(2,"log").remove(),
        getScale("row3").unselect(0,"log").unselect(1,"log").unselect(2,"log").remove()
        ,
        newText('inst', 'Now produce the pattern').css("margin-bottom","20px").print().center()
        ,
        getScale("row1").print(),getScale("row2").print(),getScale("row3").print()
        ,
        newButton("press")
            .print()
            .wait( 
                newFunction( 
                    ()=>[...document.querySelectorAll(".PennController-Scale input")].map(c=>Number(c.checked)).join('') 
                )
                .test.is([row.r1c1,row.r1c2,row.r1c3,row.r2c1,row.r2c2,row.r2c3,row.r3c1,row.r3c2,row.r3c3].join('') )
                .failure( newText("Try again!").print() )
            )
            .center()
    )
)

And here’s what to put in global_main.css to make the checkboxes appear as white and black boxes:

.PennController-row1 input, .PennController-row2 input, .PennController-row3 input {
    display: none;
}
.PennController-row1 input + label, .PennController-row2 input + label, .PennController-row3 input + label {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: white;
    border: solid 1px grey;
}
.PennController-row1 input:checked + label, .PennController-row2 input:checked + label, .PennController-row3 input:checked + label {
    background-color: black;
}

Jeremy