Progress
Introduction
The content that runs in The Engine may be linear and simple, or it maybe to an incredibly complex web of transfers and logic with dozens, hundreds, or even thousands of alternate routes. Because it's impossible to know ahead of time which route will be taken and, as a result, how many questions will be asked, creating an accurate and usable progress bar is tricky.
What we settled on was a "best guess" based on past traversal averages. We then use various mathmatical equations so the bar never reaches 100%, if the user goes over that average. This means any new product (content) could be wildly off as it won't have enough historical traversals to create a good average.
Implementing
If progress data exists, it will appear in every response as the property progress. Note: nodes removed for brevity.
1{
2 "traversalId": "2387ab43-73e7-4f78-9c50-e6b0b07cb2c7",
3 "algoId": 5459,
4 "nodes": [...],
5 "assessmentType": 0,
6 "algoName": "Neck Bournemouth Questionnaire",
7 "errors": [],
8 "previousDisabled": true,
9 "nextDisabled": false,
10 "language": "ENGLISH",
11 "progress": {
12 "currentAverage": 7,
13 "easingMethod": "Exponential",
14 "estimatedPercentageComplete": 0
15 }
16}CurrentAverage
: The current average number of questions. This is for imformation purposes only. Double.
EasingMethod : The mathmatical equation used in arriving at our percentage. This is for imformation purposes only.
EstimatedPercentageComplete
: This is the value of estimated percentage complete, used to create the progress bar. Double.
In our internal react app we apply the percentage to an MUI Linear Progress control.
1{traversal?.progress && (
2 <Box
3 sx={{ width: "100%" }}
4 title={`Experimental progress bar. Method: ${traversal.progress.easingMethod}; Complete: ${traversal.progress.estimatedPercentageComplete}%`}
5 >
6 <LinearProgress
7 variant="determinate"
8 value={traversal.progress.estimatedPercentageComplete}
9 />
10 </Box>
11)}