TEC315/05 – Web Design Fundamentals TEC315/05 – Web Design Fundamentals JANUARY 2022 Assignment 2 Instructions: 1. The assessment covers the topics in Unit 3 ‘Graphics and Multimedia’ and Unit 4 ‘Interactive Elements. 2. The total marks for Assignment 2 is 100 and contributes 25% to the total grade. 3. This is an individual assignment. No duplication of work will be tolerated. Any plagiarism or collusion may result in disciplinary action in addition to ZERO marks being awarded to all parties involved. Please refer to the LMS for further details. 4. Submit your Assignment to the Online Assignment Submission system. Submission of TMAs in hard copy will not be accepted. Marks will be awarded for quality content and presentation. 5. Times New Roman 11 pt font should be used for all writing. Answer all questions in English. 6. Please check WawasanLearn for submission deadline. 1 TEC315/05 – Web Design Fundamentals ASSIGNMENT 2 GUIDE You are to submit your assignment in a WORD file document by providing the screenshots and codes that you have used. No other documents are allowed. If you have used notepad to create the codes, copy paste those codes into a word file document for submission. Sample layout of your answer: Question 1 (Repeat for all questions) (a) The screenshot of your table. a a a a a a a a a a a a a a Followed by the full codes used to create the table. <html> <head> Table </head> <body> <table> <tr> <th>Name</th> <th>Favorite Color</th> </tr> <tr> <td>Bob</td> <td>Yellow</td> </tr> <tr> <td>Michelle</td> <td>Purple</td> </tr> </table> </body> </table> 2 TEC315/05 – Web Design Fundamentals Question 1 (50 marks) You are required to create the HTML and/or Javascript codes for the following outputs. Please provide screen shots of all the output. (a) Create the following table which consists of 6 columns and 7 rows. The style of the text should be followed as shown in Table 1. TIMETABLE TIME/DAY Mon Tue Wed Thu Fri 8 am Science Maths Bahasa Arts PJ 9 am English History Maths 10 am Science LUNCH BREAK 11 am Maths Science English Bahasa 12 pm History Maths Science Maths Project Table 1: Timetable of a primary school (10 marks) (b) Create a button and an input text (Figure 1). Once the button (Click to enter your Name) is clicked, a prompt box will be displayed (Figure 2). Enter your name and click ok. Figure 3 will be your final output. (10 marks) Figure 1: Button and input text 3 TEC315/05 – Web Design Fundamentals Figure 2: Prompt box 1 Figure 3: Final output 1 (c) Create a button with the following value (Figure 4). Once the button (Let’s play with numbers) is clicked, a prompt box will be displayed (Figure 5). The following if-else statement should be considered based on the user input (x): (15 marks) If (x=50) then window background color should change to Red and display an alert box displaying the color name. (Figure 6) If (x<50) then window background color should change to Yellow and display an alert box displaying the color name. If (x<100) then window background color should change to Purple and display an alert box displaying the color name. Any other value will change to Green. 4 TEC315/05 – Web Design Fundamentals Figure 4: Button value 1 Figure 5: Prompt box 2 Figure 6: Prompt box 3 5 TEC315/05 – Web Design Fundamentals (d) Create a button with the following value (Figure 7). Once the button (Open a pop up window) is clicked, a new pop up window will be displayed (Figure 8). The pop up window should include the text “This is a pop up window” and a button (Exit). After the Exit button is clicked, the pop up window will automatically close. (15 marks) Figure 7: Button value 2 Figure 8: Window pop up 6 TEC315/05 – Web Design Fundamentals Question 2 (50 marks) The following main page was created with HTML, CSS and CSS3 codes. Please note the following while creating the main page: 1. The main menu is made up of mouse over buttons. When you move your mouse over it, the color changes (as shown below). The button changes back to its original color when the mouse is moved away from the button. 2. The text and image are aligned as shown below. 3. The 3 boxes at the bottom of the page are created using CSS and CSS3. Each with distinctive difference of the use of solid color, background image and border color. 4. You may choose to include the CSS code in your HTML file or put them separately. Please make sure that your output is as similar to the output provided. You are to display your codes together with your screenshots. 7 TEC315/05 – Web Design Fundamentals Text The menu has a mouse over effect. These are boxes with border properties which includes solid color, background image and border color. Image 8 TEC315/05 – Web Design Fundamentals TMA– Marking Scheme 9
