vue3-simple-quiz
Web Developer
Vue.js
Vuetify
vue3-simple-quiz
A very simple vue3 quiz app that fetches quiz questions from https://opentdb.com/api_config.php
It will also fetch quiz questions internally if the external api fails.
The feature includes:
Selecting the type of quiz you want to take.
Ability to go back and forth between each questions.
Note: To jump to the next question, you must answer the current questions.
A timer and progress to keep track.
A review page to review your answer and re-select.
Note: If you choose to re-select your answer, you can also quickly jump back to the review page.
A result page to view your result.
Table of Contents
Setup Requirements
Ensure that you have:
Brew setup https://brew.sh/
Npm setup https://formulae.brew.sh/formula/node
Pnpm setup https://pnpm.io/installation#using-homebrew
Setup Instructions
Clone this repo via
git cloneInstall dependencies via
pnpm iRunning dev server
You can run the dev server via
pnpm startRunning unit test and linter
You can run unit test via
pnpm testFor linter, you can run via
pnpm lintFor autoformatting, you can run via
pnpm formatRecorded Demo
Recorded Demo is split between external and internal quiz.
For external quiz (we retrieve the quiz from https://opentdb.com/api_config.php)
For internal quiz (we retrieve the quiz questions from this repo
Technical Decision
Why vue app? It is because there is already many ReactJS app for this quiz that I want this one to stand out.
Why
pnpm over npm or yarn? Performance, pnpm is both better in term of performances and efficiency. ReferenceWhat factor contribute to the current cosmetic styling of this app? I wanted it to align with the dark-mode flavor of vue.
Why use
Vuetify for these form components? Vuetify is popular for Vue and using it will make this app more streamline. (not to mention speed up implementation)Why
pinia over vuex? I am a die-hard fan of Pinia for its simplicity, which makes code more easier to work with and performant, better unit test can be written with pinia. ReferenceHow come there is only 1 unit test? Due to time constraint, I only added one unit test for now and that is for the critical pinia store piece which is less volatile compare to ui/ux designs which can change frequently.
Screenshot
Selection Page
Instruction Page
Examination Page
Review Page
Result Page
Unit Test
Like this project
0
Posted Feb 19, 2025
Contribute to Mr-Ming/vue3-simple-quiz development by creating an account on GitHub.
Likes
0
Views
3
Tags
Web Developer
Vue.js
Vuetify
GitHub - Mr-Ming/SMS-Inbox: Sample SMS-Inbox
GitHub - Mr-Ming/Github-DashBoard: Github Dash Board