Last days I was applying on JS by making some JS tutorials. I started building a simple Quiz App using vanilla js. I decided to make it open-source
so any js developer can contribute to it on github or learn new things from it.
Features
The project contains the following features:
- Beautiful UI
- Responsive UI
- Quiz page
- Results Page
- Basic quiz app features:
- next\previous btns
- move between questions
- choose answer
- timer
- submit btn
- question points
- number of questions
- see results
Logic
Quiz content is rendered from
JSON
file - toHTML
page - that will contain every thing (time, questions, options, true answers ...etc) usingAPI
fetch. "Simulating calling quiz data from server"The answers will be putted in a new
JSON
file - Copy of the QuizJSON
file - that will be sent to anotherhtml
page - called results.html - where the answers file will be rendered in it with the same quiz data.The Answers
JSON
will be sent to the results Page usingpostMessage
and messageEventListener
. then rendered.
NOTE: the only different between Quiz JSON
and Answers JSON
, is that the answers JSON
will includes the user answers.
Last Note: This project is completely built on FP
(Functional Programming) Concept. I'll continue developing it from time to time and improve the code and make it cleaner.
Finally
This project is completely open-source
, under MIT license
. You can contribute on it and learn from each others.
π Source Code: https://github.com/HamzaElkotp/Quiz-Answers_Project
π Live Preview: https://quizanswersproject.netlify.app/quiz.html
π± My GitHub: https://github.com/HamzaElkotp
π To get Coding Shirts: https://my-store-c54a10.creator-spring.com/
Top comments (1)
Thank you for this amazing work, cannot wait to implement it in my projects