首頁猿問如何在 JavaScript 中的...

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

JavaScript

米琪卡哇伊 2022-05-26 14:39:33

我正在開發測驗網絡應用程序。我只是編寫一個簡單的問題。但現在我想問這個問題 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>這是完整的代碼。它看起來很亂，但它的工作。

查看完整描述

1 回答

慕容森

TA貢獻1853條經驗獲得超18個贊

這是像您期望的那樣工作的代碼：

索引.php

<!DOCTYPE html>

<html>

<head>

<title>Welcome</title>

<style>

.content {

padding-top: 10rem;

}

.answers.text-center {

margin: 1rem 0;

}

</style>

</head>

<body>

<button id="start" class="btn btn-lg btn-primary">Start</button>

</div>

<h1 id="hqid">Question #<span id="qid"></span>: <span id="question">What is 1 + 1 ?</span></h1>

<hr>

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

$(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);

此代碼適用于我的本地主機，并產生所需的結果。

反對回復 2022-05-26

1 回答
0 關注
103 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答

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

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