Цикл по массиву и построение формы

Question

Я пытаюсь сделать страницу, которая показывает одно слово за раз в течение 5 секунд из массива значений.На этой странице также есть форма с одним полем ввода, в которую люди вводят свои попытки записать это слово.

Я хотел бы зафиксировать результаты значений, введенных в поле, в объекте, который содержит

1. введенное пользователем значение и правильный ответ (т. Е. Значение, указанное в массиве spellings ниже)
2. количество правильных ответов
3. массив неправильных ответов

и отправьте это обратно в приложение

Пока у меня есть нижеприведенное, но оно даже не перебирает массив правильно.Кроме того, я думаю, что мне нужно динамически обновить ввод формы, чтобы я знал, какая попытка связана с каким словом.

<script>
var spellings = ['first', 'second', 'third', 'fourth', 'fifth'];

setInterval(function() { 
    for (var i=0; i<=spellings.length; i++){
      document
        .getElementById('spellings')
        .innerHTML = spellings[i]; 
      }   
  }, 1000);
</script>

и HTML

<span id="spellings"></span>

<form action="/spellings" method="POST">
  <div class="form">
    <label for="spelling">spelling</label>
    <input type="text" class="form-control" id="spelling" name="spelling"> 
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Правка - еще немного контекста, как требуетсяКомментарий ниже В <span id="spellings"></span> я хотел бы показать в течение 5 секунд каждый элемент в массиве spellings.

В форме, показанной под каждым словом, я хотел бы захватить ввод пользователя и в конечном итоге POSTэто обратно в приложение

Любая помощь о том, как это сделать, будет здорово

Answer 1

Это должно помочь вам.Обратите внимание, что предупреждение также происходит каждые несколько секунд, вы можете перенаправить на новую страницу или отправить обратно на сервер в этот момент.Кроме того, вы можете улучшить это, включив также «не предпринятые» неправильные ответы, это только показывает, что были отправлены неправильные ответы.

let spellingWords = ['first', 'second', 'third', 'fourth', 'fifth'];
let spellingItems = spellingWords.length;
let spellingItemShown = 0;
let rightAnswers = 0;
let wrongAnswers = [];

setInterval(function() {    
     if (spellingItemShown < spellingItems){
          document.getElementById('spellings').innerHTML = spellingWords[spellingItemShown]; 
     spellingItemShown ++;
     } else{
        //We're done!
        alert(rightAnswers + " right answers out of " + spellingItems + ".  Incorrect answers were: " + wrongAnswers);
        //Redirect or post to server desired info....
     }

  }, 5000);

function checkAnswer(){
  if (document.getElementById('spellings').innerHTML == document.getElementById('spelling').value){
    rightAnswers ++;
  } else {
    wrongAnswers.push(document.getElementById('spellings').innerHTML);
  }
}

<h2 id="spellings"></h2>

<label for="spelling">spelling</label>
<input type="text" class="form-control" id="spelling" name="spelling"> 
<button class="btn btn-primary" onclick="checkAnswer()">Check Answer</button>