Project

General

Profile

Feature #7279

Interactive first use tour

Added by Yannick Warnier almost 5 years ago. Updated almost 5 years ago.

Status:
Feature implemented
Priority:
Normal
Assignee:
Category:
Styles, Layout & Accessibility
Target version:
Start date:
19/09/2014
Due date:
% Done:

100%

Estimated time:
Spent time:
Complexity:
Challenging
SCRUM pts - complexity:
20

Description

When a student or teacher sees something for the first time, we should be able to show him so short interactive help that appear in an HTML5 popup pointing at specific elements.

For example, when the user logs in for the first time, he gets on his courses list page. At that point, show him an explanation about the interface (the number of online users, the main menu, the breadcrumb, the logout button, the courses block and the courses list, one popup at a time (clicking next-next-next).

I have no idea how to do it at the moment, so part of this task is analysis of the possibilities.
As I see it, every page could have a "code" and an event should be stored with the event_system() function (or any other more relevant function) to say "this user has already done that", at which point the message will not appear anymore the next time he does.

Then a script should elaborate a simple list of help IDs and language terms for each page (there's no need to make it as a database table for now, but it could be done through a plugin, if it becomes too complex).

For example, the script in charge of this (through AJAX calls) would first define something like this:

$helpEvents = array(
    'loginPage' => array(
        0 => array('id' => '#inputlang', 'lang' => $interactiveHelpInputLanguage),
        1 => array('id' => '#inputlogin', 'lang' => $interactiveHelpInputLogin),
        2 => array('id' => '#inputpassword', 'lang' => $interactiveHelpInputPassword),
        3 => array('id' => '#registerlink', 'lang' => $interactiveHelpRegisterLink),
    ),
    'coursesList' => array(
        0 => array('id' => '#onlineUsersCount', 'lang' => $interactiveHelpOnlineUsersCount),
        1 => array('id' => '#mainMenuTabs', 'lang' => $interactiveHelpMainMenuTabs),
        2 => array('id' => '#logoutTab', 'lang' => $interactiveHelpLogoutTab),
        3 => array('id' => '#breadcrumb', 'lang' => $interactiveHelpBreadcrumb),
        4 => array('id' => '#courseBlock', 'lang' => $interactiveHelpCourseBlock),
        5 => array('id' => '#myCoursesList', 'lang' => $interactiveHelpMyCoursesList),
    ),
);

Several libraries can be used for that, but try to do it with things that we already have, as much as possible:

As we already use jQuery and jQuery UI, I hope there's a way we can use one of them to provide the feature we need.

The idea is to have a tooltip with a little triangle pointing at the element, and a "X" mark to close it.

An option in the main/inc/conf/configuration.php file ($_configuration['tutorial_tooltip_hidden'] = true;) allows the admin to hide the tooltips.


Files

intro-js.png (59.5 KB) intro-js.png Angel Quiroz, 10/10/2014 19:27
tour.png (43.5 KB) tour.png Alex Aragon, 23/10/2014 23:04

Associated revisions

Revision 8ad728a6 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Create the tour plugin - refs #7279

Revision 738b3093 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Fix the Nassim theme style - refs #7279

Revision 61d60714 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Add L10n to the plugin UI - refs #7279

Revision 651363fc (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Save the last visualization of web page - refs #7279

Revision c23b5493 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Print properly the lang variables - refs #7279

Revision 800699e5 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Change the plugin JS structure - refs #7279

Revision 868ca2fe (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Minor - Add PHPDoc - refs #7279

Revision 36836206 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Change the way how get the config data - refs #7279

Revision 222261d1 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Set the plugin configuration - refs #7279

Revision 8f58c486 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Add the option to set the theme for the plugin - refs #7279

Revision 60def084 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Remove unnecessary initial step - refs #7279

Revision 11f912d8 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Minor - Update the readme files - refs #7279

Revision 99e02368 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Change the way how to get the steps - refs #7279

Revision 36a6a9da (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Minor - Update the readme files - refs #7279

Revision 8b2de031 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Set the initial homepage tour - refs #7279

Revision 0c02ca4c (diff)
Added by Yannick Warnier almost 5 years ago

Improve code style in Tour plugin - refs #7279

Revision 7624e664 (diff)
Added by Angel Fernando Quiroz Campos almost 5 years ago

Minor - Update the readme files - refs #7279

Revision 20718a49
Added by Yannick Warnier almost 5 years ago

Merge pull request #385 from AngelFQC/7279

Minor - Update the readme files - refs #7279

Revision 609fa1ec (diff)
Added by Yannick Warnier almost 5 years ago

Extend the tour plugin with additional pages. Still missing a few translations for Spanish and French - refs #7279

Revision 7a0e0a87 (diff)
Added by Yannick Warnier almost 5 years ago

Extend the tour plugin with French translation - refs #7279

History

#1

Updated by Yannick Warnier almost 5 years ago

  • Subject changed from Interactive first use help to Interactive first use tutorial
#2

Updated by Yannick Warnier almost 5 years ago

  • Subject changed from Interactive first use tutorial to Interactive first use tour
#3

Updated by Yannick Warnier almost 5 years ago

  • SCRUM pts - complexity changed from 8 to 20
#4

Updated by Angel Quiroz almost 5 years ago

  • % Done changed from 0 to 10

I reviewed how to display the tool-tips with jQuery UI. This can be modified with HTML code to show 'prev' and 'next' buttons.
I will try do this feature with a plugin

#6

Updated by Angel Quiroz almost 5 years ago

Thanks, Julio

I started using intro.js

#7

Updated by Angel Quiroz almost 5 years ago

  • % Done changed from 10 to 40

The Tour plugin is almost stable.

Can see the tour. Save the last visualization by user. Doesn't show the button to start the tour

My branch at the moment: https://github.com/AngelFQC/chamilo-lms/tree/7279

#8

Updated by Angel Quiroz almost 5 years ago

  • % Done changed from 40 to 50

Print properly the lang variables in the tpl file
Improve the load of steps by AJAX
Validate the plugin steps for elements existents in the DOM

#9

Updated by Angel Quiroz almost 5 years ago

  • % Done changed from 50 to 70

Added documentation for configure and use the plugin
Set the initial tour in the homepage
Added cofiguration the plugin for chose the theme

PR: https://github.com/chamilo/chamilo-lms/pull/382

#10

Updated by Angel Quiroz almost 5 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Angel Quiroz)
#11

Updated by Yannick Warnier almost 5 years ago

  • Assignee set to Yannick Warnier
  • % Done changed from 70 to 80

The PR has been merged.
Only testing the plugin itself as a final user is important now.

#12

Updated by Yannick Warnier almost 5 years ago

I have installed the plugin and enabled it. I checked, and there are elements in config/tour.json. I then disconnect and connected as admin, as teacher and as student, but the help never appeared...

#13

Updated by Yannick Warnier almost 5 years ago

  • Status changed from Needs testing to Assigned
  • Assignee changed from Yannick Warnier to Angel Quiroz
#14

Updated by Angel Quiroz almost 5 years ago

Do you assign a region for a plugin?

I forgot to add in the documentation, which must be assigned to a region plugin

I updated the readme file
PR: https://github.com/chamilo/chamilo-lms/pull/385

#15

Updated by Angel Quiroz almost 5 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Angel Quiroz)
#16

Updated by Yannick Warnier almost 5 years ago

  • Status changed from Needs testing to Feature implemented
  • Assignee set to Angel Quiroz
  • % Done changed from 80 to 100

OK, I reviewed it completely and added more pages. It is still kind of cluncky because of the displaced blocks, but it's good enough for a first plugin version.
Good job!

#17

Updated by Alex Aragon almost 5 years ago

Actualice el error ocasionado por el botón, debido a un problema en el tpl main-header.tpl de template, adicionalmente agregue un nuevo estilo para el botón del tour.

Para la próxima versión se mejoraría la presentación de los layers explicativos.

Pull Request

https://github.com/chamilo/chamilo-lms/pull/400

Also available in: Atom PDF