basic screen working

assets/raw_eng/questions2Modified.json

@@ -7,6 +7,14 @@
     "questionText": "When did you observe andada? Touch screen, move finger and tap to choose the correct year.",
     "answers": ["2016","2027","2018","2019","2020","2021","2022","2023","2024","2025","2025","2026"]
   },
+  {
+    "questionNumber": 4,
+    "questionType": "MonthChoice",
+    "questionPicture": "raster_q0_(2:0)",
+    "questionTitle": "crab_title_(2:0)",
+    "questionText": "Touch screen and move finger to choose correct month. In case you saw two andadas this month (one around new moon and one around full moon), please run the app for each andada seperately.",
+    "answers": ["January","February","March","April","May","June","July","August","September","October","November","December"]
+  },
   {
     "questionNumber": 9,
     "questionType": "YesNoExtra",

lib/bottom_navigation_bar.dart

@@ -22,7 +22,7 @@ class CustomBottomNavigationBar extends StatelessWidget {
               onPageChanged(currentPageIndex - 1); // Go to previous page
             },
           ),
-          Text('Page ${currentPageIndex + 1} of 3'),
+          Text('Page ${currentPageIndex + 1} of 4'),
           IconButton(
             icon: const Icon(Icons.arrow_forward),
             onPressed: () {

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:remar_flutter_app/question9.dart';
 import 'package:remar_flutter_app/questions.dart';
 import 'package:remar_flutter_app/questions3.dart';
+import 'package:remar_flutter_app/questions4.dart';
 import 'app_bar.dart';
 import 'bottom_navigation_bar.dart';
 
@@ -19,6 +20,7 @@ class _MyAppState extends State<MyApp> {
 
   final List<Widget> _pages = [
     QuestionAnswer3Page(),
+    QuestionAnswer4Page(),
     QuestionAnswer9Page(), // Page 1
     QuestionAnswerPage(), // Page 2
   ];

lib/questions4.dart

@@ -0,0 +1,115 @@
+import 'dart:convert';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'app_bar.dart';
+
+class QuestionAnswer4Page extends StatefulWidget {
+  @override
+  _QuestionAnswerPage4State createState() => _QuestionAnswerPage4State();
+}
+
+class _QuestionAnswerPage4State extends State<QuestionAnswer4Page> {
+  String selectedArea = '';
+  List<String> answers = [];
+  String questionText = '';
+
+  @override
+  void initState() {
+    super.initState();
+    loadQuestions();
+  }
+
+  void loadQuestions() async {
+    // Load the JSON data from the file
+    String jsonString = await DefaultAssetBundle.of(context)
+        .loadString('assets/raw_eng/questions2Modified.json');
+
+    // Parse the JSON string into a list of objects
+    List<dynamic> jsonData = jsonDecode(jsonString);
+
+    // Extract data from the first question (question number 9)
+    Map<String, dynamic> firstQuestionData = jsonData[1];
+
+
+    // Set question text and answers list
+    setState(() {
+      questionText = firstQuestionData['questionText'];
+
+      // Extract answers from the answers map
+      List<dynamic> answerList = firstQuestionData['answers'];
+
+      // Cast answers to List<String>
+      answers = answerList.map((answer) => answer.toString()).toList();
+    });
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Image.asset(
+                  'assets/images/raster_q0_0.png',
+                  width: 100,
+                  height: 75,
+                ),
+                const Text(
+                  "Cardisoma_guanhumi",
+                  style: TextStyle(fontSize: 20),
+                ),
+              ],
+            ),
+            SizedBox(
+              width: 350,
+              height: 100,
+              child: Text(questionText),
+            ),
+            SizedBox(
+              width: 500,
+              height: 350,
+              child: Scrollbar(
+                child: ListView.builder(
+                  itemCount: answers.length,
+                  itemBuilder: (BuildContext context, int index) {
+                    return buildAnswerButton(answers[index]);
+                  },
+                ),
+              ),
+            ),
+          ], // Column children
+        ), // Column
+      ), // Scaffold
+    ); // MaterialApp
+  }
+
+  Widget buildAnswerButton(String answer) {
+    bool isSelected = answer == selectedArea;
+
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          selectedArea = answer;
+        });
+      },
+      child: Container(
+        color: isSelected ? Colors.green : null,
+        padding: const EdgeInsets.all(12.0),
+        margin: const EdgeInsets.symmetric(vertical: 8.0),
+        child: Text(
+          answer,
+          style: TextStyle(
+            color: isSelected ? Colors.white : Colors.black,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ),
+    );
+  }
+}