View Data | Line Graphs | Check-In/Check-Out | MTSS & Behavior
- Mary DelPiano
Overview
The CICO Data Screen is designed for educators to view, analyze, and manage student behavior data collected through the Check In, Check Out behavior tool. It features a line graph for visualizing student performance over time, along with a detailed data table for each recorded entry. Users can interact with the data to edit or delete entries, expand details, and filter the data based on specific goals.
Figma
Feature
Feature 224931: Data Express | View Data | Check In Check Out
User Story
As an educator, I need to view and manage detailed data from the Check In, Check Out behavior tool, allowing me to monitor student progress on goals, and ensure that the behavior intervention is effective.
UI Description
Header Section:
Title: ‘Check-In, Check-Out’
Behavior(s): Display target behavior(s) included in the Check-In, Check-Out tool below the header title. If multiple behaviors are tracked, they will be listed and separated by commas.
Graph View Toggle:
Display a toggle switch that allows the user to view:
Line Graph (Default)
Stacked Bar Graph
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 (Default - First Day of School Year to Present Date)
Last 7 days
Last 14 days
Last 30 days
Last 90 days
Last 180 days
Custom Selection
Graph Axes
X-Axis:
Date Representation: Displays the dates corresponding to the recorded data entries. The most recent date is on the right and the least recent date is on the left.
Controlled by ‘Show Data' Dropdown: User can select how to display dates along the X-Axis:
Daily: Displays each recorded date individually
Weekly: Groups data and dates by weekly date ranges (Monday-Sunday MM/DD - MM/DD YYYY)
Y-Axis:
Display Labels Based on ‘Values’ Selection.
Points: Displays total points earned per day/week. Range is set from 0 to the maximum possible points.
Percentage: Displays the percentage score earned per day/week. Range is set from 0% to 100%.
Increment Markings: Graph Increments are evenly spaced to fit the graph based on the selected display.
Graph Elements
Data Points - Points Display Selected: Each data point on the graph represents the total points earned by the student on a specific date. The raw number of points earned are displayed above each point.
Data Points - Percentage Display Selected: Each data point on the graph represents the score percentage earned by the student on a specific date. The raw percentage earned is displayed above each point.
Line Graphs: Display different behaviors with different colored lines. The legend identifies each behavior.
Default Display: All Behaviors
All: Hex: ED633B, 100%
Behavior 1: Hex: 00A79E, 100%
Behavior 2: Hex: FBCB6D, 100%
Behavior 3: Hex: 378FCE, 100%
Graph Legend:
Displays a graph key for the Behavior, Mastered data point, and phase change lines. (Color and Label)
Goal Zone:
Daily Goal: When ‘Daily’ is selected in ‘Show Data’ dropdown, the graph background is shaded green (Hex: 39BD39, 18%) above the daily goal line to indicate data points that meet or exceed the goal.
Weekly Goal: When ‘Weekly’ is selected, the green-shaded zone represents data points meeting or exceeding the weekly goal.
Phase Change Lines: Display vertical dotted lines on the graph that display a label with the date and brief description indicating the reason for the phase change.
Graph Dropdown Controls:
Behaviors: Display selection of behavior goal(s) in the selected Check-In/Check-Out tool
Dropdown values:
All (Default)
Each Included Behavior Goal in the Check-In/Check-Out tool listed individually
Time Periods: Display selection of Time Periods in the selected Check-In/Check-Out tool
Dropdown values:
All (Default)
Each Included Time Period in the Check-In/Check-Out tool listed individually
Values: Points (default), Percentage
Show Data: Daily (default), Weekly
Data Table Section:
Columns:
Date: Displays date of recorded data. (MM/DD/YYY)
Score: Displays total number of points recorded for the Behavior(s) for the date
Percentage: Displays percentage of points earned, calculated by dividing the points score by the total points possible for the day.
Daily Goal Met?:
Display ‘Yes’ or ‘No’ depending on whether the student met the daily point goal.
Display ‘Yes’ if the total points earned are equal or greater to the daily goal.
Display ‘No’ if the total points earned are less than the daily goal.
Notes: Display notes that a team member entered when recording the data entry. If the note exceeds a specific length, ‘More’ link should appear to view the entire note.
Entered By: Display Team Member name who entered the data entry.
Multiple names should be listed if applicable, with a ‘+X others’ tag when more than two members contributed.
Action:
Includes Edit and Delete buttons allowing users to modify or remove the data entry.
Edit allows users to revise the recorded point data or notes.
Delete removes the entire data entry for that date.
Expandable Rows: Each row can be expanded to show more details when selected. The arrow icon expands or collapses the row. The default state is collapsed and when expanded, the row reveals additional information.
Time Period Label(s): Show specific time periods
Behavior List View: Displays each behavior goal for each time period.
Points Earned: Display entered point value for each behavior
Team Member: Display the team member name who recorded and submitted the data.
Mastered Icon: Display ‘Mastered’ icon (M in a circle) in the data point on the graph and the data table row for the date when the Goal is mastered.
Pagination:
Display Kendo Pagination Component for the table and include all functionality.
CICO Details Panel:
Goal: Display the goal description for the students' Check-In, Check-Out tool that was established in the tool setup/creation process.
Goal Status: If the Goal has been mastered, display ‘MASTERED’ to the right of the goal label to indicate the student has successfully completed the goal. ‘Mastered’ status will be hidden until the goal has met the mastery criteria.
Daily Goal: Display the daily goal in both points and percentage format that was established in the tool setup/creation process.
Example: ‘Daily Goal: 8 out of 10 points (80%)’
Weekly Goal: Display the weekly goal in both points and percentage format that was established in the tool setup/creation process.
Example: ‘Weekly Goal: 40 out of 50 points (80%)’
Behaviors: Display the behavior (1) or behaviors (2-3) that were defined during the Check-In, Check-Out tool setup in a stacked list
Example Placeholders:
Behavior Goal 1
Behavior Goal 2
Behavior Goal 3
Placeholders will be replaced with defined Behavior Goal(s) text
Collection Type: Check-In, Check-Out
Print Button: Users can print the graph and data table. Print button opens Print modal for users to select print options.
User Interaction and Validation Notes
Graph View Toggle:
Switching between the line graph and bar graph should smoothly transition, maintaining the correct data display (points or percentages) and goal zones.
Graph Dropdown Controls should remain selected when the user toggles between the line graph and bar graph.
Graph Dropdown Controls:
Verify that selecting from dropdown menus (Behaviors, Time Periods, Values, Show Data) immediately updates the graph, axes, and labels without requiring additional clicks or page reloads.
Behaviors Dropdown Menu: Verify that the line graph color is distinct (different) for each option (All and individual behavior goal(s)).
All: Hex: ED633B, 100%
Behavior 1: Hex: 00A79E, 100%
Behavior 2: Hex: FBCB6D, 100%
Behavior 3: Hex: 378FCE, 100%
‘Show Data’ Dropdown Menu:
Users select whether to view the data daily or weekly. The X-Axis adjusts accordingly:
Daily: Displays individual dates
Weekly: Displays date ranges for each week (Monday-Friday)
‘Values' Dropdown Menu:
Allows users to toggle between:
Points: Shows raw point values for each day or week
Percentage: Shows percentages for each day or week.
The Y-Axis and data point labels and graph values update based on the selected type.
Y-Axis Scaling:
The Y-axis should scale dynamically based on the highest point value or percentage in the data.
Verify that the axis labels (either points or percentages) are evenly distributed and reflect the data accurately, displaying the user selections in the dropdown menus.
Verify that the increments on the Y Axis automatically update to display the correct point range for the selected Behavior value and Time Period Value.
Data Display:
Validate that data points on the graph are accurately plotted and match the corresponding details in the data table.
Validate that the raw numbers for each data point (either total points or percentage) are correctly calculated and displayed above each corresponding point.
If no data is available for a specific date or week, no data point should appear for that period, and the line should be continuous.
Verify that the dates on the graph display as Monday-Sunday (MM/DD - MM/DD YYYY) when the ‘Show Data’ dropdown menu is set to ‘Weekly’.
Verify that if there are many data points recorded, the data points are space in a readable display on the graph and the graph includes a horizontal scroll bar below the graph to view more data points.
Goal Zone Shading:
Verify that the ‘Show Data’ dropdown displays the goal zone shading for the selected display (daily or weekly). The graph recalculates shading based on the goal (daily or weekly).
Data points above the zone should clearly indicate goal achievement.
Verify that the ‘Goal Zone’ shading displays when the Time Periods dropdown value is ‘All’.
Verify that the ‘Goal Zone’ shading is hidden when the user selects a specific time period from the dropdown values.
Mastered Icon:
Verify that the ‘Mastered’ icon displays aligned left in the data table row for the recorded data that triggered goal mastery.
Verify that the ‘Mastered’ icon displays as data point in the graph for the recorded data that triggered goal mastery.
Verify that the ‘Mastered’ icon only displays for the daily or weekly goal data point on graph and data table row, using the goal selected for the mastery criteria in the setup of the CICO tool.
Verify that the ‘Mastered’ icon is hidden until the goal has met the mastery criteria.
Verify that when the goal is mastered, the ‘MASTERED’ label displays to the right of the ‘Goal’ label in the CICO Details Panel.
Phase Change Lines:
Validate that the phase change lines appear at the correct dates with the appropriate descriptions.
Data Details Table:
Verify that the rows in the data details table display in order with the most recent date first (on top).
Expand Data Entry Details:
Verify that the user can expand and collapse a row in the data table to display more data details by selecting the arrow icon.
Verify that the expanded view displays:
Time periods
Behavior Goal(s)
Points recorded for each Behavior Goal and Time Period
Team member who recorded the data.
Validate that the expandable rows function smoothly and display the correct data.
Team Members List:
For the Entered By column, if more than two team members contributed data, the names will display as follows:
First two team members’ names followed by +X others.
Notes: User selects ‘More’ within the notes column to open the Notes Modal to view the entire note entered by the team member.
Details Sidebar: The details sidebar panel displays the goal, daily goal, weekly goal, behavior(s), and collection type that were defined in the creation of the CICO tool. Validate that the system updates the Goal Status to ‘Mastered’ based on data entered through Data Express > Record Data for the specific Check-In, Check-Out tool and the defined goal/mastery criteria.
Back Navigation and Close ( X ): The back navigation and close ( X ) button should navigate the user to the previous screen they were viewing.
Workflow Description
Accessing the Screen:
The user navigates to the CICO View Data Screen by selecting:
CICO tool in the Student Dashboard
CICO tool in Classroom Details Table
CICO tool in Classroom Behavior CICO Report
‘View Data' button on the CICO card in Data Express.
Viewing Data on the Graph:
The user sees a line graph displaying the student’s daily points over a selected period.
The user can toggle between daily, weekly, and monthly views to analyze trends over different time frames.
Interacting with the Data Table:
The data table below the graph lists all recorded entries with the ability to expand each row for more detailed information.
Users can filter the data to view specific goals or data types, updating both the graph and table.
To the left of the data details table, the goals and mastery criteria are displayed, offering context for the recorded data.
Editing or Deleting Data Entries:
The user can click "Edit" to modify any data entry. Changes are reflected in both the graph and table.
The user can delete an entry by clicking "Delete," with a confirmation prompt before finalizing the deletion.
Printing the Data:
The user can click the "Print" button to print the graph and table for offline use.