Creating Website Introductions with Intro.js

Intro.js is a great way to inform and help users understand specific areas of a website. All you have to do is include the Intro.js library and the CSS theme in the page that will feature the Intro.JS introduction. This wiki page will briefly explain how the Intro.js is being implemented in the Seneca Online Learning Platform EDX instance.

Since it was decided to use a theme, the Intro.js CSS will be included in the "theme-head-extra.html" by adding the following line:

`

`

The style has already been downloaded from: http://usablica.github.io/intro.js/introjs.css using the simple wget command:

wget http://usablica.github.io/intro.js/introjs.css while in the static/css folder of the site theme.

The Intro.js file was placed after the footer's HTML markup using the following:

<script src="https://online-dev.cdot.senecacollege.ca/static/themes/seneca/js/intro.js"></script>

The JavaScript library has also already been downloaded from: http://usablica.github.io/intro.js/intro.js using the simple wget command:

wget http://usablica.github.io/intro.js/intro.js while in the static/js folder of the site theme.

It is important to note that the CSS and JavaScript were included using the site URL to avoid compile time errors that would have occurred if using traditional markup as:

<link rel="stylesheet" href="${static.url('themes/seneca/css/introjs.css')}" />
<script src="${static.url('themes/seneca/js/intro.js')}"></script>

Now we need to create Introductions for various EDX Platform pages. The first step was creating an introduction for the Seneca Online Learning Platform front page. The JavaScript in the rest of the steps are inserted after the footer. This webpage at first simply has all the traditional features except a "HELP" button and guide. To add a HELP link to this page you can either use jQuery's List appending feature or add it manually. For starters you can add it manually by browsing to the /edx/app/edxapp/edx-platform/lms/templates directory and looking for the navigation.html file. This is the code-block after adding HELP:

https://gist.github.com/echanna/3787a1c373e24ba33257

We also need a way to tell what part of the site we are on, so that we can load our HELP introduction. This is a sample <script> of how to do so:

https://gist.github.com/echanna/8c2d54f12f4eb604e09a

Once that is done we can actually get the introduction working. The following <script> has a working introduction for the front page:

https://gist.github.com/echanna/8ca91baffa0dfeb4c0ee

After adding this JavaScript to the HTML it is important to "Gather" the EDX assets. You can do this by

Compiling assets manually

To compile javascript and css outside of the update script run the following commands:

sudo -H -u edxapp bash
source /edx/app/edxapp/edxapp_env
cd /edx/app/edxapp/edx-platform
paver update_assets cms --settings=aws
paver update_assets lms --settings=aws