- Project Description
- Application Features
- Installation
- Usage
- Credits
- License
- Repository Status
- Contribute
- Tests
- Checklist
What is this project?
- Provides a user interface for hosting questions against the clock with time penalty for incorrect questions.
Why this project?
- Create an application to test your knowledge on JavaScript fundamentals.
What problem does this project solve?
- Provides a fun environment to host quiz questions against a clock.
Lessons learnt?
-
There was a lot for me to learn here and put into practise to create the final product. I had a lot of functionality issues switching pages after the end of the quiz to go to the highscore page as I was unfamiliar with location.assign() and location.replace(). A lot of time would have been saved if I'd discovered this earlier as the high scores page was glitching with window.open() method if a user returns to the quiz page without entering their intials.
-
With more time, I would refine the code as you will see I kept tacking on here and there as problems were found.
-
I had fun modding the progress bar as a countdown and then turning it into a progress bar. With a little bit of mathematics it was able to be implemented without too much hassle.
-
The countdown was a steep learning curve for me as I needed to modify it to just show minutes and seconds and then later grab data from it. Would refine the code in a later update.
Client requested features as implemented:
- quiz that is against the clock;
- facility to store players high scores in the local storage;
- key game data is also transferred over with the high score and stored in the local memory; and
- well presented quiz that includes a highly visible timer with a progress bar.
You can download the source code from my Github repository and open the index.html file to review the website inside your selected web browser.
Alternatively, the webpage has also been hosted via URL: quiz.watsonised.com
The code is available from my Github repository with all assets created for the project.
Once you've downloaded, you can modify the code as you need.
I've referenced W3 Schools website where I've used their information. I referenced the following website and code for the quiz: https://www.sitepoint.com/simple-javascript-quiz/ Whilst useful I only really utilised their code for setting up question cards as it was more efficient than the method I was thinking of doing. For the high scores, I utilised the code from our course for the todo list. It's appearance might look familiar!
The works in this repository are subject to:
If you would like to contribute, please comply with the Contributor Covenant Code of Conduct:
- Tested only on desktop computer, which included looking at it in the browser's developer tool's mobile phone emulator. At this stage the app is not displaying correctly on mobile devices.
All actions not checked are still to be completed:
- Build a timed coding quiz with multiple choice questions.
- The quiz is to have a clean, polished and responsive user interface.
- The quiz is on JavaScript fundamental and stores high scores to gauge progress compared to peers.
- When taking the quiz, the use click a start button and a timer starts whilst being presented with a question.
- When a question is answered incorrectly, time is subtracted from the clock.
- When all questions are answere or the timer reaches 0, then the game is over.
- When the game is over, the quizzer can save their intials / name with their score.
- The application resembles the mock-up functionality provided in the homework instructions.
- Deployed at live URL, website
- Application loads with no errors when inspected with Chrome DevTools.
- Github repository contains application code Github location
- Repository has a unique name; follows best practice for file structure; and naming conventions.
- Repsository follows best practices for class/id naming conventions, indentation, quality comments, etc.
- Repository contains multiple descriptive commit messages.
- Repository contains a README file with description, screenshot and link to deployed application.