Chamilo LMS

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.