unserver-unify/src/components/dialog/chapterquiz-dlg.html

<style type="text/css">
	.correctColor{
		color:green;
	}
	.wrongColor{
		color:red;
	}
</style>
<div class="modal-header">
	{{ctrl.autotypelist[ctrl.displayQuiz.type]}}
</div>
<div class="modal-body">
	<div ng-bind-html="ctrl.displayQuiz.content"></div>

	<hr>
	
	<!-- single choice -->
	<ol type="A" ng-if=" ctrl.displayQuiz.type == 'single' && ctrl.displayQuiz.options | notEmpty ">
		<li ng-repeat="opt in ctrl.displayQuiz.options">
		
			<label ng-class="{ 'correctColor' : ctrl.submit && opt.text == ctrl.displayQuiz.ok_answer, 'wrongColor' : ctrl.submit && opt.text != ctrl.displayQuiz.ok_answer && ctrl.answer == $index+1  }" >
				<input type="radio" ng-model="ctrl.answer" ng-value="$index+1" ng-disabled="ctrl.submit" />
				{{opt.text}}
				<!-- wrong -->
				<span class="glyphicon glyphicon-remove" ng-if=" ctrl.submit && opt.text !== ctrl.displayQuiz.ok_answer ">
				</span>
				<!-- correct -->
				<span class="glyphicon glyphicon-ok" ng-if=" ctrl.submit && opt.text == ctrl.displayQuiz.ok_answer ">
				</span>
			</label>
		</li>
	</ol>

	<!-- multiple choice -->
	<ol type="A" ng-if=" ctrl.displayQuiz.type=='multiple' && ctrl.displayQuiz.options | notEmpty ">
		<li ng-repeat="opt in ctrl.displayQuiz.options">
			<label ng-class="{ 'correctColor' : ctrl.submit && opt.correct, 'wrongColor' : ctrl.submit && !opt.correct && ctrl.answer[$index] }">
				<input type="checkbox" ng-model="ctrl.answer[$index]" value="true" ng-disabled="ctrl.submit" />
				{{opt.text}} 
				<!-- wrong -->
				<span class="glyphicon glyphicon-remove" ng-if="ctrl.submit && !opt.correct "></span>
				<!-- correct -->
				<span class="glyphicon glyphicon-ok" ng-if=" ctrl.submit && opt.correct "></span>
			</label>
		</li>
	</ol>

	<!-- fill the blank -->
	<input type="text" ng-if=" ctrl.displayQuiz.type=='mfill' " ng-model="ctrl.answer" />

	<!-- true of false -->
	
<ol type="A" ng-if=" ctrl.displayQuiz.type == 'tof' " style="padding:0px 20px;">

	<label >
		<div ng-class="{ 'correctColor' : ctrl.submit && String(ctrl.answer) == String(ctrl.displayQuiz.tof_answer) && ctrl.displayQuiz.tof_answer == 1 , 'wrongColor' : ctrl.submit && ctrl.answer != ctrl.displayQuiz.tof_answer && ctrl.displayQuiz.tof_answer == 0}">
			<input type="radio" ng-model="ctrl.answer" value="true" ng-disabled="ctrl.submit" />

			<span >True</span>
			<!-- wrong -->
			<span class="glyphicon glyphicon-remove" ng-if="ctrl.submit && !ctrl.displayQuiz.tof_answer "></span>
			<!-- correct -->
			<span class="glyphicon glyphicon-ok" ng-if=" ctrl.submit && ctrl.displayQuiz.tof_answer "></span>

		</div>
		

		<div style="margin-top:20px;" ng-class="{ 'correctColor' : ctrl.submit && String(ctrl.answer) == String(ctrl.displayQuiz.tof_answer) && ctrl.displayQuiz.tof_answer == 0 , 'wrongColor' : ctrl.submit && ctrl.answer != ctrl.displayQuiz.tof_answer && ctrl.displayQuiz.tof_answer == 1}">
			<input type="radio" ng-model="ctrl.answer" value="false" ng-disabled="ctrl.submit" />
			<span >False</span>
			<!-- wrong -->
			<span class="glyphicon glyphicon-remove" ng-if="ctrl.submit && ctrl.displayQuiz.tof_answer "></span>
			<!-- correct -->
			<span class="glyphicon glyphicon-ok" ng-if=" ctrl.submit && !ctrl.displayQuiz.tof_answer "></span>

		</div>

	</label>

</ol>

</div>
<div class="modal-footer">

	<span ng-if="ctrl.answer == ''  && ctrl.displayQuiz.type != 'mfill' " style="color:red;font-weight:bold;">Select a valid choice .</span>
	<span ng-if="ctrl.answer == ''  && ctrl.displayQuiz.type == 'mfill' " style="color:red;font-weight:bold;">Please fill in the blank .</span>
	<button class="btn btn-primary" ng-click="ctrl.checkAnswer()"  ng-if="!ctrl.submit">{{'Submit' | translate}}</button>
	<button class="btn btn-success" ng-click="ctrl.submitAnswer()" ng-if="ctrl.submit"> {{'Continue' | translate}}</button>

</div>