You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

86 lines
2.8 KiB

# Quizz App
### Introduction
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).
After tapping on the category the new route must show a corresponding image to the category, the question itself, true/false buttons.
After the question has been answered, you must let the user know if the question was answered correctly.
After the quizz is finished, a user must see their result.
### Objective
- 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:
```jsx
//models/Question.dart
class Question {
String question;
bool answer;
Question(this.question, this.answer);
}
//models/Category.dart
class Category {
String name;
String imageUrl;
List<Question> questions;
Category(this.name, this.imageUrl, this.questions);
}
```
- Note: you can style the app as you want
- Note: only standard Dart package, package:flutter are allowed.
<center>
<img src="https://github.com/alem-01/alem_public/blob/master/resources/quizApp.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### Second Part
### Navigation and routing:
- 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.
<center>
<img src="https://github.com/alem-01/alem_public/blob/master/resources/quizApp.01.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
<img src="https://github.com/alem-01/alem_public/blob/master/resources/quizApp.02.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### Third part
When all questions are answered show the score on a new page.
- It should have Text with score and button which returns user to the main page
<center>
<img src="https://github.com/alem-01/alem_public/blob/master/resources/quizApp.03.png?raw=true" style = "width: 210px !important; height: 420px !important;"/>
</center>
### **Bonus**
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.