Homework 2: Handling Input Events

Assigned: 9/13/2022; Due 9/27/2022 at 3:05pm ET


In this assignment, you will be creating a placeholder (temporary) web page with advanced input handling. The events will be just manipulating html div elements, which will be replaced with handling events over graphics objects in homework 3. The goal of this assignment is to learn how to handle multiple kinds of events that may interact with each other, and deal with the required interactions among them. Like homework 1, you must write this assignment without using external packages - just regular JavaScript (and html and css).


This homework will only have one page - the new index.html page - we have supplied a starter page for this, and its inputstyle.css page you can download from Github. Please put the code for homework 2 into a new JavaScript file called input.js. You will download a new project from Github, like for homework 1 -- the exact location is on Canvas in the instructions for Assignment 2.

Hint: Naturally, your touch event handlers will not work on a regular laptop, so that will most-likely need to be tested using a smartphone or tablet (unless you happen to have a touch screen on your laptop). The Github link you created for your repository might be helpful for running your page on that device.

In addition, we have supplied the following for your reference:

Debugging on Phones and Tablets

A key challenge when programming touch interactions is how to test them. The Chrome debugger on PC or Mac has a mode to pretend the mouse is a finger (the icon with the small and bigger rectangles, next to the inspect icon), but this does not support testing of 2 (or more) fingers. If your PC or Mac has a touch screen, then the usual mechanisms will work fine, but if not, and you need to use your phone or tablet, then you need to use special mechanisms for debugging on your phone. A professional phone developer has tools which make this easy, but we found something simpler: a way to see the Console output on the Chrome browser for your phone. This works on either Chrome for iPhone or Chrome for Android. Thanks to Clara Cook (TA in 2021) for figuring this out:

For Android Phones:

  1. Go to Settings > About Phone (which is all the way down at the bottom) > Build Number (On Later Devices, may be under "Software Information")
  2. Hit this Build Number Button repeatedly until you are in developer mode (about 7 times)
  3. On computer, in chrome search bar, go to "chrome://inspect/#devices"
  4. Make sure "Discover USB devices" is enabled
  5. Open Netlify App on your phone in chrome
  6. Hook up to computer using USB
  7. Return to computer Chrome screen and refresh
  8. Choose the "inspect" link from the correct website from the list of remote devices that should appear in your computer browser
  9. This should mimic your phone screen! Make sure you can find the console!

For IOS:

  1. On your phone, make sure you have chrome downloaded.
  2. Open chrome and go to "chrome://inspect"
  3. Hit the button that says start logging.
  4. Go to your homework 2 app on a new tab inside your phone's Chrome
  5. Toggle between the two screens to make sure your app is being logged!

If someone finds a better way, please let us know!

Detailed Requirements

The supplied html file contains 3 "div"s which are what your code should operate on; however your code should work no matter how many divs there are (it shouldn't be tied to these specific 3 divs), but you can assume they will all be of the same target class. Various mouse or touch events should cause different things to happen to the divs - they become selected or de-selected on clicks, they move if the user presses down and drags (or if the user double-clicks on them), and two fingers can be used to change their size. However, it gets more complicated to keep these behaviors from interfering with each other, and to support error cases and aborting. In particular:

Extra Credit


Since this homework has lots of parts, some students may want to know what each part is worth. Here is a summary breakdown: total = 100 points:

Turn In

Like for homework 1, in addition to your code, you need to have a README file, which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 3:05pm ET on 9/27/2022.