> I know how to implement it as a trial [...], however, [...] as soon as a picture is clicked, the trial ends and (1) the response of the participant
> is not seen and (b) the participant can't change the response.
This is only true if don't take care of allowing (1) and (2), which can be done like so:
<values>
/ runcount = 0
/ selecteditem = ""
</values>
<block myblock>
/ trials = [1=cat_or_dog; 2=summary]
</block>
<trial cat_or_dog>
/ ontrialbegin = [values.runcount = values.runcount + 1]
/ ontrialend = [if (trial.cat_or_dog.response == "cat") {shape.catbg.color = green; values.selecteditem = "cat"; } else {shape.catbg.color = black}; ]
/ ontrialend = [if (trial.cat_or_dog.response == "dog") {shape.dogbg.color = green; values.selecteditem = "dog"; } else {shape.dogbg.color = black}; ]
/ stimulusframes = [1=catbg, cat, dogbg, dog, submit]
/ inputdevice = mouse
/ validresponse = (cat, dog, submit)
/ isvalidresponse = [if (trial.cat_or_dog.response == "submit" && values.runcount == 1) false else true ]
/ branch = [if (trial.cat_or_dog.response != "submit") trial.cat_or_dog]
/ recorddata = false
</trial>
<trial summary>
/ stimulusframes = [1=yourselection]
/ validresponse = (0)
/ trialduration = 3000
</trial>
<text cat>
/ items = ("Cat.jpg")
/ position = (30%, 50%)
/ size = (20%, 20%)
/ erase = false
</text>
<text dog>
/ items = ("Dog.jpg")
/ position = (70%, 50%)
/ size = (20%, 20%)
/ erase = false
</text>
<shape catbg>
/ shape = rectangle
/ color = black
/ size = (25%, 25%)
/ position = (30%, 50%)
/ erase = false
</shape>
<shape dogbg>
/ shape = rectangle
/ color = black
/ size = (25%, 25%)
/ position = (70%, 50%)
/ erase = false
</shape>
<text submit>
/ items = ("SUBMIT")
/ txbgcolor = grey
/ size = (25%, 10%)
/ position = (50%, 90%)
/ erase = false
</text>
<text yourselection>
/ items = ("You selected the <%values.selecteditem%>.")
/ position = (50%, 75%)
</text>
If you prefer using checkboxes, see this script:
https://www.millisecond.com/download/library/v3/selectitems/selectitems.zip