hoangnguyen92dn / survey-flutter-ic Goto Github PK

Why

A textfield question is a question that allow users to answer with multiple short answers. There can be several textfields in a single textfield question. It is commonly used to ask for user's information.

Example questions

• Don't miss out on our Exclusive Promotions!
  • Textfield 1: Name
  • Textfield 2: Email
  • Textfield 3: Mobile no.
• Your contact information
  • Textfield 1: Name
  • Textfield 2: Room no.
  • Textfield 3: Email address
  • Textfield 4: Phone

Acceptance Criteria

For textfield questions,

• Display an inline textfield
  • Display a placeholder in the textfield
  • When a textfield is not empty, increase the opacity
• Display the keyboard when a textfield is selected
  • Tap anywhere outside of the textfield to release the keyboard
  • The keyboard must not cover the selected textfield

Design

Resource

Textfield Question

Why

Dropdown questions are one of the most common question types to allow users to select one answer. The dropdown options could be anything, such as, a set of cities, locations, or even yes/no, since they are text-based options.

Even though this is called a dropdown, to provide the mobile experience, we will use a native picker wheel for this type of question.

Acceptance Criteria

When a Question model has display_type as dropdown,

• Display a dropdown's picker wheel in the Answer section
• Apply the answers as picker wheel items
  • Use the answer's text to show as the picker wheel item's title
• By default, the first answer is initially selected

Design

Resource

Dropdown Question

Why

A text-area question type is a question type that allows a user to fill in a multi-line text input. It is commonly used when we would like to ask an open-end question, such as asking for suggestions or comments.

Example questions

• Do you have any suggestions?
• Your comments are appreciated!

Acceptance Criteria

For text-area questions,

• Display a textbox that supports multi-line text input
  • Display a placeholder inside the textbox
  • The textbox is scrollable when the number of lines goes beyond its viewport (i.e., when the text input no longer fits within the textbox)
• Display the keyboard when a textbox is selected
  • Tap anywhere outside of textbox to release the keyboard
  • The keyboard must not cover what the user is typing

Design

Resource

Text-area Question

Why

Once logged in, users can navigate through a list of surveys that they can take. The mobile app will show the basic info of the survey as they scroll through each survey.

Acceptance Criteria

• Use the survey cover image as the background image
  • Append l to the image URL to get the high-resolution image
• For the date label, show the survey's created_at.
  • Use the date format as shown in the design on the first line
  • Use the OS relative date format on the second line
• Use the survey title as the title label
• Use the survey description as the description label
• The number of page indicators must match the number of surveys

Design

Resource

Home

Why

Users must be authenticated before taking or viewing any surveys. Our surveys have access restrictions. Some surveys are targeted to a specific group of users only for a more accurate survey result.

The mobile app should allow users to authenticate with their email and password.

Acceptance Criteria

Call POST /api/v1/oauth/token endpoint with the following body:

  {
      "grant_type": "password",
      "email": {{email}},
      "password": {{password}},
      "client_id": {{client_id}},
      "client_secret": {{client_secret}}
  }

Resources

Check out Authentication on Github Wiki for client_id and client_secret.
Postman - Nimble Survey API

Why

In the final step, after users submit their responses. The mobile app must show the Thanks screen if the submit response request is successful.

Acceptance Criteria

• Show the animation on the icon by using Lottie.
• Show the title "Thanks for taking 
the survey."

Design

Resource

Thanks for taking the survey

Why

NPS stands for Net Promoter Score. Users can select their likeliness rating from scale 1-10 to state the likeliness as their answers, e.g. the likeliness of their revisiting the restaurant, the likeliness of them recommending the hotel to friends, etc.

Acceptance Criteria

For NPS questions,

• Display the answers on a scale
• Select any option should highlight every other number on its left
  • For instance, if a user selects 5, 1-5 should be highlighted.
• Unhighlighted options must be grayed out and unbolded.
• Show the Not at all Likely label on the leftest of the scale
• Show the Extremely Likely label on the rightest of the scale

Design

Resource

NPS Question

Why

• Create a new empty project for development (Generate new project from Flutter Template)

• Update README.md

• Update default repo's url in .github templates

Who Benefits?

Developers

Why

Before taking a survey, users should be able to see the full preview of the details so that they can decide whether or not the survey matching their expectation.

Acceptance Criteria

• Upon tapping the Survey Disclosure button in Home, navigate the user to Survey Details with the selected survey.
  • Pass and use the selected survey data fetched in Home.
• Use the survey title as the Title label
• Use the survey description as the Description label
• Use the survey cover image URL as the background image

Design

Resource

Survey

Why

The application requires user authorization on the first launch, once logged in the authorization is cached on the device storage. On the next launch, the user can see the Home screen without sign-in in again if there is a valid authorization on the persistence.

Acceptance Criteria

• Redirect user to Home screen if already signed in

Design

N/A

Resources

N/A

Why

Add the CICD pipelines to execute the following workflow:

• Format > Analyze > Test
• Deploy release build, allow to use debug build since we don't create keystore for release.

Who Benefits?

Developers

Why

Once logged in, users can navigate through a list of surveys that they can take. The mobile app will show the basic info of the survey as they scroll through each survey.

Acceptance Criteria

• Implement a horizontal scroll view with a snapping behavior
• Display the background image view
• Display the Page indicators
• Display the Title label
  • The maximum number of lines is 4
• Display the Description label
  • The maximum number of lines is 2
• Display the Survey Disclosure button

Design

Resource

Home

Why

Once logged in, users can navigate through a list of surveys that they can take. The mobile app will show the basic info of the survey as they scroll through each survey.

Acceptance Criteria

• Call GET /api/v1/surveys endpoint with the following query parameters:

  • page[number]
  • page[size]

• The list of surveys must be fetched when opening the application and cached onto the device.

Resources

Postman - Nimble Survey API

Why

Dropdown questions are one of the most common question types to allow users to select one answer. The dropdown options could be anything, such as, a set of cities, locations, or even yes/no, since they are text-based options.

Even though this is called a dropdown, to provide the mobile experience, we will use a native picker wheel for this type of question.

Acceptance Criteria

For dropdown questions,

• Display the answers on a native picker wheel
• Highlight the selected one
• Gray out the non-selected options

Design

Resource

Dropdown Question

Why

There are two types of Choice questions; Single-choice questions and Multiple-choice questions. Choice questions allow users to choose the most suitable option to answer since the mobile app will list all the options.

As opposed to dropdown questions, Single-choice questions tend to be used when there are only a few options, for example, where do you hear out about us, how do you commute, etc.

Acceptance Criteria

When a Question model has display_type as choice AND pick as one,

• Display a Single-choice question
• Use the answers to show as choices
• Allow only one selection
  • So, if a user selects A and then B, only B should be selected.
• By default, none are initially selected

When a Question model has display_type as choice AND pick as any,

• Display a Multiple-choice question
• Use the answers to show as choices
• Allow multiple selections
  • So, if a user selects A and then B, both A and B should be selected.
• By default, none are initially selected

Design

Resource

Choice Question

Why

Users must be authenticated before taking or viewing any surveys. Our surveys have access restrictions. Some surveys are targeted to a specific group of users only for a more accurate survey result.

The mobile app should allow users to authenticate with their email and password.

Acceptance Criteria

When a user taps on the Login button, call the Login request with the email and password inputs.

• If the request is successful:
  • Securely store the credentials
  • Navigate the user to an empty Home screen. Do not implement anything in the screen yet.
• Otherwise, display the error message on a native modal alert dialog with an OK button.

Design

Sign in with Email Password

Home

Why

A textfield question is a question that allow users to answer with multiple short answers. There can be several textfields in a single textfield question. It is commonly used to ask for user's information.

Example questions

Don't miss out on our Exclusive Promotions!

• Textfield 1: Name
• Textfield 2: Email
• Textfield 3: Mobile no.

Your contact information

• Textfield 1: Name
• Textfield 2: Room no.
• Textfield 3: Email address
• Textfield 4: Phone

Acceptance Criteria

When a Question model has display_type as textfield,

• Display a textfield question
• Use the answers to show as textfields
  • Apply the answer's text as its textfield placeholder

Design

Resource

Textfield Question

Why

Once logged in, users can navigate to the home screen and see the home header.

Acceptance Criteria

• Display the white status bar
• Display the Date labels at the top left
• Display the profile picture at the top right

Design

Resource

Home screen

Why

When a user decides to cancel/dismiss an ongoing survey, he/she must be asked to confirm before dismissing it. This is to prevent any unintentional dismissal of ongoing survey. Otherwise, if a user loses the progress of his/her survey, there are high chances that it might upset the user and unhappy users will unlikely re-take the survey.

It is important to note that if there is no progress on the survey, the mobile app should dismiss the screen without any prompt since the user might just want to see a preview of the questions or start the survey by mistake.

Acceptance Criteria

Upon tapping the Dismiss button,

• If a user has replied to at least 1 question of the survey, prompt a modal dialog with the following content:
  • Title - Warning
  • Message - Are you sure you want to quit the survey?
  • Yes action - Yes
    • Selecting Yes dismisses the screen
  • Cancel action - Cancel
    • Selecting Cancel does nothing
• If the user HAS NOT replied to any survey question, dismiss the screen immediately.

Design

Resource

Quit Survey

Why

When a user starts taking a survey, he/she will go through a set of questions of the selected survey. The mobile app should show how many questions there are for the survey so that the user can expect how long it is going to take and he/she can always stop at any point by dismissing the screen.

Acceptance Criteria

• Use the survey's cover image url as the background image
• Show the actual current question number and the number of questions on the Question Number label
  • {{current-question-number}}/{{number-of-questions}}
  • By default, the starting number is 1.
• Show the current question's text on the Question label
• Tapping the Next button should change the current question number.
  • The Question and Question Number labels should be updated in that respect

Design

Resource

Take Survey

Why

When users open the app, the mobile app should allow users to see the splash screen with the Nimble logo.

Acceptance Criteria

• Display the status bar in white color.
• Display the image background with an overlay.
• Display the Nimble logo.
• Implement animation to show the logo based on Figma design.

Design

Resource

https://www.figma.com/file/GjRPOjDyZ6f4EDL3wKarRK/Challenge---Mobile-App?node-id=34%3A450&t=2O4uXmma4d3QrhkU-4

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

• In the Account side menu, display the Logout button
• Upon tapping the Logout button, display a native modal alert dialog with the following content:
  • Title - Are you sure you want to log out?
  • Destructive action - Log out
  • Cancel action - Cancel
• Use the native style as the modal dialog

Design

Account Side Menu

Why

For Emoji Rating questions, users can rate their satisfaction by tapping on the emoji. This works like a normal rating from 1-5 stars question, but we will use emojis instead of stars

It is worth to mention that there are two Rating Question UI types.

Smiley Rating

Use different emojis on each rating level
It highlights only the selected one.

Emoji Rating

Use repeated emojis for all rating level
It highlights the selected one and all emojis on the left-hand side of the selected one.

Acceptance Criteria

• For Emoji Rating questions,

  • Display emojis as the options
    • By default, use 👍🏻 emoji.
    • Please note that it could be other emojis as well depending on the question type.
  • Select any option should highlight every other emoji on its left
    • For instance, if a user selects the third emoji, the first, second, and third emoji should be highlighted.
  • Reduce the opacity of the non-selected range emojis

• For Smiley Rating questions,

  • Display 5 Smiley emojis as the options - 😡 😕 😐 🙂 😄
  • Select any option should highlight ONLY the selected one
    • For instance, if a user selects the third smiley, only third smiley
      should be highlighted.
  • Reduce the opacity of the non-selected emojis

Design

Resource

Emoji Rating Question

Why

When a user starts taking a survey, he/she will go through a set of questions of the selected survey. The mobile app should show how many questions there are for the survey so that the user can expect how long it is going to take and he/she can always stop at any point by dismissing the screen.

Acceptance Criteria

• Call GET /api/v1/surveys/{id} endpoint with the following query parameter:
  • id: Survey's id

Resources

Postman - Nimble Survey API

Why

At the final step, users must be able to submit their responses. The mobile app must show the Submit button instead of the Next button to inform users that the app will submit their response on the next action.

Acceptance Criteria

Upon tapping the Submit button, perform the Submit Survey Response request with the survey id and the user's answers.

• If the request is successful,
  • Navigate the Thanks screen.
• Otherwise, display the error message on a modal alert dialog with an OK button
  • Selecting the OK button does nothing. DO NOT dismiss the screen so that the user can retry the submission.

Design

Resource

Take Survey - Last Question

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

• When a user confirms to log out, perform the Logout request.
  • If the request is successful,
    • Navigate the user to Sign In
    • Remove any account-related stored data, such as credentials or user profile info.
  • Otherwise, display the error message on a native modal dialog with an OK button.
• When a user selects Cancel, do nothing.

Design

Account Side Menu

Why

After login, if the access token is expired, we need to handle it by implementing a refreshing token to keep the user session.

Acceptance Criteria

• Implement the refresh token API within the base network whenever we have 401 status
• Automatically call the Refresh Token API to get a new access token.

NOTE: This story only supports the happy case with the Refresh Token API. In case it returns an error, we will handle it in another story.

Resources

Refresh Token: https://nimblehq.postman.co/workspace/Nimble~9daf6b25-882e-4ad0-8299-95529e2883ff/request/11835486-5f7ef181-ab43-43c2-8683-8b487e07cc56

Why

When a user starts taking a survey, he/she will go through a set of questions of the selected survey. The mobile app should show how many questions there are for the survey so that the user can expect how long it is going to take and he/she can always stop at any point by dismissing the screen.

Acceptance Criteria

• Display the background image
• Display the Dismiss button
  • Tapping the Dismiss button should navigate the user to the previous screen
• Display the Question Number label (Above the Question label)
• Display the Question label
• Display the Next button
• DO NOT display the Answer section yet.
  • There are many types of answers. There will be separate tickets to handle them.

Design

Resource

Take Survey

Why

Once logged in, users can navigate to the home screen and see the home header.

Acceptance Criteria

• Automatic usage of refresh tokens to keep the user logged in.
• Call GET /api/v1/me endpoint to get the user information.
• Get today information to show on the home header.

Resources

Postman - Nimble Survey API

Why

Once logged in, users can navigate to the home screen and see the home header.

Acceptance Criteria

• For the date label, show today's information.
• Use the date format as shown in the design.
• For the user's avatar, show the user's avatar_url from the API.

Resources

Home screen

Why

Before taking a survey, users should be able to see the full preview of the details to decide whether the survey matches their expectations.

Acceptance Criteria

• Display the back button
• Display the Title label
  • No maximum number of lines
• Display the Description label
  • No maximum number of lines
• The screen is scrollable only when the content does not fit the screen

Design

Resource

Survey Detail

Why

There are two types of Choice questions; Single-choice questions and Multiple-choice questions. Choice questions allow users to choose the most suitable option to answer since the mobile app will list all the options.

As opposed to dropdown questions, Single-choice questions tend to be used when there are only a few options, for example, where do you hear out about us, how do you commute, etc.

Acceptance Criteria

For choice questions,

• Display choices with checkboxes
• Highlight a selected choice by ticking its checkbox
• Reduce the opacity of non-selected choices and untick their checkbox
• DO NOT limit the maximum number of lines on the Choice Text labels

Design

Resource

Choice Question

Why

As users can sign in, the app must have an option for users to sign out. Signing out should completely remove any account-related footprints of the user.

Acceptance Criteria

Call POST /api/v1/oauth/revoke to sign out with the following body:

{
  "token": "{{user_access_token}}",
  "client_id": "{{client_id}}",
  "client_secret": "{{client_secret}}"
}

Resources

Postman - Nimble Survey API

Why

At the final step, users must be able to submit their responses. The mobile app must show the Submit button instead of the Next button to inform users that the app will submit their response on the next action.

Acceptance Criteria

Call POST /api/v1/responses endpoint with the following body:

{
  "survey_id": "{{survey-id}}",
  "questions": [
    {{question-id-with-answers}},
    ...
  ]
}

For question-id-with-answers, there are two possible types of this data structure:

1. With ID

{
"id": "{{question-id}}",
"answers": [
 {
   "id": "{{answer-id}}"
 }
]
}

2. With ID and Answer

{
"id": "{{question-id}}",
"answers": [
 {
   "id": "{{answer-id}}",
   "answer": "{{answer}}"
 }
]
}

Resources

Postman - Nimble Survey API

Why

Users must be authenticated before taking or viewing any surveys. Our surveys have access restrictions. Some surveys are targeted to a specific group of users only for a more accurate survey result.

The mobile app should allow users to authenticate with their email and password.

Acceptance Criteria

• Display the Nimble logo.
• Display the blurred background.
• Display the Email text input.
• Set the placeholder text to Email.
• Display the Password text input.
• Set the placeholder text to Password.
• Mask the password input with the native-OS feature.
• Display the Login button.
• DO NOT display the Forgot Password button yet. We will work on this on another separate epic.

Design

Resource

https://www.figma.com/file/GjRPOjDyZ6f4EDL3wKarRK/Challenge---Mobile-App?node-id=31%3A195&t=2O4uXmma4d3QrhkU-4

Why

We need to support the pull to refresh feature that allows the user to get the latest data.

Acceptance Criteria

On the home screen, when the user swipes from top to bottom, the application must fetch the latest surveys and refresh the survey list.

• Support pull down to refresh the list of surveys.
• Refresh the cache data.
• Show a loading indicator (implemented) while doing the refreshing.

Why

NPS stands for Net Promoter Score. Users can select their likeliness rating from scale 1-10 to state the likeliness as their answers, e.g. the likeliness of their revisiting the restaurant, the likeliness of them recommending the hotel to friends, etc.

Acceptance Criteria

When a Question model has display_type as nps,

• Display an NPS scale in the Answer section
• The number of options (the scale range) must match the number of the answers.
• By default, none are initially selected.

Design

Resource

NPS Question

Why

When a user starts taking a survey, he/she will go through a set of questions of the selected survey. The mobile app should show how many questions there are for the survey so that the user can expect how long it is going to take and he/she can always stop at any point by dismissing the screen.

Acceptance Criteria

• Call GET /api/v1/surveys/{{survey-id}} endpoint to retrieve the survey details
• Map the response with the only necessary values for now

Resources

Postman - Nimble Survey API

Why

For emoji rating questions, users can rate their answers by tapping on the smiley face. This works like a normal rating from 1-5 stars question, but we will use smiley emojis instead of stars

Acceptance Criteria

When tapping the Next button (or the Submit button) on an emoji rating question, store the currently selected option,

{
  "id": "{{question-id}}",
  "answers": [
    {
      "id": "{{selected-answer-id}}"
    }
  ]
}

Design

Resource

Emoji Rating Question

Why

The deployment workflow for android and iOS is currently failed due to the old flutter-version.

• Upgrade step subosito/flutter-action@v2 from '3.3.10' to '3.7.7'

Who Benefits?

Developers, Users