i have created a website for quiz exam. I have the following html and ajax for calling php functions in the file. i am calling questions from the database. 1 question at a time is shown to the user. there is no submit button, instead when the user clicks the option,the next question is shown.
<script>
$(document).ready(function(){
$('body').on('click','input[type="radio"]', function(){
var curr_id = $('.question').data('nextQuestion');
var answer1 = $('#radio1').is(':checked');
var answer2 = $('#radio2').is(':checked');
var answer3 = $('#radio3').is(':checked');
var answer4 = $('#radio4').is(':checked');
getCorrectAnswer(curr_id, answer1, answer2, answer3, answer4);
setTimeout(getQuestion.bind(this,curr_id, answer1, answer2, answer3, answer4), 1000);
});
function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
console.log(curr_id);
$.post("mohajax.php",
{
next_id: parseInt(curr_id)+1,
answer1: answer1,
answer2: answer2,
answer3: answer3,
answer4: answer4,
},
function(data, status){
$('#container_for_questions').html(data);
});
}
function getCorrectAnswer(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
$.post("mohajax_get_correct_answer.php",
{
next_id: parseInt(curr_id),
answer1: answer1,
answer2: answer2,
answer3: answer3,
answer4: answer4,
},
function(data, status){
$('#container_for_questions').html(data);
});
}
getQuestion(-1);
});
</script><div class="services">
<div class="zubi"><div class="container" id="container_for_questions"></div></div>
</div>below is my php files for calling the questions
<?php
// Start the session
session_start();
$con=mysqli_connect("localhost","root","","quiz"); // change here to your data
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// Check the number of all questions, if next_id is more than last question, back to first or whatever you want;
$response=mysqli_query($con,"select * from moh limit 25");
$number_of_all_questions = mysqli_num_rows($response);
if($_POST['next_id'] == 0){
// reset to default
$_SESSION["correct_score"] = 0;
$_SESSION["not_correct_score"] = 0;
}
if($number_of_all_questions <= $_POST['next_id']){
// Quiz finished, show results
echo"<div>
<h2>Results:</h2>
<p>Correct answers: {$_SESSION['correct_score']}</p>
<p>Wrong answers: {$_SESSION['not_correct_score']}</p>
</div>";
}else{
// query next question
$response=mysqli_query($con,"select * from moh WHERE id =(select min(id) from moh where id > {$_POST['next_id']})");
?>
<?php while($result=mysqli_fetch_array($response,MYSQLI_ASSOC)){ ?>
<div id="question_<?= $result['id'] ?>" class='question' data-next-question="<?= $_POST['next_id'] ?>"> <!--check the class for plurals if error occurs-->
<h2><?= $result['id'].".".$result['question_name'] ?></h2>
<div class='align'>
<input type="radio" value="1" id='radio1' name='1'>
<label id='ans1' for='radio1'><?= $result['answer1'] ?></label>
<br/>
<input type="radio" value="2" id='radio2' name='2'>
<label id='ans2' for='radio2'><?= $result['answer2'] ?></label>
<br/>
<input type="radio" value="3" id='radio3' name='3'>
<label id='ans3' for='radio3'><?= $result['answer3'] ?></label>
<br/>
<input type="radio" value="4" id='radio4' name='4'>
<label id='ans4' for='radio4'><?= $result['answer4'] ?></label>
</div>
<br/>
<?php /*<input type="button" data-next-question="<?= $_POST['next_id'] ?>" id='next' value='Next!' name='question' class='butt'/> */?>
</div>
<?php }?>
<?php }?>
<?php mysqli_close($con); ?>i need a back button to go to the previous question. how can i do this.
</div>
var currentQuestion = '';
var preQuestion = false;
function getQuestion(curr_id, answer1=false, answer2=false, answer3=false, answer4=false){
currentQuestion = curr_id; // Set the value of curret question in global variable
preQuestion = true; // Set previous question to true
console.log(curr_id);
.
.
$('#container_for_questions').html(data);
if(preQuestion){
$('#container_for_questions').append("<button onclick="getPreQuestion()">Previous<button>");
}
}
function getPreQuestion(answer1=false, answer2=false, answer3=false, answer4=false){
preQuestion = false;
$.post("mohajax.php",
{
next_id: currentQuestion,
.
.
},
//Other code
}