lundi 15 février 2021

Flutter - Quiz app, button with correct answer should be showing green

I am building a quiz app in flutter and each time the user selects a wrong answer I would like the correct answer (button) to turn green colour.

These are my variables

Color colorToShow = transColor;
  Color testColor = transColor;
  Color right = correctColor;
  Color wrong = redColor;
  Map<int, Color> btnColor = {
    0: Colors.transparent,
    1: Colors.transparent,
    2: Colors.transparent,
  };
  Map<int, Color> tabTextColor = {
    0: Colors.blue[800],
    1: Colors.blue[800],
    2: Colors.blue[800],
  };

  int questionIndex;
  bool disableButton = false;
  bool firstPress = true;

This is my Function for checking the correct answer:

void checkAnswer1(k) {
      if (questionBank[questionIndex]['answers'][k]['correct']) {
        colorToShow = right;
        Provider.of<QuizData>(context, listen: false).countMarks();
      } else {
        colorToShow = wrong;
        if (questionBank[questionIndex]['answers'][k + 1]['correct']) {
          testColor = right;
        }

        Provider.of<QuizData>(context, listen: false)
            .addWrongAnswers(questionIndex);
        print(Provider.of<QuizData>(context, listen: false).wrongAnswers);
      }
      setState(() {
        tabTextColor[k] = Colors.white;
        btnColor[k] = colorToShow;
        btnColor[k + 1] = testColor;

        disableButton = true;
        firstPress = false;
      });
    }

And here are the buttons with their inputs.

                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [0]['text'],
                                          firstPress
                                              ? () => checkAnswer1(0)
                                              : null,
                                          tabTextColor[0],
                                          btnColor[0]),
                                      SizedBox(height: 16),
                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [1]['text'],
                                          firstPress
                                              ? () => checkAnswer1(1)
                                              : null,
                                          tabTextColor[1],
                                          btnColor[1]),
                                      SizedBox(height: 16),
                                      AnswerTab(
                                          questionBank[questionIndex]['answers']
                                              [2]['text'],
                                          firstPress
                                              ? () => checkAnswer1(2)
                                              : null,
                                          tabTextColor[2],
                                          btnColor[2]),

Here is a snippet of my Question Bank

final List<Map<String, dynamic>> questionBank = [
  {
    'questionText':
        "Το ψαροντουφεκο στη περιοχή του Κεντρικού Λιμεναρχείου Πειραιά απαγορεύεται:",
    'answers': [
      {'text': "Έξω από το λιμάνι του Πειραιά.", "correct": false},
      {'text': "Στις πλάζ του Πειραιά.", "correct": false},
      {
        'text': "Από την Πειραϊκή Χερσόνησο κι έως το 42 χιλ. Πειραιά Σουνίου.",
        "correct": true
      },
    ]
  },

I understand that my problem lies in the Function and the If statements but I can not figure a way. Right now I have tested to check if only the next button (k+1) is correct to turn green, which it does when I chose a wrong answer, but when I chose a correct one it also turns green.

Please help!

Aucun commentaire:

Enregistrer un commentaire