jump to content

Assignments

DOM Scripting 1 Assignment Rubrics

There are 8 assignments plus a final assignment. Assignment 1 is a general assignment writing a course blog to track ones learning. Assignments 2-5 are preliminary in nature and intended to be run within a console, e.g. in Firebug or the JavaScript shell. If run in a browser window, it is allowed to use the window.prompt and window.alert methods for input and output.

Assignment 1: Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Course Blog Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.

Assignment 2: Control structures, data types, strings and arrays

A. Read a number from the user, check that it is an integer and calculate its factorial. Output the result.

Control structures, types, numbers, strings and arrays, assignment A grading rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand. Number is read and factorial is calculated, the result is given. Number is read and factorial is calculated, the result is given. A check for integer values is added, calculation is dependent upon the check. Number is read and factorial is calculated, the result is given. A check for integer values is added, calculation is dependent upon the check. Informative text about any errors or the result is given. N/A (3 points are maximum)

B. Construct a loop that will read data from the user and then evaluates the data and alert the user about its type, etc. Numbers should be checked if they are within an acceptable range. Strings should be checked if they are of an appropriate length. User data that contains a vertical bar should be split into arrays. These in turn should be checked and must not contain fewer than 3 or more than 5 parts.

Control structures, types, numbers, strings and arrays, assignment B Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand. A loop is constructed, user data is read and basic checks are in place to see if the data is of correct format, results are being output. A loop is constructed, user data is read and all necessary checks are in place to see if the data is of correct format and within acceptable limits. An array is constructed if necessary. The results are being output. All 2 point criteria are met plus: A a sub-iteration or recursion for the array is executed and errors are turned into informative messages.

C. Construct an object with at least 5 properties and enumerate them, alert the user about each property key, type and value.

Control structures, types, numbers, strings and arrays, assignment C Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An object is constructed; enumeration works, e.g. a for ... in loop runs correctly. An object is constructed; enumeration works. Information about each key/value pair are given. An object is constructed; enumeration works. Information about each key/value pair are given. An additional check for hasOwnProperty is done.

Assignment 3: Functions

A. Write a named function that expects a name from the user and returns “Hi, user name, this is my return value”. Provide arguments to the function using the self-executing pattern.

Functions, assignment A Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a return statement. An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a correct return value. The argument is checked for appropriate values. Running the function using the self-executing pattern is demonstrated. An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a correct return value. The argument is checked for appropriate values and errors are handled. Running the function with both appropriate and inappropriate argument values is demonstrated.

B. Write a function that takes an arbitrary number of arguments and returns the string You provided n arguments, namely arg1, arg2, etc.

Functions, assignment B Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An appropriately named function is constructed with brackets, proper indentation and a return statement providing at least a partial answer. An appropriately named function is constructed with brackets, proper indentation, the number of arguments are deduced and the return value is put together according to the instructions. Running the function using several different parameter combinations is demonstrated. All point 2 criteria are met plus: The special case of no arguments is handled. Arguments that are of non-acceptable types, e.g. objects or arrays, are handled appropriately, e.g. by throwing an exception.

Assignment 4: Regular expressions

Use RegexpBuddy or a similar tool (Regextester, Regexp Coach, etc) and construct regular expressions that matches:

  • A zip-code
  • An e-mail address (basic testing is OK, since the formal rules are really hard to put into regular expressions)
  • An URI where the protocol is http

Then read data from the user at least ten times and test which of the above (if any) it matches. Output the results. (The teacher should use test strings that should either match or fail to match the expressions, when evaluating the students work. A test harness can be used. The teacher may also suggest other things that the regular expressions should match.)

Regular expressions Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand Functional regular expressions are provided for all test cases. The solution shows awareness of how to perform pattern matching. Functional regular expressions are provided for all test cases. Matching is done for a single piece of user submitted data against patterns (the first one that matches may skip further tests for that piece of data). Fully functional regular expressions have been constructed and tested to match with precision. User data is read and appropriately matched against all patterns (the first one that matches may skip further tests for that piece of data). Output is informative.

Assignment 5: Time and Math

A. Implement functions to handle at least two of the following mathematical tasks:

  • Read a number from the user and convert it from Fahrenheit to Centigrade.
  • Generate at least five random numbers, perform a calculus or trigonometric function on each. Output the result like this: “The square of n is result. Use appropriate rounding.
  • Calculate the sum of at least five well known mathematical or physical numbers/constants. Use appropriate rounding.
  • Calculate the square sum of at least ten arbitrary numbers.

To achieve variety among students, teachers may suggest additional tasks.

Math Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand One task is implemented and all calculations work as intended. At least two tasks are implemented and demonstrated to work. At least two tasks are implemented and demonstrated to work. Output is informative and erronous indata is handled sensibly.

B. Make a timer that checks how long time it takes to complete a couple of large loops or other heavy task. Output the result in milliseconds. Compare the results in a few different environments or browsers.

Time Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand A Date object is constructed and milliseconds are read. Two Date objects are constructed, a task is run in between and the time difference is calculated and displayed to the user. Two Date objects are constructed, a task is run in between and the time difference is calculated. Different scenarios and environments are tried. Results are presented in a usable fashion.

D. Make a simple real time clock. Combine this assignment with assignment 7: Styling, DOM manipulation and animation.

Assignment 6: Algorithms

Implement a pair of common algorithms or solve a common puzzle using ECMAScript (e.g. the Tower of Hanoi, bubble sort, Fibonacci numbers).

Project Euler can be used as inspiration.

Easier algorithms might be:

  • Finding the nth Fibonacci number.
  • Finding the largest prime number of a composite number.
  • A simple shifted cryptographic algoritm, e.g. A = C, B = D, C = E, etc.
  • Pythagoras theorem: Finding the length of the third side.

Harder algorithms might be:

  • Bubble sort
  • The Tower of Hanoi
  • Splitting a composite number into primes.
  • Eulers algorithm
  • Calculating a trigonometric value (sin, cos, tan) without the use of the Math object.
Algorithms Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Functionality Dysfunctional code that does not do even a part of the task at hand One functional relatively easy algorithm is implemented. Two fully functional are constructed and demonstrated to work. Two fully functional algorithms are constructed and demonstrated to work, one of which is relatively hard. Two fully functional harder algorithms are constructed and demonstrated to work.
JavaScript best practices Messy code, hard to read, easily broken, using proprietary language features ECMAScript and W3C standards are followed. The code has enough comments to show that the student knows how the algorithm works. Proper indentation and good naming conventions are used. All 1 point criteria are met plus: Global variables are avoided. The code is reusable and well commented All 2 point criteria are met plus: The code uses object detection and has all necessary checks for the existence of a particular feature or DOM object before they are being used. All 3 point criteria are met plus: All code is contained in a single emulated namespace or self-executing anonymous function. Proper error handling. The code passes fault free through JSLint.
Effeciency The code does not run, but will throw an uncaught error, cause a hang or fail to execute anything of real value. The code runs and does not cause any hangs All 1 point criteria are met plus: Unnecessary duplication is avoided, e.g. redundant lookups or loops are avoided, code that is not necessary for a task is skipped All 2 point criteria are met plus: Effective patterns are being used, e.g. caching, memoization, etc. All 3 point criteria are met plus: Code efficiency has been measured, and different alternatives have been discussed

Assignment 7: Styling, DOM manipulation and animation

Implement all of the following:

  1. Make an element on a web page that changes background according to a user switch, changing the style value.
  2. Make an identical page, but this time toggle the background through changing class-names.
  3. (Combined with assignment 5C): Make a real time clock that updates every second.
  4. Use timed events to make some animated effects, e.g. fade in and out, expansion/contraction, sliding in/out.
  5. Use a library of choice and implement an accordion widget.

The teacher may add alternative tasks.

Assignment 8: Forms

Construct a page containing a form containing radio buttons, check boxes and at least one text input element, option element and submit button. Implement the following:

  1. At least 2 additional widgets, besides those available in HTML 4. E.g. a slider or a date picker. The use of a library is allowed.
  2. Widgets that are hidden until needed, i.e. when the presence of a widget is logically dependent upon the the value in another field it should reflect that logic.
  3. Adding fields using an “add row” button.
  4. On submit validation and usable feedback.

Final assignment

Build a web page that is using DOM Scripting to achieve several effects.

Example page/effects:

  • A simple game or quiz
  • A slide show (self built)
  • A calculator
  • A status or game score ticker (using Ajax)
  • A calendar
  • A sortable or filterable table with hide and show functionality of individual columns or rows and automatic recalculation
  • A DHTML menu
  • An analog clock, using SVG
  • A text area in HTML and a live preview area next to it, that will update in real time as the user types into the text area.
  • Etc.

Present your result both in an easily readable format and in a minified version.

Rubric for assignments 7, 8 and the final assignment
Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Separation of concerns, unobtrusiveness DHTML-era like scripts: document.write, inline events, design is set and manipulated with HTML-attributes, etc No inline event handlers, no usage of the JavaScript pseudo-protocol, all scripts are kept in one script-block All JavaScript code, including event handlers, are kept in separate files All 2 point criteria are met plus: All functionality is available on the page even if scripting is turned off All 3 point criteria are met plus: Visual appearance, even for scripted widgets, are set in the CSS
JavaScript best practices Messy code, hard to read, easily broken, using proprietary language features ECMAScript and W3C standards are followed (including HTML 5 additions like innerHTML). Proper indentation and good naming conventions are used. All 1 point criteria are met plus: Global variables are avoided. The code is reusable and well commented All 2 point criteria are met plus: The code uses object detection and has all necessary checks for the existence of a particular feature or DOM object before they are being used All 3 point criteria are met plus: All code is contained in a single emulated namespace or self-executing anonymous function. Proper error handling. The code passes fault free through JSLint.
Accessibility The UI is not perceivable, operable, understandable or robust if used by anyone but a fully able user on a PC platform. The UI is operable both with mouse and keyboard, clickable controls are easy to see and use All 1 point criteria are met plus: The contents are perceivable also for the visually impaired and color blind All 2 point criteria are met plus: Proper notifications and visual clues are used to alert the user about updates on the page All 3 point criteria are met plus: The UI works well with a screen reader. The UI incorporates ARIA.
Effeciency The code does not run, but will throw an uncaught error, cause a hang or fail to execute anything of real value. The code runs, performs as intended and does not cause any hangs All 1 point criteria are met plus: Unnecessary duplication is avoided, e.g. DOM lookups are saved, redundant lookups or loops are avoided, code that is not necessary for a task is skipped All 2 point criteria are met plus: Effective patterns are being used, e.g. caching, memoization, etc; effecient DOM manipulation, e.g. the DOM is modified while detached from view All 3 point criteria are met plus: Code efficiency has been measured, and different alternatives have been discussed
Design Scripted effects are run in a way that feels clunky or unpleasing Effects are well integrated into the UI; they clearly serve a purpose Effects are smooth and appealing; reinforcing good design N/A (2 points are the maximum, since this is not a design course) N/A (2 points are the maximum, since this is not a design course)