Javascript调查

Question

背景我正在用javascript做一项调查，其中包含十个“是”或“不是”的问题。我想编写对=1的"yes“响应和对= 0的"no”响应。我使用html标记，所以他们只能选择一个或另一个。

然后，我想让他们的回答加起来，除以问题的总数，得出一个百分比。根据他们的百分比，然后我想输出一些HTML文本到它下面的一个字段，与他们的分数有关的一些有用的提示和建议。

要明确的是，尽管我现在正在学习javascript，但我不希望任何人为我编写代码，但我只想知道我应该在哪里寻找实现这一目标的答案。我认为我需要使用if/else条件来解释是/否的响应，然后可能需要另一个函数()来完成其余的计算。

我尝试了许多if/ into语句的不同变体，但我只是对如何编写“是/否”响应代码感到困惑；2)将它们集成到if/into语句中。

我将添加一个简短的代码片段，其中包含两个示例问题，我现在正试图开始工作。

function calc (form) {
var score1;
var score2;
var Result = form.Result.value;


if (form.Question1.options[form.Question1.selectedIndex].value =    "Yes") { score1 = 1;
 } else {
 score1 = 0;
 }

if (form.Question2.options[form.Question2.selectedIndex].value = "Yes") {  score2 = 1;
 } else {
 score2 = 0;
 }

Result = (((score1 + score2) / 10) * 100);

if (Result == 80) {
 document.getElementById("recommendation").innerHTML = "<h4>Heading here</h4> <p>Advice goes here based on their result</p>"
   }  
 }

Answer 1

公平地说，我认为你需要重新考虑你的做法。对于每个问题和答案，如果-然后-其他的方法可能是相当乏味的，在维护或当你想改变答案。

如果要为问题创建数据结构，可以使用for -循环或保存当前问题的索引来处理答案。正确的答案也将是数据结构的一部分(但这取决于您，它也可以是客户机/服务器请求)。

您已经得到了一些答案，为什么您的当前方法由于缺少平等运算符的赋值而无法工作，但是我想给您一个替代的解决方案。

此解决方案将创建一个动态ui，并在单击next按钮时处理有关问题的答案。这里的问题是单向的，您只能前进:)

它主要是给你一个想法，如何以不同的方式对待它。我不认为你真的使用了这段代码。

该代码有相当多的内联注释，并且基于发生器函数的使用( Internet不支持它，但在任何其他浏览器中都应该很好)

完成后，分数将显示在消息框中。

​

// data structure that takes question / answer / which is correct and the points attributed
const questions = [
  { 
    question: 'What platform are you on?',
    answers: ['Stackoverflow', 'codereview'],
    correct: 0,
    points: 5
  },
  { 
    question: 'What is the answer to everything',
    answers: [42, 'I don\'t have a clue'],
    correct: 0,
    points: 1
  },
  { 
    question: 'How much is 7*6',
    answers: ['I am not good with maths', 42],
    correct: 1,
    points: 10
  }
];

// a simple generator that is used in the questionaire
function *questionsGenerator( questions ) {
  yield* questions;
}

// creates a questionaire, with forward only options (due to the use of the generator function)
// all variables are locally scoped, when all questions were answered, the onCompleted callback would be called
// it returns an object with nextQuestion function though it could call nextButton internally, and you just have to call the function once if you would want to change it
const questionaire = ( query, nextButton, target, onCompleted ) => {
  let score = 0;
  let iterator = questionsGenerator( query );
  let question = null;
  let selectedAnswer = -1;
  
  nextButton.addEventListener('click', nextQuestion);
  
  function evaluateAnswer() {
    if (!question) {
      // no question yet
      return;
    }
    if (selectedAnswer < 0) {
      return;
    }
    if (question.correct === selectedAnswer) {
      score += question.points;
    }
    return;
  }
  
  function nextQuestion() {
    evaluateAnswer();
    question = iterator.next();
    // this is a bit of a hack to check if we just had the last question or not
    if (question.done) {
      nextButton.removeEventListener('click', nextQuestion);
      onCompleted( score );
      return;
    }
    question = question.value;
    drawUI();
  }
  
  function drawUI() {
    // disable next button
    nextButton.setAttribute('disabled', true);
    selectedAnswer = -1;
    // remove existing items
    Array.from( target.childNodes ).forEach( child => target.removeChild( child ) );
    // create new questions (if available)
    const title = document.createElement('h1');
    title.innerHTML = question.question;
    target.appendChild( title );
    
    question.answers.map( (answer, i) => {
      const el = document.createElement('input');
      el.type = 'radio';
      el.name = 'answer';
      el.value = i;
      el.id = 'answer' + i;
      el.addEventListener('change', () => { 
        selectedAnswer = i; 
        nextButton.removeAttribute('disabled'); 
      } );
      const label = document.createElement('label');
      label.setAttribute('for', el.id );
      label.innerHTML = answer;
      
      const container = document.createElement('div');
      container.appendChild(el);
      container.appendChild(label);
      return container;      
    } ).forEach( a => target.appendChild( a ) );
  }
  
  return {
    nextQuestion
  }
};

// create a questionaire and start the first question
questionaire(
  questions, 
  document.querySelector('#btnNext'), 
  document.querySelector('#questionaire'), 
  score => alert('You scored ' + score ) 
).nextQuestion();

<div id="questionaire">
</div>
<div class="toolstrip">
<button id="btnNext" type="button">Next</button>
</div>

​

Answer 2

如果要检查是否相等，请使用==或===。==将检查值是否相同，===也将检查类型是否相同。

例如：

0 == "0" => true 

0 === "0" => false.