Im working on Quiz Web App. I Just code a simple question.
but now I want To Ask The Question 5 Times.
i tried using for loop and also while loop but its didn’t work.
i used lot off setTimeout functions here,
where user click on start button i want that question ask 5 times and count how many answers are right and how many answers are wrong.
How Can i do That ?
<?php
$btn1 = '<button id="optiona" class="btn btn-primary">2</button>';
$btn2 = '<button id="optionb" class="btn btn-primary">5</button>';
$btn3 = '<button id="optionc" class="btn btn-primary">11</button>';
$btn4 = '<button id="optiond" class="btn btn-primary">0</button>';
$btnArray = [$btn1, $btn2, $btn3, $btn4];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<style>
#question{
margin: 10px 50px;
padding: 20px 40px;
box-shadow: 0 12px 16px 0;
font-size: 2em;
}
#options{
margin: 50px;
padding: 10px;
}
#options, button{
margin: 10px;
padding: 100px;
width: 50px;
}
</style>
</head>
<body>
<h1 id="hqid">Question<span id="qid"></span></h1>
<div class="container">
<button id="start" class="btn btn-primary">Start</button>
<div id="game">
<h1 id="question">What is 1 + 1 ?</h1>
<div id="options">
<?php
shuffle($btnArray);
print_r($btnArray[0]);
print_r($btnArray[1]);
print_r($btnArray[2]);
print_r($btnArray[3]);
?>
</div>
</div>
</div>
<script>
$('#hqid, #game').hide();
$(document).ready(function(){
localStorage.clear();
var count = 1;
//Check if you have a stored value
if (localStorage.getItem("count") === null) {
localStorage.setItem("count", 1);
}
count = localStorage.getItem("count");
$("button#start").on("click", function(){
$('#start').hide();
$('#hqid, #game').show();
$('h1 span').html(count);
$('#optiona, #optionb, #optionc, #optiond').click(function(){
$('#game').load('#options');
if(count < 6){
count++;
localStorage.setItem("count", count);
//process your code
//example
//END of the code
$('h1 span').html(count);
if(count == 6){
//get to default
localStorage.setItem("count", 1);
$('#start').show();
$('#hqid, #game').hide();
//go somewhere else
}
}
});
return false;
});
});
</script>
</body>
</html>
This Is Whole Code.
its looks messy but its working.
Advertisement
Answer
Here is code which works like you expecting:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.content {
padding-top: 10rem;
}
.answers.text-center {
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="jumbotron text-center">
<h1>Play game!</h1>
<button id="start" class="btn btn-lg btn-primary">Start</button>
</div>
<div id="game" class="text-center">
<h1 id="hqid">Question #<span id="qid"></span>: <span id="question">What is 1 + 1 ?</span></h1>
<hr>
<div class="answers text-center">
<label>Correct answers: <span class="success badge has-success"></span></label>
<label>Wrong answers: <span class="fail badge has-danger"></span></label>
</div>
<hr>
<div id="options">
<div class="btn-group" data-toggle="buttons">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var count = 1;
var success = 0; //right answers
var fail = 0; // wrong answers
var fileUrl = '/includes/options.php'; //php file where we calc all results
//Check if you have a stored value
$('#game').hide();
$("button#start").on("click", function(){
$('.jumbotron').hide();
$('#game').show();
$('h1 span#qid').html(count);
$('#options').show();
$('.success').html('0');
$('.fail').html('0');
success = 0;
fail = 0;
$.post(fileUrl, function( response, status, xhr ) {
var data = JSON.parse(response);
$('#options .btn-group').html(data.options);
});
});
$("#options .btn-group").on("click", "label.btn", function(e){
//$('#game').load('#options');
$('#options .btn-group').html('');
$.post(fileUrl, { answer: $(this).find('input').val() }, function( response, status, xhr ) {
//check response
var data = JSON.parse(response);
$('#options .btn-group').html(data.options);
if(data.status == 1){
success++;
$('.success').html(success);
} else {
fail++;
$('.fail').html(fail);
}
});
if(count < 5){
count++;
$('h1 span#qid').html(count);
} else {
$('.jumbotron h1').html(" Game over.");
$('.jumbotron button').text("Play again");
//get to default
count = 1;
$('.jumbotron').show();
$('#options').hide();
$('#hqid').hide();
}
});
});
</script>
</body>
</html>
additional file i created to establish correct answers: options.php
<?php
/*
* Temporary we set right answer.
*/
$right_answer = 2;
/*
* Response array
*/
$response = [];
if(isset($_POST['answer'])){
(intval($_POST['answer']) == $right_answer)? $response['status'] = 1: $response['status'] = 0;
}
$btn1 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="2" autocomplete="off">2</label>';
$btn2 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="5" autocomplete="off">5</label>';
$btn3 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="11" autocomplete="off">11</label>';
$btn4 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="0" autocomplete="off">0</label>';
$btnArray = [$btn1, $btn2, $btn3, $btn4];
shuffle($btnArray);
$response['options'] = implode('', $btnArray);
/*
* Encode response in json string
*/
echo json_encode($response);
This code works on my localhost, and produce desired result.