flip.html

<a name='{{name}}'/>
<h1 class='w3-container w3-teal' ng-click='show=true; scrollTo()' id='{{subject}}'> {{subject}} <span style='font-size: 16pt;' ng-if='ncount>0'>({{ncount}})</span></h1>
<hr/>
<div style='font-size: 20px;' ng-show='show'>
	<div class="flip" ng-repeat='question in random' class='w3-container'>
		<div class="card" ng-class="{'flipped':isFlipped1}" ng-click="isFlipped1=!isFlipped1; Flip(question.id, isFlipped1 )"> 
			<div class="face front w3-teal w3-round-large w3-xlarge">
				<span style='font-size: 14pt; color: gold;'>Level: {{question.rank}} </span><br/>
                Question: {{question.question}}
				<p style='font-size: 11pt; color: gold;'>Click to Flip</p>
            </div> 
            <div class="face back w3-green w3-round-large w3-xlarge"> 
                Answer: {{question.answer}} 
				<p style='font-size: 11pt; color: gold;'>Click to Flip</p>
            </div>
		</div>
	</div>
	<br/>
	<section ng-show='!quiz'>
		<div class='w3-center'>
			<button class='w3-btn w3-red w3-xlarge w3-round fa fa-times' ng-click='Next( random[0].id, false )'> Next</button>
			<button class='w3-btn w3-green w3-xlarge w3-round fa fa-check' ng-click='Next( random[0].id, true  )'> Next</button>
		</div> 
		<div style='clear:both;'>&nbsp;</div>
	</section>
	
	<div ng-show='quiz' style='text-align: center'>
		<button class='w3-btn w3-round w3-large w3-orange' ng-click="Quiz( random[0].id )">Take Quiz</button>
	</div>
</div>