You’re in a pickle with Captivate simulation sizes:
- You want to have as much room as possible so the simulation is as similar to the real system as possible.
- You don’t want the size to scale up – being pictures, it gets fuzzy and looks bad once it’s larger than 100%.
- You don’t want the learner to get scrollbars if their screen is smaller – that too removes realism from the system.
This wee tweak to the Captivate publish wrapper below puts the Captivate div inside a table which centres the simulation at maximum size:100%. If the learners screen is smaller, it’ll shrink – but it won’t enlarge with larger monitors. It’s a bit rough and dirty (who uses tables anymore?!) but it works. I also removed the padding and scrollbars – you might like to edit your ‘standard.htm’ file in the Captivate publish template folder so they all publish they way you want them to.
<!-- Copyright [2008] Adobe Systems Incorporated. All rights reserved -->
<!-- saved from url=(0013)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script src="standard.js" type="text/javascript"></script>
<style>
body {
margin:0px;
overflow-x:hidden;
/* overflow-y:hidden; */
height:100%;
width:100%;
}
html{
height:100%;
width:100%;
}
#CaptivateContent
{
width:100%;
max-width:1010px;
height:auto;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="captivate.css" />
<body bgcolor="#f5f4f1">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="100%" width="100%" valign="middle" align="center">
<div id="CaptivateContent" style="height:100%;">
</div>
<script type="text/javascript">
var strURLFull = window.document.location.toString();
var intTemp = strURLFull.indexOf("?");
var strURLParams = "";
if(intTemp != -1)
{
strURLParams = strURLFull.substring(intTemp + 1, strURLFull.length);
}
var so = new SWFObject("module.swf", "Captivate", "100%", "100%", "10", "#CCCCCC");
so.addParam("quality", "high");
so.addParam("name", "Captivate");
so.addParam("id", "Captivate");
so.addParam("wmode", "window");
so.addParam("bgcolor","#f5f4f1");
so.addParam("seamlesstabbing","false");
so.addParam("menu", "false");
so.addParam("AllowScriptAccess","always");
so.addVariable("variable1", "value1");
if(strURLParams != "")
{
so.addParam("flashvars",strURLParams);
}
so.setAttribute("redirectUrl", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash");
so.write("CaptivateContent");
</script>
<script type="text/javascript">
document.getElementById('Captivate').focus();
document.Captivate.focus();
</script>
</td></tr></table>
</body>
</html>
Tech Reference: Captivate
Very interesting solution, although it does not work with version 9 (2019) of Captivate, the standard.htm exists and is very similar but it seems that it is not the original file from which the html5 or scorm is built.
:- (
Thanks for commenting John – yes this post is actually from 2012 or 13 I think, I haven’t used Captivate for a long time! I see this code references the .swf as well, so very old school now. You might be able to find something similar with how it publishes to HTML5, but I haven’t dabbled about with HTML canvas manually all that much so not sure how much success you’d get. Given Storyline scales happily in HTML5 there’s probably a way to wrap a div around the canvas for Captivate, if they still have the master template visible like this – but again I haven’t used Cp for many years. Best of luck!