Question

我有一个测验的问题，我的问题是如何循环选择，给我一个正确的测验问题，顶部的问题和下面的选项，每个选项前面都有一个单选按钮。我的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>

Answer 1

首先将选项字符串拆分为数组

var choices = ques1.choices.split(',');

然后迭代throug数组

choices.forEach(function(element, key) {
    // do somethinf with element
});

Answer 2

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>

Answer 3

您可以创建一个功能，创建一个新的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函数作为参数。

＆＃13;

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);
});

＆＃13;

<!doctype html>

<html>
    <body>
        <p id="demo"></p>
        <p id="demo2"></p>
    </body>
</html>

＆＃13;

Answer 4

目前，您将所有选项作为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]以获取答案的字符串。

希望有所帮助

循环通过测验项目的“选择”

4 个答案: