猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何在 JavaScript 中的 Quiz App 中提问 5 次？

我正在开发测验网络应用程序。我只是编写一个简单的问题。


但现在我想问这个问题 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>

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


这是完整的代码。


它看起来很乱，但它的工作。


米琪卡哇伊
浏览 125回答 1
1回答

慕容森

这是像您期望的那样工作的代码：索引.php<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>Welcome</title>&nbsp; &nbsp; <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10rem;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .answers.text-center {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 1rem 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp;&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-lg-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="jumbotron text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Play game!</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="start" class="btn btn-lg btn-primary">Start</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="game" class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="hqid">Question #<span id="qid"></span>: <span id="question">What is 1 + 1 ?</span></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="answers text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Correct answers: <span class="success badge has-success"></span></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Wrong answers: <span class="fail badge has-danger"></span></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="options">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="btn-group" data-toggle="buttons">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; var count = 1;&nbsp; &nbsp; &nbsp; &nbsp; var success = 0; //right answers&nbsp; &nbsp; &nbsp; &nbsp; var fail = 0; // wrong answers&nbsp; &nbsp; &nbsp; &nbsp; var fileUrl = '/includes/options.php'; //php file where we calc all results&nbsp; &nbsp; &nbsp; &nbsp; //Check if you have a stored value&nbsp; &nbsp; &nbsp; &nbsp; $('#game').hide();&nbsp; &nbsp; &nbsp; &nbsp; $("button#start").on("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.jumbotron').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#game').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('h1 span#qid').html(count);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#options').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').html('0');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.fail').html('0');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post(fileUrl, function( response, status, xhr ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = JSON.parse(response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#options .btn-group').html(data.options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $("#options .btn-group").on("click", "label.btn", function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$('#game').load('#options');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#options .btn-group').html('');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.post(fileUrl, { answer: $(this).find('input').val() }, function( response, status, xhr ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //check response&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = JSON.parse(response);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#options .btn-group').html(data.options);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.status == 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success++;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.success').html(success);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail++;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.fail').html(fail);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(count < 5){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('h1 span#qid').html(count);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.jumbotron h1').html(" Game over.");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.jumbotron button').text("Play again");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get to default&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.jumbotron').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#options').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#hqid').hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script></body></html>我为建立正确答案而创建的附加文件： options.php<?php&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp;* Temporary we set right answer.&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; $right_answer = 2;&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp;* Response array&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; $response = [];&nbsp; &nbsp; if(isset($_POST['answer'])){&nbsp; &nbsp; &nbsp; &nbsp; (intval($_POST['answer']) == $right_answer)? $response['status'] = 1: $response['status'] = 0;&nbsp; &nbsp; }&nbsp; &nbsp; $btn1 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="2" autocomplete="off">2</label>';&nbsp; &nbsp; $btn2 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="5" autocomplete="off">5</label>';&nbsp; &nbsp; $btn3 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="11" autocomplete="off">11</label>';&nbsp; &nbsp; $btn4 = '<label class="btn btn-primary"><input type="radio" name="option[]" value="0" autocomplete="off">0</label>';&nbsp; &nbsp; $btnArray = [$btn1, $btn2, $btn3, $btn4];&nbsp; &nbsp; shuffle($btnArray);&nbsp; &nbsp; $response['options'] = implode('', $btnArray);&nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp;* Encode response in json string&nbsp; &nbsp; &nbsp;*/&nbsp; &nbsp; echo json_encode($response);此代码适用于我的本地主机，并产生所需的结果。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript