Browse Source

docs(quizz-app): fixing structure of the readme

adding more instructions to make the project easyer to acheave
pull/1971/head
miguel 2 years ago committed by MSilva95
parent
commit
68c88d6e39
  1. 77
      subjects/mobile-dev/quizz-app/README.md

77
subjects/mobile-dev/quizz-app/README.md

@ -1,32 +1,23 @@
# Quizz App
## Quizz App
### Introduction
### Instructions
Develop a [**stateful Quizz app**](https://docs.flutter.dev/development/ui/interactive) that displays categories that you can choose questions from.
Possible categories: history, pop culture, math, geography, etc (appropriate name, image must be added to all categories).
You need to develop a fully functional [**stateful Quizz app**](https://docs.flutter.dev/development/ui/interactive) in Flutter that allows users to select a **category** and answer **true or false questions** related to the selected category.
After tapping on the category the new route must show a corresponding image to the category, the question itself, true/false buttons.
**Features:**
After the question has been answered, you must let the user know if the question was answered correctly.
- The app needs to feature at least 5 different categories that the users can select from the main page, i.e, history, culture, math, geography, etc.
- The app needs to feature at least at least 10 questions to each `quizz`.
- Appropriate name and images must be added to all of the selected categories. (follow the examples bellow)
- Upon selecting a category, the app needs to display the corresponding image to that category, along with the question and true/false buttons.
- After the user answers the question, the app needs to display whether the answer was correct or incorrect.
- At the end of the quiz, the user must be presented with a view of the score he got and a button to go back to the main page.
After the quizz is finished, a user must see their result.
### Categories page
### Objective
The `Categories` page needs to feature a **grid list** view of categories with the appropriate images and names.
- Applying stateful widget
- Routing
- Structuring app
- State management
- Network image cache
- Splash screen
- Timer
### First Part:
### Categories page:
- **Grid list** view of categories with appropriate images and names. Make at least 5 categories and at least 10 questions to each quizz. Show 2 categories in a row.
- Your app should have models for Question and Categories:
The app will have models for `Question` and `Categories`, as shown below:
```jsx
//models/Question.dart
@ -48,38 +39,46 @@ class Category {
}
```
- Note: you can style the app as you want
- Note: only standard Dart package, package:flutter are allowed.
<center>
<img src="./resources/quizApp.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### Second Part
### Navigation and routing:
### Detailed View
- When tapping on category push screen to **DetailedView**, which shows appropriate image, question and true/false buttons
- Create a stateful widget, so you can change page's [state](https://flutter.dev/docs/development/ui/interactive).
- When answering question change color of button or background, so the user know that answer is right or wrong.
After selecting a category, the app will navigate to a second route called `DetailedView`. Here, the corresponding `image` and `question` related to the selected category will be displayed, along with `true/false` buttons that allow the user to answer the question.
<center>
<img src="./resources/quizApp.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
<img src="./resources/quizApp.02.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### Third part
When answering the question, the app needs to display whether the answer was correct or incorrect. For example you can change the color of the button or the background, so that the user knows which answer is right or wrong.
### Score View
When all questions are answered show the score on a new page.
After the user completes the quiz, they should be presented with a score view, which shows their overall score which is the number of correct and incorrect answers.
- It should have Text with score and button which returns user to the main page
The score view should have a button that allows the user to return to the main page and start a new quiz.
Here's an example of what the score view could look like:
<center>
<img src="./resources/quizApp.03.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### **Bonus**
> Note: only standard Dart package, package:flutter are allowed.
> You are free to apply any styling of your choice to the app.
### Bonus
- Add specific images related to each question.
- Add a timer to each question, and if the user doesn't answer within the time limit, the app moves on to the next question automatically.
- Add difficulty Levels that allow users to choose between easy, medium, and hard difficulty levels for each category. The questions displayed should be relevant to the chosen difficulty level.
- Leaderboard, create a leaderboard that displays the top scores achieved by different users of the app.
- Shuffle the questions within each category so that the order of the questions is different each time the user plays the game.
### Notions
Add a timer to each question, so the user must answer a question in a fixed time. After time is up, question should be marked as answered incorrectly and omitted.
- [Widgets](https://docs.flutter.dev/development/ui/widgets)
- [Stateful/stateless widget](https://docs.flutter.dev/development/ui/interactive#stateful-stateless-widgets)
- [Routing](https://docs.flutter.dev/development/ui/navigation)

Loading…
Cancel
Save