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>

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>