forked from katezach/FinalProjectPSPI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquiz.php
105 lines (101 loc) · 4.83 KB
/
quiz.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<!--Title and favicon-->
<title>Quiz | Goal City</title>
<link rel="icon" type="image/png" sizes="32x32" href="media/withoutString.png">
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS/Javascript/Jquery files-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<style>
.btn{ font-size: 20px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--Social Media Icons-->
<script src="https://kit.fontawesome.com/9832cc157c.js" crossorigin="anonymous"></script>
</head>
<body>
<?php include('navbar.php');?>
<div class="container" style="min-height:400px; width:90%; margin-top:150px; margin-bottom:150px; background-color:rgb(238, 214, 214)">
<div class="row" style="float:right;margin-top:25px">
<div class="col-md-12" >
<!--Shows to user the no. of current question/ total-->
<div id="current_que" style="float:left; font-size:24px;">0</div>
<div style="float:left; font-size:24px;"> out of </div>
<div id="total_que" style="float:left; font-size:24px;"> 0</div>
</div>
</div>
<div class="row">
<?php $ch=$_GET["choice"];?>
<div class="col-md-12" id="load_questions"></div>
</div>
<div class="row" style="margin-top:50px; float:right;">
<div class="col-md-12" style="min-height:50px; padding:15px;">
<div class="col-lg-12" text-center>
<input type="button" class="btn btn-warning" value="Previous" onclick="load_previous();">
<input type="button" class="btn btn-success" value="Next" onclick="load_next();">
<input type="button" class="btn submit" value="Submit" onclick="load_score();">
</div>
</div>
</div>
</div>
<?php include('footer.php');?>
<script type="text/javascript">
//Passes the value of total questions in the <div id="total_que" ... >
//In our case, all quizes have 9 questions.
function load_total(){
document.getElementById("total_que").innerHTML=9;
}
var qid="1"; //Start from the first question
var choice = "<?php echo "$ch";?>";
load_questions(choice,qid);
//Loads the current question using the return value from load_questions.php where it sends the
//chosen quiz number and the id of the question that must be shown.
function load_questions(choice,qid){
document.getElementById("current_que").innerHTML=qid;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("load_questions").innerHTML=xmlhttp.responseText;
load_total();
}
};
xmlhttp.open("GET","load_questions.php?choice="+choice+"&qid="+qid,true);
xmlhttp.send(null);
}
//onClick method to save radio button value.
function radioclick(radioValue,qid)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","save_answer.php?qid="+qid+"&value="+radioValue,true);
xmlhttp.send(null);
}
function load_previous(){
//If it's the first question, previous button cannot be pressed. If not, load previous.
if(qid=="1"){
load_questions(choice,qid);
}
else{
qid=eval(qid)-1;
load_questions(choice,qid);
}
}
function load_next(){
//Checks if it is the last question, if not loads next question.
if(qid!=document.getElementById("total_que").innerHTML){
qid=eval(qid)+1;
load_questions(choice,qid);
}else
load_score();
}
//Loads the score for the specific quiz
function load_score(){
window.location="score.php?choice="+choice;
}
</script>
</body>
</html>