Interactive first use tour
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.
Extend the tour plugin with additional pages. Still missing a few translations for Spanish and French - refs #7279
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.
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.