Callback command

[Valerie]

Hi Jeremy,

I am trying to add .callback to multiple dropdown elements (see below), but I am not entirely sure how to do so. Whenever one of the three options of the dropdown element is selected, the corresponding canvas with text and a text input field should appear between the dropdown element a “Continue” button.

newTrial( "LBQ.3" ,
        newText("<u><b>Language Background Questionnaire</b></u>")
            .center()
            .print()
        ,
        newText("<p> Picture a situation where someone used to hate classical music but likes it now. Imagine them saying the following sentence: 'I listen to classical music anymore.' Indicate whether this sentence is: </p>")
            .print()
        ,
        newDropDown("hear", "a kind of sentence ...")
            .settings.css("font-family", "Times New Roman")
            .settings.css("font-size", "1.2em")
            .add("a kind of sentence you have <b>heard</b> often", "a kind of sentence you have <b>heard</b> occasionally", "a kind of sentence you have never <b>heard</b> before")
            .print()
            .log()
            .wait()
        ,
        getDropDown("hear")
            .test.selected( "a kind of sentence you have <b>heard</b> often" )
            .success(
                newCanvas("hear1", 1500, 100)
                    .settings.add( 0, 0, newText("line 1", "<p>Where have you heard sentences like this?<p>") )
                    .settings.add( 0, 60, newTextInput("hearWhere1", "") 
                        .size(400,50)
                        .print()
                        .log())
            .print()
                    )
        ,
        getDropDown("hear")
                    .test.selected( "a kind of sentence you have <b>heard</b> occasionally" )
                    .success(
                        newCanvas("hear2", 1500, 100)
                            .settings.add( 0, 0, newText("line 1", "<p>Where have you heard sentences like this?<p>") )
                            .settings.add( 0, 60, newTextInput("hearWhere2", "")  
                                .size(400,50)
                                .print()
                                .log())
            .print()   
                            )
        ,
        getDropDown("hear")
                    .test.selected( "a kind of sentence you have never <b>heard</b> before" )
                    .success(
                        newCanvas("hear3", 1500, 100)
                            .settings.add( 0, 0, newText("line 1", "<p>How might you hear this same idea expressed instead?<p>") )
                            .settings.add( 0, 60, newTextInput("hearInstead", "") 
                                .size(400,50)
                                .print()
                                .log())
            .print()   
                            )
        ,
        newCanvas("blankspace", 1500, 25)
            .print()
        ,
        newButton("continue", "Continue")
            .center()
            .settings.css("font-family", "Times New Roman")
            .settings.css("font-size", "1.2em")
            .print()
            .wait()
)

Any guidance would be greatly appreciated!

Best,
Valerie

[Jeremy]

Hi Valerie,

Do you want participants to be able to change their mind after they have made a first choice, and have the corresponding TextInput element replace the one that’s on the page at that time? For example, if they first choose “often” then the TextInput element “hearWhere1” should appear, but if they click the DropDown element again and now choose “never” then the TextInput element “hearInstead” should take the place of “hearWhere1”?

In that case, yes, you would need to use a callback command. May I suggest a slight simplification of your code though, such that you would only update the Text element’s content upon selection of an DropDown option?

newTrial( "LBQ.3" ,
    newText("<u><b>Language Background Questionnaire</b></u>")
        .center()
        .print()
    ,
    newText("<p> Picture a situation where someone used to hate classical music but likes it now. Imagine them saying the following sentence: 'I listen to classical music anymore.' Indicate whether this sentence is: </p>")
        .print()
    ,
    newText("question", "")
    ,
    newDropDown("hear", "a kind of sentence ...")
        .css("font-family", "Times New Roman")
        .css("font-size", "1.2em")
        .add("a kind of sentence you have <b>heard</b> often", "a kind of sentence you have <b>heard</b> occasionally", "a kind of sentence you have never <b>heard</b> before")
        .print()
        .log()
        .callback(
            self.test.selected("a kind of sentence you have never <b>heard</b> before")
                .success( getText("question").text("<p>How might you hear this same idea expressed instead?</p>") )
                .failure( getText("question").text("<p>Where have you heard sentences like this?</p>") )
        )
        .wait()
    ,
    newCanvas("hear", 1500, 100)
        .add( 0, 0, getText("question") )
        .add( 0, 60, newTextInput("feedback", "") )
        .print()
    ,
    newCanvas("blankspace", 1500, 25)
        .print()
    ,
    newButton("continue", "Continue")
        .center()
        .css("font-family", "Times New Roman")
        .css("font-size", "1.2em")
        .print()
        .wait( getTextInput("feedback").testNot.text("") )
)

Jeremy

[Valerie]

Hi Jeremy,

Wow, thanks for the quick response! This is exactly what I was looking for (and thanks for simplifying my code, I was indeed having issues with callback when I was trying out other ways of attaining this before).

Best,
Valerie

[Author]

Posts