- Posts: 48
- Thank you received: 2
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Allowing respondents to adjust font size in survey pages
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
3 months 2 weeks ago #254211
by modernity4r
Allowing respondents to adjust font size in survey pages was created by modernity4r
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.4.0+
Own server or LimeSurvey hosting: Both
Survey theme/template: Fruity
==================
Hello! LimeSurvey allows adjusting the font size via editing the global custom.css file or adding css sources in individual question editor. However, respondents may have different preferences regarding font sizes depending on their eyesight. It would be good if respondents could adjust the font size themselves within the survey page. I wonder if there is a way to add +/- buttons or options to make text larger/smaller on LimeSurvey survey pages. Should I edit custom.css? Or should I edit some .twig files? Or theme.css? Please advise on how I can enable respondents to customize the font size themselves.
I deeply appreciate everyone who contributes to discussions on this forum.
Your LimeSurvey version: 6.4.0+
Own server or LimeSurvey hosting: Both
Survey theme/template: Fruity
==================
Hello! LimeSurvey allows adjusting the font size via editing the global custom.css file or adding css sources in individual question editor. However, respondents may have different preferences regarding font sizes depending on their eyesight. It would be good if respondents could adjust the font size themselves within the survey page. I wonder if there is a way to add +/- buttons or options to make text larger/smaller on LimeSurvey survey pages. Should I edit custom.css? Or should I edit some .twig files? Or theme.css? Please advise on how I can enable respondents to customize the font size themselves.
I deeply appreciate everyone who contributes to discussions on this forum.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
3 months 2 weeks ago #254213
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Allowing respondents to adjust font size in survey pages
Hi,
you see, there is
CTRL +, CTRL -.
Why isn't it sufficient?
you see, there is
CTRL +, CTRL -.
Why isn't it sufficient?
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: modernity4r
Please Log in to join the conversation.
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 2
3 months 2 weeks ago #254219
by modernity4r
Replied by modernity4r on topic Allowing respondents to adjust font size in survey pages
This appears to be an issue related to mobile phone-based web surveys. The Safari web browser on Apple iPhones has font size magnification/reduction buttons on the URL address bar, which may not be very helpful for iPhone users. However, Chrome, Firefox, Opera etc. on Android devices have the dynamic font size adjustment feature nested deep within multiple layers of browser settings, making it difficult for respondents to easily adjust the font size of the survey. Frankly speaking, this feature is a cultural perspective (preference) on web documents, and a thoughtful accommodation for elderly populations and participants with impaired vision.
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
3 months 2 weeks ago #254236
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Allowing respondents to adjust font size in survey pages
You can add a text-resizing widget.
1) Extend your survey theme.
2) Add something like this to the end of progress_bar.twig:
3) Add something like this to the end of custom.css:
4) Add this to the end of custom.js:
1) Extend your survey theme.
2) Add something like this to the end of progress_bar.twig:
Code:
<div class="text-size-container"> <div class="label-container"> <span>Text size</span> </div> <div class="button-container"> <div class="input-group"> <button class="btn btn-outline-secondary minus" type="button" id="text-size-minus">-</button> <button class="btn btn-outline-secondary plus" type="button" id="text-size-plus">+</button> </div> </div> </div>
3) Add something like this to the end of custom.css:
Code:
.text-size-container { display: flex; align-items: center; justify-content: center; } .text-size-container > * { flex-basis: auto; } .text-size-container .label-container { padding-right: 0.5em; } .text-size-container button { padding: .175rem .75rem; font-weight: bold; } body[data-ls-font-size="100"] .text-size-container button.minus { opacity: 0.25; pointer-events: none; } body[data-ls-font-size="200"] .text-size-container button.plus { opacity: 0.25; pointer-events: none; } body[data-ls-font-size="110"] { font-size: 110% } body[data-ls-font-size="120"] { font-size: 120% } body[data-ls-font-size="130"] { font-size: 130% } body[data-ls-font-size="140"] { font-size: 140% } body[data-ls-font-size="150"] { font-size: 150% } body[data-ls-font-size="160"] { font-size: 160% } body[data-ls-font-size="170"] { font-size: 170% } body[data-ls-font-size="180"] { font-size: 180% } body[data-ls-font-size="190"] { font-size: 190% } body[data-ls-font-size="200"] { font-size: 200% }
4) Add this to the end of custom.js:
Code:
$(document).on('ready pjax:scriptcomplete',function(){ if(localStorage.getItem("lsFontSize") === null) { localStorage.setItem('lsFontSize', 100); } $('body').attr('data-ls-font-size', localStorage.getItem('lsFontSize')); $('.text-size-container button').on('click', function(e) { var lsCurrentFontSize = Number(localStorage.getItem('lsFontSize')); var sizeIncrement = 10; if($(this).hasClass('minus')) { sizeIncrement = -10 } var lsNewFontSize = lsCurrentFontSize+sizeIncrement; localStorage.setItem('lsFontSize', lsNewFontSize); $('body').attr('data-ls-font-size', localStorage.getItem('lsFontSize')); }); });
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: modernity4r
Please Log in to join the conversation.
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 2
3 months 2 weeks ago - 3 months 2 weeks ago #254239
by modernity4r
Replied by modernity4r on topic Allowing respondents to adjust font size in survey pages
Thank you very much. The scripts you recommended work well. I'm learning an important example of using .twig, .js, and .css files together. I will also practice adjusting the position and styling of the <Text size +/-> buttons.
Attachments:
Last edit: 3 months 2 weeks ago by modernity4r.
Please Log in to join the conversation.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11660
- Thank you received: 2742
3 months 2 weeks ago #254257
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Allowing respondents to adjust font size in survey pages
I find that people with bad eyesight usually have set their font size already in the settings of their phone, because they need it almost with anything, not just your specific website.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The following user(s) said Thank You: modernity4r
Please Log in to join the conversation.
- modernity4r
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 48
- Thank you received: 2
3 months 2 weeks ago #254387
by modernity4r
Replied by modernity4r on topic Allowing respondents to adjust font size in survey pages
I think of it as a kind of cultural attitude or service. The images below show two newspaper companies providing their readers an option to adjust the text size on the screen.
Attachments:
Please Log in to join the conversation.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11660
- Thank you received: 2742
3 months 2 weeks ago #254414
by holch
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Allowing respondents to adjust font size in survey pages
Don't get me wrong. Nothing against this.
I just think the added value is relatively low. If everything else in the survey is optimized and you still have time to spare, this is certainly something that can be added.
I don't know if it is your case, as I don't know your survey, I just feel that often people get lost in such details while other aspects of a survey, that might be a lot more important, are ignored.
But adding the option to increase the font size certainly doesn't hurt.
Good luck!
I just think the added value is relatively low. If everything else in the survey is optimized and you still have time to spare, this is certainly something that can be added.
I don't know if it is your case, as I don't know your survey, I just feel that often people get lost in such details while other aspects of a survey, that might be a lot more important, are ignored.
But adding the option to increase the font size certainly doesn't hurt.
Good luck!
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Please Log in to join the conversation.