时间戳

首页 > 解决方案 > 用 JavaScript 做了一个关于我自己的测验

javascript - 用 JavaScript 做了一个关于我自己的测验

问题描述

我的高中 javascript 课程有一个实验室，我应该使用数组来做一个关于我自己的测验。实验室一步一步地完成了我应该做的事情，但当我点击按钮时，我仍然没有让我的函数 myQuiz() 无法运行

我最初尝试将脚本标签放在头部，但是当函数无法运行时，我将它放在正文部分的末尾。但是单击按钮时该功能仍然不会运行。

这是我的脚本标签中的内容：

function myQuiz() {
     var questions: ["What is Bryce's favorite color", "What is Bryce's favorite instrument(s) to play?", "When is Bryce's birthday?", "How tall is Bryce?", "Favorite band?"];
     var answers: ["Red", "Double Bass and Violin", "3/24", "6'4", "LOONA"];
     alert("Welcome to WHO IS BRYCE DAVIS?");
     for (var count = 0; count < questions.length; count++) {
         var guess = prompt(questions[count]);
         if (guess == answers[count]) {
            alert('Correct');
         } else {
            alert('WRONG!');
         }
     }
     alert("Thanks for playing!");
}

我希望有一个测验，允许用户回答问题并回答错误或正确问题。

标签： javascripthtml

解决方案

If using more than one form control (ex. <input>, <textarea>, etc) wrap everything in a <form> tag. Doing so allows us to use HTMLFormElement and HTMLFormControlsCollection APIs -- which gives us easy access to <form> and form controls.

It looks like the answers must be typed in by the user -- that requires perfectly matched texts between the anser array and what was typed -- not good. In the demo, <input> and <output> tags are dynamically added and when the <form> is submitted the value of each <input> is matched to an array of answers. The .includes() method is used so the user's answer is only required to include the text to get a question correct. (ex. "A" and "AB" are both correct because they both include "A"). Details are commented in demo. 

const Q = ['What... is your name?', 'What... is your quest?', 'What... is the air-speed velocity of an unladen swallow?'];
const A = ['bryce', 'holy grail', '11'];

// Reference <ol>
const list = document.querySelector('ol');
// Reference <form>
const quiz = document.forms.quiz;

/* 
-for each iteration...
-Add a htmlString (.innerHTML +=) to <ol> (list)...
-Interpolate the question from Q array that corresponds to
 the current index (${Q[i]})
 */
for (let i = 0; i < Q.length; i++) {
  list.innerHTML += `
  <li>${Q[i]}<br>
    <input name='answer' type='text'>
    <output></output> 
  </li>
  `;
}

// Register <form> to submit event -- call QA()
quiz.onsubmit = QA;

/*
-Pass the Event Object
A-Prevent the data of <form> being sent to a server
B-Collect all form controls with the [name='answer'] into
 an array
-for each iteration...
C-Get the value of the <input name='answer'> in the
  position of current index 
D-if the value of the <input> .includes() the string in 
  A array at the corresponding index...
E-Get the <output> that follows the <input> and set it's
  value to 'Correct!'...
F-Otherwise set it's value to "Wrong"
*/
function QA(e) {
  e.preventDefault(); //A
  const answers = Array.from(this.elements.answer);//B  
  for (let i = 0; i < A.length; i++) {
    let answer = answers[i].value.toLowerCase();//C
    if (answer.includes(A[i])) {//D
      answers[i].nextElementSibling.value = 'Correct!';//E
    } else {
      answers[i].nextElementSibling.value = 'Wrong';//F
    }
  }
  return false;
}
<form id='quiz'>
  <ol></ol>
  <button type='submit'>Done</button>
</form>

推荐阅读