Difference between revisions of "User Tours Project"

Jump to: navigation, search
Line 11: Line 11:
 
== 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.
 +
 +
== Current status ==
 +
* Existing local_usertours plugin is being used in combination with the new flexitour JS library.
 +
* Some accessibility areas to address as there are no exact matches to this kind of instructional overlay in the WCAG guidelines. The overlay is a cross between a Modal Dialog, and a non-modal Dialog.  Because of the interactions, it cannot be considered a Tooltip, or a Tooltip Widget.
 +
* The plugin still needs to be converted from local to admin_tool, and upgrades written accordingly. Additionally, one table has a field naming collision with an Oracle reserved word.
 +
 +
New features to consider:
 +
* display to specific roles
 +
* better matching of URLs
  
 
== Problem ==
 
== Problem ==

Revision as of 06:14, 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.

Current status

  • Existing local_usertours plugin is being used in combination with the new flexitour JS library.
  • Some accessibility areas to address as there are no exact matches to this kind of instructional overlay in the WCAG guidelines. The overlay is a cross between a Modal Dialog, and a non-modal Dialog. Because of the interactions, it cannot be considered a Tooltip, or a Tooltip Widget.
  • The plugin still needs to be converted from local to admin_tool, and upgrades written accordingly. Additionally, one table has a field naming collision with an Oracle reserved word.

New features to consider:

  • display to specific roles
  • better matching of URLs

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