个人中心
gpt4 book ai didi

javascript - 如何在JavaScript测验App中问问题5次？

转载 作者：行者123 更新时间：2023-12-03 13:16:10 25 4
gpt4 key购买 nike

我正在Quiz Web App上工作。
我只是编写一个简单的问题。

但现在我想问5次问题。

我试过使用for循环和while循环，但是没有用。

我在这里用了很多setTimeout函数，

在用户单击“开始”按钮的地方，我要问这个问题5次，并计算出正确答案和错误答案的数量。

我怎样才能做到这一点 ？

<?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>


这是完整的代码。

它看起来很杂乱，但是可以正常工作。

最佳答案

这是您期望的代码：

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>


我创建的用于建立正确答案的其他文件：
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);


此代码可在我的本地主机上运行，​​并产生所需的结果。

关于javascript - 如何在JavaScript测验App中问问题5次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60784506/

25 4 0
文章推荐： javascript - 将元素放置在容器中
文章推荐： django - Django:在Shell中模拟HTTP请求
文章推荐： powershell - Powershell正在从程序参数中删除逗号
文章推荐： 用于连接非映射表的 Hibernate HQL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com