But where can I set the height of the progress bar and copy the text you mention?
In the theme editor.
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 %}
You see that here is inserted a tooltip that shows the percentage.
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
Topic Author
