Description

If a learning material has been downloaded before (hence, it is available offline), on the list page give an additional print button (right side) in its item as an indicator that it is available offline & to make the access easier to be printed anytime

Delivery

• file that has been downloaded before & available offline has a print button in its item on the list page
• when the print button is clicked it will directly trigger the print functionality

Description

UI/UX

A page before starting every exercise, functioning as / has content of:

• Step by step & screenshot on how to do the exercise
• Info about the number of tasks & duration based on challenge group (sikecil, siaga, etc)
• A checkbox for consent (sudah membaca petunjuk, akan menjawab jujur, dkk)
  the Mulai button is disabled if the checkbox isn't agreed / enabled

Next development:

• customizable page if we have a sponsor

I propose using an HTML viewer so we can update the page easily, but I still can't imagine the detail

Feature

The starting page can be used to inform the user that:

• the timer is started after the user click Mulai
• the exercise isn't saved until all tasks are answered or the time is up
• the timer will be reset if the user clicks back or the app is closed, also the attempt will not be counted

Delivery

• [ ]

Date

2023-08-20

Description

Make a decision on whether we will continue to develop in Flutterflow or not

Desciption

Quiz data is located at:

• Latihan Minggu Depan: link
• Latihan Minggu Ini: link

Read them first when Daftar Latihan Bebras button is clicked

Then, depending on what the user chooses, send the registration data to firestore with data like
https://console.firebase.google.com/u/0/project/toki-bebras-proto/firestore/data/~2Fweekly_quiz_participation~2Fexample_registered

Last but not least:

• make the newly registered quiz appear on the list page
• pass the quiz data inside the item model to be referenced later on

Note: the example of data with attempts content would be something like this
https://console.firebase.google.com/u/0/project/toki-bebras-proto/firestore/data/~2Fweekly_quiz_participation~2Fexample_attempted

Delivery

• Data recorded in weekly_quiz_participation correctly
• Newly registered quiz appear on the list page

Description

Basically, this task is intended to explore the feasibility of accessing local file / storage in Flutterflow
But to be more specific & visible, the scope is focused on loading pdf from local storage

Flows

• Minimal flow:
  several files in local storage -> loaded by pdfviewer dynamically
• Near-complete flow:
  download pdf file using firebase -> saved to local storage -> loaded by pdfviewer dynamically

Deliveries:

• P0, document of the exploration + reference
• P1, better if we could find a hacky way to make the task a success
• P100 (optional, plus point), some suggestions on how to use Flutterflow in the future

Description

We have linked the Flutterflow project with Firebase successfully (doc). Now, we want to automatically sync data from the server to the app.

References

• https://docs.flutterflow.io/getting-started/build-your-first-app/travel-app-firestore-data#4.-adding-data-and-logic
• https://docs.flutterflow.io/data-and-backend/state-management/component-state

Deliveries

• Quiz list can be generated dynamically

Description

For easier ops debugging capability, we need to create a preview page of the Quiz Exercise in the app

Delivery

• add field "isAdmin": false in the registered_user when registering
• add logic to check user's isAdmin in the setting page & display Lihat Bebras Task button if isAdmin == true
  don't forget to hide the button back when isAdmin == false
• add a page of ListView with the item's title from doc.id
• make an exercise preview page reusing the quiz exercise page, but the answer button is removed/disabled

Description

After we have successfully registered for the quiz and gotten the weekly_quiz_participation ID, make local storage collections to save the following data with weekly_quiz_participation ID as the key:

• weekly_quiz_participation: for reference & update the attempts data
• weekly_quiz_configuration: a parsed running_weekly_quiz or next_weekly_quiz (based on what the user chooses) filtering the important config field only
• weekly_quiz_task_set: a list object of task set (question) to be displayed in the quiz exercise

Note: several redundant data are intentional to make access easier

Data structure

weekly_quiz_participation
as is

weekly_quiz_configuration

<weekly_quiz_participation id> : {
    "title": ,
    "id": ,
    "created_at": ,
    "start_at": ,
    "end_at": ,
    "challenge_group": ,
    "max_attempts": ,
    "duration_minute": ,
    "sponsors": ,
}

value of max_attempts, duration_minute, sponsors is filtered based on challenge_group choosen

weekly_quiz_task_set
map<id, list<bebras_task>>

Discussion

How to store the data locally?

• Menggunakan Local Storage

Struktur Data Local Storage

• "running_weekly_quiz" -> berisi ID quiz yang aktif
• "quiz_[ID Quiz Active]" -> berisi json quiz + json task_set -> ini dipisah 2 saja

Delivery

• Parser json dari dan menuju Local Storage
• Ambil data dari Firestore dan simpan di local storage

Description

Make the following page after a successful login

But if the button is clicked it will redirect to a page like this

Deliveries:

The pages are created

Description

Make a check logic whether attempts are used up or not
If yes, redirect the page to the final score page instead

Delivery

• check logic implementation

Description

The push notification header is still using the default flutter logo

Edit it to use Bebras logo (also create the asset if it doesn't exist)

Delivery

• Bebras logo in the notif header
• bebras_pandai -> Bebras Pandai

Description

1 of the app's main feature is to fetch & view a PDF material offline

Replicate what we have created in the previous Flutterflow project

But the difference is create a new logic to read the data directly from firestore (https://console.firebase.google.com/u/0/project/toki-bebras-proto/firestore/data/~2Fmaterials)

Categorize the listed item & the tab into: (using the challenge_group field)

• Umum
• siKecil
• Siaga
• Penggalang
• Penegak

In case the network isn't stable, we should cache the downloaded metadata in memory

FYI

The page is opened by click Lihat Materi button in main page

When the list item is clicked, it will download the asset if it does not exist locally and then redirect to the preview page, which has a different presentation based on the file format

• pdf -> P0 (#13)
• ppt
• mp4
• mp3

Delivery

• complete tabbed page (presentation, domain, data) for the list of Materi, which read from firestore

Description

Push notification is essential to send a new information or to remind the user

Research on how we can enable it

Several leads are:

• https://console.firebase.google.com/u/0/project/toki-bebras-proto/notification/compose
• https://firebase.google.com/docs/cloud-messaging

Questions:

• do we need the user device id to send the push notification?
• how we can get the user device id?
• how do we record the user device id?

Delivery

• Detailed report on how we can enable push notification cross-platform

Description

Milestone 1 was finished on 28 June 2023 with not so bad results -> Kak @dwikaputra was able to present it to Google
The PAR doc is intended as a suggestion for how a good project culture could looks like

Reference

https://www.techtarget.com/searchhrsoftware/definition/performance-and-accountability-reporting-PAR

Deliveries

• PAR Document

Description

Make print functionality in preview pdf page like the video below

Delivery

• search & research first the available library we can use to enable the functionality, then discuss it in this issue's comment

Ultimate

• Working print functionality

Description

Add MULTIPLE_CHOICE_IMAGE to display options with the image properly
Please also add A. B. C. labels on the right of the radio button 🙇
For data, please check: 48dfddb

Delivery

• update logic to display options with image (PNG & JPG only, keep SVG for later)

Description

The current approach so that we can work in parallel is by reading the task data directly from DB first 👍

But, the requirement is to make the exercise run without the internet. So after #25 is finished, redirect the logic to read the task data from local storage.

Delivery

• read all quiz task data & configuration from local storage
• if the task data do not exist, handle it first to read from DB based on the quiz configuration

Decription

Refer to: https://docs.google.com/document/d/12RwnmWcVlFKhpYy6oAlfT4-44zQjrb_ysw6MMBzSQdE/edit#bookmark=id.g43vvru5mjww
Assuming we have BebrasTasks property, which is a JSON list like this:

[
  {  // task-1
    "title": ..,
    "id": ..,
    "source": ..,
    "description": ..,
    "question": ..
  },
  {  // task-2
    ..
  },
  ..
]

(The example of BebrasTask data can be found at question_bank)

We create a page like this

Task:

• check https://pub.dev/packages/flutter_html
• the UX is:
  • when Jawab button is clicked show the dialog containing the question
  • ❌ will close the dialog, so user can read the description again
  • ✅ will save the answer and display the next question
  • for current release, no need to support prev/next question

Delivery

• please make the mocked data for example by yourself (2,3 tasks copased from question_bank)
• make the order, in which the task is displayed, shuffled
• make the presentation as described

Description

Right now, the Quiz Exercise can display MULTIPLE_CHOICE task only. Update the code so it can display the SHORT_ANSWER task also.
The update should include [see #Delivery]

Delivery

SHORT_ANSWER

• fix answer object to not require options field -> if not, it will throw null error in SHORT_ANSWER
• post-process the input in SHORT_ANSWER with trim whitespace (left & right) & lowercase

All

• check logic of the task type
• both SHORT_ANSWER & MULTIPLE_CHOICE shown correctly

Date

2023-07-28

Description

Propose a development timeline of Bebras app

Description

When trying Lihat Materi on the iOS simulator, an error occurs:

flutter: Unsupported operation: getExternalStoragePath is not supported on this platform

Please fix it so we can run the app on both platforms

P.S. please check this instruction first to enable the auth https://github.com/ia-toki/bebras-pandai/blob/main/app/README.md#-authentication

Delivery

• working pdf preview & print implementation on iOS & Android

Please also make the process to save user's token

Description

@ArvinCS has proposed refactoring the dir structure following the standard / best practice
https://docs.google.com/document/d/1evHdyjffzYIm4TvETyJ4PY3o3wzyylFF3f4MarLv3Ks/edit

Deliveries:

The new dir structure is merged to main branch

Description

@12henbx proposing to redesign the app to make it more like a kids app

He gives an example like this

https://dribbble.com/shots/9189033-Child-education/attachments/1232166?mode=media

But making it a blue color

Here are the overall pages that need to be redesigned

also need these pages not covered in the illustration:

• Splash screen
• Introduction page before the Quiz start
  T&C before starting the exercise -> "Saya telah membaca peraturan & akan mengerjakan dengan jujur"

References

• Excalidraw link: https://excalidraw.com/#json=uOObNoaK3zSBEW7W9YUQq,fkYdZOnRNMoRmLle0abxvg
• Specification doc: https://docs.google.com/document/d/1tsiaI4nE0WjFBha_uaGXpthCyHtURREzVy41f7dHhbs/edit
• Technical doc: https://docs.google.com/document/d/12RwnmWcVlFKhpYy6oAlfT4-44zQjrb_ysw6MMBzSQdE/edit
• Internal test link: https://play.google.com/apps/internaltest/4701290915075958318

Delivery

• Figma file of redesigned all pages

Description

Make a presentation of the final score page like this

Apply a different logic that

  if n_answer_correct >= (n_answer_incorrect + n_answer_blank):
     // display message MANTAP!!!
  else:
    // display message Coba lagi! Jangan Menyerah! 

Need to adjust the font size for the different messages 🙏

Also, need to update the DB data

Delivery

• the final score page
• append the saved data in #29 in weekly_quiz_participation field attempts then update the DB
  example: https://console.firebase.google.com/u/0/project/toki-bebras-proto/firestore/data/~2Fweekly_quiz_participation~2Fexample_attempted

Description

Bugfix the info in Quiz Registration page is not refreshed after back from Quiz Result page

Delivery

• bug fixed

Description

Make form page when user first time login to be filled with their personal info

Flow

• User login using Google Account
• If user is new, then it will be redirected first to fill the personal info
• In the firestore, other than personal info, we should also store & update the Quiz participation record

UI / UX

• User data: link
• In “Edit Profil” menu, the view is the same with when user fills their info at the first time but change the button to “Perbarui”
• Logout should check if there is an internet connection first (if no internet then logout is failed)
  • Because we want to update the latest user data into server before they can logouted successfully
• List of Bebras Biro: link

Delivery

• Form page when user hasn't registered
• Working "Edit Profil" feature

Description

Apply the following pages

Delivery

• Redesigned page, without breaking the functionality

Description

User has inputted their name when registering, but we still use the display name from FirebaseService
To make the data relevant, change all FirebaseService.auth().currentUser?.displayName with our implementation

Delivery

• code for user service
• updated displayName

Description

Make display pdf page

code in flutterflow as a reference
https://github.com/ia-toki/bebras-pandai/blob/flutterflow/lib/pages/preview/view_pembahasan_soal/view_pembahasan_soal_widget.dart

Additional info

if you check the firestore DB (https://console.firebase.google.com/u/0/project/toki-bebras-proto/firestore/data/~2Flearning_material), you will see the data is structured like this

{
    "title": "Buku Bebras 2016 - Penegak",
    "description": "Buku Bebras 2016 untuk kategori Penegak",
    "challenge_group": "penegak",
    "url": null,
    "staging_url": "https://firebasestorage.googleapis.com/v0/b/toki-bebras-proto.appspot.com/o/buku_bebras%2FBebras-Challenge-2016_Penegak.pdf",
    "source_urls": [],
    "file_format": "pdf",
    "is_printable": true
}

the explanation is:

• title: title to be displayed
• description: description as more info, can be displayed as subheader or tooltip
• challenge_group: group for tab filter
• url: firebase storage URL in production
• staging_url: firebase storage URL in staging
• source_urls: public URLs where we can get the file for metadata (not for app)
• file_format: file format
• is_printable: flag whether the item is printable (not important for now)

some key points are:

• url & staging_url must be inside firebase storage, so we can have a URL that within our system
• we use different fields, url & staging_url, so we can edit easily & not make breaks after the app is released in the future

Delivery:

• Fully functional page to view PDF materials offline

Description

Functionality to edit user profiles with the same page as when they register

Delivery

• A page that loads user data to be edited
• updated_at field in registered_user data
• Adding created_at when the user first registers

Note: use timestamp data type for updated_at & created_at

Description

Edit the "Lihat Materi" page following the design in figma

Figma Link

HiFi:
https://www.figma.com/file/iJ08zyApVusFo6ltICjpy6/Bebras-Pandai?type=design&node-id=1-9119&mode=design
Color Pallete:
https://www.figma.com/file/iJ08zyApVusFo6ltICjpy6/Bebras-Pandai?type=design&t=5OVTY128eWsaK3bk-6

Continuing #28

Delivery

• Redesigned page, without breaking the functionality

Description

To avoid duplicate data, when a user has registered for the related quiz before, we have to disable the choose weekly button (Latihan Minggu Depan or Latihan Minggu Ini)
Check it by get the user's uid & quiz's id in the weekly_quiz_participation, if the data exists -> disable the button

Delivery

• working disabled button if data user found in weekly_quiz_participation

Description

Continuing #18, make the quiz exercise fully functional & already read from firestore

Complete it with other components like repository, model, etc

Please save every input & compare it with the correct_answers:

• for SHORT_ANSWER, trim the left & right whitespace first
• for now, the method of comparison is by using .contains since it's possible to have >1 possible correct answers

Delivery

• read BebrasTask from firestore
• save every input answers
• save also the comparison verdict -> {"verdict": "CORRECT"/"INCORRECT"/"BLANK"}