Assessments Navigation Bar


The Assessments Navigation Bar module allows users to add a navigation bar to a presentation. This addon navigates to sections specified in the "Sections" property. Every section has a defined number of pages which are randomly assigned to a button. The random sequence is chosen only once when the presentation is started. Then the random sequence of pages is remembered and restored every time a page is selected. For the proper working of the addon, it should be placed in the header or footer.


The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Sections Allows users to specify the sections to be shown by the module. Every section is a new line separated and looks as follows:
"sectionStart-SectionEnd; SectionName; page1Name, page2Name, page3Name; pagesCSSClassName1, pagesCSSClassName2". For example:

1-5;; 1, 1, 1, 1, 1; customCSSClassName1, customCSSClassName2

This will create one section of 5 pages with no section name; every button of the section will have description 1; every button of the section will have 'customCSSClassName1' and 'customCSSClassName2' CSS classes.

It is possible to make a section always display on either the left or right side of the module, regardless of what pages are being displayed at the moment. To achieve this, add the 'left' or 'right' value after the semicolon. For example:

1;; 1; cover; left

This will make the section containing page 1 with the cover style always displayed on the left side of the module.

Section start and section end may also be comma-separated indexes. Only section start and end are required. Section name, page descriptions, and pages CSS class names are optional. Remember to put only valid section start and section end to the section property. Providing numbers larger than the number of presentation pages may cause improper working of the addon. By default, the section descriptions are page numbers provided in the section start and section end.
Real-time navigationbar-page-attempted The button with the page number will get a new class when the activity on this page is done. It is checked in real-time.
Number of buttons Allows users to specify the number of buttons to be shown by the Assessments Navigation Bar.
Width of buttons Allows users to set the width of buttons in the Assessments Navigation Bar.
Default order Default (fixed) order of pages in the lesson preview, if unchecked, the order is random.
Speech texts List of speech texts: Go to previous page, Show previous pages, Title, Go to page, Show next pages, Go to next page. This text will be read by the Text to Speech module after the user performs an action.
Use dynamic pagination The property activates pagination extending by sliding to previous or next element for the first or last visible and selected page index.

Supported commands

Command name Params Description
bookmarkCurrentPage --- Bookmarks a current page. Adds the "bookmark" class to a button.
removeBookmark --- Removes bookmark from a current page.
moveToPage page index (1-based) Moves to the page specified by index. Buttons are calculated from the left. For moveToPage with index 2, it will move to the page specified by the second button.
moveToPreviousPage --- Moves to the previous page.
moveToNextPage --- Moves to the next page.

CSS classes

Class name Description
.assessments-navigation-bar-wrapper Wrapper container for the module.
.assessments-navigation-bar-wrapper .navigation-buttons-first Container for the navigation button 'previous' and the rewind button 'left'.
.assessments-navigation-bar-wrapper .previous Class for the navigation button 'previous'.
.assessments-navigation-bar-wrapper .turn_back Class for the rewind button 'back'. (hellip description)
.assessments-navigation-bar-wrapper .sections Container for all visible sections
.assessments-navigation-bar-wrapper .section Class for all section containers.
.assessments-navigation-bar-wrapper .section_(index 0-based) Class for the section container. The index is 0-based, for example ".section_0" will be added to the first section from the Section property
.assessments-navigation-bar-wrapper .section_name Class for the section_name container
.assessments-navigation-bar-wrapper .buttons Class for the buttons container in a section.
.assessments-navigation-bar-wrapper .button Class for the button with a page description in a section.
.assessments-navigation-bar-wrapper .current_page Class for the button with a currently shown page.
.assessments-navigation-bar-wrapper .bookmark Class for a bookmarked button
.assessments-navigation-bar-wrapper .navigation-buttons-last Container for the navigation button 'next' and the rewind button 'forward'.
.assessments-navigation-bar-wrapper .next Class for the navigation button 'next'.
.assessments-navigation-bar-wrapper .turn_forward Class for the rewind button 'next' (hellip description).
.assessments-navigation-bar-wrapper .element Class for clickable elements in the module - buttons in sections, navigation buttons
.assessments-navigation-bar-wrapper .mouse-over Class for the button with the mouse on hover.

Demo presentation

Demo presentation showing how to use Assessments Navigation Bar Addon.