<!DOCTYPE html>
<html>
<head>
	<title>Resume</title>
	<meta charset="utf-8">
	<link rel=stylesheet type=text/css href="{{url_for('static', filename='style.css')}}">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="/"><span class="glyphicon glyphicon-home"></span> GKuiz</a>
			</div>
			<ul class="nav navbar-nav">
				<li><a href="/profile/{{ currentuser }}"><span class="glyphicon glyphicon-user"></span> My Profile</a></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-th-list"></span> Categories<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="/quiz/Literature"><span class="glyphicon glyphicon-book"></span> Literature</a></li>
						<li><a href="/quiz/History"><span class="glyphicon glyphicon-knight"></span> History</a></li>
						<li><a href="/quiz/CurrentAffairs"><span class="glyphicon glyphicon-bullhorn"></span> Current Affairs</a></li>
						<li><a href="/quiz/Movies"><span class="glyphicon glyphicon-film"></span> Movies</a></li>
						<li><a href="/quiz/Science"><span class="glyphicon glyphicon-tint"></span> Science</a></li>
						<li><a href="/quiz/Sports"><span class="glyphicon glyphicon-flag"></span> Sports</a></li>
					</ul>
				</li>
				<li><a href="http://127.0.0.1:5000/leaderboard/globalrank"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> Leaderboards</a></li>
				<li><a href="/user/sign-out"><span class="glyphicon glyphicon-new-window"></span> Log-Out</a></li>
			</ul>
		</div>
	</nav>
	{% set j = 0 %}
	{% for i in array %}
	<div class="container">
		{% if i[11] == "Single" %}
		<div class="panel panel-primary">
			<div class="panel-heading">
				Question {{ j + 1 }}
			</div>
			<div class="panel-body">
				<label >{{ i[1] }}</label>
				<form id="f{{ j }}">
					<div class="radio">
						{% if data['Q' + j|string + 'O0'] == 0 %}
						<label><input type="radio" name="selected" id ="f{{ j }}q1"><span id="strike{{ j }}q1">{{ i[2] }}</span></label>
						{% else %}
						<label><input type="radio" name="selected" id ="f{{ j }}q1" checked><span id="strike{{ j }}q1">{{ i[2] }}</span></label>
						{% endif %}
					</div>
					<div class="radio">
						{% if data['Q' + j|string + 'O1'] == 0 %}
						<label><input type="radio" name="selected" id="f{{ j }}q2"><span id="strike{{ j }}q2">{{ i[3] }}</span></label>
						{% else %}
						<label><input type="radio" name="selected" id ="f{{ j }}q2" checked><span id="strike{{ j }}q2">{{ i[3] }}</span></label>
						{% endif %}
					</div>
					<div class="radio">
						{% if data['Q' + j|string + 'O2'] == 0 %}
						<label><input type="radio" name="selected" id="f{{ j }}q3"><span id="strike{{ j }}q3">{{ i[4] }}</span></label>
						{% else %}
						<label><input type="radio" name="selected" id ="f{{ j }}q3" checked><span id="strike{{ j }}q3">{{ i[4] }}</span></label>
						{% endif %}
					</div>
					<div class="radio">
						{% if data['Q' + j|string + 'O3'] == 0 %}
						<label><input type="radio" name="selected" id="f{{ j }}q4"><span id="strike{{ j }}q4">{{ i[5] }}</span></label>
						{% else %}
						<label><input type="radio" name="selected" id ="f{{ j }}q4" checked><span id="strike{{ j }}q4">{{ i[5] }}</span></label>
						{% endif %}
					</div>
				</form>
				<p id="u{{ j }}"></p>
				{% if data['fifty50'] == 1 %}
				<button typ="button" class="fifty50 btn" disabled onclick="use50({{ j|safe }})">Fifty-50</button>
				{% else %}
				<button typ="button" class="fifty50 btn" onclick="use50({{ j|safe }})">Fifty-50</button>
				{% endif %}
				{% if data['Q' + j|string ] == 0 %}
				<button type="button" id="b{{ j }}" class="btn pull-right btn-primary" onclick="myfn( {{ j|safe }})">Submit</button>
				{% else %}
				<button type="button" disabled id="b{{ j }}" class="btn pull-right btn-primary" onclick="myfn( {{ j|safe }})">Submit</button>
				{% endif %}
			</div>
		</div>
		{% endif %}
		
		{% if i[11] == "Multiple" %}
		<div class="panel panel-primary">
			<div class="panel-heading">
				Question 1
			</div>
			<div class="panel-body">
				<label >{{ i[1] }}</label>
				<div class="container">
					<form id="f{{ j }}">
						<div class="checkbox">
							{% if data['Q' + j|string + 'O0'] == 0 %}
							<input type="checkbox" id="f{{ j }}q1">{{ i[2] }}
							{% else %}
							<input type="checkbox" checked id="f{{ j }}q1">{{ i[2] }}
							{% endif %}
						</div>
						<div class="checkbox">
							{% if data['Q' + j|string + 'O1'] == 0 %}
							<input type="checkbox" id="f{{ j }}q2">{{ i[3] }}
							{% else %}
							<input type="checkbox" checked id="f{{ j }}q2">{{ i[3] }}
							{% endif %}
						</div>
						<div class="checkbox">
							{% if data['Q' + j|string + 'O2'] == 0 %}
							<input type="checkbox" id="f{{ j }}q3">{{ i[4] }}
							{% else %}
							<input type="checkbox" checked id="f{{ j }}q3">{{ i[4] }}
							{% endif %}
						</div>
						<div class="checkbox">
							{% if data['Q' + j|string + 'O3'] == 0 %}
							<input type="checkbox" id="f{{ j }}q4">{{ i[5] }}
							{% else %}
							<input type="checkbox" checked id="f{{ j }}q4">{{ i[5] }}
							{% endif %}
						</div>
					</form>
				</div>
				<p id="u{{ j }}"></p>
				{% if data['onecorrect'] == 1 %}
				<button typ="button" class="onecorrect btn" disabled onclick="use1c({{ j|safe }})">Onecorrect</button>
				{% else %}
				<button typ="button" class="onecorrect btn" onclick="use1c({{ j|safe }})">Onecorrect</button>
				{% endif %}
				{% if data['Q' + j|string ] == 0 %}
				<button type="button" id="b{{ j }}" class="btn btn-primary pull-right" onclick="myfn({{ j|safe }})">Submit</button>
				{% else %}
				<button type="button" id="b{{ j }}" disabled class="btn btn-primary pull-right" onclick="myfn( {{ j|safe }})">Submit</button>
				{% endif %}
			</div>
		</div>
		{% endif %}
		{% set j = j + 1 %}
	</div>
	<br/>
	{% endfor %}
	<div>
		<button type="button" class="btn btn-secondary btn-lg" onclick="updatescore()"><span class="glyphicon glyphicon-send"></span> Final Submit</button>
	</div><div id="piechart" style="width: 900px; height: 500px;"></div>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript"> 
		var array = {{ array|safe }};
		var score = {{ data['partialscore']|safe }};
		var numofinc = {{ data['numofinc']|safe }};
		var q50 = {{ data['q50']|safe }}

		if(q50 != 100){
			use50(q50);
		}

		google.charts.load('current', {'packages':['corechart']});
		google.charts.setOnLoadCallback(drawChart);
		function drawChart() {
			var piedata = google.visualization.arrayToDataTable([
				['Status', 'Number'],
				['Correct',     score/10],
				['Incorrect',      numofinc],
				['Not Attempted',  10-(score/10)-numofinc],
				]);
			var options = {
				title: 'Performance'
			};
			var chart = new google.visualization.PieChart(document.getElementById('piechart'));
			chart.draw(piedata, options);
		}


		function updatescore(){
			drawChart();
			scoredata = {}
			scoredata['score'] = score
			scoredata['maincategory'] = "{{ data['maincategory'] }}"
			scoredata['subcategory'] = "{{ data['category'] }}"
			$.post("/updatescore", JSON.stringify(scoredata), function(){

			});
		}
		function myfn(j){
			document.getElementById('b' + j.toString()).disabled=true;
			var flag=1;
			for(var k=1;k<=4;k++){
				option=document.getElementById('f' + j.toString() + "q" + k.toString());
				checked = option.checked
				ans=array[j][5+k];
				if(ans!=checked){
					flag=0;
				}
			}
			ptag = document.getElementById('u'+j.toString());
			if(flag==1){
				ptag.style.color="green";
				ptag.innerHTML="Correct";
				score+=10
			}
			else{
				ptag.style.color="red";
				ptag.innerHTML="Incorrect";
				numofinc++;
			}
		}

		function use1c(j){
			btnarr = document.getElementsByClassName('onecorrect');
			for(var i=0;i<btnarr.length;i++){
				btnarr[i].disabled = true;
			}
			for(var i=1;i<=4;i++){
				if(array[j][5+i]==1){
					document.getElementById('f' + j.toString() + 'q' + i.toString()).checked = true;
					break;
				}
			}
		}

		function use50(j){
			btnarr = document.getElementsByClassName('fifty50');
			for(var i=0;i<btnarr.length;i++){
				btnarr[i].disabled = true;
			}
			count = 0;
			for(var i=1;i<=4;i++){
				if(array[j][5+i]==0 && count<2){
					document.getElementById('f' + j.toString() + 'q' + i.toString()).disabled = true;
					document.getElementById('strike'+ j.toString() + 'q' + i.toString()).style.textDecoration='line-through';
					count++;
				}
			}	
		}
	</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<div class="jumbotron" style="background-color: black;">
		<p style="text-align: center; color: white;">&copy; 2018 GKuiz. All rights reserved.</p>
	</div>
</body>
</html>