DEV Community

Cover image for Open source JavaScript Quiz App
Hamza Elkotb
Hamza Elkotb

Posted on

Open source JavaScript Quiz App

Quiz Appp

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:

  1. Beautiful UI
  2. Responsive UI
  3. Quiz page
  4. Results Page
  5. Basic quiz app features:
    • next\previous btns
    • move between questions
    • choose answer
    • timer
    • submit btn
    • question points
    • number of questions
    • see results

Logic

  1. Quiz content is rendered from JSON file - to HTML page - that will contain every thing (time, questions, options, true answers ...etc) using API fetch. "Simulating calling quiz data from server"

  2. The answers will be putted in a new JSON file - Copy of the Quiz JSON file - that will be sent to another html page - called results.html - where the answers file will be rendered in it with the same quiz data.

  3. The Answers JSON will be sent to the results Page using postMessage and message EventListener. 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)

Collapse
 
rasa_ profile image
Refine Academy

Thank you for this amazing work, cannot wait to implement it in my projects