ITEC 3020 : 2023 Winter Assignment 1 This assignment is graded between 0 and 100 =========================================== In what follows, the number between right brackets represents the total number of points for that step/part of the assignment. 1. [15] Follow the instructions =============================== Follow the instructions for sending your assignment to the TA (see "Delivery" and "Zip creation" in the left-side menu). Be careful to use the correct email subject. All JavaScript should be embedded in the HTML pages. Do not use external JavaScript. 2. Design and create 2 web pages by using the following specifications ====================================================================== 2.1 [10] Page 1 : in a file called Page1.html --------------------------------------------- 2.1.1 XHTML: create an XHTML page, which has: - a form - table inside the form (two rows, two columns) having these elements : User id [ Input1 ] Password [ Input2 ] where "User id" and "Password" are static text, [ Input1 ] and [ Input2] are input text controls - one hidden field, whose name and value are set to your first name - two buttons, Submit and Help 2.1.2 External CSS - define custom style for the buttons (for example, specify the background) 2.1.3 Java Script - simulate "submit form": * display an alert (pop-up) window to show the value of the hidden field. 2.2 [60] Page 2 : in a file called Page2.html --------------------------------------------- 2.2.1 XHTML [30] Create an XHTML page containing information about a book, with the following elements: - a form - a table inside the form. The table borders should be set to 1px. The table has the following structure / elements, denoted as T: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ | | | | | | | | | | | | A1 | A2 | F1 | | C3 | | | | | | | | | | | | | | |- - - - | - - - -|- - - -|- - - -|- - - - -| | | | | | | DD | H | RB | | |- - - - | - - - -|- - - - - - - -| F2 | | | | | | | IT | B | CB | | |_ _ _ _ |_ _ _ _ | _ _ _ _ _ _ _ | _ _ _ _ | B1 B2 B3 Each student's table will be determined as follows: - take the middle digit of your York U id - calculate modulus 4 (m) of that digit - based on the value of m, determine the final shape of the above table: if m = 0 : the shape is table T if m = 1 : the shape is table T flipped horizontally if m = 2 : the shape is table T flipped vertically if m = 3 : the shape is table T flipped both horizontally and vertically Specification of the table elements: - F1: (text) Your name, in the form: Last, First - F2: (text) A book title - A1, A2: pictures of a city (A1) and of a village (A2) (100 x 200 pixels each) - H : A short poem, using italic font - C3: picture of a mountain (200 x 200 pixels) below the picture: name of the mountain - B: A short description of your current reading or of your desired reading (font size should be 60% of the regular font) - DD: drop-down list with 4 options. The options are the first four (4) digits of your York U id, spelled in regular English words: * for digit 1, the list will show One * for digit 2, the list will show Two * for digit 3, the list will show Three ... etc. ... - RB: radio buttons with exclusive option names (3 or more) - CB: check boxes with names (3 or more) - IT: input text - one hidden field (HF) - B1, B2, B3: three buttons with text: Button1, Button2, Button3 * the buttons will be centered in 3 invisible cells of width x * if t is the width of the table, then t = 3 * x 2.2.2 External CSS. [15] Requirements: - the page will have an external CSS called Page2.css; - change the default style of at least 5 standard XHTML tags; - create 2 custom styles. The above requirements are independent of each other. 2.2.3 Java Script [15] - implement user notification (use alert pop-up windows) for changes in the XHTML drop-down list, radio buttons, check boxes and input text; * for the input text, you can use the onchange event * see example at: http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onchange * above example is also showing how to change the value of an XHTML element, by retrieving the element with the function: document.getElementById("XHTMLElementId"); - the change notification for the drop-down list will show both the value and the text of the selected option (see last example in Lecture L5); - simulate "submit form" by: * using B1 as Submit button * using an alert (pop-up) window to show the value of the hidden field HF. 3. [15] Document your work ========================== Write a brief document in plain text file called readme.txt using enumeration lists (similar to the ones at 2.1 above), and document your work by explaining: - what files you have submitted; - what is the role of each file; - what customization you have done for each page and for each element on that page; - what is the role of the JavaScript code you have written. |
