Resources

• //HTML and OUTPUT: Unicode dice


• //INIT: Using libraries


• //INPUT: Detecting mouseovers


• //PROCESS: Randomness and rounding
• //PROCESS: Using function parameters and returns


• //OUTPUT: Animating motion


• //STYLE: Use functional programming


• Image resources are here.

Saving your work

Use Save as... to save the empty template as "2.14H-ShyLinkIsShy-LastName.html" in your Computer Programming 12 directory.

The assignment

Use functional programming to create a program that moves animates something smoothly in response to clicks, the keyboard, and/or the movement of the mouse.

Evaluation

• ___/10 HTML/CSS: Choose ANY FIVE OF
  1. link to the jQuery library ← required
  2. create an element to move with an id
  3. change the position of that element in CSS so it can move
  4. trigger a function using onmouseover
  5. trigger a function using onmouseout
  6. trigger a function using onclick
  7. trigger a function using onkeydown
• ___/10 PROCESS: including:
  1. create a function that accepts an argument
  2. create a function that returns a value
  3. generate a random number using Math.random()
  4. use if...else if...else
  5. create at least one process-only function
  6. create at least one output-only function
• ___/10 OUTPUT: including:
  1. create a function that will animate something up using jQuery
  2. create a function that will animate something down using jQuery
  3. create a function that will animate something left using jQuery
  4. create a function that will animate something right using jQuery
  5. change the src, width, or other style of an element using Javascript
• ___/10 STYLE: including:
  1. add your name to the filename
  2. write your name as the author
  3. update the change log
  4. correctly indent everything
  5. use lowercase for all your HTML tags
  6. use camelCase for all your ids and classes
  7. avoid lines greater than 96 characters in length
  8. restrict your style code to the head of your HTML file
  9. space out your mathematical operators
  10. write comments for your if statements
  11. use descriptive variable names
  12. use a functional programming style: breaking up functions into separate ones for main, input, processing, and output
  13. use descriptive comments to identify and describe each function,
      for example: //OUTPUT: this function accepts a distance and animates the image up that number of pixels

For example: Poor Link is shy! Click on him to see what happens...

Make it your own

This assignment does not have to use Link. Look at the criteria - as long as you meet those criteria things are great!

Not sure where to start?

These are step by step directions to complete the basic version of this assignment.

Note that this does not include any onclick code

1. Create an element to move, assign it an id, and change its position mode using CSS.
2. Create a PROCESS function that will randomly generate and return a distance (maybe from 1 → 200).
3. Create a PROCESS function that will randomly generate and return a number between 1 and 4 (one for each for up, down, left, and right).
4. Create four OUTPUT functions called for animating something in each of the four directions (up, down, left, right). Each OUTPUT function should:
• change the image to suit the direction headed
• take in the distance to move as an argument from a PROCESS function
• and animate it in the correct direction a distance equal to random distance from the PROCESS function
5. Create a MAIN function called mainProcedure that will be triggered when the element is moused over. mainProcedure should:
• Trigger your random distance PROCESS function, and assign the result returned from that function to a variable.
• Trigger your random direction PROCESS function, and assign the result returned from that function to a variable.
• that will use if...else if...else statements to trigger:
• Your upwards animation OUTPUT function when the random direction is 1
• Your downwards animation OUTPUT function when the random direction is 2
• Your leftwards animation OUTPUT function when the random direction is 3
• Your rightwards animation OUTPUT function when the random direction is 4
6. If you haven't already, check that you have added descriptive comments to each function.
7. Although it is not required, use console logs at the beginning of each function to tell you which functions are working.