CODEWITHSUNDEEP
javascriptarraysforms
Stuart Brown
Stuart Brown

Reputation: 987

Looping through an array and building a form

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

  1. the user entered value and the correct answer (i.e. the value shown in the spellings array below)
  2. the number of correct answers
  3. 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

Upvotes: 0

Views: 57

Answers (1)

Adam
Adam

Reputation: 490

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>

Upvotes: 1

Related Questions