Skip to content

Prototype of guided tour mechanism for Olab 3 14

Repository

https://github.com/wavesnetwork/guidedtour

Description

The goal of this tool was to enrich the virtual scenario delivery systems with contextualized help/tutorial system which would make navigation for users easier. The basic idea was to avoid annoying users with wordy manuals and instead offer them clear help entries for each non-trivial UI element to be used at the moment they may need it. This prototype demonstrates how a “guided tour mechanism” can be embedded into the OL virtual scenario delivery system, particularly OpenLabyrinth 3.5

Online demo

An online demo is available at https://olab.wavesnetwork.eu

Technical installation instructions

  1. Create database in MySQL from database.sql, with/without test data in INSERT INTO...
  2. Deploy database backend editor.php and insert your own test data
  3. Add _introjs_hook.php, modify its header for IP filtering (or change loading IntroJS from CDN to local source) and add mysql connection settings:
<?php
include_once("iplib.php");
$filter = new IPFilter( array(
      '.....',   // add to IP adress to filter
));

if ($filter->check($_SERVER["REMOTE_ADDR"]) === true):
..

// --- connection to dedicated
$config["db_server"] = "localhost";
$config["db_name"] = "adddbname";
$config["db_user"] = "adddbuser";
$config["db_user_pw"] = "addyourpassword";

4.Modify labyrinth ver.3 source codes

home.php, ../views/labyrinth/skin/*.php -- add:

<?php
require_once('_introjs_hook.php');
?>

5.For exact jquery style DOM selecting/matching is important to add more ids or classes into skins --

../views/labyrinth/skin/*.php, for example id="iba_node_title":
<h4 id="iba_node_title"><?php echo Arr::get($templateData, 'node_title'); ?></h4>