NIPO ODIN Version 5.17

Previous Topic

Next Topic

Example of Generated HTML Page

The NIPO HTML Generator translates the NIPO ODIN Questionnaire into HTML-pages question by question. You can check the HTML-source by right-mouse clicking and then View source in your Browser or in the CAWI-preview in the NIPO ODIN Developer 5.05.

Example NIPO ODIN Question

*QUESTION 1 *CODES 61L1
Gender:

1: Man
2: Woman

Example HTML-page generated by NIPO HTML Generator

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Generator" content="NIPO Software OdinServlet 1.02.001, build 148">
<title>NIPO Software Web Interview System</title>
<script type="text/javascript" src="odinservletscript/odinutils.js">
<!--ignored-->
</script>
<script type="text/javascript" src="odinservletscript/odinbuttons.js">
<!--ignored-->
</script>
<script type="text/javascript" src="odinservletscript/odinquestions.js">
<!--ignored-->
</script>
<script type="text/javascript" src="odinservletscript/odincodesquestion.js">
<!--ignored-->
</script>
<style type="text/css">
<!--
.odinfontnumber-0 {
font-size: 10pt;
font-family: "Verdana";
}
.odinfontnumber-1 {
font-weight: bold;
font-size: 10pt;
font-family: "Verdana";
}
.odinfontnumber-2 {
font-style: italic;
font-size: 10pt;
font-family: "Verdana";
}
.odinfontnumber-3 {
color: #0000d2;
font-size: 10pt;
font-family: "Verdana";
}
.odinfontnumber-4 {
color: #d20000;
font-size: 10pt;
font-family: "Verdana";
}
-->
</style>
<style type="text/css">
<!--
.odinerroritem {
border-width: 1;
border-color: #ff0000;
border-style: dotted;
}
.odinerrormessages {
width: 100.0%;
}
.odinerrormessage {
color: #ff0000;
}
.odinerrormessage:link {
text-decoration: none;
}
.odinerrormessage:visited {
text-decoration: none;
}
.odinerrormessage:active {
text-decoration: none;
}
.odinerrormessage:hover {
text-decoration: underline;
}
-->
</style>
<style type="text/css">
<!--
.odincodelist-column {
vertical-align: top;
}
.odincategorycheckcolumn {
vertical-align: top;
}
.odincategorylabel {
vertical-align: top;
}
-->
</style>
<style type="text/css">
<!--
.odinprogress-completed {
width: 0%;
}
.odinprogress-remaining {
width: 100%;
}
.odinprogress-completed-vertical {
height: 0%;
}
.odinprogress-remaining-vertical {
height: 100%;
}
-->
</style>
<script type="text/javascript">
<!--
//================================================
// general initialisation for questions
//================================================
function OdinServletInit() {
if (document.getElementById) {
document.getElementById("odinjavascriptsupport").value = 'true';
initialiseCodesQuestion();
}
}
//-->
</script>
</head>
<body leftmargin="5" topmargin="5" marginheight="5" class="grayGradient" marginwidth="5" bgcolor="#eeeeee">
<style type="text/css">
TD {
font-family: Arial, Helvetica;
font-size: 9pt;
height: 9px;
}


</style>
<center>
<img src="TemplateRelatedFiles/Default/bovenbalk3.gif">
<table border="0" width="772" cellpadding="1" cellspacing="0" bgcolor="#999999">}
<tbody>
<tr>
<td>
<table border="0" width="772" cellpadding="10" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<div id="ODINSERVLETINSERTIONPOINT">
<table width="100.0%" cellpadding="0" cellspacing="0" class="odinfontnumber-0 odinquestion" id="odinquestionUS10aHJlZToz">
<tbody>
<tr>
<td dir="ltr" align="left">
<div class="odinerrormessages-holder"></div>
</td>
</tr>
<tr>
<td>
<form method="post" action="http://172.31.6.87:8080/OdinServlet/Interview" id="odinquestioninputform">
<div class="odincurrentquestion" dir="ltr" align="left">
<table width="100.0%" cellpadding="0" cellspacing="0">
<colgroup>
<col width="25.0%">
<col width="75.0%">
</colgroup>
<tbody>
<tr>
<td class="odintabstop-0" colspan="2"><span class="odinfontnumber-0">Gender ?</span></td>
</tr>
<tr>
<td class="odintabstop-0" colspan="2"><span class="odinfontnumber-0" style="visibility: hidden; ">&nbsp;</span></td>
</tr>
<tr>
<td class="odintabstop-0 odinquestioninput" colspan="2">
<table class="odincodelist odincodelist2 odincodelist-single odincodelist-max2" width="100.0%" cellpadding="0" cellspacing="0">
<colgroup>
<col width="100.0%">
</colgroup>
<tbody>
<tr>
<td class="odincodelist-column">
<table cellpadding="0" cellspacing="0" class="odincategory odincategory1 odincategory-odd odincategory-placement1 odincategory-placement-odd odincategory-single" id="odincategory1-holder" onmouseout="return OdinOnCategoryHolderMouseOut(event, this, 'odincategory1');" onmouseover="return OdinOnCategoryHolderMouseOver(event, this, 'odincategory1');" onclick="return OdinOnCategoryHolderClick(event, this, 'odincategory1');" ondblclick="return OdinOnCategoryHolderDblClick(event, this, 'odincategory1');">
<tbody>
<tr>
<td class="odincategorycheckcolumn">
<input type="radio" name="odinanswer0" value="1" class="odincategorychecksingle" id="odincategory1" onclick="return OdinOnCategoryClick(event, this);">
</td>
<td class="odincategorylabelcolumn">
<table cellpadding="0" cellspacing="0" id="odincategorylabel1">
<tbody>
<tr>
<td class="odincategorylabel">
<label for="odincategory1"><span class="odinfontnumber-0"> Man <br>
</span></label>
</td>
</tr>
</tbody>
</table>
</td>
<td class="odincategorymarkcolumn"></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="odincategory odincategory2 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-single" id="odincategory2-holder" onmouseout="return OdinOnCategoryHolderMouseOut(event, this, 'odincategory2');" onmouseover="return OdinOnCategoryHolderMouseOver(event, this, 'odincategory2');" onclick="return OdinOnCategoryHolderClick(event, this, 'odincategory2');" ondblclick="return OdinOnCategoryHolderDblClick(event, this, 'odincategory2');">
<tbody>
<tr>
<td class="odincategorycheckcolumn">
<input type="radio" name="odinanswer0" value="2" class="odincategorychecksingle" id="odincategory2" onclick="return OdinOnCategoryClick(event, this);">
</td>
<td class="odincategorylabelcolumn">
<table cellpadding="0" cellspacing="0" id="odincategorylabel2">
<tbody>
<tr>
<td class="odincategorylabel">
<label for="odincategory2"><span class="odinfontnumber-0"> Woman <br>
</span></label>
</td>
</tr>
</tbody>
</table>
</td>
<td class="odincategorymarkcolumn"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="odintabstop-0" colspan="2"><span class="odinfontnumber-0" style="visibility: hidden; ">&nbsp;</span></td>
</tr>
<tr>
<td class="odintabstop-0"><img src="odinservletscript/odinservlet-spacer.gif" alt=""></td>
<td class="odintabstop-1 odintabstop-last odintabstop-nonzero"><img src="odinservletscript/odinservlet-spacer.gif" alt=""></td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="odininterviewid" id="odininterviewid" value="00000007">
<input type="hidden" name="odinquestionid" id="odinquestionid" value="US10aHJlZToz">
<input type="hidden" name="startsurvey" id="startsurvey" value="Demo">
<input type="hidden" name="odinusejavascriptanswer" id="odinusejavascriptanswer" value="false">
<input type="hidden" name="odinjavascriptsupport" id="odinjavascriptsupport" value="true">
<input type="hidden" name="ValidationErrors" id="ValidationErrors" value="Unknown error with code 0An answer is requiredInvalid answer: {0}Answer must be in range {0}Too few categories, minimum is {0}Too many categories, maximum is {0}Maximum number of decimals is {0}All levels must be orderedAn answer must be specifiedUnknown code: {0}Duplicate code: {0}This category cannot be selected together with other categoriesAppointment not within constraints{0} is not a numberSystem error, illegal formatNavigation error. Do not use BACK button on browser, but use buttons on interview instead.">
<input type="hidden" name="odinscriptbasepath" id="odinscriptbasepath" value="odinservletscript">
<input type="hidden" name="odinjavascriptmaximum" id="odinjavascriptmaximum" value="9.000000000000002">
<input type="hidden" name="odinjavascriptminimum" id="odinjavascriptminimum" value="0.0">
<input type="hidden" name="odinjavascriptnon" id="odinjavascriptnon" value="false">
<input type="hidden" name="odinjavascriptanswer" id="odinjavascriptanswer" value="">
<input type="hidden" name="showcategoryorder" id="showcategoryorder" value="false">
<div class="odinbuttonpanel" dir="ltr" align="left">
<input type="submit" name="odinbuttonBACK" class="odinbutton odinbuttonBACK odinbuttonnormal odinbuttonBACKnormal" id="odinbuttonBACK" accesskey="B" value="Back" disabled onclick="return OdinButtonClick(event, this);" onmousedown="return OdinButtonMouseDown(event, this);" onmouseup="return OdinButtonMouseUp(event, this);" onmouseover="return OdinButtonMouseOver(event, this);" onmouseout="return OdinButtonMouseOut(event, this);" onfocus="return OdinButtonFocus(event, this);" onblur="return OdinButtonBlur(event, this);">
<input type="submit" name="odinbuttonOK" class="odinbutton odinbuttonOK odinbuttonnormal odinbuttonOKnormal" id="odinbuttonOK" value="OK" onclick="return OdinButtonClick(event, this);" onmousedown="return OdinButtonMouseDown(event, this);" onmouseup="return OdinButtonMouseUp(event, this);" onmouseover="return OdinButtonMouseOver(event, this);" onmouseout="return OdinButtonMouseOut(event, this);" onfocus="return OdinButtonFocus(event, this);" onblur="return OdinButtonBlur(event, this);">
<input type="submit" name="odinbuttonCLEAR" class="odinbutton odinbuttonCLEAR odinbuttonnormal odinbuttonCLEARnormal" id="odinbuttonCLEAR" accesskey="l" value="Clear" onclick="return OdinButtonClick(event, this);" onmousedown="return OdinButtonMouseDown(event, this);" onmouseup="return OdinButtonMouseUp(event, this);" onmouseover="return OdinButtonMouseOver(event, this);" onmouseout="return OdinButtonMouseOut(event, this);" onfocus="return OdinButtonFocus(event, this);" onblur="return OdinButtonBlur(event, this);">
<input type="submit" name="odinbuttonHELP" class="odinbutton odinbuttonHELP odinbuttonnormal odinbuttonHELPnormal" id="odinbuttonHELP" accesskey="H" value="Help" onclick="return OdinButtonClick(event, this);" onmousedown="return OdinButtonMouseDown(event, this);" onmouseup="return OdinButtonMouseUp(event, this);" onmouseover="return OdinButtonMouseOver(event, this);" onmouseout="return OdinButtonMouseOut(event, this);" onfocus="return OdinButtonFocus(event, this);" onblur="return OdinButtonBlur(event, this);">
</div>
</form>
</td>
</tr>
<tr>
<td>
<div style="text-align: right; font-family: Verdana; font-size: 9px;">
<span style="color: #000000;">Powered by NIPO </span><span style="font-style: italic; color: #002084;">Software</span>
</div>
</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
<!--
// call OdinServletInit on JavaScript enabled browsers.
OdinServletInit();
//-->
</script>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

See Also