A More Mobile-Friendly Captivate HTML Template

Use FastClick To Improve Response Times

Mobile Development, User Experience Comments (27)

Recent versions of Adobe Captivate have added a new feature allowing users to publish courses to HTML. This is a great first step for using Adobe Captivate to create content for mobile devices.

However, if you’ve ever tried one of these courses on a mobile device, you likely felt that the course ran a little slowly. In particular, you may have noticed that the course seemed to take a while to respond any time you touched on something.

This is because Captivate is binding all of your interactive elements (e.g., buttons) to click events in JavaScript.

Buttons work great on desktop/laptop computers where users use a mouse to click on these elements, but not so great on mobile devices where users are touching instead of clicking.

In fact, mobile browsers add a 300-400-millisecond delay between the user touching the screen and firing the click event. This makes everything feel slow and unresponsive from a user’s standpoint.

The way to get rid of this delay is to bind to touch events instead of click events, but trying to dig through the JavaScript generated by Captivate and changing this manually would not be a walk in the park.

Fortunately, you can “override” the click event by using a click replacement library, such as FastClick from FT Labs. (By the way, if your other HTML learning apps feel unresponsive on your mobile device, it may be because of the same reason; try implementing FastClick on those apps, too.)

This library binds to the touch events provided by mobile browsers and redefines what is considered to be a “click.”

When users release their touch on an element, the library immediately fires a click event on that element and cancels the built-in click event from the browser. This saves 300ms of your users’ time for every interaction, and it significantly improves the responsiveness of your course.

I know you’re probably thinking 300 ms seems insignificant, but trust me, you can feel it when you use it.

While you can manually implement this library into your published projects by modifying the published files, it would be way easier (and way cooler on the geek scale of things) if Captivate did it for you instead.

So that’s exactly what we’re going to do—we’re going to modify the template Captivate uses to produce your HTML course so that it includes FastClick by default, and you only have to make the change once.

If you’re on a Mac, open a Finder window and head to /Applications/Adobe Captivate 7/HTML. On Windows, open Windows Explorer and find C:Program FilesAdobeAdobe Captivate 7HTML.

This is the starting point Adobe Captivate uses when producing the HTML output for your Captivate projects.

Note: Before making any changes to the HTML template, we recommend making a copy/backup of it to your Desktop in case something goes wrong and you need to go back to the start.

First, let’s add the FastClick library. All you need to do is copy the fastclick.js file from GitHub into assets/js.

FastClick JavaScript location

Note: Depending on your version of Captivate, you may not have the other JS files in the assets/js directory. That’s okay.

Next, let’s modify index.html. Open index.html in your favorite text editor, and find this function:

function initializeCP()
{
...
}

At the end of the function, add the following:

FastClick.attach(document.body);

Above the <script> tag for the function, add this:

<script type='text/javascript' src='assets/js/fastclick.js'></script>

When you’re done, it’ll look something like this:

Screen Shot 2014-03-04 at 9.10.50 AM

That’s it. Open a project in Captivate and publish it to HTML. It will use your new template files to produce the course, including FastClick. Try it out on your mobile device, and you’ll find that it responds much quicker.

You may also be wondering how to get rid of the play button or the browser warning dialog box (if you’re using PhoneGap). We’ve gotten rid of them because we feel it improves user experience. We did it by simply adding some code after setting up FastClick:

FastClick.attach(document.body);
var _onComplete = cp.complete;
cp.complete = function() {
	_onComplete();
	$("#CPUnSupportedBrowserWarning_ID").remove(); // Removes browser warning
	setTimeout(function() {
		cp.movie.play(); // Skips the play button
	}, 1);
};

Note: If you’re using a Mac, your system may create a hidden file (a .DS_Store file) in the HTML template folder or the assets folder that prevents Captivate from copying the files it needs, causing an error during publish. If after modifying your template you begin receiving errors during publish, check for newly created hidden files and remove them.

Captivate has been a proven tool in developing and delivering eLearning courses to your users. Now, with the ability to output your courses as HTML, you’re only a few steps away from delivering mobile learning to your users.

By making just these few simple tweaks, you’re making great strides in upholding the expected user experience. It’s a great first tool in your mobile development toolbox, and a great first step into mobile learning.

Follow Float
The following two tabs change content below.

» Mobile Development, User Experience » A More Mobile-Friendly Captivate HTML...
On October 21, 2013
By
, ,

27 Responses to A More Mobile-Friendly Captivate HTML Template

  1. […] Improve user experience by reducing response times when publishing mobile learning with Adobe Captivate. …read more […]

  2. Thank you for this very interesting advice! In http://www.SweetRush.com we are always on a prowl for new tricks and techniques that will make our products better, and incidentally a round of mobile experimentation with Adobe Captivate is currently pending.

    However, quick question on the subject – while this modification helps mobile users, does it affect in any way the user’s experience on desktops?

    Thank you in advance.

    • Daniel Pfeiffer says:

      Hi Misha,
      Although we haven’t done extensive testing, we haven’t noticed any serious issues for desktop users since it depends on touch events which desktop browsers typically do not fire.
      Thanks!
      –Daniel

  3. Tim says:

    Am getting some problems publishing problems, using Captivate 7 for a Mac

    here is the beginning of my index.html file code (have searched but not found the extra .DS_Store file)

    @MOVIETITLE

    $(function() {
    FastClick.attach(document.body);
    });

    @HTML_TEST_BED

    • Daniel Pfeiffer says:

      Hi Tim,
      I think your code got filtered out by the comment system. Regardless, what are the problems you’re seeing? Are you getting an error when you try to publish? What does the error say?
      Thanks,
      –Daniel

  4. Lewis Carey says:

    Hi Daniel, great article!

    This worked very smoothly for Captivate 7.0.0

    I recently upgraded to 7.0.1 and cannot get it to work again. The index files produced by Captivate seemed to have changed quite a bit, and no matter where I put the code it doesn’t seem to work. Do you have any thoughts on this?

    Cheers
    Lewis

    • Daniel Pfeiffer says:

      Hi Lewis,

      I just got a chance to peak at Captivate 7.0.1, and you’re right–it looks a bit different now. Fortunately, the process is about the same. You still need to copy the fastclick.js file to the assets/js folder and edit the index.html file. However, now look for the line that says </head> and add this just above it:

      <script type=’text/javascript’ src=’assets/js/fastclick.js’></script>
      <script type=’text/javascript’>
      $(function() {
      FastClick.attach(document.body);
      });
      </script>

      Hope that helps!
      –Dan

      • Chris says:

        Hi Lewis,

        This is a great find and I found myself in exactly the same situation. I am trying to rebuild the HTML template with your instructions, but it is not working for me. Would it be possible to get a screenshot of your template so I can correct the errors?

        Do the following scripts need to be added to the HEAD still in this solution?

        $(function() {
        FastClick.attach(document.body);
        });

        Here is the section I edited furthere down in the HTML document:

        (function() { if(document.documentMode < 9) { document.body.innerHTML =
        ""; document.write("The content you are trying to view is not supported
        in the current Document Mode of Internet Explorer. Change the Document
        Mode to Internet Explorer 9 Standards and try to view the content
        again.To change the Document Mode, press F12, click Document Mode:
        , and then select Internet Explorer 9 Standards.”); return;
        }
        window.addEventListener(“load”,function() {
        setTimeout(function() { var script =
        document.createElement(‘script’); script.type =
        ‘text/javascript’; script.src = ‘assets/js/CPXHRLoader.js’;
        script.defer = ‘defer’; script.onload = function() { var
        lCSSLoaded = false; var lJSLoaded = false; function
        constructDIVs() { if(lCSSLoaded && lJSLoaded) {
        initializeCP();
        }
        } }
        cpXHRJSLoader.css(‘assets/css/CPLibrary All.css’,
        function() { lCSSLoaded = true; constructDIVs();
        });
        var lJSFiles = [ @JSFILES_ARRAY ];
        lJSFiles.push(/* Added for fastclick*/’assets/js/fastclick.js’);
        // Fast click stuff
        $(function() {
        FastClick.attach(document.bod y);
        cp.movie.play(); /*THIS IS FOR AUTO PLAY*/
        });
        // End
        //console.log(“js loaded”);
        lJSLoaded = true;
        constructDIVs();
        cpXHRJSLoader.js(lJSFiles,function() {
        //console.log(“js loaded”);
        lJSLoaded = true; constructDIVs();
        });
        } }
        document.getElementsByTagName(‘head’)[0].app endChild
        (script);
        },1);
        },false);
        })();
        }

        Any help is appreciated! Thanks so much.

        Chris

        • Daniel Pfeiffer says:

          Hi Chris, here’s a screenshot of the code I added to my Captivate template. No other changes were made (besides adding the fastclick.js files to the assets/js folder). I hope this helps!
          –Dan

          Template Example
          Note: This is for Adobe Captivate 7.0. Adobe Captivate 7.0.1 has made changes which requires a different approach (see below).

          • Chris says:

            Hi Dan,

            Thanks for the quick reply. I have adjusted the HTML template to match yours, but it does not work still. I get the pop-up and it does not auto play.

            Please confirm you have tested this with your files and any suggestions is greatly appreciated.

            Have a great day!

            Chris

          • Daniel Pfeiffer says:

            Hi Chris,

            You’re right–my template was not completely up-to-date with the changes made in Adobe Captivate 7.0.1. I started over and am having the same problem you’re describing. All the JS files are now loaded asynchronously, so placing the changes at the bottom of the head tag won’t do anything. We’ve had issues with autoplay working reliably in Adobe Captivate 7.0.1, but here’s a solution that seems to be working:

            In the index.html file, there’s a function called initializeCP. This is what loads in all of the Captivate JS. We need to wait for this to complete before we can ask the movie to play. So, what we do is “override” the cp.complete function with our own implementation:

            var _onComplete = cp.complete;
            cp.complete = function() {
              _onComplete();
              setTimeout(function() {
                cp.movie.play();
              }, 1);
            };

            Hope that helps!
            –Dan

  5. Oliver says:

    Hi Daniel, I am using Captivate 7.0.1 how do I remove the play button from the html5 exported project? It only displays on mobile devices. I have tried the following but the play button still displays on the iPad.

    $(function() {
    FastClick.attach(document.body);
    $("#CPUnSupportedBrowserWarning_ID").remove(); // Removes browser warning
    cp.movie.play(); // Skips play button screen
    });

    Thanks,
    Oliver

    • Daniel Pfeiffer says:

      Hi Oliver,
      I just took a look on Captivate 7.0.1.237 and that JavaScript is still the way to do it.

      Make sure you’re placing it inside <script> tags. So, right above the </head> tag, add:
      <script type=’text/javascript’>
      $(function() {
      FastClick.attach(document.body);
      $(“#CPUnSupportedBrowserWarning_ID”).remove(); // Removes browser warning
      cp.movie.play(); // Skips play button screen
      });
      </script>

      I hope that helps!
      –Daniel

      Update: Try this instead for Captivate 7.0.1.

  6. Kim Storey says:

    Hi,

    I have Captivate version 7.0.0.118, we have recently started publishing courses for use on an iPad, when the courses launch we get the white screen with the play button, and a lag on the touch actions, and the loading of screens.

    I have copied the fastclick.js file into the following folder C:Program FilesAdobeAdobe Captivate 7 x64HTMLassetsjs
    I have edited the file as listed, but I still get the white screen with the play button, but I am not sure with my version if I have added in the correct place, I have tried to move to the top and bottom, and no change.

    .loadingString
    {
    //width:100px;
    //position:absolute;
    color:#ffffff;
    }

    $(function(){
    FastClick.attach(document.body);
    $(“#CPUnSupportedBrowserWarning_ID”).remove();
    cp.movie.play();
    });

    if(document.documentMode < 9)
    document.write("@UNSUPPORTED_DOCUMENT_MODE");

    Any help would be appreciated.

    Thanks Kim

    • Daniel Pfeiffer says:

      Hi Kim,

      At some point between the initial release of Captivate 7.0.0 and the current release, Adobe changed the way to do this. I’m sure exactly which version this was.

      I have updated the post to reflect a different approach–can you re-read the post and see if this alternate approach helps?

      Thanks,
      –Dan

  7. Mark says:

    Has anyone tried this with Captivate 8.01 yet? If so, any issues?

    • Brian says:

      I too am interested in using this with Cp8. I’ve added the js folder and the fast click.js file to it.

    • Steven Lewis says:

      Mark, did you ever find out if anyone made this work with Captivate 8.0?

      • Daniel Pfeiffer says:

        I just downloaded Captivate 8 and was able to follow the steps outlined above and it worked (see this comment for more details.

        Captivate 8 offers different project templates than Captivate 7. Instead of editing Captivate’s template files, you may need to just edit the files that Captivate publishes.

  8. Ryan says:

    Hi Dan,
    I’m trying to enhance the speed, remove the play button, and remove the error following the directions above. I know you wrote this some time ago and updated a few times, but I believe I’m experiencing the change between 7.0.0 and the last 7 release that you spoke of in your July 2014 post. I’m using Cp 7.0.0.118 and oddly, in the index.html file, there is not a function initializeCP. Because of this, I’m not sure where to put your last solution (March 4th) The functions I have in the index.html are: DoCPInit, ContinueCPInitl, DoCPExit. If you would point me to a solution, I’d be grateful!

    Thanks Dan!

    Ryan

    • Daniel Pfeiffer says:

      Hi Ryan,

      If you’re using Captivate 7.0.0, then you probably need the original approach. Check out this comment. You can follow the post up until it starts talking about initializeCP. At that point, it’s been updated for Captivate 7.0.1. The screenshot in the comment I linked to, however, is from Captivate 7.0.0.

      Hope that helps!
      Thanks,
      –Dan

  9. Steven Lewis says:

    Has anyone been able to make this work with Captivate 8? Clicking the button on mobile is sluggish and I would like to try for the better user experience as described.

    • Daniel Pfeiffer says:

      Hi Steven,

      I just downloaded Captivate 8 and took a look. Captivate 8 offers new project templates (one of them being responsive), so the exact implementation may depend on what type of project you’re working within.

      To make button clicks faster, the key piece is getting FastClick set up properly. There are two key steps to that (both of which are documented in the post):
      1. Importing FastClick.
      2. Initializing FastClick.

      With a standard project, the process in the blog post worked for me. Although the placement was ever-so-slightly different (don’t forget to import FastClick, which isn’t shown here):
      Captivate 8

      Hope that helps!
      Thanks,
      –Dan

  10. Brittany says:

    Hi Daniel!

    This post is really great! but trying it in captivate 8 doesn’t seem to work when you render it for the lms. Have you had issues with that as well?

    • Daniel Pfeiffer says:

      Hi Brittany,
      Captivate 8 has a lot of new project templates and the one you choose may impact how this works. I’ve been successful in getting this to work in Captivate 8 (see this comment). But I didn’t change Captivate’s internal template files, I changed the code that was output from Captivate instead.
      Hope that helps!
      –Dan

  11. foodi says:

    Hi Dan,
    Great blog post! I’m eager to implement this hack. I’m creating a Responsive Project in Captivate version 8.0.0.145. So far, i’ve been unable to get rid of the browser warning by following the instructions above. Can you advise?

    • Daniel Pfeiffer says:

      I just created and published an empty Responsive Project in Captivate, but I’m not seeing the browser warning on any of my iOS devices (although I haven’t tried within PhoneGap).

      That being said–the code placement for Captivate 8 has changed ever-so-slightly–see if my note in this comment helps at all.

Leave a Reply

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

« »