Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (40 sloc) 4.44 KB

CMSI 370 Interaction Design, Fall 2017

Assignment 1215

We conclude your exposure to direct manipulation implementation with a different type of product—instead of a full application, this time you are asked to build a reusable component that uses direct manipulation.

Background Reading

The readings from Assignment 1130 apply here also.

For Submission

Direct Manipulation Widget

We wrap up our programming work by going back to the basics: design and implement a reusable direct maniuplation widget for use in web browsers in general, and for your custom front end in particular. To emphasize reusability, implement your widget as a jQuery plugin. As a reusable plugin, your widget must maintain a per-widget model for storing the specific data/state of that instance of the widget. Further, you are to provide a notification mechanism (either in the form of a callback or a genuine browser event) that informs users of your widget of relevant events, e.g., such as when the widget’s model value changes.

The point here is to see how low-level event handling (e.g., mouse/keyboard/touch activity) translate into higher-level ones (e.g., selection or change events). If Assignment 1130 involved direct manipulation “in the large,” this one exercises direct manipulation “in the small.” Some ideas:

  • A selection knob or slider
  • A rolling or scrolling item selector
  • An entry field that accepts text/numbers with drag-and-drop character tiles
  • A “here-to-there” drag-and-drop area
  • A directional pad (“d-pad”) control

If you have a widget idea that is not in this list, check with me to see if it will work.

You may use jQuery but Bootstrap use must be limited to CSS only—no Bootstrap JavaScript components allowed, whether in code or triggered by data attributes. To be more precise, aside from jQuery, all other external JavaScript must be cleared by me first, and most definitely all direct manipulation event-handling must be your own code and not handled by third-party libraries. For example, despite its name, the use of jQuery UI is expressly prohibited.

The supplied repository includes three examples of reusable components in general, all with callback mechanisms, but only the swivel control fulfills the direct-manipulation, no-Bootstrap-JavaScript specifications of this assignment.

How to Turn it In

Commit your code in two places. Within this repository, provide:

  1. The reusable code for the widget (typically CSS and JavaScript)
  2. The unit test suite for the widget (see the supplied sample code for examples)
  3. A standalone demonstration page that shows an instance of your widget in action (see the supplied demonstration gallery page for examples)

Under your repository for the web front end assignment:

  1. Commit the reusable code again (simulating the scenario where you might have downloaded someone’s widget code for use with your front end), and
  2. Integrate your widget into the user interface that you have already built.

Specific Point Allocations

Programming assignments are scored according to outcomes 3a, 3b, and 4a to 4f in the syllabus. For this particular assignment, graded categories are as follows:

Category Points Outcomes
Direct manipulation implementation 20 3a, 3b, 4a, 4b, 4d
Notification mechanism (callback/event) 20 3a, 3b, 4a, 4b, 4d
Plugin model implementation 20 3a, 3b, 4a, 4b, 4d
Web front end integration 20 3a, 3b, 4a, 4b, 4d
Inappropriate third-party library use deduction only 4a
Test Suite and Coverage 20 4a
Linting deduction only 4c
Version Control deduction only 4e
Punctuality deduction only 4f
Total 100

“Deduction only” categories mean that you will only get points taken off if there are significant issues with those categories (or, in the case of third-party library use, the very presence of inappropriate third-party library code). Such issues include but are not limited to: lingering linting errors as of the final commit (4c), insufficiently granular or unmessaged commits (4e), and late commits (4f).