Landing : Athabascau University

Unit 5 - Review of JavaScript program design

  • Public
By Mats Phillips in the group COMP 266 January 15, 2017 - 12:33pm

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: Mats Phillips Unit 5 Program Design

Requirements and Design sections from pdf:

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

Classes: None
• 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.

• 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
        •• 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
               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


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.



Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc