Have you ever opened a module only to be met
with a vertical (or worse, horizontal) scrollbar? While scrolling is acceptable if you are
reading text on a screen or navigating a PDF, when it comes to interactive
content, it is not.
You know how obnoxious it is as a learner, so
why not design for it when you start your module? The process is simple enough: figure out what
resolution people use who access your module and design for the lowest common
denominator. Unfortunately, that would
leave you with a stage size of 800x600 (probably less if you have to deal with
areas and frames that incorporate the SCORM functionality) and plenty of
learners using nearly quadruple that resolution, leaving your content as a tiny
quarter window in a sea of white.
Fortunately, there is a way to accommodate
both the typical resolution as well as those smaller ones. The key is creating an html page that holds a
scalable swf object. That way, if
someone opens your content with a smaller resolution, they will see it scaled
for their viewing area. Unfortunately,
swf objects leveraging percentage size will also scale your content up for
people using a larger resolution. Herein
lies the problem: scaling up the content causes raster issues, leaving your
content looking jagged.
Essentially, you want to create a page that
will scale the content down, but not scale the content up. People with large resolution monitors will
have already adapted to looking at content that doesn’t fully utilize their
available space, so it is a much less problematic issue than having content too
large for small resolutions and requiring scroll bars.
While the information below can be included
into a single html file, breaking it out into the following files makes things
simpler to understand. When you first
publish your Captivate module (with the correct SCORM settings, if necessary),
you will have the file needed for the large resolution version. You will make modifications to that file to
create the small resolution version.
Finally, you will make a simple javascript html file that will serve as
the landing and decision page for the module.
Module_decision.htm
This is the simplest of the files needed for
this process. This file serves as the
landing page, capturing the screen resolution and deciding which version of the
module html to serve. The height and
width you select should be based on the typical setup on your learners’
machines. Additionally, your original
Captivate resolution settings should have been determined by these same numbers
in order to create a full-resolution version that is suitable for most
learners.
In the <body>, enter the following
code:
<SCRIPT language="JavaScript">
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="module_full.htm";
}
else
{
window.location="module_small.htm";
}
</SCRIPT>
{
window.location="module_full.htm";
}
else
{
window.location="module_small.htm";
}
</SCRIPT>
It’s really that simple! The code above will make the decision, based
on the viewer’s resolution, to serve either the _full or the _small version of
the module.
Module_full.htm
This file itself is pretty complex. However, the good news is that it is totally
created by Captivate. For this file, all
you do it rename the Captivate-generated file to _full.htm so that it isn’t
renamed when Captivate re-publishes (because you know you are going to have to
publish numerous times throughout the process).
Modue_small.htm
For this file, you start with the
Module_full.htm file and duplicate it.
There are then two areas that need modification: the <head>
requires a simple sizing addition and the <body> requires an object size
modification.
In the <head>, add the following code:
html, body {
height: 100%;
}
height: 100%;
}
This code wasn’t previously required (think
IE7), however with modern browsers, they don’t always assume that the stage has
the availability to use the whole browser window. If you complete the rest of the code without
this, it will create a tiny module window at the top of the page – you’ll know
you need to add something to make the percentages work.
In the <body>, you are modifying the
code created by Captivate to hold the SWFObject. To find this portion of the code (it’s near
the bottom in Captivate 5.5), you can search for “SWFObject” or look for
some code that includes resolutions that are the same dimensions you set up in
Captivate (or your imported PowerPoint).
You will make the following modifications:
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "960", "720", "9.0.28", "#CCCCCC");
becomes
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "90%", "90%", "9.0.28", "#CCCCCC");
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "960", "720", "9.0.28", "#CCCCCC");
becomes
var so = new SWFObject(strURLFile + strURLParams, "Captivate", "90%", "90%", "9.0.28", "#CCCCCC");
Basically, all you are doing is replacing the
pixel size with percentages. In the
above example, 90% was used because the page used in the LMS contains frames
that take up a portion of the screen.
Additionally, edge-to-edge content can sometimes appear distracting if
it is uncomfortably close to the edge of the screen.
Additional Thoughts
A couple of notes about these three files:
1.) You will have to include them into your
zipped package each time as they are essentially overwriting the htm files that
are automatically created. To do this,
be sure they use unique file names so Captivate doesn’t automatically overwrite
them as it tends to do to files in the same folder used for publication.
2.) If your LMS doesn’t recognize SCORM
commands from non-launch pages, you’ll have to combine the above information
into a single file. That shouldn’t be
too problematic as you’ll just include the stage scaling info in the head and
include the swf object twice at both points of the decision code as opposed to
the web pages you elected to load above.
Admittedly, this is a bit more work on the
developer’s end. However, it provides a
substantially better experience for the learner. A learner having a negative technical
experience will not be mentally available to digest the content from the module
you labored over for so long.
No comments:
Post a Comment