User Tours Project

This project is now done, and in Moodle 3.2. See the documentation about how to use it.

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.

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.

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