You are on page 1of 5

Assignment 1 ------------Task 1: Your Entity Relationship Diagram, entity listing, constraints and assump tions Task 2: Your schema

definitions, indicating key fields (both primary and foreign ). Task 3: Your sample data for each table, indicating primary and foreign keys, fo r each of your relations. Task 4 : o L e a l Your new design which incorporates any recommended design alterations o The SQ code required to create each table (including code for integrity rules) and th SQL code required in order to create the indexes (if any). You should provide short written section justifying your choice of indexes. o The SQL code for al the INSERT statements

Task 5: SQL queries you devised to test the database, showing the SQL Statement and the query result Assignment 2 ------------For this assignment, acting as a web designer, you will plan and design a websit e consisting of at least five pages. You will write a report of 2000-2500 words detailing your website design. This w ord count does not include diagrams, storyboards, sitemaps or references / bibli ography. You must also produce a sitemap showing the navigation structure of the site and storyboards giving details of the design of each page. Assignment 3 ------------Task 1: A word processed research paper which addresses the following: You have been asked to produce a paper offering advice to small, local businesse s on the best way for them to offer their services over the web. You can assume they will require a site which can provide information about and pictures of the ir products, possibly with animation and sound, and that they will also want to be able to sell their products on-line. You must research the available technolo gies and languages for the client-side of such an internet application, and repo rt on their strengths, limitations and other relevance. Your paper must be written in your own words and must include a bibliography ind icating all your sources of information. You must be very careful not to plagiar ise material. You should not limit your discussion to just those technologies an d languages covered in this module. Your paper should be between 1000 and 1500 words long. Task 2: Write a simple script which randomly picks an image out of several available ima ges and displays it. In this assignment, there is already an image tag in the HT ML, and your task it to get a reference to that image tag using the methods such

as getElementById() andgetElementsByTagName(). Then you can set the 'src' prope rty of the image to the URI of the new image. The new image I here is an image r andomly picked from several available images. Task 3: Create JavaScript functions that will keep track of the number of times a user a ccesses the Web page. a. First create an HTML file with all the necessary elements. b. Using JavaScript create a new cookie that will keep track of the number of ti mes the page was accessed. Make sure the cookie exists even if the browser windo w is closed. c. The page should also display the total number of times the user has accessed the page, even if you use two browser windows accessing the same page at the sam e time. d. Add one button on the page that when pressed it will delete the cookie. Make sure a confirmation dialog appears prior the deletion of the cookie, which will give a choice to cancel the deletion. e. When the delete button is pressed, the hit count message must be updated dire ctly using JavaScript (without having to refresh the page). Task 4: In this part of the assignment, you will use DOM and associated technologies to develop a solution to the following problem: Using JavaScript create functions that will allow the dynamic creation, deletion , and insertion of paragraph nodes (<p>) on the page. a. First create an HTML file with all the necessary elements. b. The page should also contain the following: One text tag element where the user enters the text that will be displayed in th e new paragraph node created. Tag element(s) allowing the user to choose to add, delete, or insert paragraph n odes (e.g. radio buttons). Tag element allowing the user to choose the position where the new paragraph nod e will be inserted (e.g. text box). Tag element allowing the user to choose the node that will be deleted. A button (or more, if needed) that will start the process. c. There should be at least three separate JavaScript functions that can be call ed from within the page: One for adding paragraph nodes at the end of existing ones (if any). One for deleting a specific paragraph node (if any). One for inserting a paragraph node at a given position.

d. Make sure that there are appropriate messages to guide, control, and inform t he user of any errors or problems. Task 5: The Fifteen Puzzle (also called the Sliding Puzzle) is a classic game consisting of a 4x4 grid of numbered squares with one square missing. The object of the ga me is to arrange the tiles into numerical order by repeatedly sliding a square t hat neighbors the missing square into its empty space. You will write the CSS and JavaScript code for a page fifteen.html that plays th e Fifteen Puzzle. You will also submit a background image of your own choosing, displayed underneath the tiles of the board. Choose any (wholesome) image you li ke, so long as its tiles can be distinguished on the board. Turn in the followin g files: 1. fifteen.js, the JavaScript code for your web page 2. fifteen.css, the CSS styles for your web page 3. background.jpg, your background image, suitable for a puzzle of size 400x400p x You will not submit any .html file, nor directly write any HTML code. You will b e provided with the HTML code to use, which should not be modified. (Download fr om moodle accompanying this document the .html file to your machine while writin g your JavaScript code, but your code should work with the provided files unmodi fied.) You will write JavaScript code that interacts with the page using the DOM . To modify the page's appearance, write appropriate DOM code to change styles of on-screen elements by setting classes, IDs, and/or style properties on them. (Tip for playing the game: First get the entire top and left sides into proper p osition. That is, maneuver squares number 1, 2, 3, 4, 5, 9, and 13 into their fi nal positions. Now never touch those squares again. This leaves a 3x3 board left to be solved, which is much easier. Appearance Details: All text on the page is displayed in a "cursive" font family, at a default font size of 14pt. Everything on the page is centered, including the top heading, paragraphs, the p uzzle and the Shuffle button. In the center of the page are fifteen tiles representing the puzzle. The overall puzzle occupies 400x400 pixels on the page, horizontally centered. Each puzzle tile occupies a total of 100x100 pixels, but all four sides have a 5px black border. This leaves 90x90 pixels of area inside each tile. Each tile displays a number from 1 to 15, in a 40pt font. When the page loads, i nitially the tiles are arranged in their correct order with the missing square i n the bottom-right. Each tile displays part of the image background.jpg, which y ou should put in the same folder as your page. The portion of the image displaye d in each tile is related to that tile's number. The "1" tile shows the top-left 100x100 portion of the image. The "2" tile shows the next 100x100px of the back ground that would be to the right of the part shown under the "1" tile, and so o

n. (Your background image appears on the puzzle pieces when you set it as the backg round image of each piece. By adjusting the background position of each div, you can show a different part of the background on each piece. One confusing thing about background position is that the x/y values shift the background behind the element, not the element itself. The offsets are the negation of what you may e xpect. For example, if you wanted a 100x100px div to show the top-right corner o f a 400x400px image, set its background position property to 300px 0px) Centered under the puzzle tiles is a Shuffle button that can be clicked to rando mly rearrange the tiles of the puzzle. All other style elements on the page are subject to the preference of the web br owser. Behavior Details: When the mouse button is pressed on a puzzle square, if that square is next to t he blank square, it is moved into the blank space. If the square does not neighb or the blank square, no action occurs. Similarly, if the mouse is pressed on the empty square or elsewhere on the page, no action occurs. When the mouse hovers over a square that can be moved (neighbors the blank spot) , its border and text color should become red. Once the cursor is no longer hove ring on the square, its appearance should revert to its original state. Hovering over a square that cannot be moved should have no effect. (Use the: hover CSS p seudo-class.) When the Shuffle button is clicked, the tiles of the puzzle are randomized. The tiles must be rearranged into a solvable state. Note that some puzzle states cannot be solved. For example, it has been proven t hat the puzzle cannot be solved if you switch only its 14 and 15 tiles. You shou ld generate a random, valid, and solvable puzzle state by starting with a solved puzzle, and then repeatedly choosing a random neighbor of the missing tile and sliding it onto the missing tile's space. A few hundred such random movements sh ould produce a shuffled board. Your algorithm should be relatively efficient; it should not animate each tile s m ovement, and if it takes more than a second to run or performs a large number of unnecessary tests and calls, you may lose points. For full credit, your shuffle code should thoroughly rearrange the tiles as well as the position of the blank square. The game is not required to take any particular action when the puzzle has been won. You can decide if you'd like to pop up an alert box congratulating the user or add any other optional behavior to handle this event. Development Strategy: Here is a recommended development strategy for this assignment: 1. Make the fifteen puzzle pieces appear in the correct positions without any ba ckground behind them. 2. Make the correct parts of the background show through behind each tile. 3. Write the code that moves a tile when it is clicked from its current location

to the empty square's location. Don't worry initially about whether the clicked tile is next to the empty square. Your code should include logic to optionally animate the tile s movement. 4. Write code to determine whether a square can move or not (whether it neighbor s the empty square). Implement the highlight when the user's mouse hovers over t iles that can be moved. You must keep track of where the empty square is at all times. 5. Write the shuffling algorithm. You will probably find it easiest to first imp lement the code to perform a single random move that is, randomly picking one sq uare that neighbors the empty square and moving that square to the empty spot. G et it to do this one time when Shuffle is clicked, then work on doing it many ti mes in a loop.

Implementation and Grading: For full credit, your CSS code must pass the W3C CSS validator. Your JavaScript code should pass the JSLint tool with no errors. (You may include variables defi ned by jQuery such as $ in the predefined global variables here field at the bottom of the JSLint form.) Your .js file must run in JavaScript strict mode by putting "use strict;" at the beginning of each function. Your JavaScript code should have adequate commenting. The top of your file shoul d have a descriptive comment header describing the assignment, and each function and complex section of code should be documented. WARNING: You are free to use any books or electronic resources for your assignme nt. However you should write your own programming code, based on the knowledge a cquired from these sources. Copying programming code, sentences, and sections wo rd by word from documents that belong to other people is not allowed. Everything will be checked for plagirism. Every document deemed to contain copied material will be rejected. To avoid this you must reference all your sources. Mention "I know IT" in your bid so i can know you read through the details. Thank you.

You might also like