Default layout template
Layout templates control the overall appearance of interview pages. The default layout template eliminates fixed widths and provides the fluidity required for adaptation to any browser window size. The template uses CSS stylesheets to ensure specific content behavior in relation to the specific web browser (re-size in relation to the browser window size, prevent zooming, use media queries, and so on).
default.css
body, html {width:100%;height:100%;line-height:1.5;margin:0;padding:0;font-family:sans-serif;overflow:hidden}
.content, .branding, .nav {padding:0;margin:0;font-size:90%}
.content {width:75%;height:100%;display:block;position:absolute;left:25%;overflow:auto}
form {margin:0;padding:0;height:100%;width:100%;position:relative;}
.questionArea {position:relative;top:0;left:0;margin:0;padding:0 1em 0 1em;}
.nav {direction:rtl;position:relative;margin:1em;height:2em;display:block;right:0}
.branding {width:25%;height:100%;background-color:#ecf0f4;display:block;position:absolute;border-left:1px solid #009;border-right:
1px solid #009}
.vertical-floater {position:absolute;padding:0;width:100%;top:50%;margin:-32px 0 0 0}
.branding-element {display:block;margin:auto;padding:0 .75em;text-align:center}
.mrBannerText {font-weight: bold;}
.mrEdit, .mrDropDown, .mrListBox, .mrQuestionText, .mrSingleText {}
.mrErrorText {font-weight: bold; color:#b10000;}
mid.css
@charset "utf-8";
body, html {font-size:90%}
.content {}
img.branding-element {max-width:50%}
narrow.css
@charset "utf-8";
body, html {font-size:90%}
.branding {width:100%;position:relative;height:2em;border-left:none;border-right:none;border-bottom:1px solid #009;z-index:2}
.vertical-floater {text-align:left;margin:0;padding:0;height:2em;position:relative;top:0;left:0}
.branding-element {display:inline;padding:0;margin:0;vertical-align:middle;}
img.branding-element {height:98%;margin:0 .5em;}
.content {width:100%;position:absolute;left:0;top:0;height:100%;margin:0;padding:0;}
form {width:100%;height:100%;margin:0;padding:0;position:relative}
.questionArea {position:absolute;top:2.1em;bottom:2.2em;overflow:auto;left:0;right:0;padding:0 0 0 .5em;margin:0 }
.nav {position:absolute;padding:0;margin:0;bottom:0;left:0;height:2.2em;width:100%;background-color:#ecf0f4;text-align:center;
display:block}
.mrNext, .mrPrev, .mrStop, .mrGoTo {padding:0;margin:.1em;background-color:transparent;text-align:center;font-size:100%;height:2em;
border:none;background-color:#fff;width:80px}
wide.css
@charset "utf-8";
body, html {font-size:100%}
@media screen and (min-width:1001px) {
.content {left:20em;top:0;right:0;width:auto}
.branding {width:20em}
}
@media screen and (min-width:1800px) {
body, html {font-size:120%}
.content {left:20em;top:0;right:0;width:auto}
.branding {width:20em}
}
The following default layout template is used to determine the positions of the questions, navigation buttons, banners, and other items on an interview page when no custom layout template is defined in the interview script.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><mrPageTitle/></title>
<mrRef RefType="link" rel="stylesheet" type="text/css" DefaultLayout.htm_files/default.css"
/>
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (min-width: 801px)"
DefaultLayout.htm_files/wide.css" />
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (min-width: 401px)
and (max-width: 800px)" DefaultLayout.htm_files/mid.css" />
<mrRef RefType="link" rel="stylesheet" type="text/css" media="screen and (max-width: 400px)"
DefaultLayout.htm_files/narrow.css" />
<mrRef RefType="script" id="mediaQueryChecker" type="text/javascript" src="DefaultLayout.htm_
files/default.js" defer="true">//Script</mrRef>
</head>
<body>
<div class="branding">
<div class="vertical-floater">
<mrRef RefType="img" class="branding-element" src="DefaultLayout.htm_files/images/DataCollection-48.png"/>
<span class="branding-element">UNICOM Systems, Inc.</span>
</div>
</div>
<div class="content">
<mrPage IncludeElementIDs="true" />
<div class="questionArea">
<mrBannerText>mrBannerText</mrBannerText><br/>
<mrData>Questions here</mrData>
</div>
<div class="nav">
<mrNavButton Name="Next">Next</mrNavButton>
<mrNavButton Name="Prev">Previous</mrNavButton>
<mrNavButton Name="Goto">GoTo</mrNavButton>
</div>
</div>
</body>
</html>
JavaScript alternative
For web browsers that do not support media queries, the default layout template uses a JavaScript file that provides similar user experience when compared to using media queries.
When using JavaScript instead of media queries, you can swap class names on the body tag when the browser size is within the desired ranges. The default.js JavaScript file that is supplied with the UNICOM Intelligence Developer Documentation Library, or when UNICOM Intelligence Author or UNICOM Intelligence Reporter is installed, identifies existing media query links in the DefaultLayout.htm head element. It then builds a JavaScript object that can be used to detach and reattach CSS styles based on the browser window's current size. This solution reduces the number of files that have to contain identical styling information. The default.js and DefaultLayout.htm files are in:
[INSTALL_FOLDER]\IBM\SPSS\DataCollection\7\DDL\Scripts\Interview\Templates
Because survey authors are able to enter arbitrary HTML and JavaScript content, they are considered privileged users.
See also