Automated Student Report Generation Tool

Main Takeaways

• Implemented a dynamic form with conditional rendering that guides users through a complex data entry process
• Designed a multi-stage asynchronous workflow connecting client-side React with server-side Google Apps Script
• Reduced report generation time from 15-20 minutes to under 40 seconds through automation and template management

Try it out here

Create a student report

Receive your emailed report

Note that the pages and grades are dynamically generated

Introduction and Problem Statement

The process of generating student reports for the Virtual New Arrivals program was cumbersome and time-consuming, involving the manual selection and merging of PDF files, insertion of text, and addition of headers and footers. This process was not only inefficient but also stressful for teachers who were not technologically savvy. I recognized the need for a programmatic solution to automate this process and improve the overall experience for teachers. The solution needed to handle complex document manipulation while providing an intuitive interface that gradually guided teachers through the process to reduce overwhelm, particularly for those with limited technical skills.

Technical Implementation

I began by converting the static PDFs to Google Docs and arranging them in a master document for each of the three main levels (Pathways A, B, and C). I then indexed the documents to enable Google Scripts to identify the start and end of each document. I used React to manage the state to track over 20 form fields and their interdependencies. I also used conditional rendering patterns where form sections are progressively disclosed as users complete preceding sections. This approach is implemented through a series of ternary operators and conditional blocks that monitor the state of key fields like pathway selections and level assignments, creating a guided workflow.

User Interface and Asynchronous Functions

I implemented the UI by creating a single-page web app that provided a user-friendly interface for teachers to input student information. The app implements a multi-stage asynchronous workflow, with carefully orchestrated API calls to Google Apps Script endpoints. The form uses useEffect hooks to manage side effects like automatic scrolling and dynamic page selection based on user inputs. I implemented a visual pathway selection system with color-coded options and intuitive progress indicators using bullet points and arrows to visualize student progress from entry to current levels. This design approach made complex educational data entry intuitive even for non-technical staff, with the interface revealing itself gradually to match the natural thought process of teachers completing reports.

Document Creation and Formatting

The document creation process involved a three-stage API integration: first, it created a new document by copying the master template using a Google Scripts API call. Then it retrieves the document ID of the newly created document, a process which was separated to avoid school firewall issues that prevented the post request from returning information with the initial request. Lastly, it would send a request to update the document with the template information gathered in the UI

Additional Features and Functionality

Within the script itself, the levels indicated by the teacher were programmatically inserted as progression dots. I also included loading indicators using CSS animations during document processing, and conditional rendering of interface elements based on the current state of the form.

Conclusion and Outcome

The automated student report generation tool significantly improved the report compilation process, reducing the time required from 15-20 minutes to just under 40 seconds per report. The implementation of progressive disclosure in the form design, with color-coded sections and intuitive navigation, received positive feedback from teachers who previously struggled with technology, and in particular from admin staff who were responsible for re-editing teacher reports that had been formatted incorrectly during the manual input process.