文章/答案/技术大牛

发布

社区首页 >问答首页 >根据小测验中问题的可能答案动态更改HTML按钮数量

问根据小测验中问题的可能答案动态更改HTML按钮数量
EN

Stack Overflow用户

提问于 2019-05-14 16:06:33

回答 2查看 381关注 0票数 0

因此，我试图建立这个网络测试/调查在JavaScript。一切都很好，但我有答案按钮硬编码，始终显示4种可能性。

是否有办法根据测验中每个问题的答案数量来改变可用按钮的数量？

(预先谢谢:)

我的第一个想法是迭代包含占有式答案的数组，并为每个选择向父div追加一个按钮元素。我不知道这样做的确切语法，所以我不知道它是否能这样工作。

这就是当前设置按钮的方式。(带有一些引导信息)

对于有3个可能答案的问题，只显示3个按钮，对于有2个答案的问题，只显示2个按钮。

这是我的代码：

// This is the code i use to create an question object 
function Question(text, choices) {
    this.text = text;
    this.choices = choices;
}

// create questions
var questions = [
    new Question("Question 1?", ["choice1", "choice2", "choice3"]),
    new Question("Question 2?", ["choice1", "choice2"]),
    new Question("Question 3?", ["choice1", "choice2", "choice3", "choice4"])
];

//create quiz
function populate() {
    if (quiz.isEnded()) {
        showScores();
    } else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        // show options
        var choices = quiz.getQuestionIndex().choices;
        for (var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("btn" + i, choices[i]);
        }

        showProgress();
    }
};

//And the full HTML
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Health - Check</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="grid">
        <div id="quiz">

            <div class="jumbotron">
              <h5 class="display-10" id="question"></h5>

                 <div class="list-group">

                    <a href="#" class="list-group-item list-group-item-action" id="btn0"><span id="choice0"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn1"><span id="choice1"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn2"><span id="choice2"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn3"><span id="choice3"></span></a>


                    <footer>
                        <p id="progress">Question x of y</p>
                    </footer>
                </div>

            </div>


    </div>

<!-- Own JS Import -->
<script src="quiz.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>


<!-- Bootstrap JS Import -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-14 19:02:40

Javascript提供了一个名为createElement().的漂亮函数顾名思义，它允许您在运行时动态创建html元素。我们在bit中使用的另一个重要功能是getElementsByClassName().

在上面的代码中，保存答案/按钮的div没有唯一的ID，我们仍然可以通过它使用的css类引用它。

var container = document.getElementsByClassName("list-group")[0];

对getElementsByClassName的调用返回一个HTMLCollection，它或多或少是一个数组。通过追加，我们指的是它将找到的第一个元素，即容器div。

这个div已经包含了一些元素，比如span元素和您通过html定义的脚注。我们得先除掉他们。

container.innerHTML = "";

我们现在要做的就是循环遍历选择数组，创建适当的html元素，给它们一个id，并最终将它们添加到容器div中。这是使用appendChild()函数完成的。

下面是一个基于代码的简化示例：

function Question(text, choices) {
  this.text = text;
  this.choices = choices;
}

// create questions
var questions = [
  new Question("Question 1?", ["choice1", "choice2", "choice3"]),
  new Question("Question 2?", ["choice1", "choice2"]),
  new Question("Question 3?", ["choice1", "choice2", "choice3", "choice4"])
];

var question = questions[0];
var choices = question.choices;

var container = document.getElementsByClassName("list-group")[0];
var span;
var anchor;

container.innerHTML = "";
for (var i = 0; i < choices.length; i++) {
  anchor = document.createElement("a");
  anchor.setAttribute("href", "#");
  anchor.setAttribute("id", "btn" + i);
  anchor.setAttribute("class", "list-group-item list-group-item-action");

  span = document.createElement("span");
  span.setAttribute("id", "choice" + i);
  span.innerHTML = choices[i];
  
  anchor.appendChild(span);
  container.appendChild(anchor);
}

var footer = document.createElement("footer");
var paragraph = document.createElement("p");
paragraph.innerHTML = "Question x of y";
paragraph.setAttribute("id", "progress");
footer.appendChild(paragraph);
container.appendChild(footer);

<div class="grid">
  <div id="quiz">
    <div class="jumbotron">
      <h5 class="display-10" id="question"></h5>
      <div class="list-group">
      </div>
    </div>
  </div>

票数 0

Stack Overflow用户

发布于 2019-05-14 16:25:25

在没有看到您的代码的情况下，我建议在回答布尔值时给按钮一个类似于#id{visibility:hidden}的样式规则，并在回答多项选择时更改为可见。希望这能有所帮助！

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56134525

复制

相似问题

问根据小测验中问题的可能答案动态更改HTML按钮数量
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据小测验中问题的可能答案动态更改HTML按钮数量EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据小测验中问题的可能答案动态更改HTML按钮数量
EN