From bba4094064909b3640c643adfe08daa7110d9a58 Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 10:18:03 +0800 Subject: [PATCH 1/7] Add personalisation screen --- lite_up/lib/constants/style.dart | 3 + .../lib/screens/personalisation_screen.dart | 57 +++++++++++++++++++ lite_up/lib/widgets/login_button.dart | 1 + lite_up/lib/widgets/signup_button.dart | 3 +- 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 lite_up/lib/screens/personalisation_screen.dart diff --git a/lite_up/lib/constants/style.dart b/lite_up/lib/constants/style.dart index 7298956..04db992 100644 --- a/lite_up/lib/constants/style.dart +++ b/lite_up/lib/constants/style.dart @@ -22,6 +22,9 @@ const TextStyle loginButtonTextStyle = const TextStyle signUpButtonTextStyle = TextStyle(color: deepOrange, fontSize: 16, fontWeight: FontWeight.bold); +const TextStyle personalisationTextstyle = + TextStyle(color: Colors.black, fontSize: 13, fontWeight: FontWeight.normal); + /* COLOR STYLE */ const Color background = Color.fromARGB(255, 249, 240, 181); const Color deepOrange = Color.fromARGB(255, 255, 123, 46); diff --git a/lite_up/lib/screens/personalisation_screen.dart b/lite_up/lib/screens/personalisation_screen.dart new file mode 100644 index 0000000..0490479 --- /dev/null +++ b/lite_up/lib/screens/personalisation_screen.dart @@ -0,0 +1,57 @@ +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 '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 createState() => _PersonalisationScreenState(); +} + +class _PersonalisationScreenState extends State { + @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), + )), + Container( + margin: const EdgeInsets.only(top: 20), + child: const LoginButton()), + Container( + margin: const EdgeInsets.only(top: 20), + child: const SignUpButton()) + ])), + )); + } +} diff --git a/lite_up/lib/widgets/login_button.dart b/lite_up/lib/widgets/login_button.dart index 60094db..23a32bd 100644 --- a/lite_up/lib/widgets/login_button.dart +++ b/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); diff --git a/lite_up/lib/widgets/signup_button.dart b/lite_up/lib/widgets/signup_button.dart index 3e821df..2512e7c 100644 --- a/lite_up/lib/widgets/signup_button.dart +++ b/lite_up/lib/widgets/signup_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 SignUpButton extends StatelessWidget { const SignUpButton({Key? key}) : super(key: key); @@ -17,7 +18,7 @@ class SignUpButton extends StatelessWidget { shape: const StadiumBorder()), onPressed: () { Navigator.push(context, - MaterialPageRoute(builder: (context) => const HomeScreen())); + MaterialPageRoute(builder: (context) => const PersonalisationScreen())); }, child: Text("Daftar", style: GoogleFonts.montserrat(textStyle: signUpButtonTextStyle))); From cfab8564162f53ec2409d3841d0741ee63ca8f76 Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 12:00:28 +0800 Subject: [PATCH 2/7] Finish personalisation screen --- lite_up/lib/constants/style.dart | 4 +- lite_up/lib/constants/text.dart | 11 ++++ .../lib/screens/personalisation_screen.dart | 31 ++++++++-- .../lib/widgets/personalisation_button.dart | 60 +++++++++++++++++++ lite_up/lib/widgets/start_button.dart | 47 +++++++++++++++ 5 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 lite_up/lib/widgets/personalisation_button.dart create mode 100644 lite_up/lib/widgets/start_button.dart diff --git a/lite_up/lib/constants/style.dart b/lite_up/lib/constants/style.dart index 04db992..4f37d3f 100644 --- a/lite_up/lib/constants/style.dart +++ b/lite_up/lib/constants/style.dart @@ -23,7 +23,7 @@ const TextStyle signUpButtonTextStyle = TextStyle(color: deepOrange, fontSize: 16, fontWeight: FontWeight.bold); const TextStyle personalisationTextstyle = - TextStyle(color: Colors.black, fontSize: 13, fontWeight: FontWeight.normal); + TextStyle(color: grayish, fontSize: 13, fontWeight: FontWeight.normal); /* COLOR STYLE */ const Color background = Color.fromARGB(255, 249, 240, 181); @@ -32,6 +32,8 @@ 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), diff --git a/lite_up/lib/constants/text.dart b/lite_up/lib/constants/text.dart index 09f2deb..8e0cb84 100644 --- a/lite_up/lib/constants/text.dart +++ b/lite_up/lib/constants/text.dart @@ -27,3 +27,14 @@ 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 personalisation_1 = ["beginner", "bookworm", "bibliophile"]; + +const personalisation_2 = [ + "fiksi", + "politik", + "literatur", + "sejarah", + "finansial", + "Saya masih mencari genre kesukaan" +]; diff --git a/lite_up/lib/screens/personalisation_screen.dart b/lite_up/lib/screens/personalisation_screen.dart index 0490479..f178a52 100644 --- a/lite_up/lib/screens/personalisation_screen.dart +++ b/lite_up/lib/screens/personalisation_screen.dart @@ -7,6 +7,8 @@ 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'; /* @@ -45,12 +47,33 @@ class _PersonalisationScreenState extends State { 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( - margin: const EdgeInsets.only(top: 20), - child: const LoginButton()), + alignment: Alignment.centerLeft, + margin: const EdgeInsets.only(top: 10, left: 30), + 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: 2), + child: PersonalisationButton(buttonText: text)) + ]), Container( - margin: const EdgeInsets.only(top: 20), - child: const SignUpButton()) + margin: const EdgeInsets.only(top: 50), + child: const StartButton(buttonText: 'Masuk')) ])), )); } diff --git a/lite_up/lib/widgets/personalisation_button.dart b/lite_up/lib/widgets/personalisation_button.dart new file mode 100644 index 0000000..1162b26 --- /dev/null +++ b/lite_up/lib/widgets/personalisation_button.dart @@ -0,0 +1,60 @@ +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 PersonalisationButton extends StatefulWidget { + const PersonalisationButton({Key? key, required this.buttonText}) + : super(key: key); + + final String buttonText; + + @override + State createState() => _PersonalisationButtonState(); +} + +class _PersonalisationButtonState extends State { + bool isPressed = false; + Color primary = white; + Color textColor = grayish; + + void pressed() { + if (isPressed) { + setState(() { + isPressed = false; + primary = white; + textColor = grayish; + }); + } else { + setState(() { + isPressed = true; + primary = deepYellow; + textColor = white; + }); + } + } + + @override + Widget build(BuildContext context) { + return ElevatedButton( + onPressed: () { + pressed(); + }, + style: ElevatedButton.styleFrom( + minimumSize: Size(100, 30), side: BorderSide(width: 1, color:deepYellow), + padding: const EdgeInsets.symmetric(horizontal: 20), + elevation: 0, + primary: primary, + shape: const StadiumBorder(), + textStyle: TextStyle( + color: textColor, fontSize: 13, fontWeight: FontWeight.normal)), + child: Text( + widget.buttonText, + style: TextStyle( + color: textColor, fontSize: 13, fontWeight: FontWeight.normal), + ), + ); + } +} diff --git a/lite_up/lib/widgets/start_button.dart b/lite_up/lib/widgets/start_button.dart new file mode 100644 index 0000000..ca2a8e0 --- /dev/null +++ b/lite_up/lib/widgets/start_button.dart @@ -0,0 +1,47 @@ +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'; + +class StartButton extends StatefulWidget { + const StartButton({Key? key, required this.buttonText}) : super(key: key); + + final String buttonText; + + @override + State createState() => _StartButtonState(); +} + +class _StartButtonState extends State { + bool isPressed = false; + Color primary = lightGray; + Color textColor = white; + + void pressed() { + if (isPressed) { + Navigator.push(context, + MaterialPageRoute(builder: (context) => const HomeScreen())); + } else { + setState(() { + isPressed = true; + primary = deepOrange; + textColor = white; + }); + } + } + + @override + Widget build(BuildContext context) { + return ElevatedButton( + style: ElevatedButton.styleFrom( + primary: primary, + padding: const EdgeInsets.symmetric(horizontal: 120, vertical: 15), + shape: const StadiumBorder()), + onPressed: () { + pressed(); + }, + child: Text(widget.buttonText, + style: GoogleFonts.montserrat(textStyle: loginButtonTextStyle))); + } +} From fa7424874e4e0fbc874cf52cf815e5af1aed408c Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 12:06:36 +0800 Subject: [PATCH 3/7] Update blue bars condition --- lite_up/lib/screens/flashcard_screen.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lite_up/lib/screens/flashcard_screen.dart b/lite_up/lib/screens/flashcard_screen.dart index fef6855..f682860 100644 --- a/lite_up/lib/screens/flashcard_screen.dart +++ b/lite_up/lib/screens/flashcard_screen.dart @@ -93,7 +93,7 @@ class _FlashcardScreenState extends State { 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( From 8025a8b57cfa4f613a231d1dce8611d32b68f911 Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 14:10:58 +0800 Subject: [PATCH 4/7] Decrease height gap --- lite_up/lib/screens/personalisation_screen.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lite_up/lib/screens/personalisation_screen.dart b/lite_up/lib/screens/personalisation_screen.dart index f178a52..baf5163 100644 --- a/lite_up/lib/screens/personalisation_screen.dart +++ b/lite_up/lib/screens/personalisation_screen.dart @@ -56,7 +56,7 @@ class _PersonalisationScreenState extends State { ]), Container( alignment: Alignment.centerLeft, - margin: const EdgeInsets.only(top: 10, left: 30), + margin: const EdgeInsets.only(top: 10, left: 30, bottom: 5), child: Text( 'Genre apa yang kamu suka?', style: @@ -68,7 +68,7 @@ class _PersonalisationScreenState extends State { for (var text in personalisation_2) Container( margin: const EdgeInsets.symmetric( - horizontal: 5, vertical: 2), + horizontal: 5, vertical: 0), child: PersonalisationButton(buttonText: text)) ]), Container( From 3f97c8d880ebb14e76625774d24a73f47a6684c6 Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 14:49:57 +0800 Subject: [PATCH 5/7] Create skeleton quiz page --- lite_up/lib/constants/style.dart | 2 +- lite_up/lib/constants/text.dart | 63 ++++++++++++-- lite_up/lib/screens/flashcard_screen.dart | 21 +++-- lite_up/lib/screens/quiz_screen.dart | 86 +++++++++++++++++++ .../lib/widgets/personalisation_button.dart | 4 +- lite_up/lib/widgets/quiz_widget.dart | 71 +++++++++++++++ 6 files changed, 226 insertions(+), 21 deletions(-) create mode 100644 lite_up/lib/screens/quiz_screen.dart create mode 100644 lite_up/lib/widgets/quiz_widget.dart diff --git a/lite_up/lib/constants/style.dart b/lite_up/lib/constants/style.dart index 4f37d3f..da537f4 100644 --- a/lite_up/lib/constants/style.dart +++ b/lite_up/lib/constants/style.dart @@ -23,7 +23,7 @@ const TextStyle signUpButtonTextStyle = TextStyle(color: deepOrange, fontSize: 16, fontWeight: FontWeight.bold); const TextStyle personalisationTextstyle = - TextStyle(color: grayish, fontSize: 13, fontWeight: FontWeight.normal); + TextStyle(color: grayish, fontSize: 13, fontWeight: FontWeight.w500); /* COLOR STYLE */ const Color background = Color.fromARGB(255, 249, 240, 181); diff --git a/lite_up/lib/constants/text.dart b/lite_up/lib/constants/text.dart index 8e0cb84..f4cae73 100644 --- a/lite_up/lib/constants/text.dart +++ b/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", @@ -28,13 +39,47 @@ const flashcards_1 = [ ] ]; -const personalisation_1 = ["beginner", "bookworm", "bibliophile"]; - -const personalisation_2 = [ - "fiksi", - "politik", - "literatur", - "sejarah", - "finansial", - "Saya masih mencari genre kesukaan" +const quiz_1 = [ + [ + "Who was the first president of Indonesia?", + "Soekarno", + "Moh. Hatta", + "Sayuti Melik" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + [ + "Apa topik utama pembahasan G20 tahun 2022?", + "Perubahan iklim", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], ]; diff --git a/lite_up/lib/screens/flashcard_screen.dart b/lite_up/lib/screens/flashcard_screen.dart index f682860..e0ac8d3 100644 --- a/lite_up/lib/screens/flashcard_screen.dart +++ b/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 { // 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 @@ -106,21 +108,22 @@ class _FlashcardScreenState extends State { ]), // 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')) ]) diff --git a/lite_up/lib/screens/quiz_screen.dart b/lite_up/lib/screens/quiz_screen.dart new file mode 100644 index 0000000..563a014 --- /dev/null +++ b/lite_up/lib/screens/quiz_screen.dart @@ -0,0 +1,86 @@ +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/record_button.dart'; +import 'package:permission_handler/permission_handler.dart'; +import '../api/sound_recorder.dart'; +import '../constants/style.dart'; +import '../constants/text.dart'; +import '../widgets/quiz_widget.dart'; +import '../widgets/next_button.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 createState() => _QuizScreenState(); +} + +class _QuizScreenState extends State { + List Quizs = [ + for (var i = 0; i < quiz_1.length; i++) + "// Quiz(title: quiz_1[i][0], content: quiz_1[i][1])" + ]; + + // Create an index to loop through Quizs + int index = 0; + + // Create a function to display the next Quiz + void nextQuiz() { + if (index == Quizs.length - 1) { + return; + } else { + setState(() { + // Increments the index to rebuild the app to show next Quiz + index++; + }); + } + } + + void previousQuiz() { + if (index == 0) { + return; + } else { + setState(() { + // Decrements the index to rebuild the app to show previous Quiz + index--; + }); + } + } + + @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( + children: [ + for (var i = 0; i < Quizs.length; i++) + // Add the Quiz widget + QuizWidget(level: index), + ], + ))), + ); + } +} diff --git a/lite_up/lib/widgets/personalisation_button.dart b/lite_up/lib/widgets/personalisation_button.dart index 1162b26..0ca335d 100644 --- a/lite_up/lib/widgets/personalisation_button.dart +++ b/lite_up/lib/widgets/personalisation_button.dart @@ -49,11 +49,11 @@ class _PersonalisationButtonState extends State { primary: primary, shape: const StadiumBorder(), textStyle: TextStyle( - color: textColor, fontSize: 13, fontWeight: FontWeight.normal)), + color: textColor, fontSize: 13, fontWeight: FontWeight.w500)), child: Text( widget.buttonText, style: TextStyle( - color: textColor, fontSize: 13, fontWeight: FontWeight.normal), + color: textColor, fontSize: 13, fontWeight: FontWeight.w500), ), ); } diff --git a/lite_up/lib/widgets/quiz_widget.dart b/lite_up/lib/widgets/quiz_widget.dart new file mode 100644 index 0000000..c60acb9 --- /dev/null +++ b/lite_up/lib/widgets/quiz_widget.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; +import 'package:google_fonts/google_fonts.dart'; +import 'package:lite_up/screens/flashcard_screen.dart'; +import '../constants/style.dart'; + +class QuizWidget extends StatefulWidget { + const QuizWidget({Key? key, required this.level}) : super(key: key); + + final int level; + + @override + State createState() => _QuizWidgetState(); +} + +class _QuizWidgetState extends State { + bool levelIsLocked = false; + + // Create a function to display the unlocked level + void unlockLevel() { + if (levelIsLocked) { + setState(() { + levelIsLocked = false; + }); + } else { + return; + } + } + + @override + Widget build(BuildContext context) { + if (levelIsLocked) { + return GestureDetector( + onTap: () { + const FlashcardScreen(); + }, + child: Container( + padding: const EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 0), + decoration: BoxDecoration( + color: white, borderRadius: BorderRadius.circular(25)), + alignment: Alignment.center, + child: Stack(children: [ + Text( + 'Level ${widget.level} Flash Cards', + style: GoogleFonts.poppins(textStyle: personalisationTextstyle), + ), + Container( + alignment: Alignment.bottomCenter, + margin: const EdgeInsets.symmetric(vertical: 60), + child: Image.asset('lib/assets/images/lock_icon.png')) + ]))); + } else { + return GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const FlashcardScreen())); + }, + child: Container( + padding: + EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 120), + decoration: BoxDecoration( + color: softOrange, borderRadius: BorderRadius.circular(25)), + alignment: Alignment.centerLeft, + child: Text( + 'Level ${widget.level} Flash Cards', + style: GoogleFonts.poppins(textStyle: personalisationTextstyle), + ))); + } + } +} From 5aa77ff93e70ea635b437d2977e43a66450624bc Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 17:17:13 +0800 Subject: [PATCH 6/7] Add quiz questions --- lite_up/flutter_02.png | Bin 0 -> 9944 bytes lite_up/lib/constants/style.dart | 2 + lite_up/lib/constants/text.dart | 58 +++++----- lite_up/lib/models/quiz_model.dart | 16 +++ lite_up/lib/screens/quiz_screen.dart | 38 ++----- .../lib/widgets/personalisation_button.dart | 4 +- lite_up/lib/widgets/quiz_widget.dart | 100 ++++++++++-------- 7 files changed, 111 insertions(+), 107 deletions(-) create mode 100644 lite_up/flutter_02.png create mode 100644 lite_up/lib/models/quiz_model.dart diff --git a/lite_up/flutter_02.png b/lite_up/flutter_02.png new file mode 100644 index 0000000000000000000000000000000000000000..38c126c2b322debdf76fb2a424221a533a44997f GIT binary patch literal 9944 zcmeI&I}QO+6vpv0F_H1^MWGOD(3*_L6a=AHD5xbuA|W(XEWipBtic8-6k-YD(Tc+3 z-VG>}^8cFqN=|Zq<;k6vin)+K>KBoan|CTAW=h1Du)ON#vEQxLVzetcTUOiHNgd3# z?N%+7zSWqB#Km>e)$Zc5F%0!OoWIsLOIITZAb7vZWe9009ILKmY**5I_I{1Q0*~fxi$)ULFMzZ%6+H_|i}-687o2fcYF;g8{uG d2q1s}0toylFq869jNZL@)&<;5(OKE`(FZh6cftSw literal 0 HcmV?d00001 diff --git a/lite_up/lib/constants/style.dart b/lite_up/lib/constants/style.dart index da537f4..bb01a71 100644 --- a/lite_up/lib/constants/style.dart +++ b/lite_up/lib/constants/style.dart @@ -50,3 +50,5 @@ const BoxDecoration primaryBackground = BoxDecoration( BoxDecoration unlockedCardBackground = BoxDecoration(color: softOrange, borderRadius: BorderRadius.circular(25)); + +var mapNumberToLetter = {1: 'a', 2: 'b', 3: 'c'}; diff --git a/lite_up/lib/constants/text.dart b/lite_up/lib/constants/text.dart index f4cae73..2bc402e 100644 --- a/lite_up/lib/constants/text.dart +++ b/lite_up/lib/constants/text.dart @@ -41,45 +41,41 @@ const flashcards_1 = [ const quiz_1 = [ [ - "Who was the first president of Indonesia?", - "Soekarno", - "Moh. Hatta", - "Sayuti Melik" + "Bulan Inklusi Keuangan ada di bulan?", + ["Oktober", "Januari", "Maret"], + 0 ], [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" + "Sebuah kondisi dimana seseorang terlindungi secara finansial dari seluruh risiko adalah ...", + ["Financial Lock", "Financial Burden", "Financial Freedom"], + 2 ], [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" + "Kemampuan seseorang dalam memahami pentingnya perencanaan dan penerapan tata kelola keuangan yang baik adalah ...", + ["Kecerdasan finansial", "Kecerdasan belajar", "Kepintaran membaca"], + 0 ], [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" + "Kebijakan apa yang diluncurkan Kemenkumham RI menjelang puncak KTT G20?", + [ + "Kebijakan visa rumah kedua", + "Kebijakan kewarganegaraan kedua", + "Kebijakan passport dua negara" + ], + 0 ], [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" + "Apa yang terjadi pada tanggal 17 - 24 Juni 1916 di alun-alun Bandung?", + [ + "Kongres Serikat Islam", + "Inflasi dan perekonomian global", + "Kelestarian lingkungan" + ], + 0 ], [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" - ], - [ - "Apa topik utama pembahasan G20 tahun 2022?", - "Perubahan iklim", - "Inflasi dan perekonomian global", - "Kelestarian lingkungan" - ], + "Jacques adalah karakter utama di buku?", + ["Laskar Pelangi", "Rumah Kaca", "Bumi Manusia"], + 1 + ] ]; diff --git a/lite_up/lib/models/quiz_model.dart b/lite_up/lib/models/quiz_model.dart new file mode 100644 index 0000000..8649110 --- /dev/null +++ b/lite_up/lib/models/quiz_model.dart @@ -0,0 +1,16 @@ +class Quiz { + final String question; + final List 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)"; + } +} diff --git a/lite_up/lib/screens/quiz_screen.dart b/lite_up/lib/screens/quiz_screen.dart index 563a014..093bf76 100644 --- a/lite_up/lib/screens/quiz_screen.dart +++ b/lite_up/lib/screens/quiz_screen.dart @@ -8,6 +8,7 @@ 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'; @@ -24,37 +25,17 @@ class QuizScreen extends StatefulWidget { } class _QuizScreenState extends State { - List Quizs = [ + List Quizes = [ for (var i = 0; i < quiz_1.length; i++) - "// Quiz(title: quiz_1[i][0], content: quiz_1[i][1])" + Quiz( + question: quiz_1[i][0] as String, + choices: quiz_1[i][1] as List, + correctIndex: quiz_1[i][2] as int) ]; - // Create an index to loop through Quizs + // Create an index to loop through Quizes int index = 0; - // Create a function to display the next Quiz - void nextQuiz() { - if (index == Quizs.length - 1) { - return; - } else { - setState(() { - // Increments the index to rebuild the app to show next Quiz - index++; - }); - } - } - - void previousQuiz() { - if (index == 0) { - return; - } else { - setState(() { - // Decrements the index to rebuild the app to show previous Quiz - index--; - }); - } - } - @override Widget build(BuildContext context) { return Scaffold( @@ -75,10 +56,11 @@ class _QuizScreenState extends State { decoration: primaryBackground, alignment: Alignment.center, child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - for (var i = 0; i < Quizs.length; i++) + for (var i = 0; i < Quizes.length; i++) // Add the Quiz widget - QuizWidget(level: index), + QuizWidget(quiz: Quizes[i]), ], ))), ); diff --git a/lite_up/lib/widgets/personalisation_button.dart b/lite_up/lib/widgets/personalisation_button.dart index 0ca335d..3edd040 100644 --- a/lite_up/lib/widgets/personalisation_button.dart +++ b/lite_up/lib/widgets/personalisation_button.dart @@ -52,8 +52,8 @@ class _PersonalisationButtonState extends State { color: textColor, fontSize: 13, fontWeight: FontWeight.w500)), child: Text( widget.buttonText, - style: TextStyle( - color: textColor, fontSize: 13, fontWeight: FontWeight.w500), + style: GoogleFonts.poppins(textStyle: TextStyle( + color: textColor, fontSize: 13, fontWeight: FontWeight.w500)), ), ); } diff --git a/lite_up/lib/widgets/quiz_widget.dart b/lite_up/lib/widgets/quiz_widget.dart index c60acb9..a9f5aff 100644 --- a/lite_up/lib/widgets/quiz_widget.dart +++ b/lite_up/lib/widgets/quiz_widget.dart @@ -2,70 +2,78 @@ import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:lite_up/screens/flashcard_screen.dart'; import '../constants/style.dart'; +import '../models/quiz_model.dart'; class QuizWidget extends StatefulWidget { - const QuizWidget({Key? key, required this.level}) : super(key: key); + const QuizWidget({Key? key, required this.quiz}) : super(key: key); - final int level; + final Quiz quiz; @override State createState() => _QuizWidgetState(); } class _QuizWidgetState extends State { - bool levelIsLocked = false; + bool isPressed = false; + Color primary = white; + int choicePressed = -1; - // Create a function to display the unlocked level - void unlockLevel() { - if (levelIsLocked) { + void pressed(i) { + if (isPressed) { setState(() { - levelIsLocked = false; + isPressed = false; + primary = white; }); } else { - return; + setState(() { + isPressed = true; + primary = deepYellow; + choicePressed = i; + }); } } @override Widget build(BuildContext context) { - if (levelIsLocked) { - return GestureDetector( - onTap: () { - const FlashcardScreen(); - }, - child: Container( - padding: const EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 0), - decoration: BoxDecoration( - color: white, borderRadius: BorderRadius.circular(25)), - alignment: Alignment.center, - child: Stack(children: [ - Text( - 'Level ${widget.level} Flash Cards', - style: GoogleFonts.poppins(textStyle: personalisationTextstyle), - ), + return Container( + padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30), + color: Colors.transparent, + alignment: Alignment.centerLeft, + child: + Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ + Text( + widget.quiz.question, + textAlign: TextAlign.left, + style: GoogleFonts.poppins(textStyle: personalisationTextstyle), + ), + for (int i = 0; i < widget.quiz.choices.length; i++) + Row( + children: [ Container( - alignment: Alignment.bottomCenter, - margin: const EdgeInsets.symmetric(vertical: 60), - child: Image.asset('lib/assets/images/lock_icon.png')) - ]))); - } else { - return GestureDetector( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const FlashcardScreen())); - }, - child: Container( - padding: - EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 120), - decoration: BoxDecoration( - color: softOrange, borderRadius: BorderRadius.circular(25)), - alignment: Alignment.centerLeft, - child: Text( - 'Level ${widget.level} Flash Cards', - style: GoogleFonts.poppins(textStyle: personalisationTextstyle), - ))); - } + margin: + const EdgeInsets.symmetric(vertical: 3, horizontal: 0), + decoration: BoxDecoration( + color: i == choicePressed ? primary : white, + shape: BoxShape.circle, + border: Border.all(color: deepYellow)), + width: 35, + height: 35, + child: TextButton( + onPressed: () { + pressed(i); + }, + child: Text(mapNumberToLetter[i + 1] as String, + style: GoogleFonts.poppins( + textStyle: personalisationTextstyle)))), + Container( + alignment: Alignment.centerLeft, + margin: const EdgeInsets.symmetric( + vertical: 10, horizontal: 10), + child: Text(widget.quiz.choices[i], + style: GoogleFonts.poppins( + textStyle: personalisationTextstyle))) + ], + ) + ])); } } From 49222dfbfe9f996c4ac4476bb719ddd3ccf411f5 Mon Sep 17 00:00:00 2001 From: florentianayuwono Date: Wed, 26 Oct 2022 17:30:32 +0800 Subject: [PATCH 7/7] Add submit button --- lite_up/lib/screens/quiz_screen.dart | 7 +++++++ lite_up/lib/widgets/blueEnd_button.dart | 28 +++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 lite_up/lib/widgets/blueEnd_button.dart diff --git a/lite_up/lib/screens/quiz_screen.dart b/lite_up/lib/screens/quiz_screen.dart index 093bf76..97224d3 100644 --- a/lite_up/lib/screens/quiz_screen.dart +++ b/lite_up/lib/screens/quiz_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/widgets/blueEnd_button.dart'; import 'package:lite_up/widgets/record_button.dart'; import 'package:permission_handler/permission_handler.dart'; import '../api/sound_recorder.dart'; @@ -11,6 +12,7 @@ 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 @@ -61,6 +63,11 @@ class _QuizScreenState extends State { 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')), ], ))), ); diff --git a/lite_up/lib/widgets/blueEnd_button.dart b/lite_up/lib/widgets/blueEnd_button.dart new file mode 100644 index 0000000..f83e102 --- /dev/null +++ b/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))); + } +}