Fetched Questoins and Added Answer Interactivity

lib/api/marathon/marathon_api_client.dart

@@ -129,11 +129,13 @@ class MarathonApiClient {
         logger.i("Error in AddParticipant: $e");
       });
 
+      context.read<MarathonProvider>().addItemToList(ApiConsts.dummyQuestion);
+
       await hubConnection.invoke(
         "SendQuestionToParticipant",
         args: <Object>[
           <String, dynamic>{
-            "marathonId": "9c47d281-c5b5-4b5d-a90a-08dacb8cbdb6",
+            "marathonId": "${AppState().getMarathonProjectId}",
           }
         ],
       ).catchError((e) {
@@ -163,7 +165,7 @@ 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, 0);
+      context.read<MarathonProvider>().addNewQuestionsToTheList(newQuestion);
     }
   }
 

lib/classes/consts.dart

@@ -1,4 +1,3 @@
-import 'package:mohem_flutter_app/models/marathon/question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
 
 class ApiConsts {
@@ -34,40 +33,8 @@ class ApiConsts {
   static String marathonHubConnectionUrl = marathonBaseUrl + "MarathonBroadCast";
 
   //DummyCards for the UI
-  static List<QuestionOptions> questionOptions = <QuestionOptions>[
-    QuestionOptions(
-      id: "id",
-      image: "image",
-      isCorrectOption: true,
-      questionId: "questionId",
-      sequence: 0,
-      titleAr: "titleAr",
-      titleEn: "titleEn",
-    ),
-  ];
 
-  static QuestionModel dummyQuestion = QuestionModel(
+  static CardContent dummyQuestion = const CardContent();
-    id: "id",
-    titleEn: "titleEn",
-    titleAr: "titleAr",
-    marathonId: "marathonId",
-    questionTypeId: 0,
-    questionTime: 0,
-    nextQuestGap: 5,
-    gapType: 0,
-    gapText: "gapText",
-    gapImage: "gapImage",
-    questOptionsLimit: 4,
-    questionOptions: questionOptions,
-  );
-
-  static List<CardContent> dummyQuestions = <CardContent>[
-    CardContent(question: dummyQuestion),
-    CardContent(question: dummyQuestion),
-    CardContent(question: dummyQuestion),
-    CardContent(question: dummyQuestion),
-    CardContent(question: dummyQuestion),
-  ];
 }
 
 class SharedPrefsConsts {

lib/classes/decorations_helper.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
+import 'package:mohem_flutter_app/models/marathon/question_model.dart';
 
 class MyDecorations {
   static Decoration shadowDecoration = BoxDecoration(
@@ -22,4 +23,18 @@ class MyDecorations {
     );
     return answerContainerDecoration;
   }
+
+  static Decoration getAnswersContainerColor(QuestionsOptionStatus questionsOptionStatus) {
+    switch (questionsOptionStatus) {
+      case QuestionsOptionStatus.correct:
+        return getContainersDecoration(MyColors.greenColor);
+      case QuestionsOptionStatus.wrong:
+        return getContainersDecoration(MyColors.redColor);
+
+      case QuestionsOptionStatus.selected:
+        return getContainersDecoration(MyColors.yellowColorII);
+      case QuestionsOptionStatus.unSelected:
+        return getContainersDecoration(MyColors.greyF7Color);
+    }
+  }
 }

lib/models/marathon/question_model.dart

@@ -1,3 +1,5 @@
+enum QuestionsOptionStatus { correct, wrong, selected, unSelected }
+
 class QuestionModel {
   String? id;
   String? titleEn;
@@ -75,6 +77,7 @@ class QuestionOptions {
   int? sequence;
   String? image;
   bool? isCorrectOption;
+  QuestionsOptionStatus? optionStatus;
 
   QuestionOptions({
     String? id,
@@ -84,6 +87,7 @@ class QuestionOptions {
     int? sequence,
     String? image,
     bool? isCorrectOption,
+    QuestionsOptionStatus? optionStatus,
   });
 
   QuestionOptions.fromJson(Map<String, dynamic> json) {
@@ -94,6 +98,9 @@ class QuestionOptions {
     sequence = json['sequence'];
     image = json['image'];
     isCorrectOption = json['isCorrectOption'];
+    optionStatus = QuestionsOptionStatus.unSelected;
+
+
   }
 
   Map<String, dynamic> toJson() {

lib/ui/landing/dashboard_screen.dart

@@ -13,7 +13,6 @@ 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/generated/locale_keys.g.dart';
-import 'package:mohem_flutter_app/main.dart';
 import 'package:mohem_flutter_app/models/offers_and_discounts/get_offers_list.dart';
 import 'package:mohem_flutter_app/provider/dashboard_provider_model.dart';
 import 'package:mohem_flutter_app/ui/landing/widget/app_drawer.dart';
@@ -301,7 +300,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
                           ],
                         ),
                       ],
-                    ).paddingOnly(left: 21, right: 21, top : 7),
+                    ).paddingOnly(left: 21, right: 21, top: 7),
                     context.watch<MarathonProvider>().isLoading ? MarathonBannerShimmer().paddingAll(20) : MarathonBanner().paddingAll(20),
                     ServicesWidget(),
                     // 8.height,
@@ -348,7 +347,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
                             ],
                           ).paddingOnly(left: 21, right: 21),
                           Consumer<DashboardProviderModel>(
-                            builder: (context, model, child) {
+                            builder: (BuildContext context, DashboardProviderModel model, Widget? child) {
                               return SizedBox(
                                 height: 103 + 33,
                                 child: ListView.separated(

lib/ui/marathon/marathon_intro_screen.dart

@@ -220,7 +220,7 @@ class MarathonFooter extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return provider.itsMarathonTime
+    return !provider.itsMarathonTime
         ? DefaultButton(
             LocaleKeys.joinMarathon.tr(),
             () async {
@@ -229,7 +229,7 @@ class MarathonFooter extends StatelessWidget {
                 provider.resetValues();
                 await provider.connectSignalrAndJoinMarathon(context);
               } catch (e, s) {
-                Utils.hideLoading(context);
+                Utils.confirmDialog(context, e.toString());
                 print(s);
               }
               Utils.hideLoading(context);

lib/ui/marathon/marathon_provider.dart

@@ -4,7 +4,6 @@ import 'package:appinio_swiper/appinio_swiper.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:mohem_flutter_app/api/marathon/marathon_api_client.dart';
-import 'package:mohem_flutter_app/classes/consts.dart';
 import 'package:mohem_flutter_app/models/marathon/marathon_model.dart';
 import 'package:mohem_flutter_app/models/marathon/question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
@@ -13,27 +12,35 @@ class MarathonProvider extends ChangeNotifier {
   final AppinioSwiperController swiperController = AppinioSwiperController();
 
   MarathonDetailModel marathonDetailModel = MarathonDetailModel();
-  List<CardContent> cardContentList = <CardContent>[
+  List<CardContent> cardContentList = <CardContent>[];
-    CardContent(question: ApiConsts.dummyQuestion),
+  QuestionModel currentQuestion = QuestionModel();
-    CardContent(question: ApiConsts.dummyQuestion),
-    CardContent(question: ApiConsts.dummyQuestion),
-    CardContent(question: ApiConsts.dummyQuestion),
-    CardContent(question: ApiConsts.dummyQuestion),
-  ];
 
+  int? selectedOptionIndex;
   int currentGapTime = 0;
 
-  void addNewQuestionsToTheList(QuestionModel newQuestion, int index) {
+  void addNewQuestionsToTheList(QuestionModel newQuestion) {
-
+    if (currentQuestionNumber > 0) {
-    //TODO: THIS SHOULD NOT SWIPE THE CARD ON THE FIRST TRIGGER
+      swipeCardLeft();
-    swipeCardLeft();
+    }
-    cardContentList.add(CardContent(question: newQuestion));
+    currentQuestionNumber++;
+    currentQuestion = newQuestion;
+    cardContentList.add(const CardContent());
     currentGapTime = newQuestion.nextQuestGap!;
+
+    notifyListeners();
+  }
+
+  void addItemToList(CardContent value) {
+    cardContentList.add(value);
     notifyListeners();
   }
 
-  void removeQuestionFromTheList(int index) {
+  void updateCurrentQuestionOptionStatus(QuestionsOptionStatus status, int index) {
-    cardContentList.removeAt(index);
+    for (int i = 0; i < currentQuestion.questionOptions!.length; i++) {
+      currentQuestion.questionOptions![i].optionStatus = QuestionsOptionStatus.unSelected;
+    }
+    currentQuestion.questionOptions![index].optionStatus = status;
+    selectedOptionIndex = index;
     notifyListeners();
   }
 
@@ -84,10 +91,19 @@ class MarathonProvider extends ChangeNotifier {
 
   void swipeCardLeft() {
     swiperController.swipeLeft();
-    currentQuestionNumber++;
     notifyListeners();
   }
 
+  void getCorrectAnswerAndUpdateUI() {
+    if (selectedOptionIndex != null) {
+      if (currentQuestion.questionOptions![selectedOptionIndex!].isCorrectOption!) {
+        updateCurrentQuestionOptionStatus(QuestionsOptionStatus.correct, selectedOptionIndex!);
+      } else {
+        updateCurrentQuestionOptionStatus(QuestionsOptionStatus.wrong, selectedOptionIndex!);
+      }
+    }
+  }
+
   Timer timerU = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
 
   void startTimer(BuildContext context) {
@@ -95,6 +111,9 @@ class MarathonProvider extends ChangeNotifier {
     timerU = Timer.periodic(
       oneSec,
       (Timer timer) async {
+        if (currentGapTime == 2) {
+          getCorrectAnswerAndUpdateUI();
+        }
         if (currentGapTime == 0) {
           // if (currentQuestionNumber == 9) {
           //   timer.cancel();
@@ -122,6 +141,8 @@ class MarathonProvider extends ChangeNotifier {
     cardContentList.clear();
     timerU.cancel();
     _isMarathonCompleted = false;
+    currentGapTime = 0;
+    currentQuestion = QuestionModel();
     notifyListeners();
   }
 

lib/ui/marathon/marathon_screen.dart

@@ -117,7 +117,7 @@ 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(),
@@ -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),
             ],
           ),
         ],

lib/ui/marathon/widgets/marathon_banner.dart

@@ -21,142 +21,166 @@ class MarathonBanner extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     MarathonProvider provider = context.read<MarathonProvider>();
-    return Container(
+    return provider.marathonDetailModel.startTime != null
-      decoration: MyDecorations.shadowDecoration,
+        ? Container(
-      height: MediaQuery.of(context).size.height * 0.11,
+            decoration: MyDecorations.shadowDecoration,
-      clipBehavior: Clip.antiAlias,
+            height: MediaQuery.of(context).size.height * 0.11,
-      child: Stack(
+            clipBehavior: Clip.antiAlias,
-        children: [
+            child: Stack(
-          Transform(
-            alignment: Alignment.center,
-            transform: Matrix4.rotationY(
-              AppState().isArabic(context) ? math.pi : 0,
-            ),
-            child: SvgPicture.asset(
-              "assets/images/marathon_banner_bg.svg",
-              fit: BoxFit.fill,
-              width: double.infinity,
-            ),
-          ),
-          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,
-            child: Row(
               children: [
-                const Expanded(
+                Transform(
-                  flex: 3,
+                  alignment: Alignment.center,
-                  child: SizedBox(
+                  transform: Matrix4.rotationY(
+                    AppState().isArabic(context) ? math.pi : 0,
+                  ),
+                  child: SvgPicture.asset(
+                    "assets/images/marathon_banner_bg.svg",
+                    fit: BoxFit.fill,
                     width: double.infinity,
-                    height: double.infinity,
                   ),
                 ),
-                Expanded(
+                Positioned(
-                  flex: 5,
+                  left: -20,
-                  child: SizedBox(
+                  top: -10,
-                    width: double.infinity,
+                  child: Transform.rotate(
-                    height: double.infinity,
+                    angle: 15,
-                    child: Row(
+                    child: Container(
-                      mainAxisAlignment: MainAxisAlignment.start,
+                      width: 65,
-                      children: <Widget>[
+                      height: 32,
-                        Column(
+                      color: MyColors.darkDigitColor,
-                          mainAxisAlignment: MainAxisAlignment.center,
+                    ),
-                          crossAxisAlignment: CrossAxisAlignment.start,
+                  ),
-                          mainAxisSize: MainAxisSize.min,
+                ),
-                          children: <Widget>[
+                SizedBox(
-                            AppState().isArabic(context) ? 0.height : 5.height,
+                  width: double.infinity,
-                            AutoSizeText(
+                  height: double.infinity,
-                              LocaleKeys.getReadyForContest.tr(),
+                  child: Row(
-                              minFontSize: 08,
+                    children: [
-                              maxFontSize: 11,
+                      const Expanded(
-                              style: TextStyle(
+                        flex: 3,
-                                fontStyle: FontStyle.italic,
+                        child: SizedBox(
-                                fontWeight: FontWeight.w600,
+                          width: double.infinity,
-                                color: MyColors.white.withOpacity(0.83),
+                          height: double.infinity,
-                                letterSpacing: -0.4,
+                        ),
+                      ),
+                      Expanded(
+                        flex: 5,
+                        child: SizedBox(
+                          width: double.infinity,
+                          height: double.infinity,
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.start,
+                            children: <Widget>[
+                              Column(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                mainAxisSize: MainAxisSize.min,
+                                children: <Widget>[
+                                  AppState().isArabic(context) ? 0.height : 5.height,
+                                  AutoSizeText(
+                                    LocaleKeys.getReadyForContest.tr(),
+                                    minFontSize: 08,
+                                    maxFontSize: 11,
+                                    style: TextStyle(
+                                      fontStyle: FontStyle.italic,
+                                      fontWeight: FontWeight.w600,
+                                      color: MyColors.white.withOpacity(0.83),
+                                      letterSpacing: -0.4,
+                                    ),
+                                  ),
+                                  AutoSizeText(
+                                    AppState().isArabic(context) ? provider.marathonDetailModel.titleAr ?? "" : provider.marathonDetailModel.titleEn ?? "",
+                                    style: TextStyle(
+                                      fontStyle: FontStyle.italic,
+                                      fontSize: 19,
+                                      fontWeight: FontWeight.bold,
+                                      color: MyColors.white.withOpacity(0.83),
+                                      height: 32 / 22,
+                                    ),
+                                  ),
+                                  3.height,
+                                  BuildCountdownTimer(
+                                    timeToMarathon: DateTime.parse(provider.marathonDetailModel.startTime!).millisecondsSinceEpoch,
+                                    provider: provider,
+                                    screenFlag: 0,
+                                  ),
+                                ],
+                              ).paddingOnly(
+                                left: AppState().isArabic(context) ? 12 : 3,
+                                right: AppState().isArabic(context) ? 3 : 12,
+                              )
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                AppState().isArabic(context)
+                    ? Align(
+                        alignment: Alignment.topRight,
+                        child: SizedBox(
+                          height: 20,
+                          width: 35,
+                          child: Transform.rotate(
+                            angle: math.pi / 4.5,
+                            child: Text(
+                              LocaleKeys.brainMarathon.tr(),
+                              textAlign: TextAlign.center,
+                              maxLines: 2,
+                              style: const TextStyle(
+                                color: MyColors.black,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 6,
+                                height: 1.2,
                               ),
                             ),
-                            AutoSizeText(
+                          ),
-                              AppState().isArabic(context) ? provider.marathonDetailModel.titleAr ?? "" : provider.marathonDetailModel.titleEn ?? "",
+                        ),
-                              style: TextStyle(
+                      ).paddingOnly(top: 5)
-                                fontStyle: FontStyle.italic,
+                    : Align(
-                                fontSize: 19,
+                        alignment: Alignment.topLeft,
+                        child: SizedBox(
+                          height: 20,
+                          width: 35,
+                          child: Transform.rotate(
+                            angle: -math.pi / 4.5,
+                            child: Text(
+                              LocaleKeys.brainMarathon.tr(),
+                              textAlign: TextAlign.center,
+                              maxLines: 2,
+                              style: const TextStyle(
+                                color: MyColors.kWhiteColor,
                                 fontWeight: FontWeight.bold,
-                                color: MyColors.white.withOpacity(0.83),
+                                fontSize: 6,
-                                height: 32 / 22,
+                                height: 1.2,
                               ),
                             ),
-                            3.height,
+                          ),
-                            BuildCountdownTimer(
+                        ),
-                              timeToMarathon: DateTime.parse(provider.marathonDetailModel.startTime!).millisecondsSinceEpoch,
+                      ).paddingOnly(top: 5),
-                              provider: provider,
+                !AppState().isArabic(context)
-                              screenFlag: 0,
+                    ? Positioned(
-                            ),
+                        right: 0,
-                          ],
+                        bottom: 0,
-                        ).paddingOnly(
+                        child: RotatedBox(
-                          left: AppState().isArabic(context) ? 12 : 3,
+                          quarterTurns: 4,
-                          right: AppState().isArabic(context) ? 3 : 12,
+                          child: SvgPicture.asset("assets/images/arrow_next.svg", color: MyColors.whiteColor),
-                        )
+                        ).paddingAll(15),
-                      ],
+                      )
-                    ),
+                    : Positioned(
-                  ),
+                        bottom: 0,
-                ),
+                        left: 0,
+                        child: RotatedBox(
+                          quarterTurns: 2,
+                          child: SvgPicture.asset("assets/images/arrow_next.svg", color: MyColors.whiteColor),
+                        ).paddingAll(15),
+                      ),
               ],
+            ).onPress(
+              () => Navigator.pushNamed(context, AppRoutes.marathonIntroScreen),
             ),
-          ),
+          )
-          Align(
+        : const SizedBox();
-            alignment: Alignment.topLeft,
-            child: SizedBox(
-              height: 20,
-              width: 35,
-              child: Transform.rotate(
-                angle: -math.pi / 4.5,
-                child: Text(
-                  LocaleKeys.brainMarathon.tr(),
-                  textAlign: TextAlign.center,
-                  maxLines: 2,
-                  style: const TextStyle(
-                    color: MyColors.kWhiteColor,
-                    fontWeight: FontWeight.bold,
-                    fontSize: 6,
-                    height: 1.2,
-                  ),
-                ),
-              ),
-            ),
-          ).paddingOnly(top: 5),
-          !AppState().isArabic(context)
-              ? Positioned(
-                  right: 0,
-                  bottom: 0,
-                  child: RotatedBox(
-                    quarterTurns: 4,
-                    child: SvgPicture.asset("assets/images/arrow_next.svg", color: MyColors.whiteColor),
-                  ).paddingAll(15),
-                )
-              : Positioned(
-                  bottom: 0,
-                  left: 0,
-                  child: RotatedBox(
-                    quarterTurns: 2,
-                    child: SvgPicture.asset("assets/images/arrow_next.svg", color: MyColors.whiteColor),
-                  ).paddingAll(15),
-                ),
-        ],
-      ).onPress(
-        () => Navigator.pushNamed(context, AppRoutes.marathonIntroScreen),
-      ),
-    );
   }
 }

lib/ui/marathon/widgets/question_card.dart

@@ -1,9 +1,11 @@
 import 'package:appinio_swiper/appinio_swiper.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
 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/widget_extensions.dart';
 import 'package:mohem_flutter_app/models/marathon/question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
@@ -24,36 +26,35 @@ class QuestionCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
-      child: SizedBox(
+      child: provider.cardContentList.isEmpty
-        height: 440,
+          ? Lottie.asset(MyLottieConsts.hourGlassLottie, height: 250).paddingOnly(top: 50)
-        width: double.infinity,
+          : SizedBox(
-        child: Consumer<MarathonProvider>(
+              height: 440,
-          builder: (BuildContext context, MarathonProvider provider, _) {
+              width: double.infinity,
-            return AppinioSwiper(
+              child: Consumer<MarathonProvider>(
-              padding: EdgeInsets.zero,
+                builder: (BuildContext context, MarathonProvider provider, _) {
-              isDisabled: true,
+                  return AppinioSwiper(
-              controller: provider.swiperController,
+                    duration: const Duration(milliseconds: 400),
-              unswipe: (int index, AppinioSwiperDirection direction) {},
+                    padding: EdgeInsets.zero,
-              onSwipe: (int index, AppinioSwiperDirection direction) {
+                    isDisabled: true,
-                print("here is the length: ${provider.cardContentList.length} and index : $index");
+                    controller: provider.swiperController,
-              },
+                    unswipe: (int index, AppinioSwiperDirection direction) {},
-
+                    onSwipe: (int index, AppinioSwiperDirection direction) {},
-              cards: provider.cardContentList,
+                    cards: provider.cardContentList,
-            );
+                  );
-          },
+                },
-        ),
+              ),
-      ),
+            ),
     );
   }
 }
 
 class CardContent extends StatelessWidget {
-  final QuestionModel question;
+  const CardContent({Key? key}) : super(key: key);
-
-  const CardContent({Key? key, required this.question}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    MarathonProvider provider = context.watch<MarathonProvider>();
     return Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
@@ -92,7 +93,7 @@ class CardContent extends StatelessWidget {
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 13),
                 child: Text(
-                  AppState().isArabic(context) ? question.titleAr ?? "" : question.titleEn ?? "",
+                  AppState().isArabic(context) ? provider.currentQuestion.titleAr ?? "" : provider.currentQuestion.titleEn ?? "",
                   style: const TextStyle(
                     color: MyColors.white,
                     fontSize: 16,
@@ -102,48 +103,21 @@ class CardContent extends StatelessWidget {
               ),
             ),
           ),
-          AnswerContent(question: question),
+          const AnswerContent(),
         ],
       ),
     );
   }
 }
 
-class AnswerContent extends StatefulWidget {
+class AnswerContent extends StatelessWidget {
-  final QuestionModel question;
+  const AnswerContent({Key? key}) : super(key: key);
 
-  const AnswerContent({Key? key, required this.question}) : super(key: key);
+  void onAnswerTapped(BuildContext context, QuestionOptions questionOption) {}
-
-  @override
-  State<AnswerContent> createState() => _AnswerContentState();
-}
-
-class _AnswerContentState extends State<AnswerContent> {
-  // void updateOption(int index, bool value) {
-  //   isSelectedOptions[0] = false;
-  //   isSelectedOptions[1] = false;
-  //   isSelectedOptions[2] = false;
-  //   isSelectedOptions[3] = false;
-  //   isSelectedOptions[index] = value;
-  //   setState(() {});
-  // }
-  //
-  // 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>();
     return Container(
       padding: const EdgeInsets.all(13),
       decoration: const BoxDecoration(
@@ -153,23 +127,35 @@ class _AnswerContentState extends State<AnswerContent> {
           bottomRight: Radius.circular(10),
         ),
       ),
-      child: widget.question.questionOptions != null
+      child: provider.currentQuestion.questionOptions != null
-          ? Column(
+          ? ListView.builder(
-              mainAxisSize: MainAxisSize.min,
+              itemCount: provider.currentQuestion.questionOptions!.length,
-              mainAxisAlignment: MainAxisAlignment.center,
+              shrinkWrap: true,
-              crossAxisAlignment: CrossAxisAlignment.center,
+              itemBuilder: (BuildContext context, int index) {
-              children: widget.question.questionOptions!.map((QuestionOptions e) => AnswerTileForText(questionOption: e, onAnswerTapped: () {})).toList(),
+                return AnswerTileForText(
+                  index: index,
+                  onAnswerTapped: () {
+                    provider.updateCurrentQuestionOptionStatus(QuestionsOptionStatus.selected, index);
+                  },
+                );
+              },
             )
+          // Column(
+          //         mainAxisSize: MainAxisSize.min,
+          //         mainAxisAlignment: MainAxisAlignment.center,
+          //         crossAxisAlignment: CrossAxisAlignment.center,
+          //         children: question.questionOptions!.map((QuestionOptions e) => AnswerTileForText(questionOption: e, onAnswerTapped: () {})).toList(),
+          //       )
           : const SizedBox(),
     );
   }
 }
 
 class AnswerTileForText extends StatelessWidget {
-  final QuestionOptions questionOption;
+  final int index;
   final Function() onAnswerTapped;
 
-  const AnswerTileForText({Key? key, required this.questionOption, required this.onAnswerTapped}) : super(key: key);
+  const AnswerTileForText({Key? key, required this.index, required this.onAnswerTapped}) : super(key: key);
 
   // Decoration getContainerColor(int index) {
   //   if (!isSelectedOptions[index]) {
@@ -185,18 +171,19 @@ class AnswerTileForText extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    MarathonProvider provider = context.watch<MarathonProvider>();
     return InkWell(
       onTap: () {
         onAnswerTapped();
       },
       child: Container(
         alignment: Alignment.centerLeft,
-        decoration: MyDecorations.getContainersDecoration(MyColors.greyF7Color),
+        decoration: MyDecorations.getAnswersContainerColor(provider.currentQuestion.questionOptions![index].optionStatus!),
         child: Center(
           child: Text(
-            questionOption.titleEn!,
+            AppState().isArabic(context) ? provider.currentQuestion.questionOptions![index].titleAr! : provider.currentQuestion.questionOptions![index].titleEn!,
             style: TextStyle(
-              color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
+              color: provider.currentQuestion.questionOptions![index].optionStatus == QuestionsOptionStatus.unSelected ? MyColors.darkTextColor : MyColors.white,
               fontWeight: FontWeight.w600,
               fontSize: 16,
             ),