Millisecond Forums

Issue with radio buttons moving with the window scroll

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

By Connorrr - 9/5/2021

Hi,

I've attached a video of an issue we are having with the survey page. It seems that some users are seeing the radio buttons remain stationary while the questions move with the page scroll.  Do you know why this happens and how it can be fixed?

Error Video

Cheers,
Connor
By Dave - 9/6/2021

Connorrr - 9/5/2021
Hi,

I've attached a video of an issue we are having with the survey page. It seems that some users are seeing the radio buttons remain stationary while the questions move with the page scroll.  Do you know why this happens and how it can be fixed?

Error Video

Cheers,
Connor

That's impossible to answer without you providing the underlying code as well as the system details (exact OS version, exact Inquisit version). Please provide those. Most likely, though, you have some conflicting sizing and positioning choices in the script that throw things off (e.g. elements sized to more than 100% of the available display height and/or width).
By Connorrr - 9/6/2021

Hi Dave, thanks for your help.  The version is Inquisit 5.0.14.0 and although it is difficult to tell which participant sent in this video I believe their setup was Mac OS X 10.14.6    Safari 14.1.2    
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.  Here is the code for the page in question:

<radiobuttons q1_15_1>
/caption = "I found it hard to wind down "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_2>
/caption = "I was aware of dryness of my mouth "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_3>
/caption = "I couldn't seem to experience any positive feeling at all "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_4>
/caption = "I experienced breathing difficulty (eg, excessively rapid breathing,
breathlessness in the absence of physical exertion)"
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_5>
/caption = "I found it difficult to work up the initiative to do things"
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<surveypage SP_15_1>
/caption ="
Please read each statement and circle a number 0, 1, 2 or 3 which indicates how much the statement applied to you over the past week. There are no right or wrong answers. Do not spend too much time on any statement.

The rating scale is as follows:

0 Did not apply to me at all
1 Applied to me to some degree, or some of the time
2 Applied to me to a considerable degree, or a good part of time
3 Applied to me very much, or most of the time "
/ subcaptionfontstyle = ("Arial", 4%, true, false, false, false, 5, 1)
/ txcolor = (0, 0, 0)
/questions = [1 = q1_15_1, q1_15_2, q1_15_3, q1_15_4, q1_15_5]
/showpagenumbers = false
/showquestionnumbers = false
/ showbackbutton = false
</surveypage>
By Dave - 9/6/2021

Connorrr - 9/6/2021
Hi Dave, thanks for your help.  The version is Inquisit 5.0.14.0 and although it is difficult to tell which participant sent in this video I believe their setup was Mac OS X 10.14.6    Safari 14.1.2    
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.  Here is the code for the page in question:

<radiobuttons q1_15_1>
/caption = "I found it hard to wind down "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_2>
/caption = "I was aware of dryness of my mouth "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_3>
/caption = "I couldn't seem to experience any positive feeling at all "
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_4>
/caption = "I experienced breathing difficulty (eg, excessively rapid breathing,
breathlessness in the absence of physical exertion)"
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<radiobuttons q1_15_5>
/caption = "I found it difficult to work up the initiative to do things"
/ options = ("0", "1", "2", "3")
/ optionvalues = ("0", "1", "2", "3")
/ required = true
/orientation = horizontalequal
/ fontstyle = ("Arial", 1.48%, false, false, false, false, 5, 1)
</radiobuttons>

<surveypage SP_15_1>
/caption ="
Please read each statement and circle a number 0, 1, 2 or 3 which indicates how much the statement applied to you over the past week. There are no right or wrong answers. Do not spend too much time on any statement.

The rating scale is as follows:

0 Did not apply to me at all
1 Applied to me to some degree, or some of the time
2 Applied to me to a considerable degree, or a good part of time
3 Applied to me very much, or most of the time "
/ subcaptionfontstyle = ("Arial", 4%, true, false, false, false, 5, 1)
/ txcolor = (0, 0, 0)
/questions = [1 = q1_15_1, q1_15_2, q1_15_3, q1_15_4, q1_15_5]
/showpagenumbers = false
/showquestionnumbers = false
/ showbackbutton = false
</surveypage>

That surely cannot be the full script. The context this code appears in may be important, so please provide that as well.
By Connorrr - 9/6/2021

Sorry, I didn't want to show the whole thing because the whole script is very large.  If you want the whole script you can get it here and this is the encapsulating survey element:

<survey FCQ_S2>
/pages = [

    1 = SP_6;
    
    1 = SP_7_1;
    1 = SP_7_2;
    1 = SP_7_3;
    1 = SP_7_4;
    1 = SP_7_5;
    1 = SP_7_6;
    
    1 = SP_8_1;
    1 = SP_8_2;
    1 = SP_8_3;
    1 = SP_8_4;
    1 = SP_8_5;
    1 = SP_8_6;
    
    1 = SP_9_1;
    1 = SP_9_2;
    1 = SP_9_3;
    1 = SP_9_4;
    
    1 = SP_10_1;
    1 = SP_10_2;
    1 = SP_10_3;
    1 = SP_10_4;
    1 = SP_10_5;
    1 = SP_10_6;
    
    1 = SP_11_1;
    1 = SP_11_2;
    1 = SP_11_3;
    1 = SP_11_4;
    1 = SP_11_5;
    
    1 = SP_12_1;

    1 = SP_13_1;
    1 = SP_13_2;
    1 = SP_13_3;
    1 = SP_13_4;
    1 = SP_13_5;
    1 = SP_13_6;
    1 = SP_13_7;
    1 = SP_13_8;
    1 = SP_13_9;
    1 = SP_13_10;
    1 = SP_13_11;
    1 = SP_13_12;
    1 = SP_13_13;
    
    1 = SP_14_1;
    1 = SP_14_2;
    1 = SP_14_3;
    
    1 = SP_15_1;
    1 = SP_15_2;
    1 = SP_15_3;
    1 = SP_15_4;
    1 = SP_15_5;
    
    1 = SP_16_1;

]
/screencapture = false
/ onblockend = [
    values.completed = 1;
]
/ navigationbuttonfontstyle = ("Arial", 1.5%, false, false, false, false, 5, 1)
/ navigationbuttonsize = (15%, 5%)
/ backbuttonposition = (20%, 90%)
/ nextbuttonposition = (70%, 90%)
/ finishlabel = "Finish"
</survey>
By Dave - 9/6/2021

Connorrr - 9/7/2021
Sorry, I didn't want to show the whole thing because the whole script is very large.  If you want the whole script you can get it here and this is the encapsulating survey element:

<survey FCQ_S2>
/pages = [

    1 = SP_6;
    
    1 = SP_7_1;
    1 = SP_7_2;
    1 = SP_7_3;
    1 = SP_7_4;
    1 = SP_7_5;
    1 = SP_7_6;
    
    1 = SP_8_1;
    1 = SP_8_2;
    1 = SP_8_3;
    1 = SP_8_4;
    1 = SP_8_5;
    1 = SP_8_6;
    
    1 = SP_9_1;
    1 = SP_9_2;
    1 = SP_9_3;
    1 = SP_9_4;
    
    1 = SP_10_1;
    1 = SP_10_2;
    1 = SP_10_3;
    1 = SP_10_4;
    1 = SP_10_5;
    1 = SP_10_6;
    
    1 = SP_11_1;
    1 = SP_11_2;
    1 = SP_11_3;
    1 = SP_11_4;
    1 = SP_11_5;
    
    1 = SP_12_1;

    1 = SP_13_1;
    1 = SP_13_2;
    1 = SP_13_3;
    1 = SP_13_4;
    1 = SP_13_5;
    1 = SP_13_6;
    1 = SP_13_7;
    1 = SP_13_8;
    1 = SP_13_9;
    1 = SP_13_10;
    1 = SP_13_11;
    1 = SP_13_12;
    1 = SP_13_13;
    
    1 = SP_14_1;
    1 = SP_14_2;
    1 = SP_14_3;
    
    1 = SP_15_1;
    1 = SP_15_2;
    1 = SP_15_3;
    1 = SP_15_4;
    1 = SP_15_5;
    
    1 = SP_16_1;

]
/screencapture = false
/ onblockend = [
    values.completed = 1;
]
/ navigationbuttonfontstyle = ("Arial", 1.5%, false, false, false, false, 5, 1)
/ navigationbuttonsize = (15%, 5%)
/ backbuttonposition = (20%, 90%)
/ nextbuttonposition = (70%, 90%)
/ finishlabel = "Finish"
</survey>

Here's what's confusing: The video shows a back button, yet the script you shared has back navigation disabled throughout. So the script in the video cannot be identical to the script you shared. The font sizes also look off in the video compared to what's in the script you shared -- in the video, they seem to be larger than they should be.

Are you certain you've made the correct script / script version available here?
By Connorrr - 9/6/2021

Hi Dave, since this video was made I have indeed removed the back button since it seems to be blocking question views on some monitors.  I've also shortened the captions on survey page SP_11_1-5 but these are the only changes from the script present in the video.
By Dave - 9/6/2021

Connorrr - 9/7/2021
Hi Dave, since this video was made I have indeed removed the back button since it seems to be blocking question views on some monitors.  I've also shortened the captions on survey page SP_11_1-5 but these are the only changes from the script present in the video.

Do you still have the version under which the problem actually occurred around then? Any changes made may obviously matter.
By Connorrr - 9/6/2021

Unfortunately it's not on the current system I'm working on.  I'll get my hands on a mac laptop in an hour or two and I'll try to recreate the error then, otherwise I'll get the old script from my home PC in a few hours.
By Dave - 9/6/2021

Connorrr - 9/7/2021
Unfortunately it's not on the current system I'm working on.  I'll get my hands on a mac laptop in an hour or two and I'll try to recreate the error then, otherwise I'll get the old script from my home PC in a few hours.

Alright, I'll try see if I can reproduce and figure out a workaround tomorrow then, once I have the actual script.
By Connorrr - 9/6/2021

Hi David, I just ran the script I sent you on a Mac laptop and it seems like the bug is persistent.  I've found that when I have the cursor on the radio button and then scroll the page will scroll as normal but if I have the cursor anywhere other than hovering on top of the radio button the text will scroll but the radio buttons will stay in the original position.  Unfortunately, on smaller monitors this means that some questions cannot be accessed.
By Dave - 9/7/2021

Connorrr - 9/7/2021
Hi David, I just ran the script I sent you on a Mac laptop and it seems like the bug is persistent.  I've found that when I have the cursor on the radio button and then scroll the page will scroll as normal but if I have the cursor anywhere other than hovering on top of the radio button the text will scroll but the radio buttons will stay in the original position.  Unfortunately, on smaller monitors this means that some questions cannot be accessed.

I conferred with our lead macOS developer and the verdict is that this issue is caused by API behavior changes in certain macOS veresions post-dating the final Inquisit 5 release.
Short of switching to Inquisit 6, the only workaround is to effecitively eliminate the need for scrolling. The options to achieve that are:
- Reducing amount of questions per page,
- A smaller fontsize at the <surveypage> level (e.g. / fontstyle = ("Arial", 1.5%, false, false, false, false, 5, 1), or
- Reducing /itemspacing at the <survey>-level.

The latter is probably the quickest and easiest fix, e.g. itemspacing values anywhere between 1% and 2% should probably do the trick:

<survey FCQ_S2>
/ itemspacing = 1%
/pages = [

    1 = SP_6;
    
    1 = SP_7_1;
    1 = SP_7_2;
    1 = SP_7_3;
    1 = SP_7_4;
    1 = SP_7_5;
    1 = SP_7_6;
    
    1 = SP_8_1;
    1 = SP_8_2;
    1 = SP_8_3;
    1 = SP_8_4;
    1 = SP_8_5;
    1 = SP_8_6;
    
    1 = SP_9_1;
    1 = SP_9_2;
    1 = SP_9_3;
    1 = SP_9_4;
    
    1 = SP_10_1;
    1 = SP_10_2;
    1 = SP_10_3;
    1 = SP_10_4;
    1 = SP_10_5;
    1 = SP_10_6;
    
    1 = SP_11_1;
    1 = SP_11_2;
    1 = SP_11_3;
    1 = SP_11_4;
    1 = SP_11_5;
    
    1 = SP_12_1;

    1 = SP_13_1;
    1 = SP_13_2;
    1 = SP_13_3;
    1 = SP_13_4;
    1 = SP_13_5;
    1 = SP_13_6;
    1 = SP_13_7;
    1 = SP_13_8;
    1 = SP_13_9;
    1 = SP_13_10;
    1 = SP_13_11;
    1 = SP_13_12;
    1 = SP_13_13;
    
    1 = SP_14_1;
    1 = SP_14_2;
    1 = SP_14_3;
    
    1 = SP_15_1;
    1 = SP_15_2;
    1 = SP_15_3;
    1 = SP_15_4;
    1 = SP_15_5;
    
    1 = SP_16_1;

]
/screencapture = false
/ onblockend = [
    values.completed = 1;
]
/ navigationbuttonfontstyle = ("Arial", 1.5%, false, false, false, false, 5, 1)
/ navigationbuttonsize = (15%, 5%)
/ backbuttonposition = (20%, 90%)
/ nextbuttonposition = (70%, 90%)
/ finishlabel = "Finish"
</survey>