rightoneducation / righton-app

React Native mobile app & React web app

RightOn Education

Our Mission & Vision

Mission: Maybe you too know kids (or even adults) who'll say things like, "I'm not a math person." or "I just can't do science." Our mission is to unlock every student’s potential in STEM: building self-confidence, developing conceptual understanding, and helping them overcome hurdles in both school & life: whether they'd like to build apps, go to Mars, or become the next Beyonce!

While many apps focus on getting answers as quickly as possible, we're turning things around: RightOn not only makes it OK to make mistakes: players get rewarded for the most popular wrong answers. Through learning from mistakes and misconceptions, everyone takes their learning to the next level.

Vision: In the future, we envision RightOn! to become a multimedia learning platform and game show (spanning mobile apps and livestream video), one that eventually helps connect students of all ages and backgrounds to learn new subjects -- from math today to others in the future.

Our Values

We’re a team that sometimes falls down, always gets back up, and never stops having fun.
Trust and open communication: first seeking to understand, then to be understood
Integrity: doing the right thing
Compassion: lending a hand to others, giving back, expressing gratitude
Humility: working together on something bigger than ourselves
Beginner’s mindset: going into things with an open mind, always learning and making new mistakes
Fun: having fun along the way!

Project Description

We're currently developing two apps:

1. A React Native mobile app for middle/high school teachers to use in classroom environments. Think Balderdash/Fibbage + STEM + learning from and having fun with mistakes and misconceptions.
2. A React web app that enables teachers to create games/questions that appear in the mobile app and view classroom results.

We're running on AWS, including AppSync/GraphQL, DynamoDB, and Lambda. A future phase might include a livestream game show with elements similar to the following online rock-papers-scissors tournament.

Getting Started

Click into the web or mobile directory to learn how to get started.

Files Needed

The react-native npm package.
A local.properties file if testing on Android.
The Xcode editor if testing on iOS.

Notes:

Some NPM packages may be out of date and need to be updated for the Android build.
If you encounter the following error:

A problem occurred evaluating project ':amazon-cognito-identity-js'. Could not find method implementation() for arguments [com.facebook.react:react-native:+]

Locate the `build.gradle` file in `node_modules/amazon-cognito-identity.js/android`, find the line mentioned in the `dependencies` object, and change `implementation` to `compile`.

If you receive a `hasteImpl returning the same name for different files` error in your packager: This is due to identical path names created by AWS Amplify. To fix this issue, simply drag the `#current-cloud-backend` folder from `${root}/amplify` out, restart the packager and run again.

Contributing

We welcome contributions from all, and each contribution makes a difference! Please report issues directly to us or make pull requests for any features or bug fixes. Please refer to our Contribution Guide for further details.

Additional Documentation

Please refer to our docs

Communication Channels

We are always happy to hear from people who are also interested in building learning apps and making math more fun and achievable for all. We're building this plane as we fly it, and suggestions are always welcome and appreciated. Give us a shout anytime at [email protected]. You're also welcome to join our Slack community -- just let us know!

Testing

You are welcome to download our latest beta version to test and give feedback. Please use Test Flight to install our app from this link: https://testflight.apple.com/join/2l8414MU

Deployment

Coming soon!

Acknowledgments

Meet our team

Andy Li - Mobile App Lead
Allison Liu - Education Research
Anna Roberds - Math Educator / Community Engagement
Daz Yang - Full-Stack Web Developer
Drew Hart - Dev Lead
Edward Tan - Architect Lead
Katerina Schenke - Education Research
Mani Ramezan - Mobile App Lead
Marizza Bailey - Math Educator / Content & Pedagogy
Mozzie Dosalmas - Math Educator / Equity & Community Engagement
Ryan Booth - Web App Lead
Sinclair Wu - Product Lead
Yong Lin - UX Lead

Advisors

Ay-Nur Najm - Independent math consultant and computer science teacher
Ben Woodford - Doctoral scholar at Stanford specializing in math education
Bunmi Esho - STEM Advocacy Executive Director
Esmeralda Ortiz - Senior Director, Boys & Girls Clubs of the Peninsula
Eric Boucher - Cofounder & CEO of Ovio
Iman Howard - STEM Educator
Lybroan James - Chief Education Officer, STEMulate
Paul Chin - Assistant Professor of Practice, Relay Graduate School of Education
Payton Richardson - Data Officer, Eastside Pathways
Ronald Towns - STEM Administrator


Learn more about RightOn! & our team at https://rightoneducation.com.

righton-app's Issues

Not able to select answers in Trick Answer selection screen

When viewing this screen, pressing on the grey dots doesn't select the answer.

Tested on iOS 13.7 iPhone X

"Don't Get Tricked" screen shows Hints card

Observed

"Don't Get Tricked" screen shows the Hints card
Screenshot on iPhone X:

Expected

"Don't Get Tricked" screen doesn't show the Hints card, only Question and Choose One cards.

Selecting answers in trick answer list has a delay

There's a delay in tapping answers in trick answer page. This is probably related to how FlatList is used and updating its state.

[UX] [Mobile] Need to fix the bottom message invisibility on smaller screens

Adding Jest and React Testing Library

We're looking to add a unit testing library. Since we use React for the mobile app and the web interface, we're thinking of using:

• Jest: https://jestjs.io/docs/en/getting-started.html
• React Testing Library: https://github.com/testing-library/react-testing-library#installation

Both of these libraries are widely used, but it would also be great to have a markdown file laying out best practices.

[Viewing List of Trick Answers] Vertical scrolling appears to get stuck at times

In the Trick Answers card: the vertical scrolling functionality seems to get stuck at times: e.g., after a trick answer has been added, one sometimes has to wait multiple seconds to be able to scroll up & down -- the screen appears to freeze, and it'd be great if the scrolling could be more instantaneous (ideally as quick and responsive as when one swipes left/right to navigate between the Question, Trick Answers, and Hints cards).

Steps to Reproduce:

1. As a non-Facilitator, enter five trick answers: e.g., 135, 246, 357, 468, 579.
2. When the 3rd trick answer has been entered, one has to scroll to be able to see all trick answers in entirety.
3. Starting from the 3rd trick answer and for subsequently entered trick answers, the vertical scrolling functionality can be a bit choppy, often appearing to freeze. Sometimes, right after a trick answer has been entered, one is able to scroll down and see the full list; however, upon trying to scroll back up, the screen can freeze. The delay can be several seconds, appearing as an intermittent freezing/crash.

Testing was conducted on an Android device (Galaxy S7).

Create a config file to download from backend

At the moment, there are two values need to be able to modify at runtime

• Score for popular answer
• Score for trick answers

There might be more options coming in. Since the implementation is in React Native, there needs to be investigation on using RN push vs. config file endpoint.

Connect teacher games list to existing data

After changing the structure of the new database, create a new implementation that references the existing data for the games list to appear on the mobile app

Integrate with fastlane

Integrate the mobile app with fastlane to automate build process. Currently, the build is done manually and uploaded to AppCenter and Testflight. Further more, we should look into Github actions.

Update README

The top level README should not be a description of the mobile app.

Copy change for cloning action

The action should name the clone Clone of X rather than Copy of X

Create JSLint

Create jslint rule or a way to automate formatting rules

[Mar 10] Create DynamoDB schema for GameState

WIP #85

"Don't Get Tricked!" screens are displaying incorrect instructions

Observed

"Don't Get Tricked!" screen shows "Pick the most popular trick answer for a bonus (+25)"
Screenshot on iPhone X:

Expected

"Don't Get Tricked!" screen shows "Pick the correct answer 
to get for your team (+25)"
Screenshot from Figma (link):

Clicking the action menu on a game should trigger the game details, iff you're on the sidebar view

[Non-Facilitator Flow] Incorrect Message Displayed

Expected behavior: in the non-Facilitator flow, when the Trick Answers card is first displayed, the following message should be displayed: "What do you think the correct answer is?" For the latest messages, please reference the "Student Screens - Updated Trick Answer Flow" tab in Figma.

Actual behavior: the message for Facilitators appears: "Help guide your team to guess the correct answer!" (see attached screenshot)

Testing was conducted on an Android device (Galaxy S7)

.

[Entering Trick Answers] After an incorrect/trick answer has been entered, the "What do you think the correct answer is?" field should be cleared

July 14 build:

Observed:
Currently, after an incorrect/trick answer has been entered (e.g., "123" in the attached screenshot), "123" still appears in the "What do you think the correct answer is?" field.

Expected:
After an incorrect/trick answer has been entered (e.g., "123" in the attached screenshot), the "What do you think the correct answer is?" field should be cleared.

Note: After the wait time for hints has passed (and students are then able to view the hints and the correct answer in the Hints card), the "What do you think the correct answer is?" field will be different -- there will instead be a message that reminds students what the correct answer is.

[June 1] DynamoDB -- Create Lambdas

The list of APIs is documented in here.

[ ] submitanswer
[ ] toggleanswer
[ ] selecttrickiestanswer
[ ] vote

Replace ExploreScreen NavBar from DetailScreen with NavBar to launch game

The dev version of the app currently has the navbar from the teacher ExploreScreen. We need to replace that navbar with the a navbar to launch the game as illustrated in the figma screenshot.

Update AppCenter to v4.0.0

This requires migrating from App Push to Azure Notification Hubs. More information can be found on release notes for AppCenter: https://github.com/microsoft/appcenter-sdk-react-native/releases/tag/4.0.0

[Facilitator Flow] Facilitator should not be able to enter trick answers or guesses at the correct answer.

In the Facilitator flow, the facilitator can currently still enter trick answers / guesses at the correct answer.

• In the multi-device scenario, one device is randomly assigned to be the Facilitator, and the Facilitator's role is to make sure that the team enters at least 3 trick answers; when 4 or more trick answers are entered by the team, the Facilitator selects three. Please note that the Facilitator cannot enter trick answers or guesses at the correct answer.
• In the single-device scenario, there is no Facilitator, and that single device will naturally be able to enter trick answers / guesses at the correct answer.

To be able to test the part of the Facilitator flow where the Facilitator is able to select/unselect trick answers entered by other team members, we will naturally need a way to enter those trick answers. Before back-end functionality is enabled, we can just keep the current functionality as-is for testing purposes. Later down the road, when back-end / multi-device functionality has been enabled: the trick answers entered by non-Facilitator users should then also appear in the Facilitator's view for the Facilitator to select/unselect.

Testing was conducted on an Android device (Galaxy S7).

[Jan 13] Create staging clone of RDS database

Started this recently, and I have a DB cluster set up. I think we need a separate App Sync setup too?!? Maybe we need the config in code.

Realign "Explore" Text and Hamburger Menu on ExploreScreen NavBar

The dev version of the app has the "Explore" text more aligned to the right with the hamburger menu icon missing compared to the Figma Screen. Realign the navbar to be similar to the Figma navbar.

[June 1] Add Lambda for GameSession API

Add GameSession api which receives a game ID from the user and returns a GameSession object

[June 23][Game API] Create new lambdas for web app use case (RDS data source)

Add required lambdas needed by web app to integrate with the database.

P2: When voting results are displayed (bottom to top), the bottom row should contain the least popular answer, etc.

When voting results are displayed (bottom to top), the bottom row should contain the least popular answer (lowest percentage of votes) and the top row should contain the most popular answer (highest percentage of votes).

In the attached screenshot:

• "540" seems to have 0% and should thus appear in the bottom row (when an answer has received no votes, please still show 0% in the right column and no corresponding "progress bar" in the left)
• In the particular screenshot, the answers from top to bottom should be: 1) 8 (89%), 2) 360 (10%), 3) 1080 (1%), 4) 540 (%)

[June 23] Copy the current data from DynamoDB to RDS

Need to fill up the games and questions tables

Complete navigation bar for teacher details page

Implement a navigation bar to navigate in between the further details page and games page of the teacher side mobile app

Create web portal to help testing the mobile app

During testing phase, it'd be hard to keep starting and ending games since that requires access to two devices and soon, it'd be time consuming to test a simple scenario or fix a bug. This proposes to create a web portal where it helps with testing the app like starting a game and modifying some aspects of started game.

Trick answers, once added, should be read-only and have a larger clickable area for Facilitators

In the July 14 build:
When a trickster team is entering trick answers: once a trick answer is added to the list of trick answers, it:

1. Should be read-only (i.e., not editable or deletable)
2. Have a larger clickable area (e.g., the entire button)

Please also apply this update to the "Don't Get Tricked" / voting screens where student teams try to vote for the correct answer (and try not to be tricked by the trickster team's trick answers).

Line wrapping issue for game titles

When game titles are too long, there is a line wrapping issue when only half the title is rendered.

For example, "Excellent Exponents" is rendered properly but "Copy of Excellent Exponents" might not be displayed all the way.

Move mobile app to sub-directory.

I don't think there are any scripts that require the files to be in the current locations right now.

Add relational database ERD to Github wiki

[July 21][Mobile] Integrate with backend APIs

Integrate with backend API and fetch the data from the servers instead of using existing mock data

P3: Delay in 1st Trick Answer Appearing in List of Trick Answers

12/9 Build:

• Great progress in this build with the trick answer component!
• In both the Facilitator & non-Facilitator flows: after the first trick answer is submitted, there's a noticeable delay (~2-3 seconds) before that trick answer appears in the list of trick answers.
• This issue seems to affect only the 1st trick answer (the 2nd, 3rd, and all subsequent trick answers seem to appear OK -- virtually instantaneously in the list of trick answers after being submitted).

P3: After the correct answer has been guessed/revealed: after a trick answer has been submitted, assign focus to the next available cell

12/9 Build:

After the correct answer has been guessed or revealed: after a trick answer has been submitted, assign focus to the next available cell (at the bottom of the trick answer list). If this is not possible in a React Native component, it'd be great to at least have the blinking cursor appear in that cell.

Complete details question list for teacher games

In the mobile app teacher game page, there should be a details list that displays each question from their made game

Rename repository and remove web dashboard repo

@sincwu we should remove the other repo

[July 21][Mobile] Integrate Redux into mobile app

Currently, mobile app doesn't follow any pattern for data flow and it's using mock data. As moving forward with integrating with backend APIs, the infrastructure for handling the data properly needs to be put into the place.

Outdated library versions with security vulnerabilities

npm audit in the project directory reveals several Denial of Service vulnerabilities known to exist in the versions of the libraries we're using. Updating these libraries should fix the vulnerabilities, but some updates may include breaking API changes. This fix should be tested in its own branch before merging into master.

[Mobile] Look into Relay

Relay is a library that can be used with GraphQL to improve the performance. Lets look into this library since it's about the time to start integrating with backend and see if this is something that should be used.

After trick answers have been entered, trim any leading or trailing spaces

Treat numbers, whether entered with commas or not, as equivalent

When a user enters 1) a guess at the correct answer before the correct answer has been revealed or 2) a trick answer after the correct answer has been revealed: treat numbers, whether entered with commas or not, as equivalent.

For example, in the scenario below, "1080" is the correct answer. However, when "1,080" is entered before the correct answer has been revealed, "1,080" is identified as a wrong answer and added to the trick answer list. When "1,080" is entered after the correct answer has been entered/revealed, "1,080" is accepted as a trick answer even though it is equivalent to the correct answer.

This issue tracks just the handling of commas. In the future, we may want to think about handling other equivalences -- e.g., 2/4 = 1/2 = 0.5.

P3: When guessing the correct answer: if an incorrect answer is entered, the "Nice try!..." message should disappear after X seconds

12/9 Build:

Expected behavior:
When guessing the correct answer (before the hints have been revealed): if an incorrect answer is entered, the "Nice try! That's not the correct answer, but it sounds like a great trick answer! We've added it to your list of trick answers!" message should disappear after X seconds (X = a variable that can be adjusted as needed). Please see Figma screens below.

Observed behavior:
The "Nice try!..." message appears to remain permanently.

Move database decision notes into Wiki

[July 7][Mobile] Create networking framework

In the beginning of integrating with backend, it'd be nice to be able to create a networking library which does the API calls instead of putting all these API calls in the app and components. In addition to better separation of concerns, this can be shared with #90 to reduce the code duplication and make it easier to create debug portal.

[Entering Trick Answers] Remove the spinning timer component from the Trick Answers card (and keep it for just the Hints card)

Background: To encourage students to think about the correct answer and come up with plausible / non-random trick answers, we've added a prompt for them to try to first try to guess the correct answer. If guesses at the correct answer are incorrect, an encouraging note is displayed, reminding students that answers that they thought were correct but are actually incorrect are great potential trick answers.

Since we'd like students to start thinking about the question and potential correct answers right away, please remove the spinning timer component from the Trick Answers card (and keep it for just the Hints card) -- thanks!

[Apr 21] Hook App Sync app up to RDS data source

Overview of tasks:

• Set up Data API for the database
• edit the existing app sync app's (web) data sources
• make a new action with an RDS resolver
• test the new endpoint in the playground

I got caught in the first step because I forgot the password of the Aurora database. 😆 We can reset it, or create a new database with a snapshot of the existing schema.

When user clicks on a game card to view game details, the title of that game card should be highlighted and visible in the left pane w/o scrolling

In both "Last Updated" and "Alphabetical" views: When user clicks on a game card to view game details, the title of that game card should be highlighted and visible in the left pane w/o scrolling (ideally in the top / upper left of the left pane).

[June 30][Backend] Implement required APIs

This includes analyzing and coming up with the list of required APIs in addition to setting up the next steps on how to implement them.