Difference between revisions of "User Tours Project"

Jump to: navigation, search
(Starting to add details of external libraries assessed)
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
  
= Integrations =
+
= 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 User: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.

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 LinkedIn
License Apache 2.0


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