#set($questionimage = $testbench.getQuestionImage($question))
#set($categoryimage = $testbench.getCategoryImage($question))
	
#if($question.getDefaultCategory().getProperty("imagemode") == "once" )
		
	<p>This series of questions is based on a sample image, audio file or video that you should view only
	once at the start of the test.
	
	
	
	<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  Click here to view now
</button>

	<div id="demo" class="collapse "><img src="$home$categoryimage"/></div>
	
	
	</p>  
	
#end

#if($pages.doesExist($categoryimage) && !$pages.getPage($categoryimage).isImage())
	<h3>Special Instructions</h3>
	<p>
		View/Listen to the following media before answering the questions.
	</p>
	<p>
	<audio controls>
  <source src="$home$categoryimage" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
	
	</p>
#end

#if(!($question.getDefaultCategory().getProperty("imagemode") && $question.getDefaultCategory().getProperty("imagemode") == "once"))
	#if($pages.doesExist($categoryimage) && $pages.getPage($categoryimage).isImage() )
		<img src="$home$categoryimage"/>
	#else
		##$categoryimage image does not exist
	#end
#end
#if($question.media && $question.media != "")
	#set($asset = $mediaarchive.getAsset($question.media))
	
	<div class="card card-default">
		<div class="card-header">
			<h3 class="card-title">$!question.text</h3>
		</div>
		<div class="card-body">
			<img src="$home$apphome/views/modules/asset/downloads/preview/large/${asset.sourcepath}/thumb.jpg" class="img-responsive img-rounded"/>
		</div>
	</div>
	
#else

 #if($user.get("oe_edit_mode")== "editing")
		<a class="oe-dataedit" data-target="#edit-$question.id"  href="#"><img src="/openedit/components/html/theme/images/htmledit.png"/></a>
	#end			       
			      
	
			<h3 class="oe-editable card-title" id="edit-$question.id" data-dataid="$question.id" data-field="text" data-searchtype="question">$!question.text</h3>
		
	
#end

#set($hide = $question.getProperty("hideresponse") == "true" || $question.getDefaultCategory().getProperty("hideresponse") == "true") 
#if($hide)
	<p>
		<a class="showlink" href="#">Show/Hide Response</a>
	</p>
#end

<div id="responsearea" #if($hide) style="display:none;" #end style="padding-top: 20px;">
	<div class="row">
	#foreach($response in $question.getResponses())
		#set($responseimage = $response.responseimage)
		
		<div class="col-md-6">
		
			<div class="card card-default ">
				<div class="card-header equal-height">
					<h3 class="card-title">
						<input  name="response.value" type="radio" value="$response.getId()" #if($node.wasSelected($response)) checked #end>
						$response.getText()
					</h3>
				</div>
				
				#if($responseimage)
					#set($rasset = $mediaarchive.getAsset($responseimage))
					#if($rasset)
					<div class="card-body">
						#set($width = 300)
						#set($height = 300)
						<img style="max-width:${width}px; max-height:${height}px;" src="$home$apphome/views/modules/asset/downloads/preview/thumb/${rasset.sourcepath}/thumb.jpg?prefheight=${height}" class="img-rounded img-responsive " />
					</div>
				   #end
				#end
			</div>
			
		</div>
		<input type="hidden" name="response" value="$response.getId()"/>
		#if($hide)
		<!--  This is for WCT.  There is only one response so we should hard code it. -->
		<input type="hidden" name="${response.getId()}.value" value="$response.getId()"/>
		#end
	#end
	</div>
</div>

<script type="text/javascript">
	jQuery(".showlink").livequery('click', function(event){
		jQuery("#responsearea").toggle("fast");
	});	
	function equalHeight(group) {
		tallest = 0;
		group.each(function() {
			thisHeight = $(this).height();
			if(thisHeight > tallest) {
				tallest = thisHeight;
	        }
		});  
	    group.each(function() {
	    	$(this).height(tallest);
	    });
	}
	$(document).ready(function() {
		equalHeight($(".equal-height"));
	});
</script>