Millisecond Forums

Anchoring images to increments on Slider/Likert scales

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

By carmen0101 - 4/4/2020

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>
By Dave - 4/6/2020

 
carmen0101 - 4/4/2020
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>

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>
By carmen0101 - 4/6/2020

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.
By Dave - 4/7/2020

 
carmen0101 - 4/7/2020
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.

> 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.
By carmen0101 - 4/7/2020

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>
By Dave - 4/8/2020

 
carmen0101 - 4/8/2020
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>

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.