Looping through an array and building a form

Question

I am trying to make a page that shows one word at a time for 5 seconds from an array of values. On this page is also a form with one input field into which people enter their attempt to spell that word.

I would like to capture the results of the values entered in the field in an object that contains

the user entered value and the correct answer (i.e. the value shown in the spellings array below)
the number of correct answers
an array of the incorrect answers

and post this back to the application

So far I have the below but it's not even looping through the array correctly. Also I guess I need to dynamically update the form input so I know which attempt related to which word.

<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>

and the 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>

Edit - some more context as requested in comment below In the <span id="spellings"></span> I would like to show for 5 seconds each item in the spellings array.

In the form that is shown underneath each word I would like to capture the user's input and ultimately POST this back to the application

Any help on how to do this would be great

first it is not .innerHTML it should be value second of all you should no use getElementById in a for - loop ... is a performance issue. And lastly, what excatly is the problem that should be solved? Could you add some more context? — winner_joiner
– winner_joiner, Commented May 29, 2018 at 18:26
I think you need "<" instead of "<=" in "i<=spellings.length" — dcromley
– dcromley, Commented May 29, 2018 at 18:35
thanks for the comments. @winner_joiner I have added some more context to describe the problem. Does it make things clearer? — Stuart Brown
– Stuart Brown, Commented May 29, 2018 at 18:43
You want to show them a word, then have them spell that same word? — Adam
– Adam, Commented May 29, 2018 at 18:44
@Adam yes that's it. Then capture the number of correct answers, which words they got wrong and POST that back — Stuart Brown
– Stuart Brown, Commented May 29, 2018 at 18:52

Adam · Accepted Answer · 2018-05-29 19:45:07Z

1

This should get you going. Note, the alert happens every few seconds now as well, you may want to redirect to a new page or post back to the server at this point. Also, you can improve this to include 'un-attempted' wrong answers as well, this only shows wrong answers that were submitted.

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>

edited May 29, 2018 at 19:45

answered May 29, 2018 at 19:16

Adam

4908 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stuart Brown Over a year ago

Many thanks @adam. When I run this the alert shows my correct answers as wrong answers

Adam Over a year ago

Type faster :). Also I increased the time to 5 seconds.

Stuart Brown Over a year ago

aaah, gotcha! Sorry I thought the alert was showing the incorrect spelling that the user had entered

Collectives™ on Stack Overflow

Looping through an array and building a form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related