- Practice working with setTimeout and asynchronous code
- Practice working with promises
In this lab we'll practice using promises, as well as our other JavaScript skills, to make a game that some of our passengers can play during their ride. It's a quiz game with a series of true or false question that our passengers must answer. The user clicks on the "Ask Away!" button and that displays the first question as well as the True and False buttons. After five seconds, time is up and the question, and True and False buttons, disappear.
We have already done some of the work for you. We have uploaded the "materialize.css" library, so that our game has some styling. And if you look at the index.html
file, you can see that we have provided a div "question-container" where the question should be displayed, and a div of "true false list" to hold the buttons.
There are number of functions that we need to build to get this functionality to work.
appendQuestion
- appends the question to the "question-container" in theindex.html
fileaskQuestionThen(time)
- this assigns a global variablequestion
to equal the first question; it also returns a promise that is resolved after a specified amount of time (so that we can expire the question after 5 seconds); the amount of time to wait is provided as an argument to the functionremoveQuestion
- removes the question from the "question-container"; it returns a promise so that the function is "thennable", meaning we can do something after the questionaskQuestionThenRemoveQuestion(time)
- it appends the question to the "question-container" and after a specified amount of time removes the question; it takes an argument of "time" indicating the amount of time the question will be displayedtrueAndFalseButtons
- it returns the collection of true and false buttons already provided in theindex.html
filetoggleTrueAndFalseButtons
- it adds the hide class if not on the buttons, and removes the hide class if it is on the buttonsdisplayQuestionOnClick
- it adds both the true and false buttons and the question for five seconds, and then hides both of the true and false questions and removes the text of the question