This assignment has two parts:

Part I

start with the provided HTML page. You will create the JavaScript code to make it work as follows…

Clickable Blocks

In the first container (id="svg1"), create a 200×200 SVG Paper object.

When the user types a number in the text input and clicks the “Add More” button, we will add that number of squares to the SVG. That will require getting the value from the input, and using it as the limit of a for loop.

To make things a little more interesting, we will add the blocks in random positions. The built-in Math.random() function will give us a random number between 0 and 1 every time we call it. Here is some code to add one rectangle:

x = Math.random() * 180
y = Math.random() * 180
r = paper.rect(x, y, 20, 20)
filled = {
  'fill': '#ddf'
}
r.attr(filled)

Shapes created by Raphaël have many of the same events as jQuery elements. In particular, you can do something when a shape is clicked by calling r.click(disappear) (assuming you have a function disappear defined).

In the handler function, the special variable this holds the shape that was clicked on. The Raphaël .remove() function can make it disappear. Use this function as the squares' click handler:

disappear = function() {
  this.remove()
}

(The code above creates the squares with a fill: if they don't have a fill colour, then only the outlines are clickable, which is vary hard to trigger.)

Spin Them

When the squares appear (in the previous part), we want them to look a little more interesting. When they appear, start an animation to have them spin in a random way.

Use Math.random() to create a random value from -720 to 720, which represents spinning up to two full rotations in either direction. (Hint: multiply by 1440 and subtract 720.)

Once you have the angle, you can build a transform string from it: the result should be like 'r123', depending on the angle you generate. Animate that transform on the square.

Video: Assignment 4 part I behaviour

Expanding Circles

In the second container (id="svg2"), create another 200×200 SVG Paper object.

Each time the “Add Another” button is clicked, a circle should be drawn on the image. The first should have radius 10, then 20, 30, 40,….

Part II

In this part, we will experiment a little more with for and if in JavaScript.

A Grid

Create an HTML page with text input, a button, and a container for a Raphaël paper object. We will have the user enter a number in the form and click the button, and then draw an n×n grid of squares.

If the user enters 8 in the text input and clicks the button, you should draw eight rows and columns of little squares. To do this, you will need two for loops nested inside each other like this:

for ( row=1; ... ) {
  for ( col=1; ... ) {
    ...
  }
}

In the (inner-most) loop body, draw a little square on the paper with an x and y value calculated from the loop counters so the squares end up in a grid pattern.

Your page will look something like this (depending on the number the user enters, obviously). Don't worry about the coloured boxes yet: that is the next part.

Adding Conditions

We want some of the squares to have a fill colour: the ones with row + col larger than the number the user entered.

Add an if inside the for loop to check a condition and set the 'fill' attribute (of the rectangle you just drew) if it's true.

We also want to restrict the user from entering number too large: we can't sensibly draw a 100×100 grid. Add a condition so that nothing will be drawn for numbers more than 15. (You can display an error for larger numbers or just do nothing.)

Style

Create a stylesheet for your page. At least make the <input> a reasonable size for what we expect to be entered (by setting its width).

Add other styles as you like to make it look less generic.

Submitting

Upload the files to the course web server, as you have before and make sure everything is working. You may want to create a folder Assignment 4. Submit a URL for each part of the assignment (There should be two URLs) to the CourSys activity Assignment 4.