- 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
-
- Joffm
-
- Away
- LimeSurvey Community Team
-
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.
Please Log in to join the conversation.
- munmigraproject
-
Topic Author
- Offline
- New Member
-
- Joffm
-
- Away
- LimeSurvey Community Team
-
- munmigraproject
-
Topic Author
- Offline
- New Member
-
- DenisChenu
-
- Offline
- LimeSurvey Community Team
-
- Joffm
-
- Away
- LimeSurvey Community Team
-
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
Please Log in to join the conversation.