Added QuestionsAnswer Statuses Handling

assets/langs/ar-SA.json

@@ -500,5 +500,9 @@
   "codeExpire": "انتهت صلاحية رمز التحقق",
   "typeheretoreply": "اكتب هنا للرد",
   "favorite": "مفضلتي",
-  "searchfromchat": "البحث من الدردشة"
+  "searchfromchat": "البحث من الدردشة",
+  "yourAnswerCorrect": "إجابتك صحيحة",
+  "youMissedTheQuestion": "فاتك !! أنت خارج اللعبة. لكن يمكنك المتابعة.",
+  "wrongAnswer": "إجابة خاطئة! أنت خارج اللعبة. لكن يمكنك المتابعة."
+
 }

assets/langs/en-US.json

@@ -500,6 +500,9 @@
   "allQuestionsCorrect": "You have answered all questions correct",
   "typeheretoreply": "Type here to reply",
   "favorite" :  "My Favorites",
-  "searchfromchat": "Search from chat"
+  "searchfromchat": "Search from chat",
+  "yourAnswerCorrect": "Your answer is correct",
+  "youMissedTheQuestion": "You Missed !! You are out of the game. But you can follow up.",
+  "wrongAnswer": "Wrong Answer! You are out of the game. But you can follow up."
 
 }

lib/api/marathon/marathon_api_client.dart

@@ -151,7 +151,9 @@ class MarathonApiClient {
       }
 
       try {
-        hubConnection.on("OnParticipantJoin", onParticipantJoin);
+        hubConnection.on("OnParticipantJoin", (List<Object?>? arguments) {
+          onParticipantJoin(arguments, context);
+        });
       } catch (e, s) {
         logger.i("Error in OnParticipantJoin");
       }
@@ -165,11 +167,12 @@ class MarathonApiClient {
       Map<dynamic, dynamic> data = arguments.first! as Map<dynamic, dynamic>;
       var json = data["data"];
       QuestionModel newQuestion = QuestionModel.fromJson(json);
-      context.read<MarathonProvider>().addNewQuestionsToTheList(newQuestion);
+      context.read<MarathonProvider>().onNewQuestionReceived(newQuestion);
     }
   }
 
-  Future<void> onParticipantJoin(List<Object?>? arguments) async {
+  Future<void> onParticipantJoin(List<Object?>? arguments, BuildContext context) async {
     logger.i("OnParticipantJoin arguments: $arguments");
+    context.watch<MarathonProvider>().totalMarathoners++;
   }
 }

lib/classes/lottie_consts.dart

@@ -4,4 +4,6 @@ class MyLottieConsts {
   static const String celebrate2Lottie = "assets/lottie/celebrate2.json";
   static const String winnerLottie = "assets/lottie/winner3.json";
   static const String allQuestions = "assets/lottie/all_questions.json";
+  static const String wrongAnswerGif = "assets/images/wrong_answer.gif";
+
 }

lib/generated/locale_keys.g.dart

@@ -487,5 +487,8 @@ abstract class  LocaleKeys {
   static const typeheretoreply = 'typeheretoreply';
   static const favorite = 'favorite';
   static const searchfromchat = 'searchfromchat';
+  static const yourAnswerCorrect = 'yourAnswerCorrect';
+  static const youMissedTheQuestion = 'youMissedTheQuestion';
+  static const wrongAnswer = 'wrongAnswer';
 
 }

lib/models/marathon/question_model.dart

@@ -1,5 +1,7 @@
 enum QuestionsOptionStatus { correct, wrong, selected, unSelected }
 
+enum QuestionCardStatus { question, wrongAnswer, correctAnswer, skippedAnswer, completed, findingWinner, winnerFound }
+
 class QuestionModel {
   String? id;
   String? titleEn;
@@ -99,8 +101,6 @@ class QuestionOptions {
     image = json['image'];
     isCorrectOption = json['isCorrectOption'];
     optionStatus = QuestionsOptionStatus.unSelected;
-
-
   }
 
   Map<String, dynamic> toJson() {

lib/ui/marathon/marathon_provider.dart

@@ -15,18 +15,21 @@ class MarathonProvider extends ChangeNotifier {
   List<CardContent> cardContentList = <CardContent>[];
   QuestionModel currentQuestion = QuestionModel();
 
+  QuestionCardStatus questionCardStatus = QuestionCardStatus.question;
+
   int? selectedOptionIndex;
-  int currentGapTime = 0;
+  int currentQuestionTime = 0;
 
-  void addNewQuestionsToTheList(QuestionModel newQuestion) {
+  void onNewQuestionReceived(QuestionModel newQuestion) {
     if (currentQuestionNumber > 0) {
       swipeCardLeft();
     }
+    selectedOptionIndex = null;
     currentQuestionNumber++;
     currentQuestion = newQuestion;
     cardContentList.add(const CardContent());
-    currentGapTime = newQuestion.nextQuestGap!;
-
+    currentQuestionTime = newQuestion.questionTime!;
+    questionCardStatus = QuestionCardStatus.question;
     notifyListeners();
   }
 
@@ -44,6 +47,11 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
+  void updateQuestionCardStatus(QuestionCardStatus status) {
+    questionCardStatus = status;
+    notifyListeners();
+  }
+
   bool _isLoading = false;
 
   bool get isLoading => _isLoading;
@@ -94,7 +102,7 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
-  void getCorrectAnswerAndUpdateUI() {
+  void getCorrectAnswerAndUpdateAnswerColor() {
     if (selectedOptionIndex != null) {
       if (currentQuestion.questionOptions![selectedOptionIndex!].isCorrectOption!) {
         updateCurrentQuestionOptionStatus(QuestionsOptionStatus.correct, selectedOptionIndex!);
@@ -104,6 +112,22 @@ class MarathonProvider extends ChangeNotifier {
     }
   }
 
+  void updateCardStatusToAnswer() {
+    if (currentQuestionNumber == 0) {
+      return;
+    }
+
+    if (selectedOptionIndex != null) {
+      if (currentQuestion.questionOptions![selectedOptionIndex!].isCorrectOption!) {
+        updateQuestionCardStatus(QuestionCardStatus.correctAnswer);
+      } else {
+        updateQuestionCardStatus(QuestionCardStatus.wrongAnswer);
+      }
+    } else {
+      updateQuestionCardStatus(QuestionCardStatus.skippedAnswer);
+    }
+  }
+
   Timer timerU = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
 
   void startTimer(BuildContext context) {
@@ -111,15 +135,16 @@ class MarathonProvider extends ChangeNotifier {
     timerU = Timer.periodic(
       oneSec,
       (Timer timer) async {
-        if (currentGapTime == 2) {
-          getCorrectAnswerAndUpdateUI();
+        if (currentQuestionTime == 2) {
+          getCorrectAnswerAndUpdateAnswerColor();
         }
-        if (currentGapTime == 0) {
+        if (currentQuestionTime == 0) {
+          updateCardStatusToAnswer();
           // if (currentQuestionNumber == 9) {
           //   timer.cancel();
           //   cancelTimer();
           //   isMarathonCompleted = true;
-          //   await Future<dynamic>.delayed(const Duration(seconds: 3)).whenComplete(
+          //   await Future<dynamic>.delayed(const Duration(seconds: 2)).whenComplete(
           //     () => Navigator.pushReplacementNamed(context, AppRoutes.marathonWinnerSelection),
           //   );
           //
@@ -129,7 +154,7 @@ class MarathonProvider extends ChangeNotifier {
           // }
           // timer.cancel();
         } else {
-          currentGapTime--;
+          currentQuestionTime--;
         }
         notifyListeners();
       },
@@ -141,7 +166,7 @@ class MarathonProvider extends ChangeNotifier {
     cardContentList.clear();
     timerU.cancel();
     _isMarathonCompleted = false;
-    currentGapTime = 0;
+    currentQuestionTime = 0;
     currentQuestion = QuestionModel();
     notifyListeners();
   }

lib/ui/marathon/marathon_screen.dart

@@ -6,7 +6,6 @@ import 'package:lottie/lottie.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
 import 'package:mohem_flutter_app/classes/lottie_consts.dart';
-import 'package:mohem_flutter_app/config/routes.dart';
 import 'package:mohem_flutter_app/extensions/int_extensions.dart';
 import 'package:mohem_flutter_app/extensions/string_extensions.dart';
 import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
@@ -14,6 +13,7 @@ import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/question_card_builder.dart';
 import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
 import 'package:provider/provider.dart';
 import 'package:sizer/sizer.dart';
@@ -26,53 +26,52 @@ class MarathonScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
     return WillPopScope(
-        child: Scaffold(
-          appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
-          body: SingleChildScrollView(
-            child: Column(
-              children: <Widget>[
-                20.height,
-                MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
-                if (provider.isMarathonCompleted)
-                  InkWell(
-                    onTap: () {
-                      Navigator.pushReplacementNamed(
-                        context,
-                        AppRoutes.marathonWinnerSelection,
-                      );
-                    },
-                    child: CustomStatusWidget(
-                      asset: Lottie.asset(
-                        MyLottieConsts.allQuestions,
-                        height: 200,
-                      ),
-                      title: Text(
-                        LocaleKeys.congrats.tr(),
-                        style: const TextStyle(
-                          height: 23 / 24,
-                          color: MyColors.greenColor,
-                          fontSize: 27,
-                          letterSpacing: -1,
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ),
-                      subTitle: Text(
-                        LocaleKeys.allQuestionsCorrect.tr(),
-                        textAlign: TextAlign.center,
-                        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: MyColors.darkTextColor, letterSpacing: -1.08),
-                      ),
-                    ).paddingOnly(top: 12, left: 21, right: 21),
-                  )
-                else
-                  QuestionCard(provider: provider).paddingOnly(top: 12, left: 21, right: 21),
-              ],
-            ),
+      child: Scaffold(
+        appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
+        body: SingleChildScrollView(
+          child: Column(
+            children: <Widget>[
+              20.height,
+              MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
+              QuestionCardBuilder(
+                onQuestion: (BuildContext context) => QuestionCard(provider: provider),
+                onCompleted: (BuildContext context) => CustomStatusWidget(
+                  asset: Lottie.asset(MyLottieConsts.allQuestions, height: 200),
+                  title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
+                  subTitle: LocaleKeys.allQuestionsCorrect.toText18(color: MyColors.darkTextColor),
+                ),
+                onCorrectAnswer: (BuildContext context) => CustomStatusWidget(
+                  asset: Lottie.asset(MyLottieConsts.allQuestions, height: 200),
+                  title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
+                  subTitle: LocaleKeys.yourAnswerCorrect.toText18(color: MyColors.darkTextColor),
+                ),
+                onWinner: (BuildContext context) => QuestionCard(provider: provider),
+                onWrongAnswer: (BuildContext context) => CustomStatusWidget(
+                  asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
+                  title: const Text(""),
+                  subTitle: LocaleKeys.wrongAnswer.tr().toText18(color: MyColors.darkTextColor),
+                ),
+                onSkippedAnswer: (BuildContext context) => CustomStatusWidget(
+                  asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
+                  title: const Text(""),
+                  subTitle: LocaleKeys.youMissedTheQuestion.tr().toText18(color: MyColors.darkTextColor),
+                ),
+                questionCardStatus: provider.questionCardStatus,
+                onFindingWinner: (BuildContext context) => CustomStatusWidget(
+                  asset: Lottie.asset(MyLottieConsts.winnerLottie, height: 168),
+                  title: LocaleKeys.fingersCrossed.tr().toText22(color: MyColors.greenColor),
+                  subTitle: LocaleKeys.winnerSelectedRandomly.tr().toText18(color: MyColors.darkTextColor),
+                ),
+              ).paddingOnly(top: 12, left: 21, right: 21),
+            ],
           ),
         ),
-        onWillPop: () {
-          provider.resetValues();
-          return Future<bool>.value(true);
-        });
+      ),
+      onWillPop: () {
+        provider.resetValues();
+        return Future<bool>.value(true);
+      },
+    );
   }
 }
 
@@ -117,11 +116,12 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
                   borderRadius: BorderRadius.circular(5),
                 ),
                 padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
-                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.marathonDetailModel!.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
+                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.marathonDetailModel.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
                     .toText12(color: MyColors.white),
               ),
               "${widget.provider.totalMarathoners} ${LocaleKeys.marathoners.tr()}".toText14(),
-              "00:${widget.provider.currentGapTime < 10 ? "0${widget.provider.currentGapTime}" : widget.provider.currentGapTime}".toText18(),
+              "00:${widget.provider.currentQuestionTime < 10 ? "0${widget.provider.currentQuestionTime}" : widget.provider.currentQuestionTime}"
+                  .toText18(color: widget.provider.currentQuestionTime < 5 ? MyColors.redColor : MyColors.black),
             ],
           ),
           15.height,
@@ -149,7 +149,7 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
           12.height,
           Row(
             children: <Widget>[
-              "${((widget.provider.currentQuestionNumber / widget.provider.marathonDetailModel!.totalQuestions!) * 100).toInt()}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
+              "${((widget.provider.currentQuestionNumber / widget.provider.marathonDetailModel.totalQuestions!) * 100).toInt()}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
             ],
           ),
         ],
@@ -157,3 +157,33 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
     );
   }
 }
+
+//                InkWell(
+//                   onTap: () {
+//                     Navigator.pushReplacementNamed(
+//                       context,
+//                       AppRoutes.marathonWinnerSelection,
+//                     );
+//                   },
+//                   child: CustomStatusWidget(
+//                     asset: Lottie.asset(
+//                       MyLottieConsts.allQuestions,
+//                       height: 200,
+//                     ),
+//                     title: Text(
+//                       LocaleKeys.congrats.tr(),
+//                       style: const TextStyle(
+//                         height: 23 / 24,
+//                         color: MyColors.greenColor,
+//                         fontSize: 27,
+//                         letterSpacing: -1,
+//                         fontWeight: FontWeight.w600,
+//                       ),
+//                     ),
+//                     subTitle: Text(
+//                       LocaleKeys.allQuestionsCorrect.tr(),
+//                       textAlign: TextAlign.center,
+//                       style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: MyColors.darkTextColor, letterSpacing: -1.08),
+//                     ),
+//                   ).paddingOnly(top: 12, left: 21, right: 21),
+//                 )

lib/ui/marathon/widgets/custom_status_widget.dart

@@ -18,6 +18,7 @@ class CustomStatusWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       width: double.infinity,
+      height: 440,
       decoration: MyDecorations.shadowDecoration,
       padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
       child: Column(

lib/ui/marathon/widgets/marathon_banner.dart

@@ -39,18 +39,31 @@ class MarathonBanner extends StatelessWidget {
                     width: double.infinity,
                   ),
                 ),
-                Positioned(
-                  left: -20,
-                  top: -10,
-                  child: Transform.rotate(
-                    angle: 15,
-                    child: Container(
-                      width: 65,
-                      height: 32,
-                      color: MyColors.darkDigitColor,
-                    ),
-                  ),
-                ),
+                AppState().isArabic(context)
+                    ? Positioned(
+                        right: -15,
+                        top: -10,
+                        child: Transform.rotate(
+                          angle: 10,
+                          child: Container(
+                            width: 65,
+                            height: 32,
+                            color: MyColors.darkDigitColor,
+                          ),
+                        ),
+                      )
+                    : Positioned(
+                        left: -20,
+                        top: -10,
+                        child: Transform.rotate(
+                          angle: 15,
+                          child: Container(
+                            width: 65,
+                            height: 32,
+                            color: MyColors.darkDigitColor,
+                          ),
+                        ),
+                      ),
                 SizedBox(
                   width: double.infinity,
                   height: double.infinity,
@@ -63,8 +76,8 @@ class MarathonBanner extends StatelessWidget {
                           height: double.infinity,
                         ),
                       ),
-                      Expanded(
-                        flex: 5,
+                      Expanded( 
+                        flex: AppState().isArabic(context) ? 4 : 5,
                         child: SizedBox(
                           width: double.infinity,
                           height: double.infinity,
@@ -129,7 +142,7 @@ class MarathonBanner extends StatelessWidget {
                               textAlign: TextAlign.center,
                               maxLines: 2,
                               style: const TextStyle(
-                                color: MyColors.black,
+                                color: MyColors.white,
                                 fontWeight: FontWeight.bold,
                                 fontSize: 6,
                                 height: 1.2,

lib/ui/marathon/widgets/question_card.dart

@@ -6,18 +6,13 @@ import 'package:mohem_flutter_app/app_state/app_state.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
 import 'package:mohem_flutter_app/classes/lottie_consts.dart';
+import 'package:mohem_flutter_app/extensions/int_extensions.dart';
+import 'package:mohem_flutter_app/extensions/string_extensions.dart';
 import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
 import 'package:mohem_flutter_app/models/marathon/question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
 import 'package:provider/provider.dart';
 
-List<bool> isSelectedOptions = [
-  false,
-  false,
-  false,
-  false,
-];
-
 class QuestionCard extends StatelessWidget {
   final MarathonProvider provider;
 
@@ -113,8 +108,6 @@ class CardContent extends StatelessWidget {
 class AnswerContent extends StatelessWidget {
   const AnswerContent({Key? key}) : super(key: key);
 
-  void onAnswerTapped(BuildContext context, QuestionOptions questionOption) {}
-
   @override
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
@@ -128,7 +121,7 @@ class AnswerContent extends StatelessWidget {
         ),
       ),
       child: provider.currentQuestion.questionOptions != null
-          ? ListView.builder(
+          ? ListView.separated(
               itemCount: provider.currentQuestion.questionOptions!.length,
               shrinkWrap: true,
               itemBuilder: (BuildContext context, int index) {
@@ -139,13 +132,8 @@ class AnswerContent extends StatelessWidget {
                   },
                 );
               },
+              separatorBuilder: (BuildContext context, int index) => 15.height,
             )
-          // Column(
-          //         mainAxisSize: MainAxisSize.min,
-          //         mainAxisAlignment: MainAxisAlignment.center,
-          //         crossAxisAlignment: CrossAxisAlignment.center,
-          //         children: question.questionOptions!.map((QuestionOptions e) => AnswerTileForText(questionOption: e, onAnswerTapped: () {})).toList(),
-          //       )
           : const SizedBox(),
     );
   }
@@ -157,18 +145,6 @@ class AnswerTileForText extends StatelessWidget {
 
   const AnswerTileForText({Key? key, required this.index, required this.onAnswerTapped}) : super(key: key);
 
-  // Decoration getContainerColor(int index) {
-  //   if (!isSelectedOptions[index]) {
-  //     return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
-  //   }
-  //   if (isSelectedOptions[index] && context.watch<MarathonProvider>().currentGapTime > 0) {
-  //     return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
-  //   }
-  //   return MyDecorations.getContainersDecoration(
-  //     isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
-  //   );
-  // }
-
   @override
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
@@ -180,132 +156,13 @@ class AnswerTileForText extends StatelessWidget {
         alignment: Alignment.centerLeft,
         decoration: MyDecorations.getAnswersContainerColor(provider.currentQuestion.questionOptions![index].optionStatus!),
         child: Center(
-          child: Text(
-            AppState().isArabic(context) ? provider.currentQuestion.questionOptions![index].titleAr! : provider.currentQuestion.questionOptions![index].titleEn!,
-            style: TextStyle(
-              color: provider.currentQuestion.questionOptions![index].optionStatus == QuestionsOptionStatus.unSelected ? MyColors.darkTextColor : MyColors.white,
-              fontWeight: FontWeight.w600,
-              fontSize: 16,
-            ),
-          ).paddingOnly(top: 17, bottom: 17),
+          child: (AppState().isArabic(context) ? provider.currentQuestion.questionOptions![index].titleAr! : provider.currentQuestion.questionOptions![index].titleEn!)
+              .toText16(
+                color: provider.currentQuestion.questionOptions![index].optionStatus == QuestionsOptionStatus.unSelected ? MyColors.darkTextColor : MyColors.white,
+              )
+              .paddingOnly(top: 17, bottom: 17),
         ),
       ),
-    ).paddingOnly(top: 8, bottom: 8);
+    );
   }
 }
-
-// InkWell(
-//   onTap: () {
-//     if (widget.provider.currentQuestionNumber == 9) {
-//       widget.provider.cancelTimer();
-//       widget.provider.resetValues();
-//       Navigator.pushReplacementNamed(
-//         context,
-//         AppRoutes.marathonWinnerSelection,
-//       );
-//       return;
-//     }
-//     updateOption(0, true);
-//   },
-//   child: Container(
-//     alignment: Alignment.centerLeft,
-//     decoration: getContainerColor(0),
-//     child: Center(
-//       child: Text(
-//         widget.question.questionOptions![0].titleEn!,
-//         style: TextStyle(
-//           color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
-//           fontWeight: FontWeight.w600,
-//           fontSize: 16,
-//         ),
-//       ).paddingOnly(top: 17, bottom: 17),
-//     ),
-//   ),
-// ),
-// const SizedBox(height: 15),
-// InkWell(
-//   onTap: () {
-//     if (widget.provider.currentQuestionNumber == 9) {
-//       widget.provider.cancelTimer();
-//       widget.provider.resetValues();
-//       Navigator.pushReplacementNamed(
-//         context,
-//         AppRoutes.marathonWinnerSelection,
-//       );
-//       return;
-//     }
-//     updateOption(1, true);
-//   },
-//   child: Container(
-//     alignment: Alignment.centerLeft,
-//     decoration: getContainerColor(1),
-//     child: Center(
-//       child: Text(
-//         widget.question.questionOptions![1].titleEn!,
-//         style: TextStyle(
-//           color: isSelectedOptions[1] ? MyColors.white : MyColors.darkTextColor,
-//           fontWeight: FontWeight.w600,
-//           fontSize: 16,
-//         ),
-//       ).paddingOnly(top: 17, bottom: 17),
-//     ),
-//   ),
-// ),
-// const SizedBox(height: 15),
-// InkWell(
-//   onTap: () {
-//     if (widget.provider.currentQuestionNumber == 9) {
-//       widget.provider.cancelTimer();
-//       widget.provider.resetValues();
-//       Navigator.pushReplacementNamed(
-//         context,
-//         AppRoutes.marathonWinnerSelection,
-//       );
-//       return;
-//     }
-//     updateOption(2, true);
-//   },
-//   child: Container(
-//     alignment: Alignment.centerLeft,
-//     decoration: getContainerColor(2),
-//     child: Center(
-//       child: Text(
-//         widget.question.questionOptions![2].titleEn!,
-//         style: TextStyle(
-//           color: isSelectedOptions[2] ? MyColors.white : MyColors.darkTextColor,
-//           fontWeight: FontWeight.w600,
-//           fontSize: 16,
-//         ),
-//       ).paddingOnly(top: 17, bottom: 17),
-//     ),
-//   ),
-// ),
-// const SizedBox(height: 15),
-// InkWell(
-//   onTap: () {
-//     if (widget.provider.currentQuestionNumber == 9) {
-//       widget.provider.cancelTimer();
-//       widget.provider.resetValues();
-//       Navigator.pushReplacementNamed(
-//         context,
-//         AppRoutes.marathonWinnerSelection,
-//       );
-//       return;
-//     }
-//     updateOption(3, true);
-//   },
-//   child: Container(
-//     alignment: Alignment.centerLeft,
-//     decoration: getContainerColor(3),
-//     child: Center(
-//       child: Text(
-//         widget.question.questionOptions![3].titleEn!,
-//         style: TextStyle(
-//           color: isSelectedOptions[3] ? MyColors.white : MyColors.darkTextColor,
-//           fontWeight: FontWeight.w600,
-//           fontSize: 16,
-//         ),
-//       ).paddingOnly(top: 17, bottom: 17),
-//     ),
-//   ),
-// ),

lib/ui/marathon/widgets/question_card_builder.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:mohem_flutter_app/models/marathon/question_model.dart';
+
+class QuestionCardBuilder extends StatelessWidget {
+  final WidgetBuilder onQuestion;
+  final WidgetBuilder onCompleted;
+  final WidgetBuilder onWrongAnswer;
+  final WidgetBuilder onCorrectAnswer;
+  final WidgetBuilder onWinner;
+  final WidgetBuilder onSkippedAnswer;
+  final WidgetBuilder onFindingWinner;
+  final QuestionCardStatus questionCardStatus;
+
+  const QuestionCardBuilder({
+    Key? key,
+    required this.onQuestion,
+    required this.onCompleted,
+    required this.onCorrectAnswer,
+    required this.onWinner,
+    required this.onSkippedAnswer,
+    required this.onWrongAnswer,
+    required this.onFindingWinner,
+    required this.questionCardStatus,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    switch (questionCardStatus) {
+      case QuestionCardStatus.question:
+        return onQuestion(context);
+
+      case QuestionCardStatus.wrongAnswer:
+        return onWrongAnswer(context);
+
+      case QuestionCardStatus.correctAnswer:
+        return onCorrectAnswer(context);
+
+      case QuestionCardStatus.completed:
+        return onCompleted(context);
+
+      case QuestionCardStatus.winnerFound:
+        return onWinner(context);
+
+      case QuestionCardStatus.findingWinner:
+        return onFindingWinner(context);
+
+      case QuestionCardStatus.skippedAnswer:
+        return onSkippedAnswer(context);
+    }
+  }
+}