User Tours Project: Difference between revisions
From MoodleDocs
| hopscotch | |
|---|---|
| Repository | https://github.com/linkedin/hopscotch |
| Project stability | Stable |
| Stars / Forks | 3361 / 483 |
| Project activity | Low - Medium |
| Latest release | v0.2.6 (July 2nd 2016) |
| Author | |
| License | Apache 2.0 |
(Starting to add details of external libraries assessed) |
No edit summary |
||
| Line 7: | Line 7: | ||
}} | }} | ||
= Summary = | = Project Summary = | ||
== Summary == | |||
Add a feature to allow administrators to create and share walkthroughs, which are a series of instructional overlays displayed on top of the Moodle User Interface. | Add a feature to allow administrators to create and share walkthroughs, which are a series of instructional overlays displayed on top of the Moodle User Interface. | ||
= Problem = | == Problem == | ||
Moodle is a large application with many features. Some of these features are hard to understand without instruction. One on one training for Moodle is time consuming and hard to scale. | Moodle is a large application with many features. Some of these features are hard to understand without instruction. One on one training for Moodle is time consuming and hard to scale. | ||
= Solution = | == Solution == | ||
Allow the administrator to create "walkthroughs" where a series of instructional overlays are displayed over the Moodle User Interface. | Allow the administrator to create "walkthroughs" where a series of instructional overlays are displayed over the Moodle User Interface. | ||
These are often known as: | These are also often known as: | ||
* instructional overlays; and | * instructional overlays; and | ||
* tours. | * tours. | ||
= Target Users = | == Target Users == | ||
Administrators, New Moodle users, Experienced Moodle users exposed to a new feature, Teachers, Students | Administrators, New Moodle users, Experienced Moodle users exposed to a new feature, Teachers, Students | ||
= Technical Requirements = | == Technical Requirements == | ||
* Simple clear overlays that are easy to disable or replay | * Simple clear overlays that are easy to disable or replay | ||
* Import/export walkthroughs to a simple file format so they can be shared | * Import/export walkthroughs to a simple file format so they can be shared | ||
| Line 31: | Line 33: | ||
* Full support for Multilang | * Full support for Multilang | ||
= | = Proposed solution = | ||
* An admin tool plugin to create, and manage, user tours; | |||
* Integration with an external overlay library; | |||
* library wrapped in a moodle-specific AMD module for loading; | |||
* theme-specific step template to be passed to the library; | |||
* string translations to be passed to the library. | |||
== External integrations == | |||
Several external instructional overlay libraries already exist. | Several external instructional overlay libraries already exist. | ||
These are JavaScript libraries which take configuration (usually JSON) and produce tours to display to end users. | These are JavaScript libraries which take configuration (usually JSON) and produce tours to display to end users. | ||
== hopscotch == | The following base requirements were considered for the library: | ||
* WCAG AA compliance | |||
* Support for string translations | |||
* Support for LTR/RTL switching | |||
* Ability to modify the template used for step display | |||
* Ability to store state at any point | |||
* Responsiveness | |||
* Ease of theming | |||
* JS requirements | |||
Of the libraries considered only a handful come close to meeting our | |||
requirements and none actually met all of the requirements. | |||
For the contrib version of the plugin currently available | |||
(local_usertours), the bootstrap-tour library is in use, but this is too | |||
tightly integrated with the Bootstrap 2.2 JavaScript. | |||
After careful consideration it was felt that writing a new library for | |||
these tours may be the best, and most flexible solution and that this could | |||
be released back to the community. | |||
=== hopscotch === | |||
Hopscotch is an Instructional Overlay written and maintained by LinkedIn. | Hopscotch is an Instructional Overlay written and maintained by LinkedIn. | ||
| Line 49: | Line 79: | ||
}} | }} | ||
=== Features === | ==== Features ==== | ||
* event callbacks | * event callbacks | ||
* multi-page tours | * multi-page tours | ||
| Line 59: | Line 89: | ||
* range of tour and step options | * range of tour and step options | ||
=== Benefits === | ==== Benefits ==== | ||
* does not rely upon any external libraries, though it can utilise jQuery if it is present on the page | * does not rely upon any external libraries, though it can utilise jQuery if it is present on the page | ||
* handles its own styling, and positioning | * handles its own styling, and positioning | ||
| Line 65: | Line 95: | ||
* wide range of events fired to allow additional customisations | * wide range of events fired to allow additional customisations | ||
=== Concerns === | ==== Concerns ==== | ||
* lack of responsive design. Steps are displayed off-screen on mobile devices | * lack of responsive design. Steps are displayed off-screen on mobile devices | ||
* lack of accessibility | * lack of accessibility | ||
| Line 71: | Line 101: | ||
Although a number of events and customisation points are available, the library makes it difficult to utilise these. You can override the renderer, but are then unable to access the internal functions of the tour. | Although a number of events and customisation points are available, the library makes it difficult to utilise these. You can override the renderer, but are then unable to access the internal functions of the tour. | ||
== bootstrap-tour == | === bootstrap-tour === | ||
Bootstrap tour is a 'Quick and easy way to build your product tyours with Bootstrap Popovers' | Bootstrap tour is a 'Quick and easy way to build your product tyours with Bootstrap Popovers' | ||
| Line 85: | Line 115: | ||
}} | }} | ||
=== Features === | ==== Features ==== | ||
* event callbacks | * event callbacks | ||
* multi-page tours | * multi-page tours | ||
| Line 94: | Line 124: | ||
* range of tour and step options | * range of tour and step options | ||
=== Benefits === | ==== Benefits ==== | ||
* responsive design | * responsive design | ||
* Uses standard DOM Storage interfaces | * Uses standard DOM Storage interfaces | ||
* wide range of events fired to allow additional customisations | * wide range of events fired to allow additional customisations | ||
=== Concerns === | ==== Concerns ==== | ||
* lack of accessibility | * lack of accessibility | ||
* high dependence upon a specific version of Bootstrap (v2.3) | * high dependence upon a specific version of Bootstrap (v2.3) | ||
== joyride == | === joyride === | ||
Joyride is an easy to configure jQuery site tour wizard. | Joyride is an easy to configure jQuery site tour wizard. | ||
| Line 117: | Line 147: | ||
}} | }} | ||
=== Features === | ==== Features ==== | ||
* responsive | * responsive | ||
* event callbacks | * event callbacks | ||
* jQuery compatible | * jQuery compatible | ||
=== Benefits === | ==== Benefits ==== | ||
* responsive | * responsive | ||
=== Concerns === | ==== Concerns ==== | ||
* last release was 2.5 years ago. Though a v3 release is in the works, this seems to have stalled. | * last release was 2.5 years ago. Though a v3 release is in the works, this seems to have stalled. | ||
* lack of accessibility | * lack of accessibility | ||
* designed for Foundation/Zurb. A 'solo' version is available but includes a fair chunk of base Foundation library. | * designed for Foundation/Zurb. A 'solo' version is available but includes a fair chunk of base Foundation library. | ||
=== flexitour === | |||
A library written by Moodle. | |||
{{Infobox Library Candidate | |||
|name = flexitour | |||
|repository = https://github.com/andrewnicols/flexitour | |||
|stability = Alpha | |||
|activity = New | |||
|starforks = 0 / 0 | |||
|release = v0.9.0 (July 29th 2016) | |||
|author = Moodle | |||
|license = GPLv3 | |||
}} | |||
==== Features ==== | |||
* event callbacks | |||
* i8n support through template | |||
* lightweight | |||
* flexible templates | |||
* flexible placement | |||
* flexible targetting | |||
* range of tour and step options | |||
==== Benefits ==== | |||
* handles its own styling, and positioning | |||
* wide range of events fired to allow additional customisations | |||
* accessible | |||
Revision as of 06:08, 29 July 2016
| User Tours | |
|---|---|
| Project state | Developing |
| Tracker issue | MDL-52777 |
| Discussion | https://moodle.org/mod/forum/discuss.php?d=335682 |
| Assignee | Andrew Nicols |
Project Summary
Summary
Add a feature to allow administrators to create and share walkthroughs, which are a series of instructional overlays displayed on top of the Moodle User Interface.
Problem
Moodle is a large application with many features. Some of these features are hard to understand without instruction. One on one training for Moodle is time consuming and hard to scale.
Solution
Allow the administrator to create "walkthroughs" where a series of instructional overlays are displayed over the Moodle User Interface.
These are also often known as:
- instructional overlays; and
- tours.
Target Users
Administrators, New Moodle users, Experienced Moodle users exposed to a new feature, Teachers, Students
Technical Requirements
- Simple clear overlays that are easy to disable or replay
- Import/export walkthroughs to a simple file format so they can be shared
- Themable
- WCAG AA compliant
- Full support for RTL
- Full support for Multilang
Proposed solution
- An admin tool plugin to create, and manage, user tours;
- Integration with an external overlay library;
- library wrapped in a moodle-specific AMD module for loading;
- theme-specific step template to be passed to the library;
- string translations to be passed to the library.
External integrations
Several external instructional overlay libraries already exist. These are JavaScript libraries which take configuration (usually JSON) and produce tours to display to end users.
The following base requirements were considered for the library:
- WCAG AA compliance
- Support for string translations
- Support for LTR/RTL switching
- Ability to modify the template used for step display
- Ability to store state at any point
- Responsiveness
- Ease of theming
- JS requirements
Of the libraries considered only a handful come close to meeting our requirements and none actually met all of the requirements.
For the contrib version of the plugin currently available (local_usertours), the bootstrap-tour library is in use, but this is too tightly integrated with the Bootstrap 2.2 JavaScript.
After careful consideration it was felt that writing a new library for these tours may be the best, and most flexible solution and that this could be released back to the community.
hopscotch
Hopscotch is an Instructional Overlay written and maintained by LinkedIn.
Features
- event callbacks
- multi-page tours
- i8n support
- lightweight
- flexible templates
- flexible placement
- flexible targetting
- range of tour and step options
Benefits
- does not rely upon any external libraries, though it can utilise jQuery if it is present on the page
- handles its own styling, and positioning
- HTML5 session storage
- wide range of events fired to allow additional customisations
Concerns
- lack of responsive design. Steps are displayed off-screen on mobile devices
- lack of accessibility
- difficult to customise
Although a number of events and customisation points are available, the library makes it difficult to utilise these. You can override the renderer, but are then unable to access the internal functions of the tour.
bootstrap-tour
Bootstrap tour is a 'Quick and easy way to build your product tyours with Bootstrap Popovers'
| bootstrap-tour | |
|---|---|
| Repository | https://github.com/sorich87/bootstrap-tour |
| Project stability | Stable |
| Stars / Forks | 3413 / 659 |
| Project activity | Low |
| Latest release | v0.10.3 (February 12th 2016) |
| Author | Ulrich Sossou |
| License | MIT |
Features
- event callbacks
- multi-page tours
- lightweight
- flexible templates
- flexible placement
- flexible targetting
- range of tour and step options
Benefits
- responsive design
- Uses standard DOM Storage interfaces
- wide range of events fired to allow additional customisations
Concerns
- lack of accessibility
- high dependence upon a specific version of Bootstrap (v2.3)
joyride
Joyride is an easy to configure jQuery site tour wizard.
| joyride | |
|---|---|
| Repository | https://github.com/zurb/joyride |
| Project stability | Stable |
| Stars / Forks | 1276 / 243 |
| Project activity | Low |
| Latest release | v2.1.0 (Jan 23 2014) |
| Author | Zurb |
| License | MIT |
Features
- responsive
- event callbacks
- jQuery compatible
Benefits
- responsive
Concerns
- last release was 2.5 years ago. Though a v3 release is in the works, this seems to have stalled.
- lack of accessibility
- designed for Foundation/Zurb. A 'solo' version is available but includes a fair chunk of base Foundation library.
flexitour
A library written by Moodle.
| flexitour | |
|---|---|
| Repository | https://github.com/andrewnicols/flexitour |
| Project stability | Alpha |
| Stars / Forks | 0 / 0 |
| Project activity | New |
| Latest release | v0.9.0 (July 29th 2016) |
| Author | Moodle |
| License | GPLv3 |
Features
- event callbacks
- i8n support through template
- lightweight
- flexible templates
- flexible placement
- flexible targetting
- range of tour and step options
Benefits
- handles its own styling, and positioning
- wide range of events fired to allow additional customisations
- accessible
