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 ?
JavaScript
x
<?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
JavaScript
<!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
JavaScript
<?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.