For the design, I have created a list of the classes, functions, and variables to be used in the program, as well as the requirements of the program, and a flow chart. I have attached the design in the pdf document “Program Design.pdf”.

PDF is uploaded here:

Requirements and Design sections from pdf:

Requirements:
The script that I’m going to make must do the following:
• On the Other Puzzles page, allow the user to select a sort from a
drop-down menu. The options are:
    o Alphabetical order
    o Difficulty
     o Rating
• On the Other Puzzles page, allow the user to select categories
using a check-box system. Display the selected ones, don’t show
the unselected ones. The categories are:
    o Cuboid
    o Shape-shifting
    o Rubik’s Cube Design
    o Other
• On the Special Patterns page, allow the user to select a sort from
a drop-down menu. The options are:
    o Alphabetical order
    o Difficulty

Design:
Classes: None
Functions:
• sorter() – Sorts the item table according to the option chosen by the user
    o sortKind() – Holds different functions to be used in the system ‘sort()’
        function, one function for each sort option.
• filter() – Filters out or includes items according to the categories that the
    user checked the checkboxes of.

Variables:
• in sorter():
    o selected - Selected index of the drop-down menu, retrieved from the DOM
    o sortKind - Holds the function to be used in the system 'sort()' function, which sorts an
        array.
        •• in sortKind functions:
            • t1, t2 - Arguments in the sortKind comparison function. They are 2 row
                sets from trhold chosen by the sort() function.
            • in "title" case:
                o n1, n2 - Hold the innerHTML from the first cell (<th>) of the first
                    row of t1 and t2. They hold the titles of the items.
            • in "difficulty" case:
                o t[2] - Holds an array of t1 and t2, so they can be used in a loop
                   so the same statements can be used on both of them.
               o dif[2] - To hold the difficulty rating of the arguments being
                   compared.
               o n - Holds the innerHTML from t1 and t2, but only one of them at
                   a time. It then is sliced, trimmed, and made uniform to be used
                   as a comparator.
               o ts - Stands for 'Temporary Storage', and is used to temporarily
                   hold the results to be put in the dif[2] array.
            • in "rating" case:
               o t[2] - Same as in "difficulty" case
               o rating[2] - Like dif, but holds the 'My Rating' rating instead of
                   the difficulty rating.
               o n - Same as in "difficulty" case
    o trcount - Count of the rows (<tr>) in the table
    o trhold[trcount/2][2] - An array of all the rows, grouped into sets of 2, to separate the
    other puzzle items.
    o newversion - To hold all of the HTML for the rows but in the new order, to overwrite the
        current document order.
• in filter():
    o sCuboid - Holds the checked status of the Cuboid checkbox
    o sShape - Holds the checked status of the Shape Shifting checkbox
    o sDesign - Holds the checked status of the Rubik Design checkbox
    o sOther - Holds the checked status of the Other checkbox
    o trcount - Same as in sortfunc()
    o trhold[trcount/2][2] - Same as in sortfunc()
    o n - Same as in 2 of the sortKind functions in the sorter function, except it holds only the
        last cell (<th>) from the trhold array.
• for loop variables:
    o i - Used within the functions one level deep
    o ii - Used within the sortKind functions two levels deep