CODEWITHSUNDEEP
javascriptphp
Jack Tech
Jack Tech

Reputation: 105

How to ask Question 5 Times in Quiz App in JavaScript?

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.

Upvotes: 2

Views: 198

Answers (1)

Serghei Leonenco
Serghei Leonenco

Reputation: 3517

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.

Upvotes: 1

Related Questions