User Tools

Site Tools


progressbar

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
progressbar [2026/02/09 14:06] – removed - external edit (Unknown date) 127.0.0.1progressbar [2026/02/09 14:11] (current) jsmith
Line 1: Line 1:
 +====== Project-level Optional Property: Progress Bar   ======
 +
 +The **Progress Bar** provides information for the **learner** on the proportion of pages in the project that have been opened. This is particularly helpful for those who are working through a learning object over multiple sessions.:!: **New in 3.14**, you can also add progress markers for **Chapters **and for **Milestones **(individual pages the author has flagged up as significant points in progress through the learning object.
 +
 +This is a screenshot illustrating how the **Progress Bar** displays.  Here it has been set to display below the **Project **and **Page Titles **in the **Header Bar**.  This project has been organised in three **Chapters**, and if the learner clicks on one of the **circle markers **in the **Progress Bar**, this will take them to the first page in that **Chapter**.  The **red line** gives a visual indication of how much of the Learning Object the learner has looked at, and a more precise indication is given, as percentage of pages opened,  in the text to the left of the **Progress Bar**; the text around the percentage can be customised by the author.
 +
 +{{ :playground:progress_bar_1.png?600&direct }}
 +
 +If you add this property to your project, you will be presented with the following dialog.
 +
 +{{ :playground:progress_bar_2.png?400&direct }}
 +
 +===== Properties =====
 +
 +You may modify any of the fields or selections within this dialog to customize the accessibility settings for your project, including the following.
 +
 +^ Property ^ Sub-property ^ Description ^ Type ^ Additional information ^
 +| Position :!: **New in 3.14**  || {**Header bar (above titles) **/ Header bar (between titles) / Header bar (below titles) / Footer bar (between titles) }  | Drop-down  | Before 3.14, the Progress Bar could only be added in the footer.  |
 +| Include Percentage  || If this box is unticked the percentage of pages/chapters/milestones opened is not displayed, so there is only a graphic indication of progress.  | Tick box  |   |
 +| Percentage Text  || You can edit the text that displays with the percentage of pages/chapters/milestones opened, e.g.  'You have completed {x}% of the pages in this lesson.'  | Tick box  | Default - {x}% complete  |
 +| Progress Markers  | Type | {**None **/ Pages / Chapters / Milestones }  | Drop-down  | You need to have already created **Chapters **or **Milestones **in your project to use these options instead of **Pages**.  **Chapters **are created from the **Insert page** drop-down menu; **Milestones **are added as a General Optional Property at page-level.  |
 +| ::: | Space Evenly | Spaces the circular **Progress Markers** evenly. | Tick box | :!: Only available in the **Chapters **or **Milestones **formats |
 +| ::: | Navigate on Click | When enabled, the **Progress Marker** becomes a clickable link to a **Page**, **Chapter **or **Milestone**. | Tick box | :!: Only available in the **Pages**, **Chapters **or **Milestones **formats |
 +
 +{{ :playground:chapters_milestones2.png?300&direct}}This is an example of what the **Project Tree** looks like after adding **Chapters** and **Milestones**. The **Milestones** are indicated by the purple pins.
 +
 +You can only have Chapters __or__ Milestones displaying in the Progress Bar.  This is just an example which illustrates both formats in one image.
 +