I have to learn this from Youtube, PHP quiz using AJAX. I want to display question number navigation on the sidebar when I click any question number that question should display And Suppose I answered question no 1 and click on next then the background color of question number navigation should be green. The problem is when I click on question number navigation I get that question but when I select the option and click on the next button it previous question displays where it was And don't worry about SQL injection I will use a prepared statement, this is only a rough script for learning purposes. I think responseText is not working.
Please see this what I want to do Image
Question.php page to where I display question
<div class="col-12 question-Number question_navigation" >
<?php
$category=$_SESSION['exam_category'];
$sql = "SELECT * FROM questions WHERE category=? ORDER BY question_no=? ASC";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("ss",$category,$question_no);
$stmt->execute();
$res = $stmt->get_result();
while($row=mysqli_fetch_array($res)){
$ROW= $row['question_no'];
for($i=$ROW; $i<=$ROW; $i++){
?>
<p type='button' id="quest-number" class='next_QUESTION' class="display" data-id="<?php echo $i ?>" ><?php echo $i ?></p>
<?php
}
}
?>
</div>
<!--------------------------------------------------->
<script type="text/javascript">
function load_total_que(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("total_que").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajax/load_total_que.php", true);
xmlhttp.send(null);
}
</script>
<!--------------------------------------------------->
<script type="text/javascript">
var questionno="1";
load_questions(questionno);
function load_questions(questionno){
document.getElementById("current_que").innerHTML=questionno;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText == 1){
window.location="result.php";
}else{
document.getElementById("load_questions").innerHTML=xmlhttp.responseText;
load_total_que();
}
}
};
xmlhttp.open("GET", "ajax/load_questions.php?questionno="+ questionno,true);
xmlhttp.send(null);
}
</script>
<!--------------------------------------------------->
<script type="text/javascript">
function load_previous(){
if(questionno=="1"){
load_questions(questionno);
}else{
questionno=eval(questionno)-1;
load_questions(questionno);
}
}
function load_next(){
questionno=eval(questionno)+1;
load_questions(questionno);
}
$(document).on('click', '.next_QUESTION', function(){
var questionno = $(this).data("id");
load_questions(questionno);
});
</script>
<!------------------------SAVE----ANSWER---------------------->
<script>
function radioclick(radiovalue, questionno){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
};
xmlhttp.open("GET", "ajax/save_answer_in_session.php?questionno="+ questionno + "&value1=" + radiovalue, true);
xmlhttp.send(null);
}
</script>
This is the Question_load.php page
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>
<?php
session_start();
include_once("../../configure/config.php");
$question_no="";
$question="";
$opt1="";
$opt2="";
$opt3="";
$opt4="";
$answer="";
$count=0;
$ans="";
$queno=$_GET["questionno"];
if(isset($_SESSION["answer"][$queno]))
{
$ans=$_SESSION["answer"][$queno];
}
$res=mysqli_query($mysqli,"select * from questions where category='$_SESSION[exam_category]' AND question_no=$_GET[questionno]");
$count=mysqli_num_rows($res);
if($count==0)
{
echo "over";
}
else
{
while($row=mysqli_fetch_array($res))
{
$question_no=$row["question_no"];
$question=$row["question"];
$opt1=$row["opt1"];
$opt2=$row["opt2"];
$opt3=$row["opt3"];
$opt4=$row["opt4"];
}
?>
<br>
<table>
<h2><?php echo " ( ". $question_no ." ) ". $question; ?></h2>
<table>
<tr>
<input type="radio" name="r1" id="r1" value="<?php echo $opt1; ?>" onclick="radioclick(this.value,<?php echo $question_no; ?>)"
<?php
if($ans==$opt1){
echo "checked";
}
?>>
<?php
if(strpos($opt1,'image/')!=false)
{
?>
<img src="admin/<?php echo $opt1?>" height="30" width="30">
<?php
}
else
{
echo $opt1;
}
?>
</tr>
<br>
<input type="radio" name="r1" id="r1" value="<?php echo $opt2; ?>" onclick="radioclick(this.value,<?php echo $question_no; ?>)"
<?php
if($ans==$opt2){
echo "checked";
}
?>>
<?php
if(strpos($opt2,'image/')!=false)
{
?>
<img src="admin/<?php echo $opt2?>" height="30" width="30">
<?php
}
else
{
echo $opt2;
}
?>
</tr>
<br>
<input type="radio" name="r1" id="r1" value="<?php echo $opt3; ?>" onclick="radioclick(this.value,<?php echo $question_no; ?>)"
<?php
if($ans==$opt3){
echo "checked";
}
?>>
<?php
if(strpos($opt3,'image/')!=false)
{
?>
<img src="admin/<?php echo $opt3?>" height="30" width="30">
<?php
}
else
{
echo $opt3;
}
?>
</tr>
<br>
<input type="radio" name="r1" id="r1" value="<?php echo $opt4; ?>" onclick="radioclick(this.value,<?php echo $question_no; ?>)"
<?php
if($ans==$opt4){
echo "checked";
}
?>>
<?php
if(strpos($opt4,'image/')!=false)
{
?>
<img src="admin/<?php echo $opt4?>" height="30" width="30">
<?php
}
else
{
echo $opt4;
}
?>
</tr>
<br>
</table>
<?php
}
?>
