Millisecond Forums » Millisecond Forums » Inquisit 6 » Anchoring images to increments on Slider/Likert scales

Anchoring images to increments on Slider/Likert scales

carmen0101 — Wed, 08 Apr 2020 11:29:18 GMT

I would like to present a slider scale with images at the time. Is it possible to anchor a new image (ontop of each other, so it looks like a morphing image) to each increment anchor on the slider? I would like it so that if the participant is hover over 1 on the slider that an picture1 is shown on the same screen, and then hovering over 40 on the slider will show picture40 etc...

This is my current coding but I have not worked out how to anchor images to the slider. Also I am unsure whether the LIKERT function may be better to achieve the effect I am after. Any advice would be much appreciated!!!

<text instruction1>
/items =("In this study, you will see some faces.

You will then be asked to estimate what is the average level of emotions shown by the faces.

Rate the average emotion by using your mouse on a scale on the following page.

When you press the <SPACEBAR>, a practice trial will begin.")
/valign = center
/txcolor = black
/fontstyle = ("Arial", 3%, false, false, false, false, 5, 1)
</text>

<trial instruction1>
/ stimulusframes = [1=instruction1]
/ inputdevice = keyboard
/ validresponse = (" ")
</trial>

<block instruction1>
/ trials = [1=instruction1]
</block>

<picture practice>
/items = ("morphs\practice_WM\practice_WM_25.bmp")
/size = (80%, 80%)
</picture>

<item practice_WM>
/1="morphs\practice_WM\practice_WM_01.bmp"
/2="morphs\practice_WM\practice_WM_02.bmp"
/3="morphs\practice_WM\practice_WM_03.bmp"
/4="morphs\practice_WM\practice_WM_04.bmp"
/5="morphs\practice_WM\practice_WM_05.bmp"
/6="morphs\practice_WM\practice_WM_06.bmp"
/7="morphs\practice_WM\practice_WM_07.bmp"
/8="morphs\practice_WM\practice_WM_08.bmp"
/9="morphs\practice_WM\practice_WM_09.bmp"
/10="morphs\practice_WM\practice_WM_10.bmp"
/11="morphs\practice_WM\practice_WM_11.bmp"
/12="morphs\practice_WM\practice_WM_12.bmp"
/13="morphs\practice_WM\practice_WM_13.bmp"
/14="morphs\practice_WM\practice_WM_14.bmp"
/15="morphs\practice_WM\practice_WM_15.bmp"
/16="morphs\practice_WM\practice_WM_16.bmp"
/17="morphs\practice_WM\practice_WM_17.bmp"
/18="morphs\practice_WM\practice_WM_18.bmp"
/19="morphs\practice_WM\practice_WM_19.bmp"
/20="morphs\practice_WM\practice_WM_20.bmp"
/21="morphs\practice_WM\practice_WM_21.bmp"
/22="morphs\practice_WM\practice_WM_22.bmp"
/23="morphs\practice_WM\practice_WM_23.bmp"
/24="morphs\practice_WM\practice_WM_24.bmp"
/25="morphs\practice_WM\practice_WM_25.bmp"
/26="morphs\practice_WM\practice_WM_26.bmp"
/27="morphs\practice_WM\practice_WM_27.bmp"
/28="morphs\practice_WM\practice_WM_28.bmp"
/29="morphs\practice_WM\practice_WM_29.bmp"
/30="morphs\practice_WM\practice_WM_30.bmp"
/31="morphs\practice_WM\practice_WM_31.bmp"
/32="morphs\practice_WM\practice_WM_32.bmp"
/33="morphs\practice_WM\practice_WM_33.bmp"
/34="morphs\practice_WM\practice_WM_34.bmp"
/35="morphs\practice_WM\practice_WM_35.bmp"
/36="morphs\practice_WM\practice_WM_36.bmp"
/37="morphs\practice_WM\practice_WM_37.bmp"
/38="morphs\practice_WM\practice_WM_38.bmp"
/39="morphs\practice_WM\practice_WM_39.bmp"
/40="morphs\practice_WM\practice_WM_40.bmp"
/41="morphs\practice_WM\practice_WM_41.bmp"
/42="morphs\practice_WM\practice_WM_42.bmp"
/43="morphs\practice_WM\practice_WM_43.bmp"
/44="morphs\practice_WM\practice_WM_44.bmp"
/45="morphs\practice_WM\practice_WM_45.bmp"
/46="morphs\practice_WM\practice_WM_46.bmp"
/47="morphs\practice_WM\practice_WM_47.bmp"
/48="morphs\practice_WM\practice_WM_48.bmp"
/49="morphs\practice_WM\practice_WM_49.bmp"
/50="morphs\practice_WM\practice_WM_50.bmp"
</item>

<picture practice_WM>
/items = practice_WM
/select =noreplace
/size = (80%, 80%)
</picture>

<trial practice>
/stimulusframes = [1=picture.practice]
/timeout = parameters.stimulusduration
/ recorddata = true
/ ontrialbegin = [values.stimulusitem; values.actual_mean_anger]
/ ontrialend = [values.slider_response; expressions.amplification_effect]
/ branch = [return surveypage.Angerscale;]
</trial>

<block practice>
/trials = [1=practice]
/postinstructions = (practiceend)
</block>

<slider Angerscale>
/labels = ("Neutral", "Intense Emotion")
/range = (0, 50)
/ defaultresponse = 0
/ validresponse = (0,50)
/required = true
/slidersize = (80%, 80%)
/fontstyle = ("Arial", 3%, true, false, false, false, 5, 1)
/ responsefontstyle = ("Arial", 3%, false, false, false, false, 5, 1)
/ txcolor = black
</slider>

<surveypage Angerscale>
/ caption = "<%parameters.estimate_instructions%>"
/ fontstyle = ("Arial", 3%, false, false, false, false, 5, 10)
/ txcolor = black
/ questions = [1=slider.Angerscale]
/itemspacing = 0
/ showbackbutton = false
/showpagenumbers = false
/showquestionnumbers = false
/ finishlabel = "Next"
/ nextbuttonposition = (50%, 85%)
/ navigationbuttonsize = (8,8)
/ navigationbuttonfontstyle = ("Arial", 2.5%, true, false, false, false, 5, 1)
/ ontrialbegin = [values.stimulusitem; values.actual_mean_anger]
/ ontrialend = [values.slider_response; expressions.amplification_effect]
/recorddata = true
</surveypage>

RE: Anchoring images to increments on Slider/Likert scales

Dave — Wed, 08 Apr 2020 11:29:18 GMT

+x[quote]

[b]carmen0101 - 4/8/2020[/b]
Hi Dave :)

1) In your example, what does the following coding do exactly since I am confused why the jpg are put into the <text> element when they are pictures and the use of <values> =1 (does it matter if it is 0 or 1 here)?

<values>
/ stimitem = 1
</values>

<text stimulus>
/ items = stim_items
/ select = values.stimitem
/ erase = false
</text>

<item stim_items>
/ 1 = "stim01.jpg"
/ 2 = "stim02.jpg"
/ 3 = "stim03.jpg"
/ 4 = "stim04.jpg"
</item>

2) As I am struggling to get the corresponding jpg. to come up when I click on "1" or "2". I have tried to play around with your coding and put in my images but I am unsure where am I going wrong in my code below?

<item practice_WM>
/1="morphs\practice_WM\practice_WM_01.bmp"
/2="morphs\practice_WM\practice_WM_02.bmp"
/3="morphs\practice_WM\practice_WM_03.bmp"
/4="morphs\practice_WM\practice_WM_04.bmp"
</item>

<picture practice>
/items = practice_WM
/size = (80%, 80%)
</picture>

<text 1>
/ items = ("1")
/ erase = false
/ position = (20%, 80%)
</text>

<text 2>
/ items = ("2")
/ erase = false
/ position = (40%, 80%)
</text>

<text 3>
/ items = ("3")
/ erase = false
/ position = (60%, 80%)
</text>

<text 4>
/ items = ("4")
/ erase = false
/ position = (80%, 80%)
</text>

<button NEXT>
/ caption = "Next"
/ erase = false
/ size = (10%, 5%)
/ position = (50%, 90%)
</button>

<trial practice>
/ stimulusframes = [1=clearscreen, picture.practice, 1,2,3,4, Next]
/ validresponse = (1,2,3,4, Next)
/ inputdevice = mouseover
/ showmousecursor = true
/ ontrialend = [ if (trial.practice.response == "1") {
   values.stimitem = 1;
} else if (trial.practice.response == "2") {
   values.stimitem = 2;
} else if (trial.practice.response == "3") {
   values.stimitem = 3;
} else if (trial.practice.response == "4") {
   values.stimitem = 4;
};
]
/ branch = [
if (trial.practice.response == "Next") trial.practice
else trial.endtrial;
]
/ recorddata = false
</trial>

<trial endtrial>
/ validresponse = (0)
/ trialduration = 10000
</trial>

<block practice>
/ trials = [1=practice]
</block>
[/quote]

It's a <text> element because I don't have your images and I'm providing code that will actually run. You need to use a <picture> element instead, it works the same way.

RE: Anchoring images to increments on Slider/Likert scales

carmen0101 — Wed, 08 Apr 2020 06:06:50 GMT

Hi Dave :)

1) In your example, what does the following coding do exactly since I am confused why the jpg are put into the <text> element when they are pictures and the use of <values> =1 (does it matter if it is 0 or 1 here)?

<values>
/ stimitem = 1
</values>

<text stimulus>
/ items = stim_items
/ select = values.stimitem
/ erase = false
</text>

<item stim_items>
/ 1 = "stim01.jpg"
/ 2 = "stim02.jpg"
/ 3 = "stim03.jpg"
/ 4 = "stim04.jpg"
</item>

2) As I am struggling to get the corresponding jpg. to come up when I click on "1" or "2". I have tried to play around with your coding and put in my images but I am unsure where am I going wrong in my code below?

<item practice_WM>
/1="morphs\practice_WM\practice_WM_01.bmp"
/2="morphs\practice_WM\practice_WM_02.bmp"
/3="morphs\practice_WM\practice_WM_03.bmp"
/4="morphs\practice_WM\practice_WM_04.bmp"
</item>

<picture practice>
/items = practice_WM
/size = (80%, 80%)
</picture>

<text 1>
/ items = ("1")
/ erase = false
/ position = (20%, 80%)
</text>

<text 2>
/ items = ("2")
/ erase = false
/ position = (40%, 80%)
</text>

<text 3>
/ items = ("3")
/ erase = false
/ position = (60%, 80%)
</text>

<text 4>
/ items = ("4")
/ erase = false
/ position = (80%, 80%)
</text>

<button NEXT>
/ caption = "Next"
/ erase = false
/ size = (10%, 5%)
/ position = (50%, 90%)
</button>

<trial practice>
/ stimulusframes = [1=clearscreen, picture.practice, 1,2,3,4, Next]
/ validresponse = (1,2,3,4, Next)
/ inputdevice = mouseover
/ showmousecursor = true
/ ontrialend = [ if (trial.practice.response == "1") {
   values.stimitem = 1;
} else if (trial.practice.response == "2") {
   values.stimitem = 2;
} else if (trial.practice.response == "3") {
   values.stimitem = 3;
} else if (trial.practice.response == "4") {
   values.stimitem = 4;
};
]
/ branch = [
if (trial.practice.response == "Next") trial.practice
else trial.endtrial;
]
/ recorddata = false
</trial>

<trial endtrial>
/ validresponse = (0)
/ trialduration = 10000
</trial>

<block practice>
/ trials = [1=practice]
</block>

RE: Anchoring images to increments on Slider/Likert scales

Dave — Tue, 07 Apr 2020 10:54:53 GMT

+x[quote]

[b]carmen0101 - 4/7/2020[/b]
Hello Dave,

I am having trouble getting pictures to come up and it seems that for the current coding you suggested - hovering mouseover the number takes it as a responses and thus ends the trial.

Since my goal is to implement some sort of slider for the participant to drag along the scale to submit their responses, would it be possible to display pictures at certain increments of my slider. E.g. a neutral face when the slider is at 1, a medium face at 25 and an angry face when the slider is at 50.
[/quote]

> it seems that for the current coding you suggested - hovering mouseover the number takes it as a responses and thus ends the trial.

No, not really.

> Since my goal is to implement some sort of slider for the participant to drag along the scale to submit their responses, would it be possible to display pictures at certain increments of my slider.

You can implement this, but not using a <slider>. The method is to use standard trial elements in the way I've show.

RE: Anchoring images to increments on Slider/Likert scales

carmen0101 — Tue, 07 Apr 2020 02:43:19 GMT

Hello Dave,

I am having trouble getting pictures to come up and it seems that for the current coding you suggested - hovering mouseover the number takes it as a responses and thus ends the trial.

Since my goal is to implement some sort of slider for the participant to drag along the scale to submit their responses, would it be possible to display pictures at certain increments of my slider. E.g. a neutral face when the slider is at 1, a medium face at 25 and an angry face when the slider is at 50.

RE: Anchoring images to increments on Slider/Likert scales

Dave — Mon, 06 Apr 2020 11:24:03 GMT

+x[quote]

[b]carmen0101 - 4/4/2020[/b]
I would like to present a slider scale with images at the time. Is it possible to anchor a new image (ontop of each other, so it looks like a morphing image) to each increment anchor on the slider? I would like it so that if the participant is hover over 1 on the slider that an picture1 is shown on the same screen, and then hovering over 40 on the slider will show picture40 etc...

This is my current coding but I have not worked out how to anchor images to the slider. Also I am unsure whether the LIKERT function may be better to achieve the effect I am after. Any advice would be much appreciated!!!

<text instruction1>
/items =("In this study, you will see some faces.

You will then be asked to estimate what is the average level of emotions shown by the faces.

Rate the average emotion by using your mouse on a scale on the following page.

When you press the <SPACEBAR>, a practice trial will begin.")
/valign = center
/txcolor = black
/fontstyle = ("Arial", 3%, false, false, false, false, 5, 1)
</text>

<trial instruction1>
/ stimulusframes = [1=instruction1]
/ inputdevice = keyboard
/ validresponse = (" ")
</trial>

<block instruction1>
/ trials = [1=instruction1]
</block>

<picture practice>
/items = ("morphs\practice_WM\practice_WM_25.bmp")
/size = (80%, 80%)
</picture>

<item practice_WM>
/1="morphs\practice_WM\practice_WM_01.bmp"
/2="morphs\practice_WM\practice_WM_02.bmp"
/3="morphs\practice_WM\practice_WM_03.bmp"
/4="morphs\practice_WM\practice_WM_04.bmp"
/5="morphs\practice_WM\practice_WM_05.bmp"
/6="morphs\practice_WM\practice_WM_06.bmp"
/7="morphs\practice_WM\practice_WM_07.bmp"
/8="morphs\practice_WM\practice_WM_08.bmp"
/9="morphs\practice_WM\practice_WM_09.bmp"
/10="morphs\practice_WM\practice_WM_10.bmp"
/11="morphs\practice_WM\practice_WM_11.bmp"
/12="morphs\practice_WM\practice_WM_12.bmp"
/13="morphs\practice_WM\practice_WM_13.bmp"
/14="morphs\practice_WM\practice_WM_14.bmp"
/15="morphs\practice_WM\practice_WM_15.bmp"
/16="morphs\practice_WM\practice_WM_16.bmp"
/17="morphs\practice_WM\practice_WM_17.bmp"
/18="morphs\practice_WM\practice_WM_18.bmp"
/19="morphs\practice_WM\practice_WM_19.bmp"
/20="morphs\practice_WM\practice_WM_20.bmp"
/21="morphs\practice_WM\practice_WM_21.bmp"
/22="morphs\practice_WM\practice_WM_22.bmp"
/23="morphs\practice_WM\practice_WM_23.bmp"
/24="morphs\practice_WM\practice_WM_24.bmp"
/25="morphs\practice_WM\practice_WM_25.bmp"
/26="morphs\practice_WM\practice_WM_26.bmp"
/27="morphs\practice_WM\practice_WM_27.bmp"
/28="morphs\practice_WM\practice_WM_28.bmp"
/29="morphs\practice_WM\practice_WM_29.bmp"
/30="morphs\practice_WM\practice_WM_30.bmp"
/31="morphs\practice_WM\practice_WM_31.bmp"
/32="morphs\practice_WM\practice_WM_32.bmp"
/33="morphs\practice_WM\practice_WM_33.bmp"
/34="morphs\practice_WM\practice_WM_34.bmp"
/35="morphs\practice_WM\practice_WM_35.bmp"
/36="morphs\practice_WM\practice_WM_36.bmp"
/37="morphs\practice_WM\practice_WM_37.bmp"
/38="morphs\practice_WM\practice_WM_38.bmp"
/39="morphs\practice_WM\practice_WM_39.bmp"
/40="morphs\practice_WM\practice_WM_40.bmp"
/41="morphs\practice_WM\practice_WM_41.bmp"
/42="morphs\practice_WM\practice_WM_42.bmp"
/43="morphs\practice_WM\practice_WM_43.bmp"
/44="morphs\practice_WM\practice_WM_44.bmp"
/45="morphs\practice_WM\practice_WM_45.bmp"
/46="morphs\practice_WM\practice_WM_46.bmp"
/47="morphs\practice_WM\practice_WM_47.bmp"
/48="morphs\practice_WM\practice_WM_48.bmp"
/49="morphs\practice_WM\practice_WM_49.bmp"
/50="morphs\practice_WM\practice_WM_50.bmp"
</item>

<picture practice_WM>
/items = practice_WM
/select =noreplace
/size = (80%, 80%)
</picture>

<trial practice>
/stimulusframes = [1=picture.practice]
/timeout = parameters.stimulusduration
/ recorddata = true
/ ontrialbegin = [values.stimulusitem; values.actual_mean_anger]
/ ontrialend = [values.slider_response; expressions.amplification_effect]
/ branch = [return surveypage.Angerscale;]
</trial>

<block practice>
/trials = [1=practice]
/postinstructions = (practiceend)
</block>

<slider Angerscale>
/labels = ("Neutral", "Intense Emotion")
/range = (0, 50)
/ defaultresponse = 0
/ validresponse = (0,50)
/required = true
/slidersize = (80%, 80%)
/fontstyle = ("Arial", 3%, true, false, false, false, 5, 1)
/ responsefontstyle = ("Arial", 3%, false, false, false, false, 5, 1)
/ txcolor = black
</slider>

<surveypage Angerscale>
/ caption = "<%parameters.estimate_instructions%>"
/ fontstyle = ("Arial", 3%, false, false, false, false, 5, 10)
/ txcolor = black
/ questions = [1=slider.Angerscale]
/itemspacing = 0
/ showbackbutton = false
/showpagenumbers = false
/showquestionnumbers = false
/ finishlabel = "Next"
/ nextbuttonposition = (50%, 85%)
/ navigationbuttonsize = (8,8)
/ navigationbuttonfontstyle = ("Arial", 2.5%, true, false, false, false, 5, 1)
/ ontrialbegin = [values.stimulusitem; values.actual_mean_anger]
/ ontrialend = [values.slider_response; expressions.amplification_effect]
/recorddata = true
</surveypage>
[/quote]

Neither <slider> nor <likert> will work for that, I think. Instead you'll have to build something like this using regular <trial> elements.

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

<trial hovertrial>
/ stimulusframes = [1=clearscreen, stimulus, one, two, three, four, done]
/ validresponse = (one, two, three, four, done)
/ inputdevice = mouseover
/ ontrialend = [
    if (trial.hovertrial.response == "one") {
        values.stimitem = 1;
    } else if (trial.hovertrial.response == "two") {
        values.stimitem = 2;
    } else if (trial.hovertrial.response == "three") {
        values.stimitem = 3;
    } else if (trial.hovertrial.response == "four") {
        values.stimitem = 4;
    };
]
/ branch = [
    if (trial.hovertrial.response != "done") trial.hovertrial
    else trial.endtrial;
]
/ recorddata = false
</trial>

<trial endtrial>
/ validresponse = (0)
/ trialduration = 500
</trial>

<values>
/ stimitem = 1
</values>

<text stimulus>
/ items = stim_items
/ select = values.stimitem
/ erase = false
</text>

<item stim_items>
/ 1 = "stim01.jpg"
/ 2 = "stim02.jpg"
/ 3 = "stim03.jpg"
/ 4 = "stim04.jpg"
</item>

<text one>
/ items = ("1")
/ erase = false
/ position = (20%, 80%)
</text>

<text two>
/ items = ("2")
/ erase = false
/ position = (40%, 80%)
</text>

<text three>
/ items = ("3")
/ erase = false
/ position = (60%, 80%)
</text>

<text four>
/ items = ("4")
/ erase = false
/ position = (80%, 80%)
</text>

<button done>
/ caption = "DONE"
/ erase = false
/ size = (10%, 5%)
/ position = (50%, 90%)
</button>