Use [login to view URL]; a multi-touch library and jQuery to build a plain vanilla demo of a multi-touch web page on [login to view URL] that consists of an [login to view URL] containing two iframes. The iframes will contain four elements with CSS values set in a .css file externally linked to the html files involved. The elements and CSS are to be common and used by each of the iframes. The elements to create are a DIV with the default shape of a square, a clickable button and a jQuery slider. The DIV should be green by default, have a front and a back with the default being front and the words front and back on either side in contrasting text.
The goal is to use the interact function to manipulate the three elements within each of the iframes independently and concurrently e.g. two users simultaneously interacting with the iframes through a multi-touch device such as a Microsoft surface tablet or multi-touch table, without conflicting with each other.
Create the following interactions for the various elements.
1. Using the available pointer events within the [login to view URL] library, the appropriate jQuery and or CSS where necessary, cause the DIV to change from a square to a circle when touched and back to a square when released. Prevent the default hold and move actions from firing. Also if a move action tracks the pointer outside of the DIV, the element should revert to its original CSS state.
2. Using the tap pointer event, code the button to flip the DIV from front to back with every tap.
3. Using the doubletap pointer event, code the DIV to rotate 360 degrees.
4. Cause the jQuery slider to vary the color of the DIV through the color spectrum. The jQuery code used for the slider should be backward compatible with older versions of jQuery and jQuery UI and particularly jQuery 1.2.6.
The interact library and in depth documentation is available at [login to view URL]