Callback command

PennController for IBEX Forums Support Callback command

This topic contains 2 replies, has 2 voices, and was last updated by Avatar Valerie 1 week, 3 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #7035
    Avatar
    Valerie
    Participant

    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

    #7038
    Jeremy
    Jeremy
    Keymaster

    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

    #7039
    Avatar
    Valerie
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.