COMP 519: Web Programming
Autumn 2015

Assignment 2: JavaScript Programming

Deadline

18 November 2015 (5pm)

Background

The second assignment focuses on JavaScript, and the development of several features/wepages using JavaScript to demonstrate your understanding of that language and its usage in web development.

Learning outcomes

The purpose of this assignment is for you to demonstrate the following learning outcomes and for me to assess your achievement of them.

Students should:

  1. have an understanding of the range of programming techniques and languages available to organisations and businesses and be able to choose an appropriate architecture for a web application.
  2. be able to demonstrate abilities to design and implement maintainable web sites.
  3. be able to make informed and critical desicisions regarding client development using HTML and JavaScript.
  4. have the knowledge to critically analyse and evaluate web applications.

Description of the task

Note: The specific look and feel of the pages described below is left intentionally vague, allowing considerable design freedom on your part. However, for full points the pages should have a nice look and its code should satisfy common standards (meaning, for example, that it would be easy for someone else to read your HTML, CSS, and JavaScript code and understand what the intention of the pages is, how the JavaScript code is supposed to operate, and it should be relatively straightforward to maintain).

Important note:    It is assumed as part of this assignment that the HTML code you write will satisfy the HTML5 standards!! (Include an appropriate Document Type Declaration and consider using the W3C online validator.) Failure to satisfy the HTML5 standards will result in losing marks from your grade.

Part 1 (30 points)

Add a random "fortune generator" to your home page. That is, your page should contain a list of fortunes (stored as an array of strings), and should randomly select one of those fortunes to display each time the page is loaded. The fortune should be displayed just above the page footer, centered and enclosed in a box. Here's an example given below.

True wisdom comes not from knowledge, but from understanding.

Please put your JavaScript in an external file, link to it in the <head> element of your page, and just put an appropriate function call on your homepage to display the fortune.

Part 2 (35 points)

You can find the (not-so) current exchange rates amongst several currencies in the table given below.
Note that conversions are given by reading down the table. For example, 1 USD = 0.49246 GBP, and 1 CAD = 1.01941 USD.

  USD GBP CAD EUR AUD
USD 1 2.03032 1.01941 1.41544 0.88297
GBP 0.49246 1 0.50221 0.69714 0.43497
CAD 0.98054 1.99169 1 1.38814 0.86613
EUR 0.70641 1.43448 0.72037 1 0.62382
AUD 1.13262 2.29964 1.15498 1.60329 1

Create a Web page named convert.html that can be used to convert some value in one currency to the respective values of the other currencies. That is, your page should include a form which consists of five currency fields, and on inserting a number in one of the fields, this number, taken as the respective value of the currency, be converted to the values of the other currencies. For example, a page of USD, EUR and GBP converter might look like this (the converted values don't match the values in the table above):

converter

Part 3 (35 points)

In order to get all 35 points for this part, create a Web page named quiz.html that can be used to conduct multiple choice quizzes over the Web. The page should contain at least 10 potential quiz questions, each with three possible answers (A, B, and C). When loaded, the page should first prompt the person for the number of desired questions in the quiz, with a default of 5 questions. The page should then randomly select questions and prompt the user with each question and possible answers. Each answer entered by the user should be compared with the correct answer, and the result displayed within the page (either CORRECT or INCORRECT). At the end, the number and percentage of correct guesses should be displayed in the page.

Your page must be clear and understandable to the user, and support the following:

For example, the page might contain the following as a result of a 5-question quiz:

  
    What is the capital of Missouri?
    You guessed B) Jefferson City
    CORRECT

    How many ounces in a pound?
    You guessed A) 10
    INCORRECT: the correct answer is C) 16

    Who was the first person to set foot on the moon?
    You guessed C) Neil Armstrong
    CORRECT

    Who holds the Major League Baseball record for most home runs in a season?
    You guessed A) Barry Bonds
    CORRECT

    In what year was University of Liverpool founded?
    You guessed A) 1250
    INCORRECT: the correct answer is B) 1881

    You answered 3 out of 5 questions correctly (60%).

Remarks:

  1. There's loads of information about JavaScript that's available online, more than I can possibly tell you about in the lectures.
  2. The third part of this assignment is likely the most difficult (so do the other two parts first).
  3. You are definitely able to do all these tasks using only JavaScript (and HTML, CSS of course).
  4. The functionality of your pages (at least for the second and third parts) relies on writing appropriate event handlers to control the tasks that you want to perform.
  5. You will likely want to remind yourself/read more about the JavaScript method called "getElementById" which can be very useful to retrieve various elements of a webpage (using the ids that you assign to them). This then allows you to extract the values from those elements (like input text boxes, check boxes, radio buttions, etc) and/or assign new values to them. (See my JavaScript example where I use this method for an example.)
  6. It's also possible to use the "innerhtml" property to change values (but this can sometimes not work correctly based on particular browers or versions, so read more about it if you choose to use this way to alter page contents). An alternative method to alter webpage contents dynamically is to use the methods of creating and appending (or deleting) the nodes of the Document Object Model.
  7. For the quiz part (the third part), there are several ways in which you might approach this. If you don't want to worry about the varying number of questions, feel free to just create a quiz that has ten questions (but this won't get you all of the 35 points).
  8. Whatever method you choose, whether it's a straightforward method, or a more complicated approach (by manipulating the DOM), my suggestion is to proceed slowly and test your code a lot along the way.

Submission of work

As for the last assignment, you must submit your webpages via the Department's Coursework Submission System. That's the "official proof" that your assignment has been submitted on time. Please include whatever files (e.g. HTML, external CSS files, JavaScript files) are appropriate in your submission. You can create one zipped file for your submission. Please do not use the RAR (or some other proprietary) format!

Please remember to have your webpages online so that I can access them via a web browser and to submit them to the Coursework Submission System by 5pm on the day they are due.

When submitting your solution, don't forget to include a completed Declaration of Academic Integrity.

Assessment

This assignment contributes 1/4 of the 75% continuous assessment part of the course grade. The maximum possible grade on this assignment is 100 points.

Failure in this task can be compensated by higher marks on the other assessments of the module.

COMP519 marking descriptors

GradeClassificationPercentage Qualitative Description
A*Good Distinction80+Factually almost faultless; perceptive and focused treatment of all issues. Clearly directed; logical; comprehensive coverage of topic; strong evidence of reading/research outside the material presented in the programme; substantial elements of originality and independent thought; very well written. critical and scholarly presentation.
ADistinction70-79Logical; enlightening; originality of thought or approach; good coverage of topic; clear, in-depth understanding of material; good focus; good evidence of outside reading/research; very well written and directed.
BGood Pass60-69Logical; thorough; factually sound (no serious errors); good understanding of material; evidence of outside reading/research; exercise of critical judgement; some originality of thought or approach; well written and directed.
CPass50-59Worthy effort, but undistinguished outcome. Essentially correct, but possibly missing important points or inadequate treatment. Largely derived from material delivered in the programme, but with some evidence of outside reading/research; some evidence of critical judgement; some weaknesses in expression/presentation.
DCompensatable Fail40-49Incomplete coverage of topic; evidence of poor understanding of material; Poor presentation; lack of coherent argument. Very basic approach to a narrow or misguided selection of material. Lacking in background and/or flawed in structure.
FFail< 40Serious omissions; significant errors/misconceptions; poorly directed at targets; evidence of inadequate effort. Shallow and poorly presented work showing failure in understanding.

Late submissions

The University's standard policy on lateness penalties will be applied with respect to the latest electronic submission of the assessment. See Section 6 of the Code of Practice on Assessment for further details.