Feature #7279
Interactive first use tour
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:
- http://jqueryui.com/tooltip/
- http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
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
Associated revisions
Fix the Nassim theme style - refs #7279
Add L10n to the plugin UI - refs #7279
Save the last visualization of web page - refs #7279
Print properly the lang variables - refs #7279
Change the plugin JS structure - refs #7279
Minor - Add PHPDoc - refs #7279
Change the way how get the config data - refs #7279
Set the plugin configuration - refs #7279
Add the option to set the theme for the plugin - refs #7279
Remove unnecessary initial step - refs #7279
Minor - Update the readme files - refs #7279
Change the way how to get the steps - refs #7279
Minor - Update the readme files - refs #7279
Set the initial homepage tour - refs #7279
Improve code style in Tour plugin - refs #7279
Minor - Update the readme files - refs #7279
Extend the tour plugin with additional pages. Still missing a few translations for Spanish and French - refs #7279
Extend the tour plugin with French translation - refs #7279
History
Updated by Yannick Warnier over 6 years ago
- Subject changed from Interactive first use help to Interactive first use tutorial
Updated by Yannick Warnier over 6 years ago
- Subject changed from Interactive first use tutorial to Interactive first use tour
Updated by Angel Quiroz over 6 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
Updated by Julio Montoya over 6 years ago
Check this libs:
http://bootstraptour.com/
http://usablica.github.io/intro.js/
Updated by Angel Quiroz over 6 years ago
- File intro-js.png intro-js.png added
Thanks, Julio
I started using intro.js
Updated by Angel Quiroz over 6 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
Updated by Angel Quiroz over 6 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
Updated by Angel Quiroz over 6 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
Updated by Angel Quiroz over 6 years ago
- Status changed from Assigned to Needs testing
- Assignee deleted (
Angel Quiroz)
Updated by Yannick Warnier over 6 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.
Updated by Yannick Warnier over 6 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...
Updated by Yannick Warnier over 6 years ago
- Status changed from Needs testing to Assigned
- Assignee changed from Yannick Warnier to Angel Quiroz
Updated by Angel Quiroz over 6 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
Updated by Angel Quiroz over 6 years ago
- Status changed from Assigned to Needs testing
- Assignee deleted (
Angel Quiroz)
Updated by Yannick Warnier over 6 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!
Updated by Alex Aragon over 6 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
Create the tour plugin - refs #7279