In a classroom where seating charts are used as a pedagogical tool and are often changed with specific instructional purposes, there is a need for a way to simplify this process. This tool takes CSV student rosters in a specificed format along with customizeable other columns to create meaningful seating charts.
Generating a new and thoughtful seating chart on a regular basis is challenging and time consuming. While generating a seating chart using a computational approach requries care to ensure that it meets expectations, it does save time on a task that can then be utilzied elsewhere. The seating charts generated by this program are inherently random with set constraints only when grouping columns are used. As a result, not every chart will meet expectations and may require adjustments.
This tool is built in a static web-app that utilizes localStorage to store imported user data across sessions. Users are
able to access three main pages of the app from a task bar at the top of the screen: Seating Charts, Rosters, and Preferences.
Each page has its own toolbar for handling user-created objects. This app is able to run locally from
a single HTML file with a directory that includes necessary javascript files and the CSS stylesheet such that it can be
successfully used regardless of internet connection or district technology policies. This allows this web abb to be
easily packaged as a standalone app for distribution to other teachers in the future. The app is also hosted on
Github pages.
Seating charts created with this tool are displayed in a table nested inside of a div structure to represent student seats at tables. A logical next step would be allowing the user to place the individual div structures in accordance with their classroom layout to create a meaningful seating chart that students can easily use to quickly find their seat. Currently, tables have a static layout of four to a display row. Classroom tables can be assigned colors and names, while individual student seats display a student name and the persistent seat number. In the future it is also necessary to identify prominent features of the classroom on the seating chart so that students can successfully find their seat like the front and back of the room, board or television, instructor's desk, or doors.
Rosters are displayed in a tabular format that follows from any traditional spreadsheet or gradebook. The most important feature on the rosters page is the CSV import dialog box at the top of the page that allows the user to import CSV data. Within each cell in the tablular format is user-editable text to change student data. In addition, the user is able to add columns and rows to adjust the data that is already stored rather than having to edit and import a new CSV file.
It is always necessary to consider student factors when creating a seating chart. This can be done computationally using the data stored in the roster alongside user preferences for how students are seated. The user is able to add columns that describe different student traits, whether they be needs-related such as Individual Education Plans or Section 504s, personality trait related, or academic related. After defining traits, the user is able to specify whether students should be sat with others who have similar or different traits in the seating chart page. This feature allows users to create seating charts with mixed ability groupings, same ability groupings, varied social-emotional skills, and more. A logical next step here would be to add user-definable priority settings to grouping.
The user can set preferences that handle how data is utilized and seating charts are generated. This is where the user will define the layout of the room seating charts are constructed in as well as colors and/or names for tables. It would be helpful if the user can also change fonts and make other display choices here.
It is difficult for any one tool to meet the needs of every educator, but through community involvement we can certainly try to make this tool as effective for all as possible. Regardless of your coding ability, you can create a new Issue in Github to propose ideas or identify bugs with the current version. To modify the web app and construct your own version, create a Pull Request focused on an active issue or development goal.
- Style Cleanup: Currently styling in this app has some inconsistencies and some plain ugliness or plainness. The stylesheet needs to be fleshed out to create a more uniform theme and ensure useability across devices (see responsive point below).
- Responsive Style: This app is currently mostly unresponsive to the size of the user viewport, which results in unintended consequences when the app is opened on a small viewport. The not insignificant undertaking of reframing the app to be responsive should be done before the complexity of the app gets large enough that it is not easily possible to make these changes.
- Smarter Grouping: There are some minor issues with how students are grouped using table columns, primarily when using "Same"
grouping where students from very different groups are placed in the same group at the end of a group. The logic for this grouping
needs to be refined to ensure that results are always reasonable.
- Same Group Tables: When a group of students ends, the student from the next group is seated at the same table if this occurs in the middle of a table. In a real classroom, it may be necessary to avoid this behavior.
- Group Priority: The user should be able to define the priority associated with a certain group before generating the seating chart to ensure that certain constraints are always met.
- User Configurable Styles: This tool generates an image that educators can immediately use to display or print a seating chart.
As a result, it is important that the user can change the style of the image to ensure it appears as they want it in a slideshow or print.
The user should be able to configure:
- fonts and font sizes, at least within a limited set of options;
- image size in order to fit within slideshows or as a printed chart, with certain presets;
- compactness to handle small image sizes or layouts with many rows.
- Room Layout: Ideally, the user should be able to generate a seating chart that represents the actual layout of their room for ease of use by instructors and students. Creating this feature is not a small project, and should only be approached once more necessary features of the app are already in place.
This app uses Semantic Versioning 2.0.0 to handle version control for changes. The first complete version was a major update for which old user saved data was obsolete, moving from 0.1.0 to 1.0.0. Semantic Versioning is entirely overkill for this project, but being overprepared is always better than facing issues later on due to poor version control.
Newest version at the top!
Any changes that result in a version change will be listed here along with a collapsible change log.
The font size input is present, but non functional.
- Added a font size preference to ensure that seating chart output can work for any screen.
- Adjusted display to also show empty seats. These are useful for moving students into empty seats or manually creating tables with different numbers of students to meet accomodations.
- Charts are now saved to localStorage so that manually created charts do not disappear between sessions.
- Adjusted the font size and padding in the downloaded image for seating charts.
- Added sorting, though it currently only works for the first column in a table. This needs to be adjusted so that it sorts based on the specified sorting column.
- It is now possible to drag and drop students between tables and seats. This means that adjustments can be made to the seating chart without regenerating the entire chart.
First fully functioning version released in this repository. This version features a complete tool that meets all requirements to begin being used by educators in their classroom. The full list of changes from development is not listed for this version only.
The only active development version uploaded to this repository. This version tested some localStorage functionality along with the first and most
rudimentary seating chart generation logic. Rosters were completely static after being uploaded, preferences were inconsistent, and style was incomplete.