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

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.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

3 months 2 weeks ago #254213 by Joffm

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?

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

More

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

More

3 months 2 weeks ago #254236 by tpartner

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:

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

More

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:

...24-01-09-2.jpg

Last edit: 3 months 2 weeks ago by modernity4r.

Please Log in to join the conversation.

holch
Offline
LimeSurvey Community Team

More

3 months 2 weeks ago #254257 by holch

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

More

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

More

3 months 2 weeks ago #254414 by holch

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 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.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Allowing respondents to adjust font size in survey pages

Lime-years ahead

Legal

About Us

Open Source