Human-Computer Interaction

Spring 2018 :: ECE 695 :: Purdue University

Due 3/7



In this programming exercise, you will augment a paint program with undo functionality. The primary purpose is to help you learn the architectural requirements of supporting undo in a static client application. In addition, for those who are planning to use web programming for their class projects, I hope this serves as a refresher, or a basis to learn.


You will start with the Simple-HTML5-Drawing project, which comes with a detailed explanation.

The requirements are as follows:

  1. Undo button and functionality, with infinite levels of undo
  2. Redo button and functionality, able to restore image to same state as before the undo(s)
  3. Display the current command stack below the image
  4. Undo/redo work with any of the tools available (i.e., crayon, marker, eraser, any size, any color, etc.)
  5. Use a Command design pattern. (Do not save the entire state of the image.)
  6. Readable code
    1. Comments explain any non-obvious lines/functions
    2. Consistent style
  7. No JavaScript errors in Chrome v48+ or Firefox v41+ (current desktop versions)
  8. Write a brief (100-400 words) explanation of your implementation strategy in a text file named undo.txt.

Optional: Let me know how long this assignment took you, and if you have any feedback to make it better for next time this class is offered. Save this as feedback.txt.


Send a link to the zip file (e.g., on OneDrive, Google Drive, etc.) and the SHA1 hash of the file to the instructor by email with the following subject line: exercise 2: undo [695-hci]


Full credit will be given to all submissions that meet the above requirements.

Optional: Interesting extensions (e.g., tree, selective, collaborative, time-based, etc.) will be given a bonus of 10% to 50% (depending on the complexity and completeness). Make a note in the email and in your undo.txt if you do this.