Questions Fetching process in Progress

lib/api/marathon/marathon_api_client.dart

@@ -1,5 +1,6 @@
 import 'dart:convert';
 
+import 'package:flutter/material.dart';
 import 'package:http/http.dart';
 import 'package:logger/logger.dart' as L;
 import 'package:logging/logging.dart';
@@ -8,6 +9,9 @@ import 'package:mohem_flutter_app/app_state/app_state.dart';
 import 'package:mohem_flutter_app/classes/consts.dart';
 import 'package:mohem_flutter_app/models/marathon/marathon_generic_model.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/marathon_provider.dart';
+import 'package:provider/provider.dart';
 import 'package:signalr_netcore/http_connection_options.dart';
 import 'package:signalr_netcore/hub_connection.dart';
 import 'package:signalr_netcore/hub_connection_builder.dart';
@@ -79,7 +83,7 @@ class MarathonApiClient {
   late HubConnection hubConnection;
   L.Logger logger = L.Logger();
 
-  Future<void> buildHubConnection() async {
+  Future<void> buildHubConnection(BuildContext context) async {
     HttpConnectionOptions httpOptions = HttpConnectionOptions(skipNegotiation: false, logMessageContent: true);
     hubConnection = HubConnectionBuilder()
         .withUrl(
@@ -125,7 +129,6 @@ class MarathonApiClient {
         logger.i("Error in AddParticipant: $e");
       });
 
-      logger.i("MarathonId: ${AppState().getMarathonProjectId}");
       await hubConnection.invoke(
         "SendQuestionToParticipant",
         args: <Object>[
@@ -138,16 +141,33 @@ class MarathonApiClient {
       });
 
       try {
-        hubConnection.on("OnSendQuestionToParticipant", onSendQuestionToParticipant);
+        hubConnection.on("OnSendQuestionToParticipant", (List<Object?>? arguments) {
+          onSendQuestionToParticipant(arguments, context);
+        });
       } catch (e, s) {
-        logger.i("s");
+        logger.i("Error in OnSendQuestionToParticipant");
+      }
+
+      try {
+        hubConnection.on("OnParticipantJoin", onParticipantJoin);
+      } catch (e, s) {
+        logger.i("Error in OnParticipantJoin");
       }
     }
   }
 
-  Future<void> onSendQuestionToParticipant(List<Object?>? arguments) async {
+  Future<void> onSendQuestionToParticipant(List<Object?>? arguments, BuildContext context) async {
-    print("arguments: $arguments");
+    logger.i("onSendQuestionToParticipant arguments: $arguments");
+
+    if (arguments != null) {
+      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);
+    }
+  }
 
-    logger.i(arguments);
+  Future<void> onParticipantJoin(List<Object?>? arguments) async {
+    logger.i("OnParticipantJoin arguments: $arguments");
   }
 }

lib/classes/consts.dart

@@ -1,3 +1,6 @@
+import 'package:mohem_flutter_app/models/marathon/question_model.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
+
 class ApiConsts {
   //static String baseUrl = "http://10.200.204.20:2801/"; // Local server
   static String baseUrl = "https://uat.hmgwebservices.com"; // UAT server
@@ -23,13 +26,48 @@ class ApiConsts {
 // 42062 is CurrentUserID and 36745 is targetUserID and 0 is For Pagination
 // static String chatSearchMember = "https://apiderichat.hmg.com/api/user/getUserWithStatusAndFavAsync/aamir.muhammad/36239";
 
-//Brain Marathon Constants
+  //Brain Marathon Constants
-
   static String marathonBaseUrl = "https://18.188.181.12/service/";
   static String marathonParticipantLoginUrl = marathonBaseUrl + "api/auth/participantlogin";
   static String marathonProjectGetUrl = marathonBaseUrl + "api/Project/Project_Get";
   static String marathonUpcomingUrl = marathonBaseUrl + "api/marathon/upcoming/";
   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(
+    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/models/marathon/marathon_model.dart

@@ -15,6 +15,7 @@ class MarathonDetailModel {
   Projects? projects;
   List<Sponsors>? sponsors;
   List<Questions>? questions;
+  int? totalQuestions;
 
   MarathonDetailModel(
       {id,
@@ -32,7 +33,8 @@ class MarathonDetailModel {
         selectedLanguage,
         projects,
         sponsors,
-        questions});
+        questions,
+        totalQuestions});
 
   MarathonDetailModel.fromJson(Map<String, dynamic> json) {
     id = json['id'];
@@ -63,6 +65,7 @@ class MarathonDetailModel {
         questions!.add( Questions.fromJson(v));
       });
     }
+    totalQuestions = json["totalQuestions"];
   }
 
   Map<String, dynamic> toJson() {
@@ -89,6 +92,8 @@ class MarathonDetailModel {
     if (questions != null) {
       data['questions'] = questions!.map((v) => v.toJson()).toList();
     }
+    data['totalQuestions'] = totalQuestions;
+
     return data;
   }
 }

lib/models/marathon/question_model.dart

@@ -12,19 +12,20 @@ class QuestionModel {
   int? questOptionsLimit;
   List<QuestionOptions>? questionOptions;
 
-  QuestionModel(
+  QuestionModel({
-      {id,
+    String? id,
-        titleEn,
+    String? titleEn,
-        titleAr,
+    String? titleAr,
-        marathonId,
+    String? marathonId,
-        questionTypeId,
+    int? questionTypeId,
-        questionTime,
+    int? questionTime,
-        nextQuestGap,
+    int? nextQuestGap,
-        gapType,
+    int? gapType,
-        gapText,
+    String? gapText,
-        gapImage,
+    String? gapImage,
-        questOptionsLimit,
+    int? questOptionsLimit,
-        questionOptions});
+    List<QuestionOptions>? questionOptions,
+  });
 
   QuestionModel.fromJson(Map<String, dynamic> json) {
     id = json['id'];
@@ -41,13 +42,13 @@ class QuestionModel {
     if (json['questionOptions'] != null) {
       questionOptions = <QuestionOptions>[];
       json['questionOptions'].forEach((v) {
-        questionOptions!.add( QuestionOptions.fromJson(v));
+        questionOptions!.add(QuestionOptions.fromJson(v));
       });
     }
   }
 
   Map<String, dynamic> toJson() {
-     Map<String, dynamic> data =  <String, dynamic>{};
+    Map<String, dynamic> data = <String, dynamic>{};
     data['id'] = id;
     data['titleEn'] = titleEn;
     data['titleAr'] = titleAr;
@@ -60,8 +61,7 @@ class QuestionModel {
     data['gapImage'] = gapImage;
     data['questOptionsLimit'] = questOptionsLimit;
     if (questionOptions != null) {
-      data['questionOptions'] =
+      data['questionOptions'] = questionOptions!.map((v) => v.toJson()).toList();
-          questionOptions!.map((v) => v.toJson()).toList();
     }
     return data;
   }
@@ -76,14 +76,15 @@ class QuestionOptions {
   String? image;
   bool? isCorrectOption;
 
-  QuestionOptions(
+  QuestionOptions({
-      {id,
+    String? id,
-        titleEn,
+    String? titleEn,
-        titleAr,
+    String? titleAr,
-        questionId,
+    String? questionId,
-        sequence,
+    int? sequence,
-        image,
+    String? image,
-        isCorrectOption});
+    bool? isCorrectOption,
+  });
 
   QuestionOptions.fromJson(Map<String, dynamic> json) {
     id = json['id'];

lib/ui/login/login_screen.dart

@@ -143,7 +143,7 @@ class _LoginScreenState extends State<LoginScreen> {
       if (!kReleaseMode) {
         // username.text = "15444"; // Maha User
         username.text = "15153"; // Tamer User
-        password.text = "Abcd@12345";
+        password.text = "Abcd@1234";
 
         // username.text = "206535"; // Hashim User
         // password.text = "Namira786";

lib/ui/marathon/marathon_intro_screen.dart

@@ -6,6 +6,8 @@ import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/date_uitl.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
 import 'package:mohem_flutter_app/classes/lottie_consts.dart';
+import 'package:mohem_flutter_app/classes/utils.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';
@@ -219,10 +221,21 @@ class MarathonFooter extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return provider.itsMarathonTime
-        ? DefaultButton(LocaleKeys.joinMarathon.tr(), () {
+        ? DefaultButton(
-            provider.connectSignalrAndJoinMarathon();
+            LocaleKeys.joinMarathon.tr(),
-            // Navigator.pushNamed(context, AppRoutes.marathonScreen);
+            () async {
-          }, ).insideContainer
+              Utils.showLoading(context);
+              try {
+                provider.resetValues();
+                await provider.connectSignalrAndJoinMarathon(context);
+              } catch (e, s) {
+                Utils.hideLoading(context);
+                print(s);
+              }
+              Utils.hideLoading(context);
+              Navigator.pushNamed(context, AppRoutes.marathonScreen);
+            },
+          ).insideContainer
         : Container(
             color: Colors.white,
             child: Column(
@@ -232,7 +245,7 @@ class MarathonFooter extends StatelessWidget {
                 DefaultButton(
                   LocaleKeys.joinDemoMarathon.tr(),
                   () {
-                    provider.connectSignalrAndJoinMarathon();
+                    provider.connectSignalrAndJoinMarathon(context);
                   },
                   color: MyColors.yellowColorII,
                 ).insideContainer,

lib/ui/marathon/marathon_provider.dart

@@ -4,11 +4,39 @@ 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/config/routes.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';
 
 class MarathonProvider extends ChangeNotifier {
+  final AppinioSwiperController swiperController = AppinioSwiperController();
+
+  MarathonDetailModel marathonDetailModel = MarathonDetailModel();
+  List<CardContent> cardContentList = <CardContent>[
+    CardContent(question: ApiConsts.dummyQuestion),
+    CardContent(question: ApiConsts.dummyQuestion),
+    CardContent(question: ApiConsts.dummyQuestion),
+    CardContent(question: ApiConsts.dummyQuestion),
+    CardContent(question: ApiConsts.dummyQuestion),
+  ];
+
+  int currentGapTime = 0;
+
+  void addNewQuestionsToTheList(QuestionModel newQuestion, int index) {
+
+    //TODO: THIS SHOULD NOT SWIPE THE CARD ON THE FIRST TRIGGER
+    swipeCardLeft();
+    cardContentList.add(CardContent(question: newQuestion));
+    currentGapTime = newQuestion.nextQuestGap!;
+    notifyListeners();
+  }
+
+  void removeQuestionFromTheList(int index) {
+    cardContentList.removeAt(index);
+    notifyListeners();
+  }
+
   bool _isLoading = false;
 
   bool get isLoading => _isLoading;
@@ -18,10 +46,6 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
-  MarathonDetailModel marathonDetailModel = MarathonDetailModel();
-
-  final AppinioSwiperController swiperController = AppinioSwiperController();
-
   bool _itsMarathonTime = false;
 
   bool get itsMarathonTime => _itsMarathonTime;
@@ -40,14 +64,7 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
-  void swipeCardLeft() {
+  int _currentQuestionNumber = 0;
-    currentQuestionNumber = currentQuestionNumber + 1;
-    swiperController.swipeLeft();
-    notifyListeners();
-  }
-
-  int _currentQuestionNumber = 1;
-  final int totalQuestions = 10;
 
   int get currentQuestionNumber => _currentQuestionNumber;
 
@@ -56,44 +73,44 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
-  void resetAll() {
+  int _totalMarathoners = 23;
-    isSelectedOptions[0] = false;
+
-    isSelectedOptions[1] = false;
+  int get totalMarathoners => _totalMarathoners;
-    isSelectedOptions[2] = false;
+
-    isSelectedOptions[3] = false;
+  set totalMarathoners(int value) {
+    _totalMarathoners = value;
+    notifyListeners();
+  }
+
+  void swipeCardLeft() {
+    swiperController.swipeLeft();
+    currentQuestionNumber++;
+    notifyListeners();
   }
 
   Timer timerU = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
-  int start = 8;
 
   void startTimer(BuildContext context) {
-    start = 8;
     const Duration oneSec = Duration(seconds: 1);
     timerU = Timer.periodic(
       oneSec,
       (Timer timer) async {
-        if (start == 0) {
+        if (currentGapTime == 0) {
-          if (currentQuestionNumber == 9) {
+          // if (currentQuestionNumber == 9) {
-            timer.cancel();
+          //   timer.cancel();
-            cancelTimer();
+          //   cancelTimer();
-            isMarathonCompleted = true;
+          //   isMarathonCompleted = true;
-            await Future<dynamic>.delayed(const Duration(seconds: 3)).whenComplete(
+          //   await Future<dynamic>.delayed(const Duration(seconds: 3)).whenComplete(
-              () => Navigator.pushReplacementNamed(
+          //     () => Navigator.pushReplacementNamed(context, AppRoutes.marathonWinnerSelection),
-                context,
+          //   );
-                AppRoutes.marathonWinnerSelection,
+          //
-              ),
+          //   resetValues();
-            );
+          //
-
+          //   return;
-            resetValues();
+          // }
-
+          // timer.cancel();
-            return;
-          }
-          resetAll();
-          timer.cancel();
-          cancelTimer();
-          swipeCardLeft();
         } else {
-          start--;
+          currentGapTime--;
         }
         notifyListeners();
       },
@@ -101,9 +118,10 @@ class MarathonProvider extends ChangeNotifier {
   }
 
   void resetValues() {
+    _currentQuestionNumber = 0;
+    cardContentList.clear();
     timerU.cancel();
     _isMarathonCompleted = false;
-    _currentQuestionNumber = 1;
     notifyListeners();
   }
 
@@ -122,9 +140,7 @@ class MarathonProvider extends ChangeNotifier {
     });
   }
 
-  Future<void> connectSignalrAndJoinMarathon() async {
+  Future<void> connectSignalrAndJoinMarathon(BuildContext context) async {
-    await MarathonApiClient().buildHubConnection();
+    await MarathonApiClient().buildHubConnection(context);
-
   }
-
 }

lib/ui/marathon/marathon_screen.dart

@@ -25,49 +25,54 @@ class MarathonScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
-    return Scaffold(
+    return WillPopScope(
-      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
+        child: Scaffold(
-      body: SingleChildScrollView(
+          appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
-        child: Column(
+          body: SingleChildScrollView(
-          children: <Widget>[
+            child: Column(
-            20.height,
+              children: <Widget>[
-            MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
+                20.height,
-            if (provider.isMarathonCompleted)
+                MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
-              InkWell(
+                if (provider.isMarathonCompleted)
-                onTap: () {
+                  InkWell(
-                  Navigator.pushReplacementNamed(
+                    onTap: () {
-                    context,
+                      Navigator.pushReplacementNamed(
-                    AppRoutes.marathonWinnerSelection,
+                        context,
-                  );
+                        AppRoutes.marathonWinnerSelection,
-                },
+                      );
-                child: CustomStatusWidget(
+                    },
-                  asset: Lottie.asset(
+                    child: CustomStatusWidget(
-                    MyLottieConsts.allQuestions,
+                      asset: Lottie.asset(
-                    height: 200,
+                        MyLottieConsts.allQuestions,
-                  ),
+                        height: 200,
-                  title: Text(
+                      ),
-                    LocaleKeys.congrats.tr(),
+                      title: Text(
-                    style: const TextStyle(
+                        LocaleKeys.congrats.tr(),
-                      height: 23 / 24,
+                        style: const TextStyle(
-                      color: MyColors.greenColor,
+                          height: 23 / 24,
-                      fontSize: 27,
+                          color: MyColors.greenColor,
-                      letterSpacing: -1,
+                          fontSize: 27,
-                      fontWeight: FontWeight.w600,
+                          letterSpacing: -1,
-                    ),
+                          fontWeight: FontWeight.w600,
-                  ),
+                        ),
-                  subTitle: Text(
+                      ),
-                    LocaleKeys.allQuestionsCorrect.tr(),
+                      subTitle: Text(
-                    textAlign: TextAlign.center,
+                        LocaleKeys.allQuestionsCorrect.tr(),
-                    style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: MyColors.darkTextColor, letterSpacing: -1.08),
+                        textAlign: TextAlign.center,
-                  ),
+                        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: MyColors.darkTextColor, letterSpacing: -1.08),
-                ).paddingOnly(top: 12, left: 21, right: 21),
+                      ),
-              )
+                    ).paddingOnly(top: 12, left: 21, right: 21),
-            else
+                  )
-              QuestionCard(provider: provider).paddingOnly(top: 12, left: 21, right: 21),
+                else
-          ],
+                  QuestionCard(provider: provider).paddingOnly(top: 12, left: 21, right: 21),
+              ],
+            ),
+          ),
         ),
-      ),
+        onWillPop: () {
-    );
+          provider.resetValues();
+          return Future<bool>.value(true);
+        });
   }
 }
 
@@ -91,7 +96,6 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
 
   @override
   void dispose() {
-    widget.provider.cancelTimer();
     super.dispose();
   }
 
@@ -113,10 +117,11 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
                   borderRadius: BorderRadius.circular(5),
                 ),
                 padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
-                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.totalQuestions.toString()}  ${LocaleKeys.question.tr()}".toText12(color: MyColors.white),
+                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.marathonDetailModel.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
+                    .toText12(color: MyColors.white),
               ),
-              "23 ${LocaleKeys.marathoners.tr()}".toText14(),
+              "${widget.provider.totalMarathoners} ${LocaleKeys.marathoners.tr()}".toText14(),
-              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}".toText18(),
+              "00:${widget.provider.currentGapTime < 10 ? "0${widget.provider.currentGapTime}" : widget.provider.currentGapTime}".toText18(),
             ],
           ),
           15.height,
@@ -144,7 +149,7 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
           12.height,
           Row(
             children: <Widget>[
-              "${widget.provider.currentQuestionNumber * 10}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
+              "${((widget.provider.currentQuestionNumber / widget.provider.marathonDetailModel.totalQuestions!) * 100).toInt()}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
             ],
           ),
         ],

lib/ui/marathon/marathon_winner_selection.dart

@@ -108,14 +108,14 @@ class _QualifiersContainerState extends State<QualifiersContainer> {
   @override
   void initState() {
     scheduleMicrotask(() {
-      widget.provider.startTimer(context);
+      // widget.provider.startTimer(context);
     });
     super.initState();
   }
 
   @override
   void dispose() {
-    widget.provider.cancelTimer();
+    // widget.provider.cancelTimer();
     super.dispose();
   }
 
@@ -132,7 +132,7 @@ class _QualifiersContainerState extends State<QualifiersContainer> {
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: <Widget>[
               LocaleKeys.winnerSelection.tr().toText18(isBold: true, color: MyColors.grey3AColor),
-              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}".toText18(isBold: true, color: MyColors.redColor),
+              // "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}".toText18(isBold: true, color: MyColors.redColor),
             ],
           ),
           10.height,

lib/ui/marathon/widgets/marathon_header.dart

@@ -28,8 +28,6 @@ class MarathonHeader extends StatelessWidget {
               color: MyColors.black,
               constraints: const BoxConstraints(),
               onPressed: () {
-                Provider.of<MarathonProvider>(context, listen: false)
-                    .resetValues();
                 Navigator.pop(context);
               },
             )

lib/ui/marathon/widgets/question_card.dart

@@ -1,11 +1,11 @@
 import 'package:appinio_swiper/appinio_swiper.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.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/config/routes.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/models/marathon/question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
 import 'package:provider/provider.dart';
 
@@ -16,35 +16,11 @@ List<bool> isSelectedOptions = [
   false,
 ];
 
-class QuestionCard extends StatefulWidget {
+class QuestionCard extends StatelessWidget {
   final MarathonProvider provider;
 
   const QuestionCard({Key? key, required this.provider}) : super(key: key);
 
-  @override
-  State<QuestionCard> createState() => _QuestionCardState();
-}
-
-class _QuestionCardState extends State<QuestionCard> {
-  final List<CardContent> questionCards = <CardContent>[];
-
-  @override
-  void initState() {
-    _loadCards();
-    super.initState();
-  }
-
-  void _loadCards() {
-    for (DummyQuestionModel question in questions) {
-      questionCards.add(
-        CardContent(
-          question: question,
-          provider: widget.provider,
-        ),
-      );
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
@@ -58,12 +34,11 @@ class _QuestionCardState extends State<QuestionCard> {
               isDisabled: true,
               controller: provider.swiperController,
               unswipe: (int index, AppinioSwiperDirection direction) {},
-              cards: questionCards,
               onSwipe: (int index, AppinioSwiperDirection direction) {
-                if (direction == AppinioSwiperDirection.left) {
+                print("here is the length: ${provider.cardContentList.length} and index : $index");
-                  provider.startTimer(context);
-                }
               },
+
+              cards: provider.cardContentList,
             );
           },
         ),
@@ -73,14 +48,9 @@ class _QuestionCardState extends State<QuestionCard> {
 }
 
 class CardContent extends StatelessWidget {
-  final DummyQuestionModel question;
+  final QuestionModel question;
-  final MarathonProvider provider;
 
-  const CardContent({
+  const CardContent({Key? key, required this.question}) : super(key: key);
-    Key? key,
-    required this.question,
-    required this.provider,
-  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -118,12 +88,12 @@ class CardContent extends StatelessWidget {
                 topRight: Radius.circular(10),
               ),
             ),
-            child: const Center(
+            child: Center(
               child: Padding(
-                padding: EdgeInsets.symmetric(horizontal: 13),
+                padding: const EdgeInsets.symmetric(horizontal: 13),
                 child: Text(
-                  "What is the capital of Saudi Arabia?",
+                  AppState().isArabic(context) ? question.titleAr ?? "" : question.titleEn ?? "",
-                  style: TextStyle(
+                  style: const TextStyle(
                     color: MyColors.white,
                     fontSize: 16,
                     fontWeight: FontWeight.w600,
@@ -132,7 +102,7 @@ class CardContent extends StatelessWidget {
               ),
             ),
           ),
-          AnswerContent(question: question, provider: provider),
+          AnswerContent(question: question),
         ],
       ),
     );
@@ -140,36 +110,37 @@ class CardContent extends StatelessWidget {
 }
 
 class AnswerContent extends StatefulWidget {
-  final DummyQuestionModel question;
+  final QuestionModel question;
-  final MarathonProvider provider;
 
-  const AnswerContent({Key? key, required this.question, required this.provider}) : super(key: key);
+  const AnswerContent({Key? key, required this.question}) : super(key: key);
 
   @override
   State<AnswerContent> createState() => _AnswerContentState();
 }
 
 class _AnswerContentState extends State<AnswerContent> {
-  void updateOption(int index, bool value) {
+  // void updateOption(int index, bool value) {
-    isSelectedOptions[0] = false;
+  //   isSelectedOptions[0] = false;
-    isSelectedOptions[1] = false;
+  //   isSelectedOptions[1] = false;
-    isSelectedOptions[2] = false;
+  //   isSelectedOptions[2] = false;
-    isSelectedOptions[3] = false;
+  //   isSelectedOptions[3] = false;
-    isSelectedOptions[index] = value;
+  //   isSelectedOptions[index] = value;
-    setState(() {});
+  //   setState(() {});
-  }
+  // }
-
+  //
-  Decoration getContainerColor(int index) {
+  // Decoration getContainerColor(int index) {
-    if (!isSelectedOptions[index]) {
+  //   if (!isSelectedOptions[index]) {
-      return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
+  //     return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
-    }
+  //   }
-    if (isSelectedOptions[index] && context.watch<MarathonProvider>().start > 0) {
+  //   if (isSelectedOptions[index] && context
-      return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
+  //       .watch<MarathonProvider>()
-    }
+  //       .currentGapTime > 0) {
-    return MyDecorations.getContainersDecoration(
+  //     return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
-      isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
+  //   }
-    );
+  //   return MyDecorations.getContainersDecoration(
-  }
+  //     isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
+  //   );
+  // }
 
   @override
   Widget build(BuildContext context) {
@@ -182,128 +153,172 @@ class _AnswerContentState extends State<AnswerContent> {
           bottomRight: Radius.circular(10),
         ),
       ),
-      child: Column(
+      child: widget.question.questionOptions != null
-        mainAxisSize: MainAxisSize.min,
+          ? Column(
-        mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
+              crossAxisAlignment: CrossAxisAlignment.center,
-          InkWell(
+              children: widget.question.questionOptions!.map((QuestionOptions e) => AnswerTileForText(questionOption: e, onAnswerTapped: () {})).toList(),
-            onTap: () {
+            )
-              if (widget.provider.currentQuestionNumber == 9) {
+          : const SizedBox(),
-                widget.provider.cancelTimer();
+    );
-                widget.provider.resetValues();
+  }
-                Navigator.pushReplacementNamed(
+}
-                  context,
+
-                  AppRoutes.marathonWinnerSelection,
+class AnswerTileForText extends StatelessWidget {
-                );
+  final QuestionOptions questionOption;
-                return;
+  final Function() onAnswerTapped;
-              }
+
-              updateOption(0, true);
+  const AnswerTileForText({Key? key, required this.questionOption, required this.onAnswerTapped}) : super(key: key);
-            },
+
-            child: Container(
+  // Decoration getContainerColor(int index) {
-              alignment: Alignment.centerLeft,
+  //   if (!isSelectedOptions[index]) {
-              decoration: getContainerColor(0),
+  //     return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
-              child: Center(
+  //   }
-                child: Text(
+  //   if (isSelectedOptions[index] && context.watch<MarathonProvider>().currentGapTime > 0) {
-                  widget.question.opt1!,
+  //     return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
-                  style: TextStyle(
+  //   }
-                    color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
+  //   return MyDecorations.getContainersDecoration(
-                    fontWeight: FontWeight.w600,
+  //     isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
-                    fontSize: 16,
+  //   );
-                  ),
+  // }
-                ).paddingOnly(top: 17, bottom: 17),
+
-              ),
+  @override
-            ),
+  Widget build(BuildContext context) {
-          ),
+    return InkWell(
-          const SizedBox(height: 15),
+      onTap: () {
-          InkWell(
+        onAnswerTapped();
-            onTap: () {
+      },
-              if (widget.provider.currentQuestionNumber == 9) {
+      child: Container(
-                widget.provider.cancelTimer();
+        alignment: Alignment.centerLeft,
-                widget.provider.resetValues();
+        decoration: MyDecorations.getContainersDecoration(MyColors.greyF7Color),
-                Navigator.pushReplacementNamed(
+        child: Center(
-                  context,
+          child: Text(
-                  AppRoutes.marathonWinnerSelection,
+            questionOption.titleEn!,
-                );
+            style: TextStyle(
-                return;
+              color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
-              }
+              fontWeight: FontWeight.w600,
-              updateOption(1, true);
+              fontSize: 16,
-            },
-            child: Container(
-              alignment: Alignment.centerLeft,
-              decoration: getContainerColor(1),
-              child: Center(
-                child: Text(
-                  widget.question.opt2!,
-                  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.opt3!,
-                  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.opt3!,
-                  style: TextStyle(
-                    color: isSelectedOptions[3] ? MyColors.white : MyColors.darkTextColor,
-                    fontWeight: FontWeight.w600,
-                    fontSize: 16,
-                  ),
-                ).paddingOnly(top: 17, bottom: 17),
-              ),
             ),
-          ),
+          ).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),
+//     ),
+//   ),
+// ),