Overview
Figma
Feature
User Story
UI Description
...
Create CICO button
...
Record Data button
...
Overview
The classroom table with student details provides educators with a detailed overview of student check-in and check-out tools. The Check-In, Check-Out Classroom Report allows teachers to view information about the students with CICO Interventions and offers opportunities to view the details or record data for the CICO Intervention for the student.
Figma
Feature
Feature 194965: Classroom | Check In Check Out
User Story
As a RethinkEd user, I want to view a comprehensive classroom report of all check-in/check-out activities so that I can easily monitor and track the behaviors of my students.
UI Description
Heading: Check-In, Check-Out
Search Bar
User can search by student first and last names, grade level, behavior(s), and team member first and last names to refine the table search.
Kendo Search Bar component with the ability to delete text entered by selecting the 'X' that displays once text is entered in the search bar.
Filters
Grade: Dropdown menu (single select) that displays all grades of the students in the specific classroom
Behavior: Dropdown menu (multi-select) that includes all behaviors associated with the CICO tools for the students in the classroom.
Created By: Dropdown menu (single-select) that includes all team member names who have created a CICO tool for a student in the selected classroom.
Status: Dropdown menu (multi-select) that includes the values: Active, Archived, Draft, Goal Mastered
Status Filter is multi-select. User can select one or more statuses and each status will display as a separate filter chip.
Check-In, Check-Out Table:
Table columns will display in this order:
Student Name: First name and Last name. Student name is a link that navigates user to the Student Dashboard > Behavior Support > Check-In, Check-Out Screen
Grade: Displays grade level of the student
Behavior: Displays one or more behaviors selected for the CICO Tool.
Multiple behaviors are separated by a comma (Example: Sleeping, Interrupting)
Behaviors will wrap to the following line if they extend the Behavior row width.
Date : Creation Date, Last Recorded Date, or Date Range for CICO Tool? Created: Display the date the tool was created. (Mon. DD, YYYY).
Last Data Recorded: Display the date of the last recorded data point.
Mon. DD, YYYY
If data has not been recorded, display ‘N/A’.
Created By: First name and Last name of team member who created the CICO tool.
Status: Active, Archived, Draft, Mastered
Display as a status chip in the table
Mastered will display as a green ‘Mastered’ status chip
Active displays as a RethinkEd primary blue ‘Active’ status chip
Draft and Archived display as a grey status chip
Actions:
Display ‘View Data' button in Actions column when at least one data entry has been recorded for the Check-In/Check-Out tool
This logic applies to statuses: Active, Mastered, Archived
Display ‘Record’ button in the Actions column for a Check-In/Check-Out tool in ‘Active’ status
Record opens the Data Express > CICO tab with the specific CICO tool displayed on the screen
Display kebab menu with options:
Manage Tool
Opens the Create Check-In/Check-Out modals for the selected tool and display all Goal, Collection, and Mastery details
Print Data Sheet
Opens the ‘Create Data Sheets’ modal
Change Status
Opens Change Status Modal with the options to change status to: Active, Draft, Archived, Mastered
Default Selection is the Status of the selected Check-In/Check-Out tool.
Delete
Displays warning confirmation message
Create New Tool button
Selection Pop-up Modal Displays:
Header: Create Check-In, Check-Out
Body Text: ‘For which student are you creating the tool?’
Dropdown selection for ‘Select Student’:
Search bar at the top of the dropdown menu to search for student first or last name.
Displays list of all students in the selected Classroom.
Cancel button: Navigates user to the screen they were viewing.
Create button: Navigates user to the Create CICO Tool modal screens, starting on the ‘Browse Behavior Goals’ modal screen with the student pre-selected.
Record Data button
Selection Pop-up Modal Displays:
Header: Record Data Check-In, Check-Out
Body Text: ‘For which student are you recording data?’
Dropdown selection for ‘Select Student’:
Search bar at the top of the dropdown menu to search for student first or last name.
Displays list of all students in the selected Classroom.
Cancel button: Navigates user to the screen they were viewing.
Record button: Navigates user to the Data Express > CICO tab for the selected student
Date Range Selection:
A date picker component with calendar picker and dates display in input field as Month DD, YYYY (Example: Apr 10, 2023 - Apr 24, 2024)
Upon opening date picker component, pre-set date selection values display next to calendar picker:
School Year
Last 7 days
Last 14 days
Last 30 days (default)
Last 90 days
Last 180 days
User can select a custom date range using the calendar picker.
Print Icon in Header:
Display Print icon in header toolbar. Upon selecting the print icon, a PDF print version of the table will generate, including any filters that are applied to the table.
Title: Check-In, Check-Out
Classroom Name
Date Range
Filters Applied
Table Details
‘Action’ column can be hidden from Print version of the table.
Export Icon in Header:
User selects ‘Export to Excel’ or ‘Export to CSV’ and the export file is generated.
Export includes the table details: Student Name, Grade, Behavior(s), Date Created, Last Data Recorded Date, Created By, and Status
Table headers are the column titles
Table details are populated in the rows
Pagination:
Display Kendo Pagination Component for the table and include all functionality.
Empty State:
Display image graphic (This is not the final image. The image will be updated)
Heading: "Check-In/Check-Out Tool"
Body Message: 'To begin, start by creating your first tool for a student.'
Create New Tool Button: Opens to modal to select student in the classroom and then displays Create Check-In/Check-Out Modals, landing on the Browse Behavior Goals modal screen.
User Interaction and Validation Notes
Search Bar: Verify that the Kendo Search Bar component is implemented with the ability to delete text entered by selecting the 'X' that displays once text is entered in the search bar.
Status Filters: Individual Filter chips display for each selected status filter. The ‘Behavior’ and ‘Status’ filters are multi-select.
Kebab Menu Actions: Each action will open the corresponding related pop-up modals or navigate the user to the correct screen.
Manage Tool:
Opens the Create Check-In/Check-Out modals for the selected tool and display all Goal, Collection, and Mastery details
Print Data Sheets https://rethinkautism.atlassian.net/l/cp/MkCbprYZ :
Verify that the default selection is ‘Select’ with the specific Check-In/Check-Out tool pre-selected when the user selects ‘Print Data Sheet’ in the kebab menu for a specific Check-In/Check-Out tool in the table.
Verify that the user can open the 'Create Data Sheets' modal to print either blank or pre-filled data sheets and the number of pages to print.
Verify that the 'Print Data Sheets' button is active and displays for a Check-In/Check-Out tool in Active, Mastered, or Archived statuses.
Verify that the 'Print Data Sheets' button is inactive (hidden) for a Check-In/Check-Out tool in Draft Status.
Record Data:
Verify that the 'Record Data' button is active and displays for a Check-In/Check-Out Tool that is in Active Status
Verify that the 'Record Data' button on an Active status Check-In/Check-Out tool navigates the user to Data Express on the Check-In/Check-Out tab with the specific Check-In/Check-Out tool displayed on the screen.
Verify that the 'Record Data' button is inactive (hidden) for a Check-In/Check-Out tool in the statuses: Draft, Mastered, Archived
View Data:
Verify that the 'View Data' button is inactive (hidden) until at least one data entry is recorded for the Check-In/Check-Out tool
This logic applies to all statuses: Draft, Active, Mastered, Archived
Verify that the 'View Data' button is active and displays when at least one data entry has been recorded for the Check-In/Check-Out tool
This logic applies to statuses: Active, Mastered, Archived
Change Status:
Radio button is pre-filled with the status of the selected Check-In/Check-Out tool status.
User selects a status and ‘Save’ to confirm the change of status. The status will update in all locations for the specific Check-In/Check-Out tool.
Header: 'Change Status'
Radio button options:
Active
Draft
Archive
Mastered
Inactive Option until the Tool has been Mastered
Active as an option if the Check-In/Check-Out tool has been ‘Mastered’ status at some time.
Delete:
Verify that upon selecting the 'Delete' button, the warning confirmation pop-up displays to the user:
Heading: 'Delete Tool?'
Description Text: 'This action cannot be undone.'
Cancel: Cancels the action and returns the user to the screen they were viewing.
Delete: Deletes the tool and returns user to the screen they were viewing.
Date Picker Component:
Verify that the updated Date picker with the Kendo Component is utilized for date selections.
Verify that the Date picker includes both ‘Date Created' and ‘Last Data Recorded’ dates and displays the Check-In/Check-Out tools with either date in the range.
Back Navigation: The back navigation on the Classroom Check-In, Check-Out screen should navigate the user to the previous screen they were viewing.
Print Icon: Print will generate a PDF Print Version of the table including the filters that have been applied.
Empty State:
Verify that the empty state displays when classroom does not have Check-In/Check-Out tools for students in any status.
Verify that the ‘Check-In/Check-Out’ header with the ‘Record Data’ and ‘Create New Tool’ buttons, Export Button, and Print Button, are all hidden from the screen in the empty state.
Workflow Description
User navigates to ‘Classrooms’ from the top navigation bar and selects a classroom to view.
The user selects ‘Reports’ from the left side bar navigation in the Classroom view.
The user selects ‘Behavior’ and the ‘Check-In, Check-Out tab’ to view the classroom CICO details.
The user selects ‘CICO’ from the dropdown menu next to the classroom name to view the Classroom CICO Report.
The user will view the CICO Tools for students in the classroom and will be able to take action on a tool: View, Record, Delete, Record Data, Create CICO.