Project Video | Deployed App | Slide Deck
Edulytics is a Web Application targeted at 2 main stakeholders, Students and Educators, aiming to enhance both learning and teaching capabilities.
Edulytics is built on React with Redux, retrieving data from Firebase which is dynamically updated using a Jupyter Notebook. Within the notebook, weekly downloads are made from Amazon's S3 Buckets together with real-time API calls for more time-sensitive data.
The application revolves around 2 main principles: Gamification for Students and Superpowers for Educators
The theme for the students is Gamification. We have identified that students are most concerned with where they stand in class, and if they are lagging behind. Our application revolves around the Elo Rating and Attribute System, an idea inspired by games like DOTA. We believe that students should be able to track, analyse and be aware of their standings in class. Granted, too much competitiveness may demoralise weaker students. We plan to strike this balance between competition and motivation by applying a layer of abstraction through Gamification. Our vision is for students to treat this as a lifestyle, and see the efforts they have put into the course reflected in their gradually rising Elo ratings.
The theme for Educators is Superpowers. We have identified that the largest challenge for educators, simply put, is to understand students. Edulytics not only allows educators to have an overview of all students in their course, but also the ability to drill down on specific students. The educators are also given the ability to monitor class activities such as the submission of assignments and online YouTube tutorials; they will be able to see who does and watches them, and at what times. Edulytics aims to provide educators with both the data and tools to personally understand each student, enhancing educator-student relationships.
The left column of the second row contains the Attribute chart with 6 Attributes: Hardwork, Dedication, Mastery, Proactive, Effort and Diligence. The following table show how each metric is calculated.
| Metric | Calculation |
|---|---|
| Hardwork | No. of Assignments Submitted |
| Mastery | Average Time Taken per CodeCombat Level |
| Proactiveness | Relative Time Taken for Assignment Submissions |
| Effort | Relative Total Playtime |
| Diligence | Completion and Time Taken for Video Assignments |
The middle of the row shows contains article recommendations based on the traits of the student. This feature ultilises the Attribute Hexagram to see which areas the student is lacking in, populating the list with appropriate articles based on the attributes. For example, if a student is lacking Dedication and Hardwork attributes, articles related to improving productivity would appear on the list.
To the right of the row contains Elo Distribution Chart, which enables students to see their standings among their peers. Students will also be able to see the distribution and frequency of other students at each Elo level. In doing so, Edulytics aim to aid students in setting smart goals accordingly.
The CodeCombat Progress Tracker complements the Average Time per Level statistic, providing the option for students to drill down and analyse their performance for each level. Given that each level in CodeCombat targets a few concepts of programming, the Progress Tracker would allow students to note the skills they are lacking in.
The Assignments Tracker is built so that student will always be up to date and able to efficiently manage their assignments. Basic details such as the due date and description are provided to allow student easy access to the assignment itself.
The Basic Course Statistics is situated at the top row of the Course Instructor's dashboard. This includes certain metrics and attributes such as the course details (instructor and course name), number of students, average Elo rating, as well as the average number of CodeCombat levels completed. The last two metrics might be more relevant to the Course Instructor as it shows the progress of the course in general as well as the average ability of the students.
The radar chart showing the six aggregated attributes helps the Course Instructor to have an in-depth understanding of the students' profile and work attributes. Should there be a certain aspect lacking across the course, instructors would be able to pick them up and target the course direction accordingly.
The Elo Distribution area chart allows Course Instructors to have a better understanding of the overall performance of the students in the class. It also helps to identity the weaker students for the instructor to follow up on them. In addition, should the chart show a distribution severely deviated from the normal, insights can be drawn to scale/tweak the pace/content of the course.
The Leaderboard on the right of the dashboard shows the top 10 students in the course, providing a quick and easy view of the top performing students. Clicking on the names would also allow the instructor to visit the student's dashboard should a drill-down analysis be needed.
The Average Time Taken per Level is represented by an area chart, highlighting the time spent/taken on each Code Combat level. The levels with higher average time can be translated to having harder concepts the students are having difficulty grasping, and vice versa. This would provide instructors recommendations on which topics to focus on during lessons.
The Hourly Submission Chart is represented by a line chart showing the distribution of student submissions split by hour per assignment. A dropdown list is included for instructors to select the assignment in question, enabling them to have a better understanding of both the students as well as the nature of the assignment. For example, should the submission times be concentrated at a particular hour, it may mean that the assignment is relatively easy. Conversely, if it is rather fragmented, it can also be seen that the assignment poses some kind of difficulty to the students, producing such a varied submission timings. Additionally, should there be submissions at the wee hours in the morning, follow-ups with such students may be required to better understand their difficulties in submitting.
The heat map shows the distribution of submission times relative to the period of the entire assignment, with each row representing each assignment and each column representing a time period. Unlike the Hourly Submission Chart, the time given to student to complete each assignment is evenly split into 20 bins, regardless of duration, allowing for uniform comparison across assignments. Should the cells be concentrated toward the left side, it may mean that the assignment is completed with relative ease, compared to another concentrated on the right, representing last minute submissions. Based on such insights, the Course Instructor would be able to have a better understanding of the proficiency level of the students, especially when the submissions for each assignment is known.
The stacked bar graph records the completion of videos for each video assignment. Upon clicking on each bar/assignment, the names of the students who have yet to watch the video would be shown at the bottom. Students who have not watched the video could either mean that they are not active or have accidentally missed it. On the other hand, students who consistently did not attempt to watch the videos could tell a different story to the Course Instructor. Either way, the quick highlighting of names value adds to the analysis by vastly reducing the time taken to locate these students.
The distribution of Video Watch Length is depicted by a line chart showing the amount of time spent by each student on each video assignment. Similar to the Hourly Assignment Submission Chart, a dropdown serves as a quick toggle to visualise the breakdown of each assignment/video. Taking a longer time to watch (compared to video length) any video would probably mean that certain concepts need to be reiterated. Conversely, if minimal time is taken to finish the contents of the video it may highlight that there might not be much effort put in in digesting the contents of the video, especially if it is consistent throughout all videos.
At the bottom of the dashboard, the weakest students are displayed as a collection of cards showing the Attribute Chart with other basic information such as the Elo, levels completed, average time taken per level, as well as the number of current assignments pending. This allows the Course Instructor to have an overview of these students and find similarities among these students, providing data to support teaching decisions. Clicking on each card would bring the instructor to the student's dashboard, enabling a more in-depth understanding of the student's needs. Similarly, the Course Instructor will be able to select 3 students to half the size of the course to display the cards for comparison. This is to reduce load on the user and avoid cluttering.
The app also features a user-friendly search bar, allowing educators to easily search for their students either by course or name. Clicking on the result would lead the current user to the student's dashboard. At the moment, the search is only hidden when the current user is logged to be a student, and that there is no restriction in the search domain, allowing the search results to include other course instructors as well. We aim to modify the search domain in tandem with the inclusion of a login feature.
The app currently reads the user and course ID through the url parameters and path. To account for users entering an invalid url (ie wrong form or wrong id), the app would render a landing page informing them of the error. Similarly, we aim to enhance this together with user authentication, restricting the view access of certain pages according to the access rights of the user (even if the user exists).
Exceptions are also handled within components themselves, providing a failsafe should certain components fail due to any unexpected change in background data. This allows the user to continue navigating without the page breaking. Furthermore, should certain components not render properly due to the redux state, the option to refresh the page would aid in rendering these components from scratch.
- Weak Student Monitoring Dashboard
- Exception Handling for Invalid/Missing Data
- User Authentication
- Inclusion of more User Types (Cohort Administrator)
- Predictive Analytics
- Mobile-Friendlier Layout
- UI Refresh
by Chen Kuang, Justin, Ryan and Yu Jie