It can be useful to display a progress bar within your form to indicate to the responder how much they have completed. In this tutorial we will demonstrate a basic example of how to display a progress bar based on some basic logic:
All questions will contribute to the percentage completion.
All questions will contribute equally to the final percentage.
Since all organisations and forms may apply different rules for what should contribute to the final percentage (e.g. only mandatory questions contribute to the percentage complete or some questions bare more weight than other) you may need to adapt the calculation shown here to match your specific scenario.
Step 1 - Adding a progress field
The first step to displaying the progress bar is to first create a field that will calculate the percentage completion. For this we will add a number field call Progress to our form (don't worry we can set this to hidden later). In the data tab add the following JavaScript to the calculated value property:
// The progress calculation and submit button
// Should not count towards the percentage complete
const currentQuestion = instance.component.key
const ignoreQuestions = [currentQuestion,'submit']
const questions = _(data).omit(ignoreQuestions)
const totalQuestions = questions.size()
value = questions.reduce((percentage, response) => {
if(!_.isEmpty(response))
percentage += (1/totalQuestions) * 100
return percentage
}, 0)
Step 2 - Add the progress bar
To add the progress bar, we will use the HTML component and add the html below to the content property. In addition we will enable "Refresh on change".
<progress id="file" value={{data.progress}} max="100" style="width:100%"> </progress>
Notice how we set the value property dynamically using the handlebars syntax
{{ data.progress }} to access the calculated field we setup in Step 1
