https://github.com/thirdmadman/fe-training-jsfe2021q3-art-quiz
ArtQuiz is a quiz application for knowledge of masterpieces of painting and their authors.
https://github.com/thirdmadman/fe-training-jsfe2021q3-art-quiz
art artquiz css eslint frontend html javascript prettier rs-school scss webpack
Last synced: 3 months ago
JSON representation
ArtQuiz is a quiz application for knowledge of masterpieces of painting and their authors.
- Host: GitHub
- URL: https://github.com/thirdmadman/fe-training-jsfe2021q3-art-quiz
- Owner: thirdmadman
- License: gpl-3.0
- Created: 2022-11-09T17:50:46.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T16:16:20.000Z (about 2 years ago)
- Last Synced: 2025-01-24T17:17:25.013Z (5 months ago)
- Topics: art, artquiz, css, eslint, frontend, html, javascript, prettier, rs-school, scss, webpack
- Language: JavaScript
- Homepage:
- Size: 70.2 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fe-training-JSFE2021Q3-art-quiz
        
Originally done in rolling-scopes-school/thirdmadman-JSFE2021Q3, public reupload
## Deploy link
## Screenshots
### Levels screen
### Quiz picture select screen
### Score screen
## Description
Link for original task:
### App description
ArtQuiz is single page application, quiz, that tests the user's knowledge of famous artworks and their creators. Database of artists and paintings is organized into categories and application generates questions randomly, by levels. The user is presented with four possible answers to choose from, and the application provides feedback on whether the answer is correct or not.
### Used technologies
This app uses webpack, js, scss, eslint and prettier.
This front end application written contents of two parts:
#### "Back end"
Static content served from github.com, deployed in gh-pages, via gh-pages branch.
Pictures stored in static/img/jpg/, there are cropped in square images and full size images.
Json file with list of data:
* "author" - Name of the author
* "name" - Name of the artwork
* "year" - Year of the creation of the artwork
* "imageId" - image id in static images assets
Json file has been translated thru small script specially written to this:
/src/js/utils/src-remaker.js
#### Front end
Source coed dived into MVC-like architecture, which uses native JS and components. In is consist of:
* Models
* View/Pages and their components
* Controllers
* Services
* Constants
App stores data in Local Storage, using DataLocalStorageProvider.
Translation works thru LocaleProvider.
And routing uses PathBus and Router.
After first init, app will get Json data from static back end, and then generate questions database, and save it in local storage.
After each reload of the app, it will try to get saved data from local storage.
App will generate level with number of questions from AppGlobalConstants.
After generating process, level will be accessible form "Levels" page.
Each question every time will mix order of questions. After each answer, data of it, will be saved in database, and results will be available in "Results" page.
After completing level with 80% accuracy, app will open next level.
### Requirements has been
1. Use: JS, HTML, CSS, Webpack
2. Don't use: frameworks for JS, jQuery
3. User YOUR own original code, make it clean and readable
### Features
* Unique Design, developed by my for this app:
* Adaptive layout, up to 1920px, down to 320px