循環通過測驗項目的“選擇”
[英]Looping through the “choices” for a quiz item
問題描述
我有一個測驗的問題，我的問題是如何循環選擇給我一個正確的測驗問題，問題在頂部及其下面的選項，每個選項前面都有一個單選按鈕。 我的HTML5和javascript在下面。 謝謝。
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<script>
function Question(q, choices, answer) {
this.question = q;
this.choices = choices;
this.correctAnswer = answer;
}
</script>
</head>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var ques1 = new Question("What is the capital of PA?", "Erie,Pittsburgh,Harrisburg","Harrisburg");
document.getElementById("demo").innerHTML = ques1.question;
document.getElementById("demo2").innerHTML = ques1.choices;
</script>
</body>
</html>
4 個解決方案
解決方案1
0 2017-02-19 18:49:53
首先將選擇字符串拆分為數組
var choices = ques1.choices.split(',');
然后迭代throug數組
choices.forEach(function(element, key) {
// do somethinf with element
});
解決方案2
0 2017-02-19 18:50:23
const htmlOfChoices= ques1.choices.split(',').map(
choice => `<span><input type="radio" name="q1" value="${choice}" />${choice}</span>`
).join('<br />');
document.getElementById("demo2").innerHTML = htmlOfChoices
演示低於👇🏼
function Question(q, choices, answer) { this.question = q; this.choices = choices; this.correctAnswer = answer; } var ques1 = new Question("What is the capital of PA?", "Erie,Pittsburgh,Harrisburg","Harrisburg"); document.getElementById("demo").innerHTML = ques1.question; const htmlOfChoices= ques1.choices.split(',').map( choice => `<span><input type="radio" name="q1" />${choice}</span>` ).join('<br />'); document.getElementById("demo2").innerHTML = htmlOfChoices
<p id="demo"></p> <p id="demo2"></p>
解決方案3
0 2017-02-19 18:52:56
您可以創建一個功能，創建一個新的radio按鈕，提供name ， value和text 。
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
對於迭代所有choices選項，您可以使用forEach方法，該方法接受callback函數作為參數。
function makeRadioButton(name, value, text) { var label = document.createElement("label"); var radio = document.createElement("input"); radio.type = "radio"; radio.name = name; radio.value = value; label.appendChild(radio); label.appendChild(document.createTextNode(text)); return label; } function Question(q, choices, answer) { this.question = q; this.choices = choices; this.correctAnswer = answer; } var ques1 = new Question("What is the capital of PA?", "Erie,Pittsburgh,Harrisburg","Harrisburg"); document.getElementById("demo").innerHTML = ques1.question; ques1.choices.split(',').forEach(function(item){ var radio=makeRadioButton("ques1",item,item); document.getElementById("demo2").appendChild(radio); });
<!doctype html> <html> <body> <p id="demo"></p> <p id="demo2"></p> </body> </html>
解決方案4
0 2017-02-19 18:57:03
目前，您將所有選項作為1個字符串發送。 你應該考慮使用一個數據結構，這樣你就可以遍歷它們，也許就是這樣：
var choices = ["Erie","Pittsburgh","Harrisburg"] //choices is an array
Question("What is the capital of PA?",choices ,choices[2]); //choices[2] is 'Harrisburg' as a string.
你可以像這樣遍歷數組：
for (i = 0; i < choices .length; i++) {
console.log(choices[i]);
}
您也可以發送號碼而不是答案，例如 -
Question("What is the capital of PA?",choices ,2);
然后choices[answer]來獲得choices[answer]的字符串。
希望有所幫助
遍歷測驗應用程序中的對象數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.