Блог

Я хочу сделать тест с использованием html/js, и я не знаю, как изменить значения в форме, чтобы добавить больше вопросов и перемещаться между ними, теперь это очень просто:

HTML:

 <form name="quiz">
        <input type="radio" name="q1" value="a" id="q1"><br>
        <input type="radio" name="q1" value="b" id="q1"><br>
        <input type="radio" name="q1" value="c" id="q1"><br>
        <input type="radio" name="q1" value="d" id="q1"><br>
</form>
    <button onclick="submitAnswers()">Check Answer</button>
 

JS:

 const answers = ["b","a"];

function submitAnswers() {
    let q1 = document.forms["quiz"]["q1"].value;
    if (q1 == answers[0]) {
        console.log('Correct answer');
    } else {
        console.log('Incorrect answer');
    }
}
 

И я хочу сделать кнопки навигации, чтобы я мог перейти к следующему или предыдущему вопросу, и кнопки с цифрами, чтобы я мог переходить между вопросами, и я хочу, чтобы он сохранял ответ, поэтому, например, если я проверю ответ в вопросе 1 и перейду к вопросу 15, я могу вернуться к вопросу 1 и выбрать ответ, но я понятия не имею, как начать и сделать что-либо из этого…

Есть какие-нибудь намеки?

Таким образом, вы хотите получить элементы ввода форм с formData последующим циклом по их записям, сохранить ответы в объекте.

HTML

 <form id="quiz">
  <div>
    <label>
      <input type="radio" id="a" name="q1" value="a">
      A
    </label>
  </div>

  <div>
    <label>
      <input type="radio" id="b" name="q1" value="b">
      B
    </label>
  </div>

  <div>
    <label>
      <input type="radio" id="c" name="q1" value="c">
      C
    </label>
  </div>
  <div>
    <label>
      <input type="radio" id="d" name="q1" value="d">
      D
    </label>
  </div>

  <button type="submit">Check Answer</button>
</form>

 

JS

 const form = document.getElementById('quiz');
const answers = {
  'q1': ["b","a"],
}

form.addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(form);
  for (var pair of formData.entries()) {
    // pair[0] is the input name, pair[1] is the value.
    if (answers[pair[0]].includes(pair[1])) {
      console.log('correct')
    } else {
      console.log('incorrect')
    }
  } 
})