Сравнение массива ключей ответов с входными ответами

Question

Это мой первый день с использованием HTML / Javascript. Я сделал немного Java некоторое время go. Я пытаюсь сделать тест, который получит ответы из выпадающего списка и сравнит их с ключом ответа. Я перепробовал так много вещей, что даже не помню их всех. Любая помощь будет оценена. В частности, я не могу понять, как сравнить каждый элемент в двух массивах. Я уверен, что есть намного больше ошибок, чем просто массивы. Я гуглил ответы в течение 4 часов и ничего не получил. Вот мой код:

Answer 1

У вас есть ряд проблем, которые необходимо исправить:

1. Ваш HTML недействителен. Вы не закрываете тег <p> в строке 11:

   <p>Please match the letter to the corresponding answer.</p> <!-- <-- close this -->
   

2. В вашем коде много синтаксических ошибок. Когда ваш код не работает, первое, что вы должны искать, это синтаксические ошибки. Синтаксические ошибки могут быть определены консолью вашего браузера. Первые синтаксические ошибки находятся в строках 58 и 59. После ключевого слова var должно быть только одно имя переменной (идентификатор):

   var ans = [1, 2, 3]; // <-- used to be: var array ans
   var inpans = [valueQ1, valueQ2, valueQ3]; // used to be: array inpans
   

3. Другая строка синтаксиса возникает в строке 70 Здесь вы используете запятую вместо точки с запятой. Опять же, консоль может помочь вам идентифицировать эту ошибку самостоятельно:

   count++; // used to be: count++,
   

4. Ваша следующая проблема - логическая проблема. Следующий код запускается при загрузке страницы:

   var q1 = document.getElementById("Q1");
   var valueQ1 = q1.options[q1.selectedIndex].value
   var q2 = document.getElementById("Q2");
   var valueQ2 = q2.options[q2.selectedIndex].value
   var q3 = document.getElementById("Q3");
   var valueQ3 = q3.options[q3.selectedIndex].value
   

   ... при запуске при начальной загрузке страницы значения valueQ1 et c. все будет начальным значением раскрывающихся списков при начальной загрузке страницы. Эти значения не изменяются при изменении выбранного значения в раскрывающихся списках. Если вы хотите такое поведение, вам нужен слушатель событий. Однако, простой способ исправить это - установить значения от valueQ1 до valueQ3 внутри вашей функции. Таким образом, ваш код будет получать значения из раскрывающихся списков, когда вы нажимаете кнопку, которая должна быть после , когда пользователь вручную выбрал значение из самих раскрывающихся списков:

   var q1 = document.getElementById("Q1");
   var q2 = document.getElementById("Q2");
   var q3 = document.getElementById("Q3");
   ...
   function myFunc() {
     // get value of dropdown elements
     var valueQ1 = q1.value; // you can just grab the dropdown's value, no need for `q1.options[q1.selectedIndex].value`
     var valueQ2 = q2.value;
     var valueQ3 = q3.value;
     var inpans = [valueQ1, valueQ2, valueQ3];
     while (count < ans.length) {
     ...
   

Исправление всего этого позволит вашему коду сверяться с ответами. В настоящее время, поскольку ваша переменная count определена за пределами myFunc, ваша кнопка будет запускать вашу команду while пока l oop один раз (как во второй раз, когда она запускается count >= ans.length, что делает ваше условие while l oop * 1040). * - таким образом, не работает код внутри него). Если вы хотите, чтобы пользователи делали несколько попыток для данного вопроса, вы определяете count внутри своей функции, чтобы он сбрасывался при нажатии кнопки.

В качестве примечания, если вы планируете использовать этот При разработке кода помните, что пользователи смогут увидеть ответы на вопросы, проверив источник вашего веб-сайта.

См. Измененный код ниже:

Для чего это стоит, вот как я бы написал эквивалентный код. Он использует класс, который есть у вас в каждом раскрывающемся списке, а затем перебирает все раскрывающиеся списки, чтобы проверить, соответствуют ли они правильному ответу. Если вы хотите, чтобы у пользователя было несколько попыток ответить на вопрос, вы можете удалить опцию {once: true}:

// Get dropdown elements when page loads
const dropdowns = document.querySelectorAll('.Q');
const submitBtn = document.querySelector("#guess-btn");
const resultElem = document.getElementById("one");
const ans = [1, 2, 3];
submitBtn.addEventListener("click", () => {
  const correctCount = [...dropdowns].reduce(
    (total, dropdown, i) => total + (+dropdown.value === ans[i]), 0
  );
  resultElem.innerText = `You got ${correctCount} right.`;
}, {once: true});

<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.</p>

<br />
<br />

<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width="300" height="200" />
<br />
<label for="Q1">A:</label>
<select id="Q1" class="Q">
  <option value="0">SELECT</option>
  <option value="1">L:CRDEV</option>
  <option value="2">L:CDC</option>
  <option value="3">L:LINCDC</option>
  <option value="4">L:LINAC</option>
</select>
<br />
<label for="Q2">B:</label>
<select id="Q2" class="Q">
  <option value="0">SELECT</option>
  <option value="1">n1</option>
  <option value="2">n2</option>
  <option value="3">n3</option>
  <option value="4">n4</option>
</select>
<br />
<label for="Q3">C:</label>
<select id="Q3" class="Q">
  <option value="0">SELECT</option>
  <option value="1">e1</option>
  <option value="2">e2</option>
  <option value="3">e3</option>
  <option value="4">e4</option>
</select>

<br />
<br />

<button id="guess-btn">Click me</button>
<p id="one"></p>