CODEWITHSUNDEEP
javascripthtmlfor-loop
Magnus Nordmo
Magnus Nordmo

Reputation: 951

How to loop through Q and A array?

I have an array of multiplication problems. I would like to go through each one, display the question, input the answer, and give feedback. If it's the correct response then I would like to continue to the next question in the array. I realise that a for-loop might be wrong here but it's all i could think of. The code below does not run. I appreciate all help. Thanks in advance!

pracOnly = ['4*2=','3*3=','5*5=']
var pracAnswer = 0;


for (var i = 0; i < pracOnly.length; i++) {
  pracAnswer = pracOnly[i][0] * pracOnly[i][2];
  document.getElementById("prac").innerHTML = pracOnly[i];
  var userPracAns = document.getElementById("p").value;
  if(i == 0) {break;};
  if (userPracAns == pracAnswer) {
    alert('Correct!');
    i = i + 1;
  } else {
    alert('Not correct')
  }
};
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title>Multiplication</title>
  </head>
  <h1>Test</h1>
  <body>
  </section>

  <section>
  <span id='prac'></span>
  <input type="number" id='p'>
  <button type="button" onClick="practiceAnswer()">Answer</button>

  </section>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

Upvotes: 0

Views: 100

Answers (1)

Yousaf
Yousaf

Reputation: 29314

First of all, make sure you declare pracOnly. Don't use undeclared variables. Also consider adding event listeners in javascript code rather than using onclick attribute in the HTML.

As far as the problem stated in your question is concerned, you don't need a loop. You just need to display one question at a time by keeping track of the index of the question which is currently being displayed.

Once the user clicks the Answer button, check if the answer is correct. If it is, clear the input and show the next question. Otherwise show an alert to the user indicating that the answer is incorrect.

After user has answered all the questions, you probably want to inform the user that they have answered all the questions.

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;
var index = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    showNextQuestion();
  } else {
    alert('Not correct');
  }
});

function showNextQuestion() {
  if (index == pracOnly.length) {
    return endQuiz();
  };

  pracAnswer = pracOnly[index][0] * pracOnly[index][2];
  span.innerHTML = pracOnly[index];
  index++;
}

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}

showNextQuestion();
<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

Alternative Solution using a Generator function

Alternatively, you could use a generator function and use a loop to iterate over the array and show one question at a time. This works because even with a loop, generator function's execution can be paused.

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

function* showNextQuestion() {
  for (const question of pracOnly) {
    pracAnswer = question[0] * question[2];
    span.innerHTML = question;
    yield question;
  }

  endQuiz();
}

var questionGenerator = showNextQuestion();
questionGenerator.next();

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    questionGenerator.next();
  } else {
    alert('Not correct');
  }
});

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}
<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

Upvotes: 4

Related Questions