Points: Submit Request to spend points from Student Center

Student Center

User Story

As a student user, I want the ability to redeem my behavior points from the Student Center which will allow me to select the reward(s) I desire, instantly view my updated point balance after redemption, and automatically notify my teacher of the redemption.

UI

Single Classroom

• The user logs in to the Student Center

• The user clicks on behavior points in the top right corner

• The behavior points modal opens on the Student Center screen

• The student user clicks the Rewards button

• The user sees the total points they have earned under the profile picture

• The user will see the message: “Are you ready to spend your points?”

• The user views the list of rewards

  • If there are more than 8 rewards, the user will see a scroll bar to scroll through the list of rewards

• The blue point buttons are active buttons

• The grey point buttons are inactive buttons

• The user clicks on a blue point button to spend behavior points

• The user clicks “Buy It” button to spend the behavior points

• The user clicks “Cancel” button to return to the rewards screen

• If the user clicks "Buy It" button, they will see confetti and a success message: “You redeemed a REWARD NAME! We just let your teacher know.”

• The confetti animation will loop one time.

• The user can click another blue point button to spend more points.

• The user clicks the back arrow in the top left to return to the Student Center points modal screen with their list of points received/spent

• The user clicked the back arrow in the top left to return to the Student Center points modal screen with their list of points received/spent

• The spent points show on top of the screen with the most recent in chronological order

• The user clicks the back arrow in the top left to return to the Student Center and close the behavior points modal

• The user clicks the Rewards button to go to the Rewards screen

Multiple Classrooms

• The student will select a class to view their points

• The student will click the Rewards button to view the rewards and spend the behavior points

• The student user will select a class to view their points available to spend and the rewards for that classroom

• The user will click the blue point button to select a reward and spend behavior points

• We will remove the total points across classrooms (second line: 100 points total)

• The points total will reflect the selected classroom in the dropdown menu (first points line)

• It is possible for the points total to be different depending on the classroom selected and points allocated to the student.

Acceptance Criteria

• The student user navigates to Student Center > Click Behavior Points > Behavior Points modal opens

• Given the educator selects the checkbox for “Make Rewards Visible” and the “Always” radio button is selected, the student will see the rewards button in the student center.

• Given the educator selects the checkbox for “Make Rewards Visible” and the “Specific Time” radio button is selected, the student will see the rewards button in the student center at the designated dates and times the educator has set.

• Given the educator does not select the checkbox for “Make Rewards Visible”, the student will not see the rewards button in the student center.

Single Classroom

• To view the rewards, the student clicks the Rewards button.

• Given the user clicks the arrow in the top left corner, the user will return to the behavior points list.

• The point value dropdown menu will be removed from the rewards screen.

• The student user will view their profile icon/picture and the question: “Are you ready to spend your points?”

• There will be a list of rewards displayed to the student.

  • Given there are more than 8 rewards, the user will see a scroll bar to scroll through the list of rewards.

  • The rewards will be displayed in numerical ascending order

  • The reward names that share point values will be displayed in alphabetical order.

• Each reward will have a button to redeem or “buy” the reward.

• Given the student has enough points to buy the reward, the point button will be blue and active.

• Given the student does not have enough points to buy the reward, the point button will be grey and inactive.

• Given the student clicks the blue active point button for a reward, they will see the “Buy” popup.

• The “Buy” popup will have a pig animation (lottiefile)

  • json file for pig animation:

• Given the user clicks the “Cancel” button, they will return to the points reward screen.

• Given the user clicks “Buy It” button, they will return to the points reward screen and view the success message.

• The success message will have white text in a green rectangle: “You redeemed a REWARD NAME! We just left your teacher know.”

• Given the user is viewing the success message on the points rewards screen, they will see the confetti animation (lottiefile).

  • The confetti animation will loop one time.

  • The confetti animation will stop after it loops one time.

  • json file for confetti animation:

• The user will see the point value reduced by the amount of points that they spent on the reward.

• Given the user wants to spend more behavior points, they will click the point button for a reward and repeat the steps above.

• Given the user does not have enough points to spend on any reward, all point buttons will be grey and inactive.

  • The user can scroll through the list to view the rewards

  • The user can click the arrow in the top left corner to return to the behavior points screen.

• When the user returns to the behavior points screen after redeeming a reward, they will see the “Spent points” heading in the behavior points list.

  • The user will see the point value reduced

  • The user will see the reward redeemed under the Spent points heading.

Multiple Classrooms

• Given the student is assigned to multiple classrooms, they will select the classroom from the dropdown menu to view the total points, behavior points, and rewards for that specific classroom.

• Given the student selects a different classroom from the classroom dropdown menu, they will see the total points, behavior points list, and reward for the selected classroom.

• We will remove the display of total points across all classrooms.

  • The total points will reflect the student points in the classroom selected in the dropdown menu.

• When the student clicks the rewards button for the selected classroom, they will see the classroom rewards list.

  • The student user will see their points available in that classroom.

• Given the student selects a different classroom from the dropdown menu, they will see the rewards list for that specific classroom.

  • The student user will see their points available in that classroom.

• Given the user clicks the arrow in the top left corner, the user will return to the behavior points list.

• The point value dropdown menu will be removed from the rewards screen.

• The student user will view their profile icon/picture and the question: “Are you ready to spend your points?”

• There will be a list of rewards displayed to the student.

  • Given there are more than 8 rewards, the user will see a scroll bar to scroll through the list of rewards.

  • The rewards will be displayed in numerical ascending order

  • The reward names that share point values will be displayed in alphabetical order.

• Each reward will have a button to redeem or “buy” the reward.

• Given the student has enough points to buy the reward, the point button will be blue and active.

• Given the student does not have enough points to buy the reward, the point button will be grey and inactive.

• Given the student clicks the blue active point button for a reward, they will see the “Buy” popup.

• The “Buy” popup will have a pig animation (lottiefile)

  • json file for pig animation:

• Given the user clicks the “Cancel” button, they will return to the points reward screen.

• Given the user clicks “Buy It” button, they will return to the points reward screen and view the success message.

• The success message will have white text in a green rectangle: “You redeemed a REWARD NAME! We just left your teacher know.”

• Given the user is viewing the success message on the points rewards screen, they will see the confetti animation (lottiefile).

  • The confetti animation will loop one time.

  • The confetti animation will stop after it loops one time.

  • json file for confetti animation:

• The user will see the point value reduced by the amount of points that they spent on the reward.

• Given the user wants to spend more behavior points, they will click the point button for a reward and repeat the steps above.

• Given the user does not have enough points to spend on any reward, all point buttons will be grey and inactive.

  • The user can scroll through the list to view the rewards

  • The user can click the arrow in the top left corner to return to the behavior points screen.

• When the user returns to the behavior points screen after redeeming a reward, they will see the “Spent points” heading in the behavior points list.

  • The user will see the point value reduced

  • The user will see the reward redeemed under the Spent points heading.

Teacher Task Inbox Message

User Story

As an educator user, I need to receive notifications in my inbox when my students redeem behavior points and have the capability to mark that I have given them a reward, so that I can monitor spent behavior points and keep a record of rewards provided.

UI

• User clicks on the RethinkEd platform inbox.

• The user clicks on Tasks and sees the Student Points Task

• The Students Points Task will also show in the All tab of the inbox

• The user clicks “Delete” to delete the message

• The user clicks “View” and is taken to the Student Dashboard with the Spend Points modal open for the student.

• The user views the list of behavior points for the specific student

• The user views “Spent Points” entry in the behavior points list

• The specific point value amount the student spent shows next to the “Spent Points” heading

• The specific reward the student redeemed shows below the “Spent Points” heading

• The user clicks the blue “Give Reward” button when they have given the reward to the student.

• The user sees the “Reward Given DATE” when they click the blue “Give Reward" button. (Reward Given)

Acceptance Criteria

• When a student spends behavior points, a “Student Points Task” inbox message will be displayed to the teacher user in the inbox.

• The inbox message will be categorized as a Task

• The inbox message will be visible in both the Tasks tab and the All tab.

• To remove the “Student Points Task” inbox message, the user clicks the “Delete” button.

• Given the user clicks View button, they will be taken to the specific Student Dashboard with the Spend Student Points modal open. (See image: Spend Student Points Modal)

• The educator user will see the Spent Points entry in the student behavior points list

  • The specific point value the student spent will show to the right of the Spent Points heading

  • The reward the student selected will show below the Spent Points heading

• If the user clicks the blue Give Reward button next to the reward name, the button replaced with the text: “Reward Given MM/DD/YY” (See image: Reward Given)

  • We will display an “Undo” button until the user takes another action on the screen

• If the user clicks the “Undo” button, the “Reward Given MM/DD/YY” message will be removed and they will see the “Give Reward” button again.

Teacher Give Reward

User Story

As an educator user, I need to have the capability to mark that I have given the student a reward, so that I can monitor spent behavior points and keep a record of rewards provided.

UI

Student Dashboard

• The user navigates to Student Dashboard > View Behaviors (Behavior Points) > Student Behavior Points Modal

• The user views the list of behavior points for the specific student

• The user views “Spent Points” entry in the behavior points list

• The specific point value amount the student spent shows next to the “Spent Points” heading

• The specific reward the student redeemed shows below the “Spent Points” heading

• The user clicks the blue “Give Reward” button when they have given the reward to the student.

• The user sees the “Reward Given DATE” when they click the blue “Gave Reward" button.

Classroom Rewards

• The user navigates to Classroom > Rewards > Manage Rewards > Select Student > Student Behavior Points Modal

• The user views the list of behavior points for the specific student

• The user views “Spent Points” entry in the behavior points list

• The specific point value amount the student spent shows next to the “Spent Points” heading

• The specific reward the student redeemed shows below the “Spent Points” heading

• The user clicks the blue “Give Reward” button when they have given the reward to the student.

• The user sees the “Reward Given DATE” when they click the blue “Give Reward" button.

Acceptance Criteria

Student Dashboard

• The user navigates to the specific Student Dashboard and clicks “Spend Points” button to open Spend Student Points modal. (See image: Student Dashboard Spend Student Points Modal)

• The educator user will see the Spent Points entry in the student behavior points list

  • The specific point value the student spent will show to the right of the Spent Points heading

  • The reward the student selected will show below the Spent Points heading

• If the user clicks the blue Gave Reward button next to the reward name, the button replaced with the text: “Reward Given MM/DD/YY” (See image: Student Dashboard Reward Given)

  • We will display an “Undo” button until the user takes another action on the screen

• If the user clicks the “Undo” button, the “Reward Given MM/DD/YY” message will be removed and they will see the “Give Reward” button again.

Classroom Rewards

• The user navigates to the Classroom > Rewards > Manage Rewards > Select Student > Spend Student Points modal. (See image: Classroom Rewards Spend Student Points Modal)

• The educator user will see the Spent Points entry in the student behavior points list

  • The specific point value the student spent will show to the right of the Spent Points heading

  • The reward the student selected will show below the Spent Points heading

• If the user clicks the blue Gave Reward button next to the reward name, the button replaced with the text: “Reward Given MM/DD/YY” (See image: Classroom Rewards, Reward Given)

  • We will display an “Undo” button until the user takes another action on the screen

• If the user clicks the “Undo” button, the “Reward Given MM/DD/YY” message will be removed and they will see the “Give Reward” button again.

Rewards Visibility

User Story

As a user, I need to have the capability to set the timing for displaying rewards to my students, enabling them to redeem their accumulated, earned behavior points for rewards.

UI

• The user navigates to Classroom > Rewards

• If the checkbox is unchecked for “Make rewards visible to students in the Student Center”, the students will not see the Rewards button.

• The user selects the checkbox for “Make rewards visible to students in the Student Center”

• The default selection is the Always radio button

• The user clicks “Specific Time” radio button

• The user selects the days the rewards are visible to students within the date range defined

• The user selects a date or date range

• The user clicks Start Time to select a start time for when the rewards are visible in the Student Center

• The user clicks End Time to select a end time for when the rewards are visible in the Student Center

Acceptance Criteria

• Users have the option to control whether students can view the rewards in the Student Center:

  • To activate the option, there must be at least one reward and reward amount created and defined

  • Students will not be able to view the rewards when the educator user leaves the “Make Rewards Visible” box unchecked

  • To allow students to view rewards, users will check the “Make Rewards Visible” checkbox

• When the “Make Rewards Visible” checkbox is selected, the “Always” radio button is automatically chosen by default:

  • Rewards are continuously visible to students in the Student Center (all day, all times)

  • Deselecting the checkbox will hide rewards from the Student Center

• Users can define and set a specific schedule for displaying rewards by selecting “Specific Time” radio button:

• Date, Start Time, End Time input boxes and Days of the Week checkboxes for days visible appear below the “Specific Time” radio button.

• The user clicks the Date input box to open the calendar popup to select the date or date range for the rewards to be visible in the student center.

  • By default, the current date is prefilled.

  • By default, the Start Time will be 8:00 AM

  • By default, the End Time will be 3:00 PM

  • The time display will be associated with the local time of the user.

• Days Visible defaults are:

  • Sundays and Saturdays will be unchecked

  • Mondays, Tuesdays, Wednesdays, Thursdays, and Fridays will be checked

• The users can click the “Start Time” input box to choose a start time for when rewards become visible to students, using a time picker similar to the Incident Reporting time selection

• The “End Time” input box can be clicked to select a time for when rewards should no longer be visible to students.

• If the user makes changes to the default Specific Time section, the rewards will be visible to students in the Student Center according to the parameters they select.

• If users uncheck the “Make Rewards Visible” checkbox, the selections in the “Specific Time” section will be saved for future use when they return and select “Specific Time” again.

Classroom Rewards List

User Story
As a user, I want to ability to effortlessly add new rewards to a rewards list and effectively manage the list so that I can ensure that my students always have access to the most up-to-date rewards and point values.

UI

• The user navigates to Classroom > Rewards

• There is a Rewards section with the blue heading “Rewards”

• The rewards show in a table format

  • Rewards

  • Points (value)

  • Edit button

  • Delete button

• The rewards show in numerical order from the least amount of points to the most amount of points

  • Within each point value the rewards show in alphabetical (ABC) order

• The user clicks to type an entry in the search field and the results will populate on the screen

• The user clicks on the Points filter to select one or more point amounts to filter to in the table.

• The user see the filter selection added as a filter chip

  • The filter can be removed by clicking the “X” or clear all

• The user clicks “Customize Rewards” button to open the customize reward modal

  • Add New Reward tab is selected by default

• The user types to enter the rewards name

• The user types to enter the point value for the reward

• The user clicks Add Reward button to add the reward to the list of rewards

• The user clicks Cancel button or “X” to close out of the modal

  • Changes will not be saved

• If the user does not enter a reward or point value, they will see the validation error on the input boxes.

• The user clicks the “Copy Rewards” tab in the Customize Rewards modal.

• The user selects a classroom from the dropdown menu.

• The user sees the rewards list for the selected classroom populate on the screen below the dropdown menu

• All rewards are automatically selected by default

• The user clicks the checkbox next to the reward name to select or deselect the reward.

• The user clicks the checkbox next to the heading to select all or deselect all rewards in the list.

• The modal is not higher than the screen viewport and contains padding.

• There will be an infinite scroll bar for the rewards list if the list exceeds the modal space defined

• The Cancel and Copy Rewards List buttons should always be visible on the bottom of the modal on the screen viewport.

• The user clicks Copy Rewards List button and all selected rewards will populate in the Classroom Rewards list.

• The user clicks Edit button on a specific reward

  • The Edit Reward modal opens

• The Reward name and Point value will be prefilled with the selected reward

• The user types to change the reward name

• The user types to change the point value

• The user clicks Save Reward button to update the reward in the list of rewards

• The user clicks Cancel button or “X” to close out of the modal

  • Changes will not be saved

Acceptance Criteria

Default Rewards Display

• When the user accesses the rewards section without making any changes, they will view the default rewards and their corresponding point values in a table format

  • Rewards

  • Points (value)

  • Edit Button

  • Delete Button

• The default rewards and their corresponding point value will be:

  • 10 points: Cool Pen, Line Leader, Share first at meeting

  • 20 points: Teacher assistant, Sit next to a friend, Job swap

  • 30 points: Treasure Box, Gum Pass, Digital Time

  • 100 points: Homework pass, Extra Recess Time, Free Choice Time

• The rewards will be sorted in numerical ascending order of points

• The rewards with the same point values will be displayed in alphabetical (ABC) order

• Given I enter letters into the search field, I will see the search initiate once I start typing a 2 letters into the search bar.

• Given I type a search query, I will see the search is case-insensitive, meaning it retrieves results regardless of the case used in the search query.

• Given I type a search query, I will see a loading indicator or a progress bar during the search process if it is taking time to search for matching students.

• Given I type a search query, I will see the search results with the closest matches first who match the query completely and other names that match the query partially

• Given I type a search query with no rewards that match, I will see the message “No rewards in this classroom match the search query”

• Given I type a search query, I see the search results updated dynamically as I type, without requiring a page refresh or manual submission.

• Given I type a search query, I can click "X" button or erase my entry to clear the search query ← Coming with Redesign with Dan

• Given I am a user who clicks the Points filter, I should be able to select one or more point values in the filter

• Given I am a user who selects one or more point values in the filter, I will see the filter chips populate on the screen and the table will reflect the filter choices.

• Given I am a user who wants to remove a filter option, I will click the “X” on the filter chip.

• Given I am a user who wants to remove all filter options, I will click “Clear All” button.

Adding New Rewards

• To add a new reward, the user will click the “Add new reward” button

• An overlay (greyed out background behind pop-up) Add New Reward modal will appear

• The user will input a reward name and its associated point value

• Clicking the “Add Reward” button will save the new reward to the list.

Validation for Adding Rewards:

• If the user attempts to add a reward without completing both the reward name and the point value fields, a validation warning will be displayed.

• The reward cannot be added to the list until both fields are completed.

Editing Rewards:

• To edit and existing reward, the user will click the “Edit” button for that specific reward

• An “Edit Reward” modal will open with the current reward name and point value prefilled in the input fields.

• The user can modify both the reward name and the point value.

Saving Edited Rewards:

• After making changes, clicking the “Save Reward” button will update the reward with the new values in the rewards list

Validation for Editing Rewards:

• If the user deletes the pre-filled reward name or point value and attempts to save the reward (empty input fields), a validation warning will appear.

• Both the reward and point value input boxes must be completed to save the reward in the rewards list.

Canceling Add/Edit Reward:

• If the user decides not to save the changes to the reward, they can click the “Cancel” button or the “X” to close the modal and return to the original reward state.

• Given the user clicks the “Cancel" button or “X”, the reward will not be saved to the rewards list.

Copy from Another Classroom Functionality

• The “Copy from another classroom” functionality will be moved to the Customize Rewards button.

• The Customize Rewards button will open a Customize Rewards modal.

• Given I am a user viewing the Customize Rewards modal, I will click on the “Copy Rewards” tab.

• Given I am a user who clicks the classroom dropdown menu, I will select a classroom.

• Given I am a user who selects a classroom from the dropdown menu, I will see the rewards list for that specific classroom populate on the screen in the modal.

  • By default, all rewards will be preselected.

• The height of the modal should not exceed the viewport of the screen, including padding.

• The list will be an infinite scroll bar for the rewards list if the list exceeds the modal space defined.

• Given I am a user who clicks on a selected checkbox next to the reward name, the reward will be deselected.

• Given I am a user who clicks on a deselected checkbox next to the reward name, the reward will be selected.

• Given I am a user who clicks on the deselected checkbox next to the heading title, the checkbox will be selected and all checkboxes for the rewards in the list will be selected.

• Given I am a user who clicks on the selected checkbox next to the heading title, the checkbox will be deselected and all checkboxes for the rewards in the list will be deselected.

• Given I am a user who clicks “Copy Rewards List” button, all selected rewards will be added to the Classroom Rewards List.

• Given I am a user who clicks “Cancel” button, I will return to the Classroom Rewards screen and no changes or modifications will be saved.

End of School Year - Student Points

User Story

As a student user, I need a way to be reminded that the end of the school year is approaching so that I can spend the points I have earned.

UI

• The user navigates to Student Center

• Two weeks before the end of the school year date, we will display a red dot and the word points in red

• The user clicks the red “Points” to open the Points modal

• The user sees the message on the top of the modal: “Your points will expire on Month Day, Year”.

• Once the user closes the points modal, the red will return to white.

Acceptance Criteria

• We will use the end of school year date defined by Admin users in “Your School Calendar” settings.

• Given there are two weeks left of the school year, we will show the points tab in red with a red dot.

• Given the user clicks on the red points tab, they will see the message: “Your points will expire on Month Day, Year”

• If the user opens the points modal, the red will return to white.

• All points for the school year will be deleted after the end of school year date.

• All student point amounts will start at zero (0) for the next school year

  • We will use admin school calendar settings to define the start of the school year

Student is Removed from Classroom

User Story

As a student, I need to be able to view only the classrooms that I am included in so that I can know how many points I have to spend and where I can spend the points.

UI

• If the student is deleted from a classroom, the classroom will no longer appear in the classroom dropdown menu.

• The student will not be able to access the classroom or the points from the classroom.

Acceptance Criteria

• Given I am a student who has been removed from a classroom, I should not see the classroom in the classroom dropdown menu in the points modal.

• Given I am a student who has been removed from a classroom, I should not have access to the classroom or the points associated with that specific classroom.

Behavior Points Messaging

User Story

As a user, I need a way to locate and view messages about behavior points so that I can easily respond to messages and reference them at a later date.

UI

Admin/Educator Portal

• The screen UI display will expand the entire screen space.

• The points description, points totals, and Positive/Negative Point sections will align left instead of center

• We will add a Points Discussion section

  • The default is a closed view with an arrow point down

• If the user clicks the arrow on the Points Discussions section, it will reveal more information.

  • The behavior points included in the discussion will display

  • The date the message was sent will display

  • The participants in the message will display

  • There will be a “View” button

• The user clicks “View” button to open the discussion panel for the behavior points

  • The discussion panel opens on the right side of the screen

• The screen UI is responsive and shifts the display over to the left when the discussion panel is open

• The user clicks “X” on discussion panel to close the discussion panel

• The screen is responsive and resumes to displaying on the full screen space.

Family / Caregiver Portal

• The screen UI display will expand the entire screen space.

• The behavior points will have an infinite scroll so that the display remains in place and does not extend further on the screen

• We will add a Points Discussion section

  • The default is a closed view with an arrow point down

• If the user clicks the arrow on the Points Discussions section, it will reveal more information.

  • The behavior points included in the discussion will display

  • The date the message was sent will display

  • The participants in the message will display

  • There will be a “View” button

• The user clicks “View” button to open the discussion panel for the behavior points

  • The discussion panel opens on the right side of the screen

• The screen UI is responsive and shifts the display over to the left when the discussion panel is open

• The user clicks “X” on discussion panel to close the discussion panel

• The screen is responsive and resumes to displaying on the full screen space.

Acceptance Criteria

Admin/Educator Portal

• The UI display for the Student Dashboard > Behavior > Points will expand the entire screen space.

• The points description, points totals, and Positive/Negative Point sections will align left instead of center

• On the Student Dashboard > Behavior Points screen, we will add a Points Discussion section under the Positive/Negative behavior sections.

• The Points Discussion section will also display the date and participants in the messages.

• By default, the Points Discussion section will be closed when the user enters from the Student Dashboard > Behavior > Points, shown by a down arrow.

• Given the user clicks the arrow, the Points Discussion section will open to reveal:

  • Behaviors included in the points discussion

  • Date of message

  • Participants of Message

  • View button

• When I click the “View” button on a discussion, the screen is responsive and shifts buttons/filters to the left and opens the discussion panel for the behavior points on the right side of the screen.

• I should be able to click the “X” on the behavior points discussion panel to close the discussion panel.

• The UI screen display should be responsive and expand to display on the full screen space.

Through the Inbox:

• When I click on the inbox, there should be a clear and easily accessible inbox message for Behavior Points discussions.

• Given I am an admin or educator user who clicks “View” on the inbox message, I will be taken to the Student Dashboard > Behavior Points screen with the discussion automatically opened.

• I should have the option to reply to these messages directly from the discussion panel, facilitating easy communication.

• The messages related to behavior points should be stored in a way that allows the user to reference them at a later date

• The performance of the message retrieval and display should be fast and efficient, even if there are a large number of messages.

• I should be able to click the “X” on the behavior points discussion panel to close the discussion panel.

• The UI screen display should be responsive and expand to display on the full screen space.

Family / Caregiver Portal