Structured Data Capture
2.8.0 - CI Build

Structured Data Capture, published by HL7 International - FHIR Infrastructure Work Group. This is not an authorized publication; it is the continuous build for version 2.8.0). This version is based on the current content of https://github.com/HL7/sdc/ and changes regularly. See the Directory of published versions

Example Questionnaire: SDC-Advanced Rendering

				<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
					<head>
						<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
						<title>Advanced Rendering Questionnaire Demonstration</title>
					</head>
					<body>
						<div id="questionnaire-title">
							<h1>
								<span style="color:blue;">
									<b>Advanced</b>
									<i>Rendering</i>
									<u>Questionnaire</u>
									<b>
										<i>Demonstration</i>
									</b>
								</span>
							</h1>
						</div>
						<div id="linkitem-1" class="group">
							<h2><span style="color:red;"><u>1</u></span> Demographics</h2>
							<div id="linkitem-1.0" class="display">
								<p>
									<span style="color:green;"><i>Please</i> complete the questionnaire</span>
								</p>
								<!-- Instructions | The text provides guidance on how to populate or use a portion of the questionnaire (or the questionnaire as a whole). -->
								<span id="linkitem-1.0-displayCategory" style="display:none;">Instructions | The text provides guidance on how to populate or use a portion of the questionnaire (or the questionnaire as a whole).</span>
							</div>
							<div id="linkitem-1.1" class="string">
								<form action="http://hl7.org/fhir/">
								Today's Date
								<input id="linkitem-1.1-input" type="text" value="01/01/2020" readonly style="color:#bbb"></input>
								</form>			
							</div>
							<div id="linkitem-1.2" class="string">
								<form action="http://hl7.org/fhir/">
								First Name
								<input id="linkitem-1.2-input" type="text"/>
							</form>
								<!-- optionalDisplay=true -->
							</div>
							<div id="linkitem-1.3" class="string" style="display:none;">
								<form action="http://hl7.org/fhir/">
								Hidden Name
								<input id="linkitem-1.3-input" type="text"/>
							</form>
							</div>
							<div id="linkitem-1.4" class="string">
								<form action="http://hl7.org/fhir/">
									<a href="http://hl7.org/fhir/StructureDefinition/questionnaire-supportLink">Middle Name</a>
									<input id="linkitem-1.4-input" type="text"/>
								</form>
							</div>
							<div id="linkitem-1.5" class="string">
								<form action="http://hl7.org/fhir/">
								Last Name*
								<input id="linkitem-1.5-input" type="text"/>
							</form>
							</div>
							<div id="linkitem-1.6" class="string">
								<form action="http://hl7.org/fhir/">
								Birth Date (MM/DD/YYYY)*
								<input id="linkitem-1.6-input" type="text"/>
								</form>
							</div>			
							<div id="linkitem-1.7" class="string">
								<form action="http://hl7.org/fhir/">
								Gender
								<input id="linkitem-1.7-f" type="radio" name="Gender" value="F" checked="checked"/>(a) Female 
								<input id="linkitem-1.7-m" type="radio" name="Gender" value="M"/>Male 
								<input id="linkitem-1.7-o" type="radio" name="Gender" value="O"/>Other 
								<input id="linkitem-1.7-u" type="radio" name="Gender" value="U"/>Unknown 
								</form>
							</div>
						</div>
						<div id="linkitem-2" class="group">
							<h2>2 Medical History</h2>
							<form action="http://hl7.org/fhir/">
								<table border="1">
									<col width="65%"/>
									<col width="35%"/>
									<tr>
										<td>
											Diabetes
										</td>	
										<td>
											Other Information
										</td>
									</tr>
									<tr>
										<td>
											<input id="linkitem-2.1-choice1" type="checkbox" name="diabetes-type1" value="diabetes-type1"/>Type 1
										</td>
										<td>
											<input id="linkitem-2.2-choice1" type="checkbox" name="otherinformation-hypertension" value="otherinformation-hypertension"/>Hypertension
										</td>
									</tr>
									<tr>
										<td>
											<input id="linkitem-2.1-choice2" type="checkbox" name="diabetes-type2" value="diabetes-type2"/>Type 2
										</td>
										<td>
											<input id="linkitem-2.2-choice2" type="checkbox" name="otherinformation-smoker" value="otherinformation-smoker"/>Smoker
										</td>
									</tr>
								</table>
							</form>
						</div>
						<div id="linkitem-3" class="group">
							<h2>3 Slider demonstration</h2>
							<div id="linkitem-3.1" class="slidecontainer">
							Adjust the slider<br/><br/>
							<form action="http://hl7.org/fhir/">
								0<input type="range" list="tickmarks" min="0" max="100" value="50" step="10" class="slider" id="linkitem-3.1-slider">100
								<datalist id="tickmarks">
								  <option value="0"></option>
								  <option value="10"></option>
								  <option value="20"></option>
								  <option value="30"></option>
								  <option value="40"></option>
								  <option value="50"></option>
								  <option value="60"></option>
								  <option value="70"></option>
								  <option value="80"></option>
								  <option value="90"></option>
							  	  <option value="100"></option>
								</datalist>				
							</form>
						</div>
						<br/>
						<br/>		
						<div id="linkitem-4" class="group">
							<h2>4 Sample answer options with valueset-labels</h2>
							<div id="linkitem-4.1" class="string">
								<form action="http://hl7.org/fhir/">
								Enter timing of harm assessment:<br/>
								<input id="linkitem-4.1-a" type="radio" name="Timing" value="LA20752-4" checked="checked"/>&nbsp;A. Within 24 hours <br/>
								<input id="linkitem-4.1-b" type="radio" name="Timing" value="LA20753-2"/>&nbsp;B. After 24 hours but before 3 days <br/>
								<input id="linkitem-4.1-c" type="radio" name="Timing" value="LA20754-0"/>&nbsp;C. Three days or later <br/>
								<input id="linkitem-4.1-d" type="radio" name="Timing" value="LA4489-6"/>&nbsp;D. Unknown 
							</form>
							</div>
						</div>		
						<div id="linkitem-5" class="group">
							<h2>5 Choice Column Example with Codes</h2>
							<div id="linkitem-5.1" class="choiceColumncontainer">
							Select Platelet:<br/>
							<form action="http://hl7.org/fhir/">
								<select name="choiceColumnWithCodes" id="choiceColumnWithCodes" size="10">
								  <option value="header">CODE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DESCRIPTION</option>
								  <option value="LA11165-0">LA11165-0&nbsp;&nbsp;&nbsp;&nbsp;Platelet anisocytosis</option>
				  				  <option value="LA11166-8">LA11166-8&nbsp;&nbsp;&nbsp;&nbsp;Platelet satellitism</option>
				  				  <option value="LA11167-6">LA11167-6&nbsp;&nbsp;&nbsp;&nbsp;Platelet large fragments</option>
				  				  <option value="LA11167-6">LA11167-6&nbsp;&nbsp;&nbsp;&nbsp;Platelet large fragments</option>
				  				  <option value="LA11168-4">LA11168-4&nbsp;&nbsp;&nbsp;&nbsp;Platelet clump</option>
				  				  <option value="LA11169-2">LA11169-2&nbsp;&nbsp;&nbsp;&nbsp;Platelets.agranular</option>  				  
				  				  <option value="LA11170-0">LA11170-0&nbsp;&nbsp;&nbsp;&nbsp;Platelets.giant</option>  				  
				  				  <option value="LA11172-8">LA11172-8&nbsp;&nbsp;&nbsp;&nbsp;Platelets.small</option>  				  
				  				  <option value="LA11172-6">LA11172-6&nbsp;&nbsp;&nbsp;&nbsp;Platelets.large</option>  				  
								</select>
							</form>
							</div>
						</div>		
						<div id="linkitem-6" class="group">
							<h2>6 Choice Column Example with References</h2>
							<div id="linkitem-6.1" class="choiceColumnReferencecontainer">
							All the practitioners below can speak the patient's language. Choose all preferred practioners:<br/>
							<form action="http://hl7.org/fhir/">
								<select name="choiceColumnWithReferences" id="choiceColumnWithReferences" size="10">
								  <option value="header">LAST NAME&nbsp;&nbsp;&nbsp;&nbsp;FIRST NAME&nbsp;&nbsp;&nbsp;&nbsp;GENDER</option>
								  <option value="Adjuster Awali">Adjuster&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Awali&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Male</option>
				  				  <option value="Moseley Henry">Moseley&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Henry&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Male</option>
				  				  <option value="Update Isaac">Upton&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Isaac&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Male</option>
				  				  <option value="Williams Amy">Williams&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Amy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Female</option>
				  				  <option value="Winters Bill">Winters&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bill&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Male</option>
								</select>
							</form>
							</div>
						</div>
					</body>
				</html>