sandboxnu / flow-in-the-field Goto Github PK

Fix the icons for profile and help to match the wireframes.

Icons can be found here

For a user to play a game, we must be able to get a random set of word pairs from the Firestore.

Specs:

• Add a method to the Firebase Interactor that gets a random set of word pairs of a given size.

Add validation for user inputs in login/register and display feedback to users.

Specs:

• Error message if an input is not filled
• Message if email/password combo doesn't exist
• Message if passwords do not match (register page)
• Message if password doesn't match requirements
• Message if email string is not valid

Stub bc requirements aren't detailed enough

Ideally the font size would be responsive to the size of the screen.

Button text should be 2 points greater than body text, and the smallest body text should be 16.

Possibly helpful links:
React Native docs - PixelRatio
stackoverflow about responsive font size

Specs:

• Logging in takes user to home screen.
• User can see their test date.
• There is a button to go to account settings.
• From account settings, the user is able to go back to the home screen.
• There is a button for the user to begin a matching session (doesn't have to work for now).
• There is a ? button to view onboarding screens again (doesn't have to work for now).

We need to upload the word pairs to Firestore, and ideally this would be a script that we can run.

This is what David gave us: turkishWords.txt
Here's a cleaned up version I made without usedNumber and nextPos: wordPairs.txt

Referencing vocabbuddy's approach may be helpful.

Right now, our app is not using a consistent font on all screens, which is far from ideal. Let's fix that.

The font that we've chosen is Montserrat, which is from Google Fonts (here's its page).

The Export screen on Figma uses Montserrat and can be used as a reference.
Body text has a weight of 400, while headers and buttons have a weight of 500.

This Expo doc on using a custom Google Font may be useful.

IP

stub - need to add repro steps

This may just be because we have the expiry time set too short

When a player selects to play again, they should be able to play a new round for both the matching and selecting game.

Specs:

• Pressing play again takes the player back to the game screen
• The new round should be using a new set of shuffled word pairs

In order to start a selecting game round, we need to be able to display a random set of word pairs.

Figma wireframes

Specs:

• If the user is in the selecting game group, the play button on the home screen should lead to a selecting game screen
• On selecting game screen, get a random set of word pairs (size of set should match their assigned group) and display them on the game screen.
• When displayed to the user, only one English word should be displayed and all Turkish words should be displayed (shuffled).

Currently, our Firestore does not have any data about new users that are created using Firebase Auth.
We want a new user to be added to Firestore after registering them with Firebase Auth. When the user is created, they should be randomly assigned a testing group (2, 4, or 8 pairs of words) and given a test date that is 7 days after their registration day.

Specs:

• When a user is registered in Firebase Auth, a user with the same id is added to Firestore.
• The user is initialized with a random testing group (2, 4, or 8 pairs).
• The user is initialized with a test date that is a week from the current day.

If blocked, contact @emaela.

Should we allow this behavior?

In order to start a matching game round, we need to be able to display a random set of word pairs.

Figma wireframes

Specs:

• If the user is in the pairing game, the play button on the home screen should lead to a pairing game screen
• On pairing game screen, get a random set of word pairs (size of set should match their assigned group) and display them on the game screen.
• When displayed to the user, the pairs should be shuffled so that the English words and Turkish words are not necessarily in the same order.

Repro steps:

1. Open Firebase Console
2. Open app and go to register page
3. Register as a new user
4. Observe in console that a new user appears in Firebase Auth but not Firestore

When typing password, the keyboard comes up and covers the input boxes. Instead, we should have the keyboard "push" the screen upwards so that the user can still see the input box.

The KeyboardAvoidingView may be helpful in fixing this.

Specs:

• When typing in any input box in login/register/settings flow, the keyboard does not cover the input.

Entering the game screen should trigger a new session to be created, and exiting the game screen should trigger the current session to end.

Specs:

• When a player first enters the game screen, a new round should be created and added to the current session with a start timestamp and list of word pairs.
• When a player presses 'done', the current round should be ended with an end timestamp and list of matches.
• When a player presses 'play again', a new round should be created and added to the current session with a start timestamp and list of word pairs.
• When a player presses 'end session', the current round should be ended with an end timestamp and list of matches.

Backend brainstorm for reference on schemas.

Need to add repro steps

Researchers would like as little identifying information as possible, so we don't want to store a name.

Specs:

• Don't require a name to register for an account.

Currently, we have our Firebase Interactor set up, but we need to create a login, register, and password recovery screen so that users can actually do these tasks from the app.

Specs:

• From the login screen, users can enter their email and password to log in.
• From the login screen, users can select to recover their password through email.
• From the login screen, users can select to register for an account with an email and password.
• From the recovery screen, users can enter their email to recover their password.
• From the register screen, users can enter an email and password to register.

IP

Set up a way to emulate Firebase locally for testing purposes

Documentation:
Connect to Firestore Emulator
Connect to Firebase Auth

IP

Specs:

• User can view their email
• User can change their password

In the pairing game, players should be able to create pairings and view their score after submitting them.

Specs:

• Players can drag an English word to pair with a Turkish word
• Players can tap a paired English word to unpair it (return to the unpaired English words)
• When all English words have been paired, the player can click the "done" button
• After clicking done, a modal pops up with the number of correct pairs (ie. 3/4) and the correct answers to any incorrect pairings.
• Styling should match the current wireframes

This ticket doesn't include sending information back to Firestore about sessions & rounds.

In the selecting game, players should be able to drag an English word to match with one of many Turkish words, then view receive feedback on whether they were correct and the correct English meaning for each Turkish word.

Specs:

• Players can drag the English word to pair with a Turkish word
• Players can tap the paired English word to unpair it
• When all English words have been paired, the player can click the "done" button
• Clicking done navigates to a feedback screen
• The feedback screen shows "incorrect" or "correct" based on if the player was right
• The correct English words are shown for all Turkish words

This ticket doesn't include sending information back to Firestore about sessions & rounds.

IP

Specs:
In the Firebase interactor create a...

• field that keeps track of the current user
• field that keeps track of the current session
• method that creates a new session with the user's id and a start timestamp, and adds the session to the user's list of sessions
• method that ends the current session with an end timestamp

Backend brainstorm for reference on schemas.

When a participant opens the app for the first time, they should be presented with some onboarding screens that present the instructions for the experiment.

Introductory text (split into 3 parts):
"Thank you for agreeing to participate in our study! For the next week, your goal is to learn as many Turkish words as possible."
"To achieve your goal, you'll be using this app! Here is how it works: You'll see a set of English words and a set of Turkish words. You'll try to match each English word to the correct Turkish word, then you'll receive feedback. The more you practice, the better you'll get!"
"Over the next week, you can use this app to practice as much or as little as you like. At the end of the week, you'll receive a vocabulary test. The better you do on the test, the more money you'll win!"

Specs:

• On opening the app for the first time, an onboarding screen should appear.
• The user should be able to page through the onboarding screens.
• The last screen should take the user to register or log in.

If blocked, contact @emaela.

Restyle account settings to match figma wireframe.

Wireframe doesn't have the current password and new password inputs, they can match the inputs on the log in flow.

Users should be able to click the help button on the homescreen to view the onboarding screens (experiment instructions) again.

Specs:

• Pressing the help button on the homescreen allows the user to view the onboarding screens again.
• When viewing the onboarding screens from the home screen, the end screen returns to the home screen rather than going to the register screen.

Currently we are still using the default splash screen. This guide should be helpful in implementing our own.

• Add splash screen that matches Figma wireframe

OnboardingScreens.tsx, OnboardingScreenProps has navigation: any

need to add repro steps

We should prevent users from thinking nothing has happened and clicking the sign up button more than once, and then encountering an error.

Drawer navigation doesn't really match our app's functionality, back buttons would make more sense.

Specs:

• There is no sandwich icon or drawer navigation in the app.
• The settings screen has a button to go back to the home screen.
• The game screen has a button to exit and go back to the home screen.

The styling for the button is not in the wireframes yet - for now we can use a placeholder, ie. a back arrow.

Currently, it just displays some text that says loading, ideally the loading screen would look more intentional.

Todo

Participants will be in one of the following groups: matching game players or selecting game players.
The matching game will have the same number of English and Turkish words, and the participant will match them into pairs.
The selecting game will have one English word and a set of Turkish words, and the participant will select the Turkish word that completes the pair.

Specs:

• On registering an account, the participant should be randomly assigned to a group (matching or selecting).

Make env variables for api keys

Organize files into subdirectories

Currently, the onboarding text is specific to the pairing game, and is shown to all users (regardless of their game type).
To properly inform participants, let's use different onboarding texts for pairing vs selecting games, and show the appropriate text to participants during onboarding.

The text should only differ in the second onboarding screen:

Pairing:

​​To achieve your goal, you'll be using this app! Here is how it works:

• You'll see a set of English words and a set of Turkish words.
• You'll try to match each English word to the correct Turkish word, then you'll receive feedback.
• The more you practice, the better you'll get!

Selecting:

​​To achieve your goal, you'll be using this app! Here is how it works:

• You'll see one English word and a set of Turkish words.
• You'll try to match the English word to the correct Turkish word, then you'll receive feedback.
• The more you practice, the better you'll get!

Entering the game screen should trigger a new session to be created, and exiting the game screen should trigger the current session to end.

Specs:
In the Firebase interactor create a...

• field that keeps track of the current user
• field that keeps track of the current session
• method that creates a new session with the user's id and a start timestamp, and adds the session to the user's list of sessions
• method that ends the current session with an end timestamp

For the entering and exiting the game screen:

• When a user enters the game screen, a new session should be created in the Firestore and it should become the current session
• When a user exits the game screen, the current session should end (be given an end timestamp)
• When a user exits the game screen, there should no longer be a current session

Backend brainstorm for reference on schemas.

Right now, we don't have any users or authentication! Firebase Auth looks like a promising tool to implement that. For our purposes, we only need the ability to register with email.

Documentation:
[ ] Getting started with Firebase Auth
[ ] Firebase User Authentication on Expo docs

Specs:

• A new user can register with an email and password
• A returning user can sign in with an email and password
• A returning user can recover their password through their email

If blocked, contact @emaela.