<ng-include src="'/intranet/quiz/html/includes/infoboxes/preview_mode.html'"></ng-include>

<div class="row">
	<div class="col-lg-2"></div>
	<div class="col-lg-8 col-md-12">
		<p class="small text-muted" ng-bind="localise('quiz.info.question_of_question', tracker.trackpos+1, tracker.count)">[Question 1 of 10]</p>
		<div class="question-title-wrap">
		<h4 class="title">{{ question.text }}</h4>
		<p class="skip-question">
			<button class="btn btn-link primary_color" ng-click="skip()" ng-hide="isSkipHidden()" lmsg="quiz.button.skip">
				[Skip to next question]
			</button>
		</p>
		<p name="question-description" class="question-description" ng-bind-html="question.description">[Description]</p>
		<p ng-if="question.img.length > 0">
			<img ng-src="{{question.img}}" />
		</p>
	</div>

		<p ng-if="tracker.options.showHelpText"><span ng-bind="question.helper_description">[Select the correct answer]</span>:</p>

		<!-- question -->
		<ul id="questions" class="list-unstyled">
			<li
				class="quiz-answer"
				ng-repeat="optionId in optionIndexes[question.id] track by $index"
				ng-click="toggleOption(question.options[optionId].id)"
				ng-class="{
					'quiz-answer--selected':    isOptionSelected(question.options[optionId].id),
					'quiz-answer--highlighted': isOptionHighlighted(question.options[optionId].id)
				}"
			>
				<button class="quiz-answer__counter" ng-bind="getOptionLetter($index)">[A]</button>
				<span ng-bind="question.options[optionId].text">[Option]</span>
			</li>
		</ul>

		<!-- new location of submit button here -->
		<button class="btn btn-next-question btn-submit btn-primary" ng-click="next(true)" lmsg="quiz.button.next" ng-disabled="isNextDisabled()">[next]</button>
	</div>
	<div class="col-lg-2"></div>
</div>


<!-- nav -->
<cla-quiz-nav quiz_id="{{quiz_id}}"></cla-quiz-nav>

<!-- allow keyboard shortcuts -->
<cla-quiz-keyboard bind-to="quiz-wrap"></cla-quiz-keyboard>

<!-- draw canvas for confetti -->
<canvas id="confetti"></canvas>
<!-- end of draw canvas -->
