diff --git a/README.md b/README.md index 2014244e..77de52aa 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,65 @@ -![App Brewery Banner](https://github.com/londonappbrewery/Images/blob/master/AppBreweryBanner.png) - # Quizzler ❓ -## Our Goal +This project is part of a series of projects to be completed by students of the [AppBrewery](https://www.appbrewery.co/p/flutter-development-bootcamp-with-dart) flutter course. + +This project focuses on creating a Quizz app. + +## Preview + +![App preview](./assets/app_preview.gif) + +## 🧮 The Project Brief + +The premise of this project is to learn how to build several classes to have a better code structure using OOP principles like Polymorphism, Abstraction, Encapsulation and Inheritance, by building a Question True/False UI. + +## 🎯 Features + +* You can switch between English and Spanish by touching the toggle button + +#### English +![App Preview](./assets/english_quizzler.png) + +#### Spanish +![App Preview](./assets/español_quizzler.png) + +* You can see if your answers where right or wrong with a live update at the bottom of the screen + +#### Right or Wrong? +![App Preview](./assets/resultados_quizzler.png) + +* You get the number of correct answers at the end of the game + +#### Results +![App Preview](./assets/alert_quizzler.png) -In this tutorial we will be reviewing Stateful and Stateless Widgets as well as learning about the fundamental building blocks of Object Oriented Programming (OOP) - Classes and Objects. +## 🧬 Technologies & Languages Used +- Dart +- Flutter +- Github -## What you will create -We’re going to make a quiz app that tests your general knowledge. As one of the most popular types of apps on the app stores, you can create your own quiz for other people to enjoy! +## 🛎️ Contributions, Issues & Forking -![Finished App](https://github.com/londonappbrewery/Images/blob/master/quizzler-demo.gif) +If you have any issues setting up the project or you come across any unintended bugs or problems, please do submit an issue to the [Quizz app](https://github.com/Psiale/quizzler-flutter/issues) page. -## What you will learn +If you want to make your own changes, modifications or improvements to our project, go ahead and Fork it! +1. [Fork it](https://github.com/Psiale/quizzler-flutter/fork) -- Modularising your code into separate classes. -- Dart classes and objects. -- Using class constructors. -- Extracting Widgets to refactor your code. -- private and public modifiers in Dart. -- How to use Dart lists. -- The difference between var, const and final. +2. Create your working branch (git checkout -b [choose-a-name]) -## Code Snippet for Project +3. Commit your changes (git commit -m 'what this commit will fix/add/improve') +4. Push to the branch (git push origin [chosen-name]) +5. Create a new Pull Request -``` -Question('Some cats are actually allergic to humans', true), - Question('You can lead a cow down stairs but not up stairs.', false), - Question('Approximately one quarter of human bones are in the feet.', true), - Question('A slug\'s blood is green.', true), - Question('Buzz Aldrin\'s mother\'s maiden name was \"Moon\".', true), - Question('It is illegal to pee in the Ocean in Portugal.', true), - Question( - 'No piece of square dry paper can be folded in half more than 7 times.', - false), - Question( - 'In London, UK, if you happen to die in the House of Parliament, you are technically entitled to a state funeral, because the building is considered too sacred a place.', - true), - Question( - 'The loudest sound produced by any animal is 188 decibels. That animal is the African Elephant.', - false), - Question( - 'The total surface area of two human lungs is approximately 70 square metres.', - true), - Question('Google was originally called \"Backrub\".', true), - Question( - 'Chocolate affects a dog\'s heart and nervous system; a few ounces are enough to kill a small dog.', - true), - Question( - 'In West Virginia, USA, if you accidentally hit an animal with your car, you are free to take it home to eat.', - true), +## 🤟🏽😄 😛🤙🏾 Creator -``` +Alexis Sanchez +- [Github](https://github.com/Psiale) +- [Linkedin](https://www.linkedin.com/in/alexis-sanchez-dev/) +## 🙌🏾 Show Your Support ->This is a companion project to The App Brewery's Complete Flutter Development Bootcamp, check out the full course at [www.appbrewery.co](https://www.appbrewery.co/) +Give a ⭐️ if you like this project! -![End Banner](https://github.com/londonappbrewery/Images/blob/master/readme-end-banner.png) diff --git a/TODO b/TODO new file mode 100644 index 00000000..ed206c4e --- /dev/null +++ b/TODO @@ -0,0 +1,2 @@ +use the toggleBuilder from widget_builder to create a toggle at the top right of the screen +Implement a function that changes the language and \ No newline at end of file diff --git a/assets/alert_quizzler.png b/assets/alert_quizzler.png new file mode 100644 index 00000000..c739631c Binary files /dev/null and b/assets/alert_quizzler.png differ diff --git a/assets/app_preview.gif b/assets/app_preview.gif new file mode 100644 index 00000000..b5e802c0 Binary files /dev/null and b/assets/app_preview.gif differ diff --git a/assets/english_quizzler.png b/assets/english_quizzler.png new file mode 100644 index 00000000..7aed4c5b Binary files /dev/null and b/assets/english_quizzler.png differ diff --git "a/assets/espa\303\261ol_quizzler.png" "b/assets/espa\303\261ol_quizzler.png" new file mode 100644 index 00000000..d1a00e45 Binary files /dev/null and "b/assets/espa\303\261ol_quizzler.png" differ diff --git a/assets/resultados_quizzler.png b/assets/resultados_quizzler.png new file mode 100644 index 00000000..41ad6cec Binary files /dev/null and b/assets/resultados_quizzler.png differ diff --git a/ios/Flutter/flutter_export_environment.sh b/ios/Flutter/flutter_export_environment.sh new file mode 100644 index 00000000..7e8a2eed --- /dev/null +++ b/ios/Flutter/flutter_export_environment.sh @@ -0,0 +1,15 @@ +#!/bin/sh +# This is a generated file; do not edit or check into version control. +export "FLUTTER_ROOT=C:\Users\front\Documents\flutter" +export "FLUTTER_APPLICATION_PATH=C:\Users\front\Desktop\Flutter_projects\quizzler-flutter" +export "FLUTTER_TARGET=lib\main.dart" +export "FLUTTER_BUILD_DIR=build" +export "SYMROOT=${SOURCE_ROOT}/../build\ios" +export "OTHER_LDFLAGS=$(inherited) -framework Flutter" +export "FLUTTER_FRAMEWORK_DIR=C:\Users\front\Documents\flutter\bin\cache\artifacts\engine\ios" +export "FLUTTER_BUILD_NAME=1.0.0" +export "FLUTTER_BUILD_NUMBER=1" +export "DART_OBFUSCATION=false" +export "TRACK_WIDGET_CREATION=false" +export "TREE_SHAKE_ICONS=false" +export "PACKAGE_CONFIG=.packages" diff --git a/lib/classes/assert.dart b/lib/classes/assert.dart new file mode 100644 index 00000000..99330618 --- /dev/null +++ b/lib/classes/assert.dart @@ -0,0 +1,8 @@ +import 'package:meta/meta.dart'; + +class Assert { + String question; + bool answer; + + Assert({@required this.question, @required this.answer}); +} diff --git a/lib/classes/quiz_brain.dart b/lib/classes/quiz_brain.dart new file mode 100644 index 00000000..67f21ac0 --- /dev/null +++ b/lib/classes/quiz_brain.dart @@ -0,0 +1,65 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:rflutter_alert/rflutter_alert.dart'; +import 'package:quizzler/english_questions.dart'; +import 'package:quizzler/widget_builder.dart' as WidgetBuilder; +import 'package:quizzler/spanish_questions.dart'; + +SpanishQuestions spanishQuestions = SpanishQuestions(); +EnglishQuestions englishQuestions = EnglishQuestions(); + +class QuizBrain { + int _questionNumber = 0; + int _correctAnswers = 0; + List _questionsList = spanishQuestions.getSpanishQuestions(); + + getQuestion() => _questionsList[_questionNumber].question; + + getListLength() => _questionsList.length; + getQuestionNumber() => _questionNumber; + setQuestionNumber(number) => _questionNumber = number; + + nextQuestion() { + if (_questionNumber < (_questionsList.length - 1)) _questionNumber++; + } + + getAnswer() => _questionsList[_questionNumber].answer; + + Icon answerChecker(bool userAnswer) { + Icon response; + print("userAnswer: $userAnswer correctAnswer: ${(getAnswer())}"); + if (userAnswer == getAnswer()) { + response = WidgetBuilder.iconsBuilder(Icons.check, Colors.green); + _correctAnswers++; + } else { + response = WidgetBuilder.iconsBuilder(Icons.close, Colors.red); + } + return response; + } + + bool gameListener(BuildContext context, resetCallBack) { + bool result = true; + if (_questionNumber == (getListLength() - 1)) { + Alert( + context: context, + buttons: [ + DialogButton( + color: Colors.blue, + child: + WidgetBuilder.iconsBuilder(Icons.refresh, Colors.white), + onPressed: () => Navigator.pop(context), + width: 120, + ) + ], + title: + " Lograste $_correctAnswers respuestas correctas.\n You got $_correctAnswers correct answers.") + .show(); + resetCallBack(); + result = false; + _correctAnswers = 0; + } + return result; + } + + setList(list) => _questionsList = list; +} diff --git a/lib/english_questions.dart b/lib/english_questions.dart new file mode 100644 index 00000000..ed04360d --- /dev/null +++ b/lib/english_questions.dart @@ -0,0 +1,47 @@ +import './classes/assert.dart'; + +class EnglishQuestions { + List _englishQuestions = [ + Assert(question: 'Some cats are actually allergic to humans', answer: true), + Assert( + question: 'You can lead a cow down stairs but not up stairs.', + answer: false), + Assert( + question: 'Approximately one quarter of human bones are in the feet.', + answer: true), + Assert(question: 'A slug\'s blood is green.', answer: true), + Assert( + question: 'Buzz Aldrin\'s mother\'s maiden name was \"Moon\".', + answer: true), + Assert( + question: 'It is illegal to pee in the Ocean in Portugal.', + answer: true), + Assert( + question: + 'No piece of square dry paper can be folded in half more than 7 times.', + answer: false), + Assert( + question: + 'In London, UK, if you happen to die in the House of Parliament, you are technically entitled to a state funeral, because the building is considered too sacred a place.', + answer: true), + Assert( + question: + 'The loudest sound produced by any animal is 188 decibels. That animal is the African Elephant.', + answer: false), + Assert( + question: + 'The total surface area of two human lungs is approximately 70 square metres.', + answer: true), + Assert(question: 'Google was originally called \"Backrub\".', answer: true), + Assert( + question: + 'Chocolate affects a dog\'s heart and nervous system; a few ounces are enough to kill a small dog.', + answer: true), + Assert( + question: + 'In West Virginia, USA, if you accidentally hit an animal with your car, you are free to take it home to eat.', + answer: true), + ]; + + getEnglishQuestions() => _englishQuestions; +} diff --git a/lib/main.dart b/lib/main.dart index 6b4739bc..7ab4b472 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,11 +1,21 @@ import 'package:flutter/material.dart'; +import 'classes/quiz_brain.dart'; +import 'package:toggle_switch/toggle_switch.dart'; +import 'package:quizzler/spanish_questions.dart'; +import 'package:quizzler/english_questions.dart'; +SpanishQuestions spanishQuestions = SpanishQuestions(); +EnglishQuestions englishQuestions = EnglishQuestions(); +int initialIndex = 0; + +QuizBrain quizBrain = QuizBrain(); void main() => runApp(Quizzler()); class Quizzler extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( + debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: Colors.grey.shade900, body: SafeArea( @@ -25,19 +35,21 @@ class QuizPage extends StatefulWidget { } class _QuizPageState extends State { + List scoreKeeper = []; + @override Widget build(BuildContext context) { return Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ + toggleBuilder(), Expanded( flex: 5, child: Padding( padding: EdgeInsets.all(10.0), child: Center( child: Text( - 'This is where the question text will go.', + quizBrain.getQuestion(), textAlign: TextAlign.center, style: TextStyle( fontSize: 25.0, @@ -61,6 +73,12 @@ class _QuizPageState extends State { ), ), onPressed: () { + setState(() { + if (quizBrain.gameListener(context, reset)) { + scoreKeeper.add(quizBrain.answerChecker(true)); + quizBrain.nextQuestion(); + } + }); //The user picked true. }, ), @@ -80,18 +98,52 @@ class _QuizPageState extends State { ), onPressed: () { //The user picked false. + setState(() { + if (quizBrain.gameListener(context, reset)) { + scoreKeeper.add(quizBrain.answerChecker(false)); + quizBrain.nextQuestion(); + } + }); }, ), ), ), - //TODO: Add a Row here as your score keeper + Row( + children: scoreKeeper, + ) ], ); } -} -/* -question1: 'You can lead a cow down stairs but not up stairs.', false, -question2: 'Approximately one quarter of human bones are in the feet.', true, -question3: 'A slug\'s blood is green.', true, -*/ + reset() { + quizBrain.setQuestionNumber(0); + scoreKeeper = []; + } + + toggleBuilder() { + return Center( + child: Container( + margin: EdgeInsets.only(top: 15.0), + child: ToggleSwitch( + minWidth: 90.0, + cornerRadius: 10.0, + activeBgColor: Colors.white, + activeFgColor: Colors.blue, + inactiveBgColor: Colors.blue.shade900, + inactiveFgColor: Colors.grey, + initialLabelIndex: initialIndex, + labels: ['Español', 'English'], + onToggle: (int i) { + print('switched to $i'); + setState(() { + initialIndex = i; + (i == 1) + ? quizBrain.setList(englishQuestions.getEnglishQuestions()) + : quizBrain.setList(spanishQuestions.getSpanishQuestions()); + }); + }, + ), + ), + ); + } +} diff --git a/lib/spanish_questions.dart b/lib/spanish_questions.dart new file mode 100644 index 00000000..f8662c1a --- /dev/null +++ b/lib/spanish_questions.dart @@ -0,0 +1,47 @@ +import 'classes/assert.dart'; + +class SpanishQuestions { + List _spanishQuestions = [ + Assert(question: 'El animal nacional de Escocia es un unicornio', answer: true), + Assert( + question: 'Los humanos pueden distinguir sobre un trillón de olores diferentes.', + answer: true), + Assert( + question: 'Si cortas una lombriz de tierra por la mitad, las dos partes pueden regenerar su cuerpo.', + answer: false), + Assert(question: 'Si lloras en el espacio tus lágrimas se pegarían en la cara.', answer: true), + Assert( + question: 'Los cabellos y las uñas siguen creciendo después de la muerte.', + answer: false), + Assert( + question: 'Los humanos puedes respirar y tragar al mismo tiempo.', + answer: false), + Assert( + question: + 'Buzz Aldrin fue el primer hombre en orinar en la Luna.', + answer: true), + Assert( + question: + 'Tenemos un promedio de entre 400 mil y 500 mil pelos en la cabeza.', + answer: false), + Assert( + question: + 'Si tiras un centavo desde lo alto de un rascacielos, puedes atravesarle el cráneo a alguien.', + answer: false), + Assert( + question: + 'Los humanos brillan en la oscuridad.', + answer: true), + Assert(question: 'El mismo inventor de la lámpara incandescente inventó la silla eléctrica.', answer: true), + Assert( + question: + 'Gabriel García Márquez escribió 100 años de soledad.', + answer: true), + Assert( + question: + 'Los encendedores fueron inventados antes que los fósforos.', + answer: true), + ]; + + getSpanishQuestions() => _spanishQuestions; +} \ No newline at end of file diff --git a/lib/widget_builder.dart b/lib/widget_builder.dart new file mode 100644 index 00000000..b1cda411 --- /dev/null +++ b/lib/widget_builder.dart @@ -0,0 +1,7 @@ +import 'package:flutter/material.dart'; + +Icon iconsBuilder(icon, color) => Icon( + icon, + color: color, + ); + diff --git a/pubspec.yaml b/pubspec.yaml index 33afe02d..b262fc6b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,6 +19,8 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 + rflutter_alert: ^1.1.0 + toggle_switch: ^0.1.8 dev_dependencies: flutter_test: