PROG32578 - Review

Things To Do Later

Review Topics/Resources

You must be familiar with the following topics from your first year. It is your responsibility to re-learn or revise any topics listed below, if necessary.

Note
All of your HTML and CSS code must be valid. You were given links to the HTML and CSS validators in your term 1 and 2 web courses:
HTML Validator
CSS Validator
Furthermore, all of your Java code must conform to the industry standards you learned in term 1/2 Java.

Review Exercises

You can do these exercises in whatever editor or IDE that you prefer..

Web Applications

Each question below asks you to code something. Each exercise should include the minimal HTML, a header area, and a footer area with your standard footer (your name and copyright).

1. Write the code to create the web page below (you can download the images here - be sure to place them in the appropriate location in your project directory).

see description below
Exercise B: A table containing 2 images and a nested list.

The page contains a table. On the right side of the table is a nested list. The other list contains 2 items ("Top 80's Video Games" and "Top 90's Video Games". Each one contains a list of the top 5 video games. The 80's lists Pac Man, Donkey Kong, Super Mario Brothers, Galaga, and Tetris. The 90's lists Super Mario, Final Fantasy, Legend of Zelda, Street Fighter, and Sonic the Hedgehog. The list uses defaults for the bullet styles.

On the left side of the table are 2 cells: the top cell contains the Pac Man image and the bottom cell contains the Super Mario World image.

Your page should include an external stylesheet that adds the following style rules in the most efficient way possible:

2. Create the table below that displays some of the more common character entities:

the table has a heading cell at the top that spans 2 columns, it contains 'Special Characters'; there are 3 other rows: row 1 contains '< and >' in the first cell and the two character entities for the < and > symbols with 'and' between them; row 2 contains the ampersand in the first cell and the character entity for the ampersand in the 2nd cell; row 3 contains '(no break space)' in the first cell and the named entity for the no-break space in the 2nd cell.
Exercise 2: A table containing some of the more common character entities.

You can use the same CSS file as in Exercise 1.

3. Create a page with a level-1 heading in the header section containing "Currency Conversions for Oct 5 2017". Below the header area is a nested unordered list that displays currency conversion values. The outer unordered list has 2 items: "To $Canadian" and "From $Canadian". The first list item contains a nested unordered list: each list item is 1.00 unit in another currency = a value in Canadian dollars e.g. "$US 1.00 = 1.25". The second item is similar but it displays $1.00 = a value in another currency e.g. "$1.00 = € 0.68".

see description above and below
Exercise 3: A list of currency conversions

The table below gives you the currency values and the character entities for the various currency symbols.

Currency to $Cdn from $Cdn 1.00 Symbol
US Dollars $1.25 0.80 n/a
Euros $1.47 0.68 &euro;
British Pound $1.66 0.60 &pound;
Chinese Yuan $0.19 5.32 &#20803 or &#x5143
Indian Rupee $0.02 52.17 &#8377; or &#x20B9;

Feel free to add other currency symbols!

4. Create the form below that displays a math quiz to the user:

a form containing a table with a math quiz
Exercise 4: A form containing a table with a math quiz with powers of 2.

The quiz is displayed as an HTML form that is displayed with a table. In the table's left column are cells with powers of 2 (22, 23, 24, and 25). In the table's right column are text fields where the user can type each answer.

The bottom row of the table displays a single, centered, input button (not a submit button) with the caption "Check".

Use the CSS file from question 1. Add a second external CSS for styles for this exercise. The exercise 4 CSS should include the following styling rules (as efficient as possible):

5. Create a page with a web form that asks for student information. The form should ask for the student's name using a text box, ask for their current term using a spinner control, and include a check box asking if they're an international student. The form also contains a SEND button (a submit button) and CLEAR button (a reset button). Your page header should contain a level 1-heading with the contents "Student Information". The name field is required. The spinner control should only go from 1 to 6, incrementing by 1 and has a default value of 1. The check box is unchecked by default.

the prompt for the name field is 'Name:', the prompt for the term number is 'Term:', the prompt for the check box is 'International Student'. The submit button says 'Send' and the reset button says 'Clear'.
Exercise 5: A student information form.

6. Rewrite Question 1 without using the table elements. Use CSS positioning, instead. You can use flexible grid, if you know how.

7. Tip Calculator

Create a simple tip calculator with the following input fields:

basic tip calculator
Tip Calculator screen
basic tip calculator
Tip Calculator screen, showing drop-down list contents

Use HTML5 constraints (attributes, etc) to perform the validation. If everything is valid, show the bill amount, tip amount, and the total amount (bill + tip amount). All numeric values are formatted to 2 decimal places. Use CSS styling for your error feedback, e.g change the colour/borders of the field when valid/invalid and/or add an image to the field (my example uses the x and checkmark symbols).

basic tip calculator showing errors
Tip Calculator: the bill amount must be a valid numeric value
basic tip calculator
Tip Calculator screen, showing output

8. Tip Calculator, modified.

Rewrite question 2, but perform all of the validation with JavaScript instead of using HTML5 attributes. Create any necessary JavaScript to validate the input fields as described above. If the fields are valid, calculate and display the tip amount in the empty label. Change the styling of the input field as appropriate.

9. Tip Calculator, modified.

Add an option to the selection list, "Other". The user can select "Other" when they wish to enter a different tip percentage that's not in the list. Provide a text input field that allows the user to enter an alternative tip percentage. The text input field should be disabled unless "Other" is selected. The input field should only accept valid decimal numbers (similar to bill amount).

basic tip calculator
Tip Calculator screen, showing drop-down list contents
basic tip calculator
Tip Calculator screen with Other field

Modify your JavaScript to use the alternative tip amount if the "Other" option is selected, and use the selected tip amount if the user selected one of the numeric values from the list.

basic tip calculator showing errors
Tip Calculator: if "other" is selected in the list, the "Other" text field is enabled and must contain a valid numeric value
basic tip calculator
Tip Calculator screen, showing output

10. Product Ordering.

Create an HTML5 page that allows a user to select options for a custom cat tree:

cat tree customization form
Customize Cat Tree Form: Fieldsets with Legends, each containing some options.

The form contains a Select element with the following option groups and options:

cat tree customization form
Customize Cat Tree Form: showing the drop-down list of fabrics.

The form should also contain the following groups of options, each group being contained in a Field Set element containing a Legend element:

There should be a Calculate (button element) at the bottom of the form.

Below the form, there is a DIV element that says "Total Cost of Cat Tree: $0.00".

For error handling, there are 2 elements: one is after the Select list of fabrics, and the other is below the fieldset that lists the number of levels. These should be invisible on form load, and when there are no errors. Tip: for layout purposes, I used a SPAN for the select error element and a DIV for the levels error element, and I gave them both the ".error" class, which configured the elements to have bold, red text and no visibility.

Write the JavaScript code for the Calculate button that performs the following tasks:

Calculating the Cost: The cost of a cat tree depends on the fabric type, number of levels, and the extras that the customer has chosen:

The base cost, fabric cost, and cost of any extras are added together to come up with the total cost. In the image below, the user has chosen 3 levels (16.50) with faux fur (8.97), plus a hammock (4.99) and scratch pad (1.99) for a total of 16.50 + 8.97 + 4.99 + 1.99 = $32.45.

cat tree customization form
Customize Cat Tree Form: showing a total of $32.45.

Java

1. Create a Java Bean called Question with the following members:

Question
- id : int
- questionText : String
+ Question()
+ Question(id : int, text : String)
+ getId() : int
+ setId(id : int) : void
+ getQuestionText() : String
+ setQuestionText(text : String) : void
+ checkAnswer(Object guess) : boolean
+ toString() : String

Make sure you include appropriate internal documentation and also JavaDoc documentation.

Notes

2. Create 2 beans that are children of Question.

Create a main() class to test your classes:

Your program should make use of a displayQuestion() method that accepts any type of question and displays it on the screen.

3. a) Write a class that models a list of double primitives so a programmer can find the mean (average) and standard deviation.

DoubleList
- list[] : double
+ DoubleList(size : int)
+ DoubleList(list : double...)
+ setList(list : double...) : void
+ getList() : double[]
+ size() : int
+ mean() : double
+ standardDev() : double
+ toString() : String

3. b) Is DoubleList a valid Java Bean? Why or why not?

3. c) Write a main() class that uses the DoubleList class:

  1. Create a new DoubleList with 10 slots.
  2. Set the first five elements of the DoubleList to the grades of five of your term 1 courses. Use one statement.
  3. Use a Scanner to get the remaining 5 grade values (enter the grades you think you'll get in 5 of your courses this term).
  4. Display the average of all values in the DoubleList, and then display the standard deviation.

4. Write a program that plays Rock/Paper/Scissors with the computer.

a) Write an enumeration called HandSign that has 3 constants for ROCK, PAPER, and SCISSORS. Each constant should be associated with a String value for display purposes (e.g. ROCK would be "Rock").

Include the standard items like a field and for the display name, and a constructor.

Add the following additional methods:

b) Fill in the code below to play Rock/Paper/Scissors:

public static void main(String[] args) {
    Scanner in = new Scanner(System.in);

    // create 2 HandSign variables: one for computer, one for player        
        


    System.out.println("Ready to play Rock, Paper, Scissors!");
    System.out.print("Go:\n1. Rock\n2. Paper\n3. Scissors\n> ");
    int n = in.nextInt();
        
    // get player HandSign corresponding to their input
    

    // get random HandSign for computer
    

    // define and initialize an output string that displays player
    // and computer hand signs in the following form:
    // Player: [hand sign name]
    // Computer: [hand sign name]
    // (add a new-line to the end so the result output is on a new line)        


    // get the result of player vs. computer        
    int result = 


    if (result == 0)
        output += "It's a Tie!";
    else if (result > 0)
        output += "You win!";
    else
        output += "You lose!";
    System.out.println(output);
}