Delta Education (old version)

2014-2015 | HTML, CSS, JavaScript

NOTE: This version of the site was retired in August, 2015.

When I first started working for School Specialty, Inc’s science division, a major part of that work consisted of making changes and improvements to the website for one of the company’s subsidiaries, Delta Education. This work included:

  • Significant refactoring of the HTML and CSS for several sections of the site, including the homepage, FOSS 3rd Edition, and the sitewide page headers
  • The development and launch of the FOSS Next Generation section in parallel with and using the same HTML and CSS as the FOSS 3rd Edition section
  • Substantial UI improvements to several pages and modules, such as the main navigation, the Materials Replacement page, the FOSS 3rd Edition section, multiple pages in the FOSS K-6 ©2005 (2nd Edition) section, data tables such as this Scope and Sequence table, and the “shopping cart” and “downloads” modules on product detail pages
Screenshot of Delta Education website header and navigation
Screenshot of Delta Education product detail sidebar

Scope and Sequence Tables

There are scope and sequence tables for all of the major “flavors” of FOSS (Next Generation, Third Edition, Middle School, and Second Edition), and each table is used on multiple pages. Rather than have to update multiple copies of the same table, I moved the tables into separate files that are pulled in via include statements as needed.

Screenshot of FOSS Next Generation Scope and Sequence table

The above screenshot is of the FOSS Next Generation Scope and Sequence table; you can view the source HTML for it here.

Replacement Part Lists

This page presents lists of replacement parts for the modules sold on the site. Users can select a specific brand (FOSS Next Generation, for example) and see the lists for only that brand. The lists are almost all PDF files.

I redesigned the page in two stages. In the first stage, I moved the tabs from a multi-row horizontal format to a vertical format that runs in the far left, and reformatted the lists using the appropriate HTML elements. More recently, though, I replaced the unordered lists with table code as the lists had become tabular data… and were beginning to become available in both PDF and Excel formats. You can see the HTML for the page here.

The “Find a Representative” Map

The “repmap”, as we call it, existed well before I came on board, but it had issues. The JavaScript code was messy and hard to easily update without spending a lot of time hunting for the exact bit that needed to be changed. I cleaned up the existing code, reformatting it to make it easier to read, and separated out the information for the individual representatives into strings that I could call from within the case statement that was the core of the script. The one catch is that the strings include HTML tags; if I was to revise the script any further, I would separate the representatives’ info into arrays and have only one string of HTML to worry about.