Millisecond Forums

How to change the color of the word of a passage after clicking the word?

https://forums.millisecond.com/Topic19986.aspx

By yihuanlai - 10/28/2016

Hi all,

Here is what I want to do. I want to provide participants a passage that contains many grammar errors. The participants will click on the words that they think are wrong. The color of the word will change to red if they click it and the word will change back to black if they click it again. 

I've figured out how to change the color of the word by entering the following code. For example, the sentence is "My first visit to Singapore was...", and I have to write a code for every single word. And in inquisit, the distance between the words are not exactly, so the form of the sentence looks really strange.

So I don't want to write a code for each single word.
Is there a code that I could just put my whole passage in and any word of the passage will change its color after clicking?

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

<trial mytrial>
/ stimulusframes = [1=word01,word02,word03,word04,word05,word06]
/ inputdevice = mouse
/ validresponse = (word01,word02,word03,word04,word05,word06)
/ ontrialend = [if(trial.mytrial.response=="word01")
  text.word01.textcolor=sequence(red,black)]
/ ontrialend = [if(trial.mytrial.response=="word02")
  text.word02.textcolor=sequence(red,black)]
/ ontrialend = [if(trial.mytrial.response=="word03")
  text.word03.textcolor=sequence(red,black)]
/ ontrialend = [if(trial.mytrial.response=="word04")
  text.word04.textcolor=sequence(red,black)]
/ ontrialend = [if(trial.mytrial.response=="word05")
  text.word05.textcolor=sequence(red,black)]
/ ontrialend = [if(trial.mytrial.response=="word06")
  text.word06.textcolor=sequence(red,black)]
/ branch = [if(trial.mytrial.response!="done")trial.mytrial]
</trial>

<text word01>
/ items = ("My")
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (10%,20%)
</text>

<text word02>
/ items = ("first")
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (14%,20%)
</text>

<text word03>
/ items = ("visit")
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (19%,20%)
</text>

<text word04>
/ items = ("to")
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (24%,20%)
</text>


<text word05>
/ items = ("Singapore")
/ width = 100%
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (28%,20%)
</text>

<text word06>
/ items = ("was")
/ txcolor = black
/ erase = false
/ size = (5%,4%)
/ position = (35%,20%)
</text>
By Dave - 10/28/2016

> So I don't want to write a code for each single word.
> Is there a code that I could just put my whole passage in and any word of the passage will change its color after clicking?

No. Since you want every word to be clickable and then change its properties (here: the color), every word needs to be a separate object, i.e. you need one <text> element per word.
By yihuanlai - 10/29/2016

Hi Dave, thanks for your reply. So can I make the paragraph itself an image/object and using the mouse to create "blobs" of color over each incorrect word (or vertical lines)? 
By Dave - 10/30/2016

To a degree, that's possible. You can paint some sort of object (e.g. a dot or a line) at the position the object was clicked. This will, however, not highlight an entire word in the <text> or <picture> object -- neither object "knows" what a word is, where it begins and ends, etc. -- and it will not prevent a participant to leave marks at nonsensical or ambiguous spots.

Basic example:

<text sentence>
/ items = ("The quick brown fox~njumps over the lazy dog.")
/ fontstyle = ("Consolas", 5%, true)
/ txbgcolor = transparent
/ size = (50%, 20%)
/ erase = false
</text>

<text done>
/ items = ("DONE")
/ position = (50%, 90%)
/ erase = false
</text>

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

<trial clicktrial>
/ stimulusframes = [1=sentence, done, dot]
/ inputdevice = mouse
/ validresponse = (sentence, done)
/ branch = [
    if(trial.clicktrial.response != "done") {
        shape.dot.hposition = 1px*trial.clicktrial.responsex;
        shape.dot.vposition = 1px*trial.clicktrial.responsey;
        trial.clicktrial;}
]
</trial>

<shape dot>
/ shape = circle
/ size = (10px,10px)
/ position = (-10%, -10%)
/ color = orangered
/ erase = false
</shape>

Hope this helps.
By yihuanlai - 10/30/2016

Thanks Dave! That really helps!  
Another question is that can I know which word participants actually click (leave the paint)  from the raw data? 

By Dave - 10/30/2016

You will have to work that out mathematically based on the screen coordinates of each "click" -- i.e., match those up with the screen coordinates of each "word".