#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.</p>  
	<a class="thickbox" href="$home$categoryimage">Click here to view now</a>
	
#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>
		<a class="media" href="$home$categoryimage"></a>
	</p>
#end

#if(!($question.getDefaultCategory().getProperty("imagemode") && $question.getDefaultCategory().getProperty("imagemode") == "once"))
	#if($pages.doesExist($categoryimage))
		<img src="$home$categoryimage"/>
	#else
		##$categoryimage image does not exist
	#end
#end
	
#if($question.questionimage && $question.questionimage != "")
	#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

	<a class="oe-dataedit" data-target="#edit-$question.id"  href="#">Edit below</a>
			       
			      
	<div class="card card-default">
		<div class="card-header">
			<h3 class="oe-editable card-title" id="edit-$question.id" data-dataid="$question.id" data-field="text" data-searchtype="question">$question.text</h3>
		</div>
	</div>
	
#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>
	<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">
					<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>