Interactive personalisation and quiz screen

lite_up/lib/constants/style.dart

@@ -22,13 +22,18 @@ const TextStyle loginButtonTextStyle =
 const TextStyle signUpButtonTextStyle =
     TextStyle(color: deepOrange, fontSize: 16, fontWeight: FontWeight.bold);
 
+const TextStyle personalisationTextstyle =
+    TextStyle(color: grayish, fontSize: 13, fontWeight: FontWeight.w500);
+
 /* COLOR STYLE */
 const Color background = Color.fromARGB(255, 249, 240, 181);
 const Color deepOrange = Color.fromARGB(255, 255, 123, 46);
 const Color softOrange = Color.fromARGB(255, 254, 189, 142);
 const Color deepYellow = Color.fromARGB(255, 255, 187, 1);
 const Color skyBlue = Color.fromARGB(255, 156, 197, 231);
 const Color white = Colors.white;
+const Color grayish = Color.fromARGB(255, 87, 87, 87);
+const Color lightGray = Color.fromARGB(255, 217, 217, 217);
 
 ButtonStyle loginButtonStyle = ButtonStyle(
     backgroundColor: MaterialStateProperty.all(deepOrange),
@@ -45,3 +50,5 @@ const BoxDecoration primaryBackground = BoxDecoration(
 
 BoxDecoration unlockedCardBackground =
     BoxDecoration(color: softOrange, borderRadius: BorderRadius.circular(25));
+
+var mapNumberToLetter = {1: 'a', 2: 'b', 3: 'c'};

lite_up/lib/constants/text.dart

@@ -1,6 +1,17 @@
 // This file contains list of static texts that will be displayed in the app.
 import 'package:flutter/material.dart';
 
+const personalisation_1 = ["beginner", "bookworm", "bibliophile"];
+
+const personalisation_2 = [
+  "fiksi",
+  "politik",
+  "literatur",
+  "sejarah",
+  "finansial",
+  "Saya masih mencari genre kesukaan"
+];
+
 const flashcards_1 = [
   [
     "Finansial",
@@ -27,3 +38,44 @@ const flashcards_1 = [
     "Jacques Pangemanann yang merupakan seorang komisaris polisi Hindia Belanda berdarah Minahasa dalam memberantas kelompok Si Pitung membuatnya ditugaskan untuk memata-matai aktivitas Minke. Tugas inilah yang membuat Jacques Pangemanann menjadi sosok yang bertanggung jawab dibalik pembuangan Minke ke pulau terpencil di Maluku Utara.[2]"
   ]
 ];
+
+const quiz_1 = [
+  [
+    "Bulan Inklusi Keuangan ada di bulan?",
+    ["Oktober", "Januari", "Maret"],
+    0
+  ],
+  [
+    "Sebuah kondisi dimana seseorang terlindungi secara finansial dari seluruh risiko adalah ...",
+    ["Financial Lock", "Financial Burden", "Financial Freedom"],
+    2
+  ],
+  [
+    "Kemampuan seseorang dalam memahami pentingnya perencanaan dan penerapan tata kelola keuangan yang baik adalah ...",
+    ["Kecerdasan finansial", "Kecerdasan belajar", "Kepintaran membaca"],
+    0
+  ],
+  [
+    "Kebijakan apa yang diluncurkan Kemenkumham RI menjelang puncak KTT G20?",
+    [
+      "Kebijakan visa rumah kedua",
+      "Kebijakan kewarganegaraan kedua",
+      "Kebijakan passport dua negara"
+    ],
+    0
+  ],
+  [
+    "Apa yang terjadi pada tanggal 17 - 24 Juni 1916 di alun-alun Bandung?",
+    [
+      "Kongres Serikat Islam",
+      "Inflasi dan perekonomian global",
+      "Kelestarian lingkungan"
+    ],
+    0
+  ],
+  [
+    "Jacques adalah karakter utama di buku?",
+    ["Laskar Pelangi", "Rumah Kaca", "Bumi Manusia"],
+    1
+  ]
+];

lite_up/lib/models/quiz_model.dart

@@ -0,0 +1,16 @@
+class Quiz {
+  final String question;
+  final List<String> choices;
+  final int correctIndex;
+
+  // Constructor for Book object
+  Quiz(
+      {required this.question,
+      required this.choices,
+      required this.correctIndex});
+
+  @override
+  String toString() {
+    return "Quiz(question: $question, correctIndex: $correctIndex)";
+  }
+}

lite_up/lib/screens/flashcard_screen.dart

@@ -3,6 +3,7 @@ import 'dart:ffi';
 import 'package:flutter/material.dart';
 import 'package:flutter_sound/flutter_sound.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:lite_up/screens/quiz_screen.dart';
 import 'package:lite_up/widgets/record_button.dart';
 import 'package:permission_handler/permission_handler.dart';
 import '../api/sound_recorder.dart';
@@ -36,7 +37,8 @@ class _FlashcardScreenState extends State<FlashcardScreen> {
   // Create a function to display the next flashcard
   void nextFlashcard() {
     if (index == flashcards.length - 1) {
-      return;
+      Navigator.push(context,
+              MaterialPageRoute(builder: (context) => const QuizScreen()));
     } else {
       setState(() {
         // Increments the index to rebuild the app to show next flashcard
@@ -93,7 +95,7 @@ class _FlashcardScreenState extends State<FlashcardScreen> {
                 children: [
                   Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                     for (var i = 0; i < flashcards.length; i++)
-                      if (i == index)
+                      if (i <= index)
                         Padding(
                             padding: const EdgeInsets.symmetric(horizontal: 5),
                             child: Image.asset(
@@ -106,21 +108,22 @@ class _FlashcardScreenState extends State<FlashcardScreen> {
                   ]),
                   // Add the flashcard widget
                   FlashcardWidget(
-                    indexAction: index,
-                    currentFlashcard: flashcards[index],
-                    totalFlashcards: flashcards.length,
-                    nextFlashcard: nextFlashcard,
-                    previousFlashcard: previousFlashcard
-                  ),
+                      indexAction: index,
+                      currentFlashcard: flashcards[index],
+                      totalFlashcards: flashcards.length,
+                      nextFlashcard: nextFlashcard,
+                      previousFlashcard: previousFlashcard),
                   // Add the recorder and audio button
                   //Center(child: RecordButton(recorder: recorder))
                   Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                     Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 20, vertical: 10),
                         child:
                             Image.asset('lib/assets/images/recorder_icon.png')),
                     Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 20, vertical: 10),
                         child: Image.asset(
                             'lib/assets/images/audioPlayer_icon.png'))
                   ])

lite_up/lib/screens/personalisation_screen.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:lite_up/widgets/login_button.dart';
+import 'package:lite_up/widgets/signup_button.dart';
+import '../constants/style.dart';
+import '../constants/text.dart';
+import '../models/flashcard_model.dart';
+import '../widgets/flashcard_widget.dart';
+import '../widgets/next_button.dart';
+import '../widgets/personalisation_button.dart';
+import '../widgets/start_button.dart';
+import 'flashcard_screen.dart';
+
+/* 
+PersonalisationScreen widget is stateful because it is our parent widget and therefore
+all the functions and variables will be in this widget. As a consequence, we
+will need to change the state of our widget.
+*/
+class PersonalisationScreen extends StatefulWidget {
+  const PersonalisationScreen({Key? key}) : super(key: key);
+
+  @override
+  State<PersonalisationScreen> createState() => _PersonalisationScreenState();
+}
+
+class _PersonalisationScreenState extends State<PersonalisationScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        body: SingleChildScrollView(
+      child: Container(
+          decoration: primaryBackground,
+          alignment: Alignment.center,
+          width: MediaQuery.of(context).size.width,
+          height: MediaQuery.of(context).size.height,
+          child: Column(children: [
+            Container(
+                margin: const EdgeInsets.only(top: 157),
+                child: Text('Kita ingin membuat LiteUp spesial untuk kamu!',
+                    style: GoogleFonts.poppins(textStyle: appBarTitle),
+                    textAlign: TextAlign.center)),
+            Container(
+                alignment: Alignment.centerLeft,
+                margin: const EdgeInsets.only(top: 30, left: 30),
+                child: Text(
+                  'Tipe pembaca apakah kamu?',
+                  style:
+                      GoogleFonts.poppins(textStyle: personalisationTextstyle),
+                )),
+            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+              for (var text in personalisation_1)
+                Container(
+                    margin:
+                        const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
+                    child: PersonalisationButton(buttonText: text))
+            ]),
+            Container(
+                alignment: Alignment.centerLeft,
+                margin: const EdgeInsets.only(top: 10, left: 30, bottom: 5),
+                child: Text(
+                  'Genre apa yang kamu suka?',
+                  style:
+                      GoogleFonts.poppins(textStyle: personalisationTextstyle),
+                )),
+            Wrap(
+              alignment: WrapAlignment.center,
+                children: [
+                  for (var text in personalisation_2)
+                    Container(
+                        margin: const EdgeInsets.symmetric(
+                            horizontal: 5, vertical: 0),
+                        child: PersonalisationButton(buttonText: text))
+                ]),
+            Container(
+                margin: const EdgeInsets.only(top: 50),
+                child: const StartButton(buttonText: 'Masuk'))
+          ])),
+    ));
+  }
+}

lite_up/lib/screens/quiz_screen.dart

@@ -0,0 +1,75 @@
+import 'dart:ffi';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_sound/flutter_sound.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:lite_up/widgets/blueEnd_button.dart';
+import 'package:lite_up/widgets/record_button.dart';
+import 'package:permission_handler/permission_handler.dart';
+import '../api/sound_recorder.dart';
+import '../constants/style.dart';
+import '../constants/text.dart';
+import '../models/quiz_model.dart';
+import '../widgets/quiz_widget.dart';
+import '../widgets/next_button.dart';
+import 'homepage_screen.dart';
+
+/* 
+QuizScreen widget is stateful because it is our parent widget and therefore
+all the functions and variables will be in this widget. As a consequence, we
+will need to change the state of our widget.
+*/
+class QuizScreen extends StatefulWidget {
+  const QuizScreen({Key? key}) : super(key: key);
+
+  @override
+  State<QuizScreen> createState() => _QuizScreenState();
+}
+
+class _QuizScreenState extends State<QuizScreen> {
+  List<Quiz> Quizes = [
+    for (var i = 0; i < quiz_1.length; i++)
+      Quiz(
+          question: quiz_1[i][0] as String,
+          choices: quiz_1[i][1] as List<String>,
+          correctIndex: quiz_1[i][2] as int)
+  ];
+
+  // Create an index to loop through Quizes
+  int index = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // Set background color
+      backgroundColor: background,
+
+      // Set the top app bar
+      appBar: AppBar(
+          title: Text('Level 1 Quiz',
+              style: GoogleFonts.poppins(textStyle: appBarTitle)),
+          backgroundColor: white,
+          foregroundColor: Colors.black,
+          elevation: 0),
+
+      // Set the body of the app
+      body: SingleChildScrollView(
+          child: Container(
+              decoration: primaryBackground,
+              alignment: Alignment.center,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  for (var i = 0; i < Quizes.length; i++)
+                    // Add the Quiz widget
+                    QuizWidget(quiz: Quizes[i]),
+                  Container(
+                      alignment: Alignment.center,
+                      margin: const EdgeInsets.symmetric(vertical: 20),
+                      child: const BlueEndButton(
+                          nextPage: HomeScreen(), buttonText: 'Kirim')),
+                ],
+              ))),
+    );
+  }
+}

lite_up/lib/widgets/blueEnd_button.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../constants/style.dart';
+import '../screens/flashcard_screen.dart';
+import '../screens/homepage_screen.dart';
+import '../screens/personalisation_screen.dart';
+
+class BlueEndButton extends StatelessWidget {
+  const BlueEndButton({Key? key, required this.nextPage, required this.buttonText}) : super(key: key);
+
+  final StatefulWidget nextPage;
+  final String buttonText;
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+        style: ElevatedButton.styleFrom(
+            primary: skyBlue,
+            padding: const EdgeInsets.symmetric(horizontal: 120, vertical: 15),
+            shape: const StadiumBorder()),
+        onPressed: () {
+          Navigator.push(
+              context, MaterialPageRoute(builder: (context) => nextPage));
+        },
+        child: Text(buttonText,
+            style: GoogleFonts.poppins(textStyle: loginButtonTextStyle)));
+  }
+}

lite_up/lib/widgets/login_button.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 import '../constants/style.dart';
 import '../screens/flashcard_screen.dart';
 import '../screens/homepage_screen.dart';
+import '../screens/personalisation_screen.dart';
 
 class LoginButton extends StatelessWidget {
   const LoginButton({Key? key}) : super(key: key);