Building a Simple jQuery Mobile Custom eLearning Course Player

Why build a custom player?

I love working with custom code. I think it allows us to break free of any standard eLearning tool capabilities and really create something custom and something unique that we typically do not see in standard eLearning courses. Although at first it could take more time to do I fully believe that you if you learn to do simple front end coding you could do some pretty awesome things in your eLearning courses.

Building a Custom Player

When you start to build custom eLearning one thing you should look for is the ability to create pages and then the ability to navigate from page to page. Thankfully this is easily done using jQuery Mobile as your code base.

If you have never worked with jQuery Mobile and want to get started with the basics I highly recommend you take my course on jQuery Mobile to get started. A lot of the UI elements you will learn in jQuery Mobile allow you to build mobile ready interactions with simply marking up HTML.

You create pages within jQuery Mobile using this simple mark up

<div data-role="page" id="page1">

</div>

Within this div take you assign an attribute of data-role=”page” which tells jQuery Mobile that anything within that div tag will be classified as one page. Now you can have more than one page like this.

<div data-role="page" id="page1">

</div>
<div data-role="page" id="page2">

</div>

And the nice thing is you do not see any page content from page 2 until you link to that page using an a tag. Now typically when creating a page in jQuery Mobile you assign three sections to each page. A header, content and a footer. The header typically has the page title, logo or simple back buttons. The content can contain any HTML you want and the footer can also contain a label or some navigation buttons.

You can start to build a pretty nice looking page with some eLearning course elements giving the app a name in the header and a copy right or some arrows in the footer like so.

<div data-role="header">
   <h1>Page 1</h1>
</div>
<div class="ui-content">
   <p>Page content goes here.</p>
</div>
<div data-role="footer">
   <h2>Page footer</h2>
</div>

You can even customize the header and footer with images to add a logo and some navigation buttons like so for the header.

<div data-role="header">
   <img class="logo" src="images/logo.png">
</div>

Adding this to the CSS

.logo {
   max-width: 200px;
}

And then this for the footer:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
   <img class="navBtn" id="nextBtn" src="images/nav/Next.png">
   <img class="navBtn" id="backBtn" src="images/nav/Back.png">
</div>

And this for the CSS:

.ui-header{
   box-shadow: 0px 0px 5px #e1e1e1;
   z-index: 1000;
}

.ui-footer{
   background-color: #e1e1e1;
}

So that gives us something like this.

jQuery-mobile-custom-learning-player

The Problem

So that seems fine why can’t we just leave it at that? Because what we have done so far only applies to one page. If you navigate to another page you need to add the same code on every page. A best practice when it comes to web development is you should try not to repeat code. If you are you are probably not doing it in the most efficient way.

Creating One Header and Footer for All jQuery Mobile Pages

The key is to create a jQuery Mobile header and footer once and have that show for every page you create. You can do that in 2 simple steps.

Step 1: First you need to place your header and footer outside the page div tag. It still needs to be inside the body tag but outside any specific page div tag. Also if you have any other headers in any other pages make sure you delete those.

Step 2: The next thing you need to do is add this bit if JavaScript to your HTML or to your JS file you may have attached:

$( "[data-role='header'], [data-role='footer']" ).toolbar();

Explanation: Basically what this is doing is it is using jQuery to find the div tags that have the labels of header and footer and it is using those as the standard toolbar for the entire HTML file across all pages. That is it! Now you have a one header and footer for all pages inside of your custom eLearning player.

Other Possible Enhancements

Course Menu: You may also want to build a custom menu which you can do with a cool plugin called Hamburglar. This creates a menu for you that can be used to jump from page to page within your course.

Responsive Columns: If you want to create responsive columns for custom page layouts that adapt to different screen sizes you may want to also check out Skeleton CSS.

As always happy to hear your thoughts, please share them below. Also if you liked this content please feel free to share with your friends or co-workers. You can also check out our downloads page for free downloads. Or if you want to download this custom player code you below.


Leave a Reply

Your email address will not be published. Required fields are marked *