Quiz App

First, create the basic UI of the screen how we want to make it look.

You can Download Source Code via Github.

QuizApp is an Flutter based application, and enables the user to undertake a series of questions on General Knowledge. The app is user friendly, and the user shall find it extremely easy to answer the multiple-choice questions. At the end of the quiz, a result-report is generated which states the score. The app also presents an option to the current user to play the question-round again or quit in between.

There are five .dart file in the app :

  1. main– displays Home Screen of application.
  2. question– displays MCQ’s and currents Score.
  3. result – displays Results after finishing the quiz.
  4. answer – displays question’s answer .
  5. quiz – change question after select answer.

And here comes my logic implementation :

return Column(
      children: [
        Question(
          questions[questionIndex]['questionText'],
        ),
        ...(questions[questionIndex]['answers'] as List<Map<String,Object>>).map((answers) {
          return Answer(()=>answerQuestions(answers['score']), answers['text']);
        }).toList()
      ],
    );

Here questions array…

 final _questions = const [
    {
      'questionText': 'Which\'s capital of India?',
      'answers': [
        {'text': 'Mumbai', 'score': 0},
        {'text': 'New Delhi', 'score': 10},
        {'text': 'Jaipur', 'score': 0},
        {'text': 'Pune', 'score': 0}
      ]
    }, {
      'questionText': 'Which\'s mother toung of India?',
      'answers': [
        {'text': 'Marathi', 'score': 0},
        {'text': 'Gujarati', 'score': 0},
        {'text': 'Tamil', 'score': 0},
        {'text': 'Hindi', 'score':10}
      ]
    }, {
      'questionText': 'Who\'s prime ministor of India?',
      'answers': [
        {'text': 'Narendra Modi', 'score': 10},
        {'text': 'Amit Shah', 'score': 0},
        {'text': 'Sonia Gandhi', 'score': 0},
        {'text': 'Rahul Gandhi', 'score': 0}
      ]
    },{
      'questionText': 'Who\'s president of India?',
      'answers': [
        {'text': 'Lalkrishna Advani', 'score': 0},
        {'text': 'Barak Obama', 'score': 0},
        {'text': 'Ramnath Kovind', 'score': 10},
        {'text': 'Pratibha Patil', 'score': 0}
      ]
    },{
      'questionText': 'Who\'s Chief Minister of Gujarat?',
      'answers': [
        {'text': 'Nitin Patel', 'score': 0},
        {'text': 'Vijay Rupani', 'score': 10},
        {'text': 'Jayesh Radadiya', 'score': 0},
        {'text': 'Paresh Dhanani', 'score': 0}
      ]
    }, {
      'questionText': 'Which of the following was the author of the Arthashastra?',
      'answers': [
        {'text': 'Kalhan', 'score': 0},
        {'text': 'Visakhadatta', 'score': 0},
        {'text': 'Bana Bhatta', 'score': 0},
        {'text': 'Chanakya', 'score': 10}
      ]
    },
  ];

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_first/result.dart';

import './quiz.dart';
import './result.dart';

/*void main() {
  runApp(MyApp());
}*/
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var _questionIndex = 0;
  var _totalScore = 0;
  final _questions = const [
    {
      'questionText': 'Which\'s capital of India?',
      'answers': [
        {'text': 'Mumbai', 'score': 0},
        {'text': 'New Delhi', 'score': 10},
        {'text': 'Jaipur', 'score': 0},
        {'text': 'Pune', 'score': 0}
      ]
    }, {
      'questionText': 'Which\'s mother toung of India?',
      'answers': [
        {'text': 'Marathi', 'score': 0},
        {'text': 'Gujarati', 'score': 0},
        {'text': 'Tamil', 'score': 0},
        {'text': 'Hindi', 'score':10}
      ]
    }, {
      'questionText': 'Who\'s prime ministor of India?',
      'answers': [
        {'text': 'Narendra Modi', 'score': 10},
        {'text': 'Amit Shah', 'score': 0},
        {'text': 'Sonia Gandhi', 'score': 0},
        {'text': 'Rahul Gandhi', 'score': 0}
      ]
    },{
      'questionText': 'Who\'s president of India?',
      'answers': [
        {'text': 'Lalkrishna Advani', 'score': 0},
        {'text': 'Barak Obama', 'score': 0},
        {'text': 'Ramnath Kovind', 'score': 10},
        {'text': 'Pratibha Patil', 'score': 0}
      ]
    },{
      'questionText': 'Who\'s Chief Minister of Gujarat?',
      'answers': [
        {'text': 'Nitin Patel', 'score': 0},
        {'text': 'Vijay Rupani', 'score': 10},
        {'text': 'Jayesh Radadiya', 'score': 0},
        {'text': 'Paresh Dhanani', 'score': 0}
      ]
    }, {
      'questionText': 'Which of the following was the author of the Arthashastra?',
      'answers': [
        {'text': 'Kalhan', 'score': 0},
        {'text': 'Visakhadatta', 'score': 0},
        {'text': 'Bana Bhatta', 'score': 0},
        {'text': 'Chanakya', 'score': 10}
      ]
    },
  ];

  void _resetQuiz() {
    setState(() {
      _questionIndex = 0;
      _totalScore = 0;
    });
  }

  void _answerQuestions(int score) {
    _totalScore += score;
    setState(() {
      _questionIndex = _questionIndex + 1;
    });
    print('_questionIndex:$_questionIndex');
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Quiz App'),
        ),
        body: _questionIndex < _questions.length
            ? Quiz(
                questions: _questions,
                answerQuestions: _answerQuestions,
                questionIndex: _questionIndex)
            : Result(_totalScore, _resetQuiz),
      ),
    );
  }
}

question.dart

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String questionText;

  Question(this.questionText);

  @override
  Widget build(BuildContext context) {
    return Container(width:double.infinity,
        margin:EdgeInsets.all(10),child: Text(questionText, style: TextStyle(fontSize: 25),
      textAlign: TextAlign.center,));
  }
}

answer.dart

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
final Function selectHandler;
final String answerText;
  Answer(this.selectHandler,this.answerText);
  @override
  Widget build(BuildContext context) {
    return Container(width: double.infinity,
      margin: EdgeInsets.all(5),
      child: RaisedButton(color:Colors.blue,
        textColor: Colors.white,
        child: Text(answerText),
        onPressed:selectHandler,),);
  }
}

quiz.dart

import 'package:flutter/material.dart';

import './answer.dart';
import './question.dart';

class Quiz extends StatelessWidget {
  final List<Map<String, Object>> questions;
  final int questionIndex;
  final Function answerQuestions;

  Quiz(
      {@required this.questions,
      @required this.answerQuestions,
      @required this.questionIndex});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Question(
          questions[questionIndex]['questionText'],
        ),
        ...(questions[questionIndex]['answers'] as List<Map<String,Object>>).map((answers) {
          return Answer(()=>answerQuestions(answers['score']), answers['text']);
        }).toList()
      ],
    );
  }
}

result.dart

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
  final int resultScore;
  final Function resetHandlar;

  Result(this.resultScore,this.resetHandlar);

  String get resultPhrase {
    String resultText;
    if (resultScore <= 20) {
      resultText = 'You are Bad! Result Score:$resultScore';
    } else if (resultScore <= 30) {
      resultText = 'You are Good! Result Score:$resultScore';
    } else if (resultScore <= 40) {
      resultText = 'You are Great! Result Score:$resultScore';
    } else {
      resultText = 'You are awasome! Result Score:$resultScore';
    }
    return resultText;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Text(
            resultPhrase,
            style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
          FlatButton(child: Text('Restart Quiz!',
          ),textColor:Colors.blue,onPressed: resetHandlar,)
        ],
      ),
    );
  }
}

You can Download Source Code via Github.

Leave a Reply

Your email address will not be published.