- Posts: 7
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Display percentage value in progress bar without having to code
- munmigraproject
- Topic Author
- Offline
- New Member
Less
More
2 months 3 weeks ago #255157
by munmigraproject
Display percentage value in progress bar without having to code was created by munmigraproject
Hello,
Is there an easy way to display the percentage value in progress bar (without having to code)?
Thank you so much!
Juliana
Is there an easy way to display the percentage value in progress bar (without having to code)?
Thank you so much!
Juliana
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 3 weeks ago - 2 months 3 weeks ago #255159
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Display percentage value in progress bar without having to code
Hi,
if you do not answer the questions at the beginning (which you removed), it is difficult to help.
Joffm
if you do not answer the questions at the beginning (which you removed), it is difficult to help.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 months 3 weeks ago by Joffm.
The following user(s) said Thank You: DenisChenu
Please Log in to join the conversation.
- munmigraproject
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
2 months 3 weeks ago #255416
by munmigraproject
Replied by munmigraproject on topic Display percentage value in progress bar without having to code
Sorry, indeed. Here you go:
LimeSurvey version: Cloud version 6.4.4
LimeSurvey hosting, I guess?
Survey theme/template: Inherit Apple
I hope these are the right answers! thanks for your help!
LimeSurvey version: Cloud version 6.4.4
LimeSurvey hosting, I guess?
Survey theme/template: Inherit Apple
I hope these are the right answers! thanks for your help!
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 3 weeks ago - 2 months 3 weeks ago #255420
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Display percentage value in progress bar without having to code
Hi,
"inherit apple" seems to be the "apple" variation of "fruity_twentythree"
Now, as you see, in this theme the progressbar is very small.
Therefore there are no numbers displayed but a tooltip.
To show the percentage as in the other themes you may read this (the part after we agreed about the used theme)
[url] forums.limesurvey.org/forum/design-issue...progress-bar-percent [/url]
Joffm
"inherit apple" seems to be the "apple" variation of "fruity_twentythree"
Now, as you see, in this theme the progressbar is very small.
Therefore there are no numbers displayed but a tooltip.
To show the percentage as in the other themes you may read this (the part after we agreed about the used theme)
[url] forums.limesurvey.org/forum/design-issue...progress-bar-percent [/url]
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 2 months 3 weeks ago by Joffm.
Please Log in to join the conversation.
- munmigraproject
- Topic Author
- Offline
- New Member
Less
More
- Posts: 7
- Thank you received: 0
2 months 3 weeks ago #255533
by munmigraproject
Replied by munmigraproject on topic Display percentage value in progress bar without having to code
Thank you!
I see your reply in the other forum: "So, if you want to use "fruity_twentythree" you may set the height of the progressbar to 20px or 25px and then use the content of the "progress_bar-twig of the other themes. Just copy into "the extended "fruity twentythree""
But where can I set the height of the progress bar and copy the text you mention?
Thanks a lot!
I see your reply in the other forum: "So, if you want to use "fruity_twentythree" you may set the height of the progressbar to 20px or 25px and then use the content of the "progress_bar-twig of the other themes. Just copy into "the extended "fruity twentythree""
But where can I set the height of the progress bar and copy the text you mention?
Thanks a lot!
Please Log in to join the conversation.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13648
- Thank you received: 2491
2 months 3 weeks ago #255538
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Display percentage value in progress bar without having to code
I think this issue must be reported as bug.
Have a hidden text for percentage are an ergonomy issu.
Else , in custom.css
.top-container .progress { height: 1.5em;}
Or better:don't use this theme…
Have a hidden text for percentage are an ergonomy issu.
Else , in custom.css
.top-container .progress { height: 1.5em;}
Or better:don't use this theme…
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 months 3 weeks ago #255551
by Joffm
Extend the theme and adapt to your needs.
To change the height of the progress bar you may enter into the "custom.css", as @Denis wrote already
Now you see that in the "progress_bar.twig" of "fruity_twentythree" there is
You see that here is inserted a tooltip that shows the percentage.
Compared with this part in "fruity"
If you now replace the twentythree part by the fruity part you get this.
On the other side there are many discussions about progress bars - does it encourage the respondents or discourage?
In my opinion you should not display a progress bar, but give feedback to the respondents that they finished one part, that now you are going to ask something about ... , give them chances to breathe, not only fire question after question.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Display percentage value in progress bar without having to code
In the theme editor.But where can I set the height of the progress bar and copy the text you mention?
Extend the theme and adapt to your needs.
To change the height of the progress bar you may enter into the "custom.css", as @Denis wrote already
Code:
.top-container .progress { height: 20px; }
Now you see that in the "progress_bar.twig" of "fruity_twentythree" there is
Code:
{% if aSurveyInfo.showprogress == 'Y' and aSurveyInfo.format != 'A' and not aSurveyInfo.aCompleted %} {% set progressValue = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %} <!-- Top container --> <div class="{{ aSurveyInfo.class.topcontainer }} container-fluid" {{ aSurveyInfo.attr.topcontainer }} > <div class="row justify-content-center"> <div class="{{ aSurveyInfo.class.topcontent }} col-12 col-xl-8" {{ aSurveyInfo.attr.topcontent }}> <div class="ls-progress-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}"> <div class="visually-hidden">{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}</div> <div class="{{ aSurveyInfo.class.progress }}" {{ aSurveyInfo.attr.progress }} aria-hidden="true" data-bs-placement="bottom"> <div class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }} style="width: {{ progressValue }}%;"> </div> </div> </div> </div> </div> </div> {% endif %}
Compared with this part in "fruity"
Code:
<div class="{{ aSurveyInfo.class.topcontainer }} space-col" {{ aSurveyInfo.attr.topcontainer }} > <div class="{{ aSurveyInfo.class.topcontent }} container" {{ aSurveyInfo.attr.topcontent }} > {% if aSurveyInfo.format != 'A' and aSurveyInfo.showprogress is defined and aSurveyInfo.showprogress == 'Y' %} {{ registerPublicCssFile('lime-progress.css') }} {% set progressValue = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %} <div class="{{ aSurveyInfo.class.progress }}" {{ aSurveyInfo.attr.progress }}> <div class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;"> {{ progressValue }}% </div> </div> {% endif %} </div> <!-- must hide it without javascript --> </div>
If you now replace the twentythree part by the fruity part you get this.
On the other side there are many discussions about progress bars - does it encourage the respondents or discourage?
In my opinion you should not display a progress bar, but give feedback to the respondents that they finished one part, that now you are going to ask something about ... , give them chances to breathe, not only fire question after question.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu
Please Log in to join the conversation.