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

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

转载作者：行者123 更新时间：2023-12-03 13:16:10

我正在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/

文章推荐： javascript - 将元素放置在容器中

文章推荐： django - Django:在Shell中模拟HTTP请求

文章推荐： powershell - Powershell正在从程序参数中删除逗号

文章推荐：用于连接非映射表的 Hibernate HQL

关于函数中指针的 C 题
我有两个关于这段代码的问题。 double*** pdata 和 int*** pmask 是什么意思？指向指针的指针？为什么或何时需要这样做？ int 和 double 是不同的类型，double*
C++标准模板库 vector 题
谁能用英文解释一下这是怎么回事？ std::vector cats; //I get that cats is a vector of Cat objects if (std::find(cats.b
C 题——用[]代替*？
在C中，下列声明有区别吗: float DoSomething( const float arr[] ); 对比 float DoSomething( const float* arr ); 一个比另
python - 欧拉计划第 36 题
我到 question 36我认为这很简单。像往常一样，我显然错了。我正在尝试在 Python 中执行此操作(因为我不知道 Python)。我的代码如下。我得到 19 作为输出，这显然是不正确的。我不
C++ Winsock 2 题
我已经通读了 MSDN 上的 Winsock2 文档，但如果有人能提供帮助，我仍然需要澄清一些事情。我计划做一些类似于您在使用 WSAAsyncSelect() 时获得的设置，但使用一个单独的线程。
关于 free() 的 C 题
#include int main () { int *p = (int *)malloc((100*sizeof(int))); p++; free(p); /* do some
c# - 简单反射(reflection)题 C#
我想提供未知的“对象”并返回其成员之一的值。在 C# 中需要响应。一般来说，我想我正在寻找这个方法的代码公共(public)静态对象 GetObjectMemberValue (object myO
algorithm - 20 题 AI 算法是如何工作的？
由异常准确的 AI 提供支持的 20 个问题的简单在线游戏。他们怎么猜得这么好？最佳答案您可以将其视为二进制搜索算法。在每次迭代中，我们都会提出一个问题，该问题应该会消除大约一半的可能单词选择。
c++ - STL性能O(ln(n))题
拜托，有人可以解释一下吗: 如果文档说 STL std::vector finding element speed performace = O(ln(n))，这是什么意思。 O(ln(n)) - 什
c++ - (Rust 题) C++ 双指针指向 void 的含义
我正在尝试通过遵循 Microsoft 为 ADSI API 和 Windows-RS crate 发布的 c++ 示例来使用 Rust 的事件目录。我不太明白这里发生了什么: https://doc
clojure - 99 Clojure 中的第 9 题(将连续重复的列表元素打包到子列表中)
这是处理具有重复元素的单个列表的 nieve 案例，我在处理一些嵌套列表时遇到了麻烦，所以我想先写简单的案例。所以我有: (defn packDuplicatesIntoLists [lis
java - 质数 III 第 18 题——我没有得到正确答案，尽管我认为我是对的
我是新来的。我正在尝试解决此练习 Problem 18只是为了加强我的解决能力。我已经编码了答案。该任务要求“在 1,000,000 以下的质数中，有多少个数位之和等于两周中的天数？” (两周是 14
c# - 题-ElasticSearch-Nest v7.x “Ignore = true”在字段上不起作用
我正在尝试对POCO类中的某些字段进行索引，并将某些属性装饰为“忽略= true”，并且这些字段不应被索引，而应该被存储。我希望这些字段出现在搜索结果中，但不应作为索引。我正在尝试对应索引的几个字段
swift - 欧拉计划第 2 题，斐波那契数的 Swift Sum 低于 400 万
我是编码的新手，正在尝试通过完成 Project Euler 问题来学习 Swift。我似乎有导致大量错误的不同版本的 Swift 代码。如果您对我的问题的格式有任何建议以供将来引用，请告诉我，谢谢。
algorithm - Google Code Jam 2008 第 1A 轮第 3 题
对于problem statement在 google codejam 2008:第 1A 轮问题 3 In this problem, you have to find the last three

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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