You can view the full assignment HERE
You can see a working project here - https://arturs-e.github.io/frontend-quiz/
- File arrangement:
- The entry point for all quiz related components is Quiz.vue
- The 3 quiz views - form, test, results - are separated into different components
- Shared components, e.g. button, progress bar, loader, test answer, headings, form fields are separate components
- This could be improved further by separating form fields, etc.
- Quiz component:
- The parent Quiz component holds state for which view to render, submitted quiz form values and submitted test answers, as well as their respective methods.
- QuizForm component:
- Holds quiz form and validation. If form field is empty the form can't be submitted.
- On component render the name input field is focused
- Test options are fetched from API using AXIOS
- QuizTest component:
- Holds state for all chosen test questions, active question index, active question answers and selected answer
- All questions are fetched on initial render
- Answers are fetched for each question separately
- User can't proceed to next question if an answer hasn't been selected
- On each question the answer is being added to the Quiz components answers state
- QuizResults component:
- Receives users name, test id and answers as props
- Results are retrieved from API
npm install
npm run serve
npm run build
npm run lint