Delay Prompt

JavaScript
1

I’m building this browser-based quiz for a class project and would like to know what would be the best way to delay the answer prompt for a few seconds so that my UI can update?

	function generateQuestion() {
		
		var n = Math.floor(Math.random() * questions.length);
		questions[n].displayQuestion();
		
	    var answer = (prompt('Please select the correct answer.')); 
	
		
		if(answer !== 'exit'){
			questions[n].checkAnswer(parseInt(answer));
			generateQuestion();
		}
	}
	
	generateQuestion();
2

Have a look at setTimeout.

3

Hi @CooKachoo, the real solution would be not using a UI-blocking modal dialog in the first place… not sure if this would be over the top for your class, but you can also get user input from an actual input element like so:

<input type="number" id="answer">
<button id="check">check</button>

var answerInput = document.getElementById('answer')
var checkButton = document.getElementById('check')
var currentQuestion = null

function generateQuestion () {
  var n = Math.floor(Math.random() * questions.length)
  var question = questions[n]

  question.displayQuestion()
  currentQuestion = question
}

function checkAnswer () {
  var answer = answerInput.value

  if (answer && currentQuestion) {
    currentQuestion.checkAnswer(parseInt(answer, 10))
    generateQuestion()
  }
}

checkButton.addEventListener('click', checkAnswer)
generateQuestion()

This way, there’s no need to break out of the loop either – the answer just gets checked when the user actively clicks the button.

2 Likes
4

This works so much better! However I’m having an issue displaying all the possible answers… It’s not returning the options quite like I was in the console…

Codepen.io/CooCooKachoo/

Any ideas why it appears to be displaying a random answer?

5

In each iteration of the for loop, you’re overwriting the answer HTML so eventually you’re only displaying the last one in the list. Instead, you might append it using the += operator:

Question.prototype.displayQuestion = function () {
  var ui = {
    question: document.getElementById('ui-question'),
    answers: document.getElementById('ui-answers')
  }

  ui.question.innerHTML = this.question
  ui.answers.innerHTML = ''

  for (var i = 0; i < this.answers.length; i++) {
    ui.answers.innerHTML += i + ': ' + this.answers[i] + '<br>'
  }
}

BTW I’d suggest using an actual ordered list element, as this is what you’re displaying.

6

I noticed a few things that haven’t been covered in my class yet…

question: (HTML Element) is this like creating a variable inside of a variable? Would this be an object?

ui.answers.innerHTML = ’ ’
ui.answers.innerHTML += i + ': ’ + this.answers[i] + ‘
’ Secondly what makes the first ui.answers with the blank string necessary and not redundant?

Thanks for taking the time to walk me through this

7

Yes I’ve just been grouping the UI elements in an object literal to mimic the ui- prefix… but separate variables would be fine as well.

Well, remove it and see what happens. :-)

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.