The Code Quiz build and runs a quick multi-choice quiz to test knowledge of JavaScript APIs. The quiz will run for a maximum of 75 seconds. A 10 second time penalty is applied for incorrect answers.
The Quiz itself is quite straight forward and has 4 distinct phases:
- Provides a brief introduction to the quiz. The quiz is started by clicking the Start Button. High Scores can be viewed by clicking the View Highscores link at the top left of the page
- Loops through the quiz questions presenting a list of possible answers for each
- Asks the user to enter their initials and record their score
- Displays the list of scores, sorted from high to low after the user has entered their intials
The user can view the list of high scores at any time.
I've used snippets of Javascript in websites I've built in the past but not really understood what was happening.
This Challenge was an opportunity to develop my knowledge of the Web APIs and the DOM by using JavaScript to build and run the entire quiz. It would be a chance to do more with JavaScript, explore its functionality and really see how it works.
The entire quiz, including the HTML, is built and constructed in Javascript. I had to do the analysis first to know what would be required and then build the layout in HTML. Once that was done I could work out how to implement the quiz in JavaScript.
The supplied GIF didn't show what happened when the Show HighScores link was clicked when a Quiz was running and what happened subsequently when the Go Back button was clicked. I handled that as if the history.back() method had been used.
Doing the Challenge this way took much more time than I expected and I had to solve some tricky issues. I encountered unexpected issues with eventListeners and timers that had to be debugged & resolved. I had to change my approach on several occasions to get round problems. I learnt a lot about the DOM, eventListeners, onclick events, timers functions and scope.
I wouldn't do this in a real project:
- code maintenance would be expensive
- too many opportinuties for error
- debugging is time consuming
It was a useful exercise and I think well worth the time.
Quiz questions, prompts and answers are stored in an object in the separate quiz.js source file. This file also stores the timelengths - quiz duration, penalty time and message display time. This means the questions and durations could be modified easily.
High Scores are stored in local storage in an array named quizScores. Each item in the quizScores array contains the score and intials for each recorded score. The score and initials pairs are themselves 2 item arrays. The quizScores array is sorted by scores in the array items.
Click the link to visit the deployed website: Web APIs Quiz.
The Web APIs Quiz is a JavaScript app with 4 phases that run in a single webpage.
- Phase 1 - Introduction/Instructions
- Phase 2 - Multiple Choice Quesions (currently 5, limited by the dataset, not the application)
- Phase 3 - Score Recording
- Phase 4 - Displaying/Managing the High Scores
The development history is recorded in the Changelog.
- Bootcamp Materials - Lesson Material from Week 4
- Prior knowlege and experience
- Group tutorial sessions
- MDM Web Docs addEventListener Method
- MDM Web Docs removeEventListener Method
- MDM Web Docs AbortSignal
- MDM Web Docs setInterval() global function
- MDM Web Docs Element:prepend() method
- MDM Web Docs Array.prototype.sort()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent