Millisecond Forums » Millisecond Forums » Inquisit 5 » Creating drop-down buttons

Creating drop-down buttons

Experimenter1 — Sun, 16 Sep 2018 12:19:24 GMT

Hello!

I am trying to create a drop-down item without using the default dropdown element. The item looks like Image 1 below. Participants can click each grey box, expand the list of options, and select one of the options. The issue I am trying to resolve is how to close the drop-down list. After one selects "A" in the first drop-down, close it, and then open it again, it looks like Image 2 which shows "A" twice. The only way one can close this again is to select the second "A". Clicking the first "A" doesn't work. I think this might be confusing to participants because this is different from typical drop-down buttons which allow clicking either of them to close.

I am wondering if anyone has any suggestions on how to fix this. Please see below for my code. Any help would be greatly appreciated. Thank you in advance for taking a look!!

Image 1

Image 2

<values>
/ op1_AC2 = ""
/ op2_AC2 = ""
</values>

<defaults>
/ fontstyle = ("Calibri", 3.5%)
</defaults>

<block myblock>
/ trials = [1=AC2]
</block>

<trial AC2>
/ stimulusframes = [1=digit1_AC2, operator1_AC2, digit2_AC2, operator2_AC2, submit_AC2]
/ inputdevice = mouse
/ validresponse = (operator1_AC2, operator2_AC2, submit_AC2)
/ isvalidresponse = [(trial.AC2.response == "submit_AC2" && values.op1_AC2 !="" && values.op2_AC2 !="")
|| trial.AC2.response == "operator1_AC2" || trial.AC2.response == "operator2_AC2"]
/ branch = [if (trial.AC2.response == "operator1_AC2") trial.select_operator1_AC2]
/ branch = [if (trial.AC2.response == "operator2_AC2") trial.select_operator2_AC2]
</trial>

<trial select_operator1_AC2>
/ ontrialend = [if (trial.select_operator1_AC2.response == "option1_1_AC2") values.op1_AC2 = "A"]
/ ontrialend = [if (trial.select_operator1_AC2.response == "option2_1_AC2") values.op1_AC2 = "B"]
/ stimulusframes = [1=option1_1_AC2,option2_1_AC2]
/ inputdevice = mouse
/ validresponse = (option1_1_AC2,option2_1_AC2)
/ branch = [trial.AC2]
</trial>

<trial select_operator2_AC2>
/ ontrialend = [if (trial.select_operator2_AC2.response == "option1_2_AC2") values.op2_AC2 = "C"]
/ ontrialend = [if (trial.select_operator2_AC2.response == "option2_2_AC2") values.op2_AC2 = "D"]
/ stimulusframes = [1=option1_2_AC2,option2_2_AC2]
/ inputdevice = mouse
/ validresponse = (option1_2_AC2,option2_2_AC2)
/ branch = [trial.AC2]
</trial>

<text digit1_AC2>
/ items = ("TEXT TEXT TEXT TEXT TEXT TEXT TEXT")
/ position = (48%, 40%)
/ erase = false
/ size = (80%, 10%)
/ hjustify = left
/ vjustify = center
</text>

<text digit2_AC2>
/ items = ("TEXT TEXT TEXT")
/ position = (70%, 40%)
/ size = (40%, 10%)
/ erase = false
/ hjustify = left
/ vjustify = center
</text>

<text operator1_AC2>
/ items = ("<%values.op1_AC2%>")
/ position = (45%, 40%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text operator2_AC2>
/ items = ("<%values.op2_AC2%>")
/ position = (68%, 40%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text submit_AC2>
/ items = ("SUBMIT")
/ position = (50%, 92%)
/ size = (20%, 10%)
/ txbgcolor = grey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text option1_1_AC2>
/ items = ("A")
/ position = (45%, 49%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option2_1_AC2>
/ items = ("B")
/ position = (45%, 58%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option1_2_AC2>
/ items = ("C")
/ position = (68%, 49%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option2_2_AC2>
/ items = ("D")
/ position = (68%, 58%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<trial clearscreen_AC2>
/ stimulusframes = [1=clearscreen_AC2]
/ trialduration = 200
/ validresponse = (0)
</trial>

<shape clearscreen_AC2>
/ color = white
/ shape = rectangle
/ size = (100%, 100%)
</shape>

RE: Creating drop-down buttons

Experimenter1 — Sun, 16 Sep 2018 12:19:24 GMT

[quote]

[b]Dave - Friday, September 14, 2018[/b]

[quote]

[b]Experimenter1 - Friday, September 14, 2018[/b]

[/quote]

Reset values.op1_AC2 or values.op2_AC2 to the empty string (depending on which option is selected), and display the stimulus:

<values>
/ op1_AC2 = ""
/ op2_AC2 = ""
</values>

<defaults>
/ fontstyle = ("Calibri", 3.5%)
</defaults>

<block myblock>
/ trials = [1=AC2]
</block>

<trial AC2>
/ stimulusframes = [1=digit1_AC2, operator1_AC2, digit2_AC2, operator2_AC2, submit_AC2]
/ inputdevice = mouse
/ validresponse = (operator1_AC2, operator2_AC2, submit_AC2)
/ isvalidresponse = [(trial.AC2.response == "submit_AC2" && values.op1_AC2 !="" && values.op2_AC2 !="")
|| trial.AC2.response == "operator1_AC2" || trial.AC2.response == "operator2_AC2"]
/ branch = [if (trial.AC2.response == "operator1_AC2") trial.select_operator1_AC2]
/ branch = [if (trial.AC2.response == "operator2_AC2") trial.select_operator2_AC2]
</trial>

<trial select_operator1_AC2>
/ ontrialbegin = [
values.op1_AC2 = "";
]
/ ontrialend = [if (trial.select_operator1_AC2.response == "option1_1_AC2") values.op1_AC2 = "A"]
/ ontrialend = [if (trial.select_operator1_AC2.response == "option2_1_AC2") values.op1_AC2 = "B"]
/ stimulusframes = [1=operator1_AC2, option1_1_AC2,option2_1_AC2]
/ inputdevice = mouse
/ validresponse = (option1_1_AC2,option2_1_AC2)
/ branch = [trial.AC2]
</trial>

<trial select_operator2_AC2>
/ ontrialbegin = [
values.op2_AC2 = "";
]
/ ontrialend = [if (trial.select_operator2_AC2.response == "option1_2_AC2") values.op2_AC2 = "C"]
/ ontrialend = [if (trial.select_operator2_AC2.response == "option2_2_AC2") values.op2_AC2 = "D"]
/ stimulusframes = [1=operator2_AC2, option1_2_AC2,option2_2_AC2]
/ inputdevice = mouse
/ validresponse = (option1_2_AC2,option2_2_AC2)
/ branch = [trial.AC2]
</trial>

<text digit1_AC2>
/ items = ("TEXT TEXT TEXT TEXT TEXT TEXT TEXT")
/ position = (48%, 40%)
/ erase = false
/ size = (80%, 10%)
/ hjustify = left
/ vjustify = center
</text>

<text digit2_AC2>
/ items = ("TEXT TEXT TEXT")
/ position = (70%, 40%)
/ size = (40%, 10%)
/ erase = false
/ hjustify = left
/ vjustify = center
</text>

<text operator1_AC2>
/ items = ("<%values.op1_AC2%>")
/ position = (45%, 40%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text operator2_AC2>
/ items = ("<%values.op2_AC2%>")
/ position = (68%, 40%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text submit_AC2>
/ items = ("SUBMIT")
/ position = (50%, 92%)
/ size = (20%, 10%)
/ txbgcolor = grey
/ erase = false
/ hjustify = center
/ vjustify = center
</text>

<text option1_1_AC2>
/ items = ("A")
/ position = (45%, 49%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option2_1_AC2>
/ items = ("B")
/ position = (45%, 58%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option1_2_AC2>
/ items = ("C")
/ position = (68%, 49%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<text option2_2_AC2>
/ items = ("D")
/ position = (68%, 58%)
/ size = (8%, 9%)
/ txbgcolor = lightgrey
/ hjustify = center
/ vjustify = center
</text>

<trial clearscreen_AC2>
/ stimulusframes = [1=clearscreen_AC2]
/ trialduration = 200
/ validresponse = (0)
</trial>

<shape clearscreen_AC2>
/ color = white
/ shape = rectangle
/ size = (100%, 100%)
</shape>

[/quote]

Thanks again for the help, Dave!!! This is very helpful. You are supreme :)

RE: Creating drop-down buttons

Dave — Fri, 14 Sep 2018 08:20:38 GMT

[quote]

[b]Experimenter1 - Friday, September 14, 2018[/b]

[/quote]