Documentation
Assessments Navigation Bar
Description
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.
Properties
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.