如何显示我的调查的答案选项？

Question

所以我为我的网站编写了一个 questionnaire/survey，但出于某种原因，当用户单击开始调查问卷时，问题会显示但选项不会显示。我真的很困惑为什么这不起作用如果有人能帮助我解决我的问题，我将不胜感激，谢谢！

这是我的 IDE 的 link，因为我认为通过它可以更容易地找出我犯的任何错误：https://repl.it/@AS11RA/Forest-Firefighters-Website#index.html

这是开始 questionnaire.js 文件：

function buttonClicked(button) {
  button.style.visibility = "hidden";
  startSurvey();
  console.log("Survey started.");
}

function startSurvey() {

  var i;
  var j;
  var k;
  for (i = 0; i < ourQuestions.length; i++) {
    document.getElementById("questions").innerHTML += '<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;

    for (j = 0; j < ourQuestions[i].answers.length; j++) {
      document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="' + ourQuestions[i].answers[j] + '" id="value4" type="checkbox" />' + ourQuestions[i].answers[j] + '<br/>';
    }
    document.getElementById("questions").innerHTML += '</form><br/><br/>';
  }

  document.getElementById("questions").innerHTML += '<button class="button" onclick="solveQuiz()">Solve Quiz</button>';

}

var ourQuestions = [{
    question: 'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
    answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%'
    },
    correctAnswer: 'b'
  },
  {
    question: 'If you have lit a campfire before, how did you extinguish it?',
    answers: {
      a: 'I did not extinguish it and waited for it to die on its own',
      b: 'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
      c: 'I have never lit a campfire before.',
      d: 'uhhh'
    },
    correctAnswer: 'b'
  },
  {
    question: 'What are the two most common reasons that forest fires start?',
    answers: {
      a: 'Lightning and human negligence',
      b: 'Spontaneous combustion and erosion',
      c: 'Animals igniting flames and overcrowded bushlands',
      d: 'Strong Wind Patterns'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What time of the year do most forest fires occur?',
    answers: {
      a: 'Summer',
      b: 'Spring',
      c: 'Fall',
      d: 'Winter'
    },
    correctAnswer: 'a'
  },
  {
    question: 'How fast do you think forest fires spread?',
    answers: {
      a: '10.8 km/h',
      b: '6.4 km/h',
      c: '22.2 km/h',
      d: '3.2 km/h'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What do forest fires need in order to burn?',
    answers: {
      a: 'Water',
      b: 'High humidity',
      c: 'Fuel',
      d: 'Clear weather'
    },
    correctAnswer: 'c'
  },
  {
    question: 'What is one of the main toxic gases present in forest fire smoke?',
    answers: {
      a: 'Osmium tetroxide',
      b: 'Disulfur decafluoride',
      c: 'Tungsten hexafluoride ',
      d: 'carbon monoxide'
    },
    correctAnswer: 'd'
  },
  {
    question: 'What natural disasters could be caused as a consequence of a destructive forest fire?',
    answers: {
      a: 'Erosion, flash flooding and landslides',
      b: 'Tornadoes',
      c: 'Snow',
      d: 'Tsunami and earthquakes'
    },
    correctAnswer: 'a'
  },
  {
    question: 'What major factor determines a forest fire’s behaviour?',
    answers: {
      a: 'Amount of water vapour in air',
      b: 'Density of Forests',
      c: 'Wind',
      d: 'Hours of sunlight'
    },
    correctAnswer: 'c'
  },
  {
    question: 'What 3 things are needed to start a fire?',
    answers: {
      a: 'Matches, oxygen, wood',
      b: 'Air and sunlight',
      c: 'Fuel, heat, oxygen',
      d: 'Fuel, oxygen, wood'
    },
    correctAnswer: 'c'
  },
  {
    question: 'Which one of these is NOT a type of forest fire?',
    answers: {
      a: 'Crown',
      b: 'Firework',
      c: 'Surface',
      d: 'Ground '
    },
    correctAnswer: 'b'
  },
  {
    question: 'What was the cause of the Amazon forest fires in 2019?',
    answers: {
      a: 'Deforestation for agriculture usage',
      b: 'Fireworks',
      c: 'Unattended campfire',
      d: 'Arson'
    },
    correctAnswer: 'a'
  },
  {
    question: 'Which one of these names are NOT an alternate name for forest fires?',
    answers: {
      a: 'Wildfires',
      b: 'Shrub fires',
      c: 'Natural fireworks',
      d: 'Brushfires '
    },
    correctAnswer: 'c'
  },
  {
    question: 'How many forest fires occurred in 2019?',
    answers: {
      a: '25 653',
      b: '50 477',
      c: '45 809',
      d: '89 431'
    },
    correctAnswer: 'b'
  }
];



function solveSurvey() {
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0;
  for (i = 0; i < document.forms.length; i++) {
    x = document.forms[i];
    for (j = 0; j < x.length; j++) {
      if (x[j].checked) {
        correctAnswer = ourQuestions[i].correctAnswer;
        if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
          correct += 1;
        }
      }
    }
      document.forms[i].innerHTML += '</div><div class="answer"><input name="q1" value="' + ourQuestions[i].answers[j] + '" id="value4" type="radio" />' + ourQuestions[i].answers[j] + '<br/>';
  }
  document.getElementById("questions").innerHTML += 'Correct answers: ' + correct;
  

}

这是 questionnaire.HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Forest Firefighters: Questionnaire</title>
    <link href="survey style.css" rel="stylesheet" type="text/css" />
    <link href="main style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src="start questionnaire.js" type="text/javascript"></script>
  </head>
  
  <body>
    <!--────────────────Header───────────────-->
      <header>
          <nav> 
            <ul class="nav-bar"><div class="bg"></div>
                <li><a class="nav-link" href="about.html">About</a></li>
                <li><a class="nav-link" href="index.html">Home</a></li>
                <li><a class="nav-link active" href="questionnaire.html">Questionnaire</a></li>
              <li><a class="nav-link" href="learning more.html">Learning more</a></li>
          <li><a class="nav-link" href="">Ways you can help</a></li>
            </ul>
          </nav>
      </header>

    <main>
        <!--─────────────────Home────────────────-->
        <div id="home">
            <div class="filter"></div>

        <!--────questionnaire button─────-->        
        <button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>
        <spacer></spacer>
        <div id="questions"></div>
        <spacer></spacer>
        <spacer></spacer>
        </div>
    
      
          <div class="citing">
        <a class="citing-link" href=questionnaire.html">Image Source: https://phys.org/news/2019-11-countries-forest.html</a>
      <div>      
      </main>  

    <!--─────────────────Footer────────────────-->
      <footer class="copyright">© 2020 Amber, Aatiqah, Selina</footer>
  </body>

</html>

Answer 1

我在 jsfiddle 上运行它并得到以下错误：

"ReferenceError: buttonClicked is not defined"

我相信您的代码中存在一些格式问题。我将您的按钮在页面中向上移动，它开始工作了。查看 fiddle.

  <body >
  <button class="button" onclick="buttonClicked(this)">Start Questionnaire</button>

我还删除了您的 JavaScript，除了 buttonClick 功能。

您需要添加您的代码直到它起作用。

这里是经过编辑的 fiddle，显示了您的问题：

https://jsfiddle.net/raddevus/jbec837y/10/

Answer 2

在我们的问题中，您将答案创建为如下对象

answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%'
}

但是在代码中你试图获取它的长度

for (j = 0; j < ourQuestions[i].answers.length; j++)

尝试将其更改为数组，您应该更改逻辑以获得正确答案还有一件事你使用复选框 select 回答你应该使用无线电组因为你只有一个正确答案

Answer 3

你的答案没有显示的原因是因为你试图像数组一样循环遍历答案。但是，answers 是一个对象，而不是一个数组，所以你不能真正做一些事情，比如使用 answers.length 属性等

但是，实际上有一种更简单的方法可以处理此问题，而不是将您的答案转换为数组。那就是在 ourQueuestions.answers 对象上使用带有 object.entries 的 for...of 循环。通过使用 Object.entries(ourQuestions.answers) 方法，您将能够在 'key' 和 'value' 对中检索答案，并在循环中轻松使用它们，而无需经典的 for 循环和i 和 j 变量等

此外，您在下面的代码块中引用了 solveQuiz() 方法，但是，在您的代码中，此方法的名称实际上是 solveSurvey() 而不是 solveQuiz()。所以我也在下面的代码中改变了它：

document.getElementById('questions').innerHTML +=
    '<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}

最后，我建议您阅读 MDN 文档中的 ES6 特性，例如 for...of 循环和 string literals 早在 2015 年就已在 ES6 中引入 Javascript，作为使用 JS 的开发人员，它们将使您的生活更轻松 :)

MDN ES6 Features

祝你好运！您可以直接使用下面的代码，看到它也成功地显示了 UI.

上的答案

function buttonClicked(button) {
  button.style.visibility = 'hidden';
  startSurvey();
  console.log('Survey started.');
}

function startSurvey() {
  var i;
  var j;
  var k;
  for (i = 0; i < ourQuestions.length; i++) {
    document.getElementById('questions').innerHTML +=
      '<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;
    debugger;
    for (let [key, value] of Object.entries(ourQuestions[i].answers)) {
      document.forms[i].innerHTML +=
        '</div><div class="answer"><input name="q1" value="' +
        value +
        '" id="value4" type="checkbox" />' +
        `${key}: '${value}'`; //use a string literal, makes a dev's life very easy
      ('<br/>');
    }
    document.getElementById('questions').innerHTML += '</form><br/><br/>';
  }

  document.getElementById('questions').innerHTML +=
    '<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}

var ourQuestions = [
  {
    question:
      'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
    answers: {
      a: '10-15%',
      b: '85-90%',
      c: '45-50%',
      d: '25-30%',
    },
    correctAnswer: 'b',
  },
  {
    question: 'If you have lit a campfire before, how did you extinguish it?',
    answers: {
      a: 'I did not extinguish it and waited for it to die on its own',
      b:
        'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
      c: 'I have never lit a campfire before.',
      d: 'uhhh',
    },
    correctAnswer: 'b',
  },
  {
    question: 'What are the two most common reasons that forest fires start?',
    answers: {
      a: 'Lightning and human negligence',
      b: 'Spontaneous combustion and erosion',
      c: 'Animals igniting flames and overcrowded bushlands',
      d: 'Strong Wind Patterns',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What time of the year do most forest fires occur?',
    answers: {
      a: 'Summer',
      b: 'Spring',
      c: 'Fall',
      d: 'Winter',
    },
    correctAnswer: 'a',
  },
  {
    question: 'How fast do you think forest fires spread?',
    answers: {
      a: '10.8 km/h',
      b: '6.4 km/h',
      c: '22.2 km/h',
      d: '3.2 km/h',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What do forest fires need in order to burn?',
    answers: {
      a: 'Water',
      b: 'High humidity',
      c: 'Fuel',
      d: 'Clear weather',
    },
    correctAnswer: 'c',
  },
  {
    question:
      'What is one of the main toxic gases present in forest fire smoke?',
    answers: {
      a: 'Osmium tetroxide',
      b: 'Disulfur decafluoride',
      c: 'Tungsten hexafluoride ',
      d: 'carbon monoxide',
    },
    correctAnswer: 'd',
  },
  {
    question:
      'What natural disasters could be caused as a consequence of a destructive forest fire?',
    answers: {
      a: 'Erosion, flash flooding and landslides',
      b: 'Tornadoes',
      c: 'Snow',
      d: 'Tsunami and earthquakes',
    },
    correctAnswer: 'a',
  },
  {
    question: 'What major factor determines a forest fire’s behaviour?',
    answers: {
      a: 'Amount of water vapour in air',
      b: 'Density of Forests',
      c: 'Wind',
      d: 'Hours of sunlight',
    },
    correctAnswer: 'c',
  },
  {
    question: 'What 3 things are needed to start a fire?',
    answers: {
      a: 'Matches, oxygen, wood',
      b: 'Air and sunlight',
      c: 'Fuel, heat, oxygen',
      d: 'Fuel, oxygen, wood',
    },
    correctAnswer: 'c',
  },
  {
    question: 'Which one of these is NOT a type of forest fire?',
    answers: {
      a: 'Crown',
      b: 'Firework',
      c: 'Surface',
      d: 'Ground ',
    },
    correctAnswer: 'b',
  },
  {
    question: 'What was the cause of the Amazon forest fires in 2019?',
    answers: {
      a: 'Deforestation for agriculture usage',
      b: 'Fireworks',
      c: 'Unattended campfire',
      d: 'Arson',
    },
    correctAnswer: 'a',
  },
  {
    question:
      'Which one of these names are NOT an alternate name for forest fires?',
    answers: {
      a: 'Wildfires',
      b: 'Shrub fires',
      c: 'Natural fireworks',
      d: 'Brushfires ',
    },
    correctAnswer: 'c',
  },
  {
    question: 'How many forest fires occurred in 2019?',
    answers: {
      a: '25 653',
      b: '50 477',
      c: '45 809',
      d: '89 431',
    },
    correctAnswer: 'b',
  },
];

function solveSurvey() {
  var x;
  var txt = ' ';
  var i = 0;
  var correct = 0;
  for (i = 0; i < document.forms.length; i++) {
    x = document.forms[i];
    for (j = 0; j < x.length; j++) {
      if (x[j].checked) {
        correctAnswer = ourQuestions[i].correctAnswer;
        if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
          correct += 1;
        }
      }
    }
    document.forms[i].innerHTML +=
      '</div><div class="answer"><input name="q1" value="' +
      ourQuestions[i].answers[j] +
      '" id="value4" type="radio" />' +
      ourQuestions[i].answers[j] +
      '<br/>';
  }
  document.getElementById('questions').innerHTML +=
    'Correct answers: ' + correct;
}

如何显示我的调查的答案选项？

How can I display the answer choices for my survey?

html

javascript

survey

object