Quizzes

Quiz SPA Game made with Vue.js 3 framework and JSON data fetched externally.

Demo

Technology stack

• Vue 3 Composition API
• Vue Router
• Dart Sass
• JavaScript ES8+
• Vite

Test environment

Browser	Version
Google Chrome	112
Mozilla Firefox	112
Safari	16

API Setup

1. Rename .env.sample file into .env;
2. Create your quiz data in JSON according to the given structure;
3. Select the JSON storage. For this project I used npoint.io (sign up required);
4. Replace const URL contents at .src/api/config.js with your JSON storage path excluding BIN_ID;
5. Copy/paste your JSON bin id to the .env file.

Project Setup

1. Clone the repository
2. Run npm ci to install dependencies
3. Run one of the following commands:

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Preview the Production Build

npm run preview

Lint with ESLint

npm run lint

Format with Prettier

npm run format

Attributions

1. Irene for testing the project across numerous devices, creating quiz content, and suggesting new ideas such as score table with answer keys 💜
2. Laith Academy for the detailed tutorial on how to create quiz app from this YT video;
3. Kitty for the 7-1 sass files organizing pattern described in this article;
4. Nicolas Gallagher for the normalize.css file that you can get from this source;
5. easyScript for a hint on turning on the css sourcemaps in their stackoverflow reply*;
6. tony19 for the example of Rollup config to change output file directories described in their post*;
7. mahan for taking the above solution a little bit further and giving an example of distributing fonts in a separate output folder in this post*;
8. Maciek Sitkowski for showing the proper way of deploying vite project to GitHub Pages in this YT video;
9. fedorqui for the instruction on how to undo several pushed commits in this post*
10. tao and Duannx for 'how to' strategies concerning fetching data inside Vue components in these two stackoverflow replies: one from tao* and the other one from Duannx*;
11. Dmitri Pavlutin for a concise tutorial on how to desctructure props in Vue Composition API in this blog entry;
12. Kevin Powell for the inspirational and highly informative pieces of advice on how to make the corners of the Internet just a little bit more awesome;
13. jcomp for the image I used in this project's social preview;
14. alvaro_cabrera for the following images: algorithms quiz cover image and data structures quiz cover image**;
15. storyset for the image I used as a databases quiz cover image**;
16. indiaBIX for the excerpts of the following content: The Relational Model and Normalization and SQL for Database Construction;
17. GeeksforGeeks for the excerpts of the following content: Algorithms and Data Structures.

* - all stackoverflow content is licensed by https://creativecommons.org/licenses/by-sa/4.0/ ** - modified in accordance with Freepik license

Contributing

If you get interested in this project, I'd be glad to see your contributions. Pull requests are welcome!