How this assessment will be marked A teacher will mark this assessment. The teacher will use the following marking guide to provide you with feedback about your completed assessment. Please use this...

How this assessment will be marked A teacher will mark this assessment. The teacher will use the following marking guide to provide you with feedback about your completed assessment. Please use this guide as a double check for you assessment before you submit your work on the OLS.

You must receive a result of Satisfactory in all tasks in order to pass this assessment.


Dynamic Websites Practical Task A Dynamic Websites Practical Task A Version 2.0 Table of Contents Units3 How you will be assessed3 How this assessment will be marked4 Resources6 What you have to do7 Scenario8 Tasks8 Task 1 Add links to all images on the Members page8 Task 2: Create script to retrieve the data9 Task 3: Programming the rendering of the enlargements9 Task 4: Programming the building of the form9 Task 5: Test in common Web browsers10 What you need to submit for this assessment10 How to submit your assessment10 Units This assessment counts towards completion of these units: · ICTWEB501 Build a dynamic website · ICTWEB502 Create dynamic web pages How you will be assessed This is an ungraded assessment. Possible results for this assessment are: · S – Satisfactory · U – Unsatisfactory. You may be asked to resubmit the assessment. · F – Fail. To achieve a Satisfactory result, you must successfully complete all tasks. How this assessment will be marked A teacher will mark this assessment. The teacher will use the following marking guide to provide you with feedback about your completed assessment. Please use this guide as a double check for you assessment before you submit your work on the OLS. You must receive a result of Satisfactory in all tasks in order to pass this assessment. Resources To complete this assessment, you will need the following: · the zip file containing the sliced images that are to be assembled and displayed on the HTML page, dynamic_websites_pract_taskA_images.zip. · This file contains the sliced images for the following files: bcpot002 bcpot003 bcpot006 bcpot008 bcpot009 NB there are a total of one hundred files. While you are not obligated to use these sliced images they have been provided to help you test your assignment. You are free to modify them. · Your completed Members page from your Dynamic Web Pages Practical Task assignment. · Your completed script file from your Dynamic Web Pages Practical Task assignment. You will also require · a text editor to edit the HTML files, such as Notepad++ (you can download this for free from https://notepad-plus-plus.org/) You can use Window’s native editor, Notepad if you prefer. or · a web authoring program such as Adobe Dream Weaver or Microsoft Expression Web or Microsoft Visual Studio. What you have to do You must complete all parts of all Tasks for this assignment. Before starting this assessment, you should already have successfully completed the Dynamic Web Pages Practical Task. For this assessment you will produce the following outcomes, based on the supplied scenario: · a working members page that links to the order page for the item selected NB Given that the members page is now to be incorporated into the main web site (see the scenario below) you will need to give some thought about revising its layout to comply with the page designs for the site. While this is not a requirement for this assignment it will become one in a future assignment · a working order page that is opened from the members page providing a dynamically rendered enlargement of the item selected and a partially dynamically rendered form NB this page is to retain the layout specified in the Dynamic Web Pages Practical Task Assignment · external script file or files in their own directory (folder). The directory should be called “scripts” and be located as a branch off the website’s root directory · an images directory (folder) that contains the provided images. This directory should be located off the website’s root directory NB you might decide to expand this folder into further sub folders of images to help keep the different categories separate. NB it is not a requirement of this assignment to preload the sliced images for the enlargement. Scenario This assignment is based on the organisation known as Bazaar Ceramics and it will be the implementation of your Dynamic Websites Written Task A assignment. The client Emma Rich, is happy with the completed membership website and now wants it incorporated into the main website by discarding the other pages (index.html, nav.html, images.html & info.html) that you developed as per the HTML Practical Task A assignment from unit ICTWEB429). Your supervisor has agreed to incorporate these changes using dynamic client-side scripting and was impressed with your suggestions on how to implement the enlargement along with its associated form data. He has decided to go with your recommendation of passing a query string and retrieving the required information from the Location object. He thinks your idea of using this method for both the image and the order form is quite clever. This will enable the idea of having one page only for all of the enlargements and their respective order forms to be realised. The page is to be HTML5 compliant. Tasks Task 1 Add links to all images on the Members page · Using the members page, you modified from the Dynamic Web Pages Practical Task Assignment (ICTWEB411 Create basic client-side script for dynamic web pages) add links to all of the images on the Members page so that they will open as enlargements in the Members Order (members_order.html) page in a new browser window. · Each link should send the necessary information to the identify which image is being enlarged · Each link should also send the necessary information to fill out the order form for the image, i.e. the description and the unit price. · The image (thumbnail) of each item should be the link. NB you will need to prepare sliced images for each image on the Members page. The enlargement should match its corresponding thumbnail. You can use the images provided with this assignment if they match your thumbnails however you may need to produce further slices. NB if you are unsure as to how produce sliced image files refer to the online tutorial recording that covers this. You will find a link to it under the Connect tab on the unit page for ICTWEB502 Create dynamic web pages. Task 2: Create script to retrieve the data · Using the external script file, you developed for the Dynamic Web Pages Practical Task Assignment add script that will retrieve the information sent to the page via the query string. The data should be placed in variables with the intent of passing these variables to the relevant functions as described below in Tasks 3 & 4. NB his script should not be in a function but should run as the page loads. Task 3: Programming the rendering of the enlargements · Modify the script from the Dynamic Web Pages Practical Task Assignment to render the sliced images as one complete image from the information passed to the page. NB this script will need to be written as a function (if it is not already) in order for it to accept the necessary data (variable or variables) as parameters · While it would be desirable for the script to use the innerHTML property to output to the page this is not mandatory. It is more important that you successfully code JavaScript that renders the slices from a single function call. TIP you will need to use a nested for loop to be able to this. NB you do not need to preload the slice images therefore you do not set up an image object variable · Your function should be able render any enlargement of any image shown on the member’s page. NB for this assignment you do need to provide a customised page heading for this page. A generic one will suffice, e.g. “Members Order Page”. Task 4: Programming the building of the form · Use the information that you have retrieved from the Location object in Task 2 to dynamically display the image’s description and unit price. · Modify the function that you developed from the Dynamic Web Pages Practical Task Assignment to calculate the Total Price of the order. The function will need to incorporate the data sent to the page that you have isolated in Task 2. TIP you will need to convert the price to a numerical data type · The form should retain all of the functionality that you programmed into it from the Dynamic Web Pages Practical Task Assignment. This means validation should still be applied upon calculating the order total as well as upon submitted the form. Task 5: Test in common Web browsers · Load the completed Members and Members Order pages into a variety of web browsers to test for compatibility. Tip you can test the page in Microsoft Edge, Mozilla Firefox, Google Chrome and / or Apple Safari. Test in at least two different common web browsers. NB provide labelled screen shots. · Document any discrepancies and the steps taken to correct them if possible. If no problems were found then this should be stated. Paste your appropriately labelled screen shots of the Members Order page here. Include any documentation. What you need to submit for this assessment For this assessment you must submit the following files compressed (zipped): · Dynamic_Websites_Practical_TaskA.zip containing all of the required sub folders and files. · The following files should be included stored in their respective folders: · member.html · members_order.html · script files · This assignment file (DynamicWebsites_PracticalTask_AV2.docx) should also be included complete with screen shots and documentation for Task 5. Note: You must keep your own copy of this file. How to submit your assessment Using the OLS: Go to the Assessment Information page for the units ICTWEB502 Create dynamic web pages Submit your file against the assessment named as Dynamic_Websites_Practical_TaskA. Information Technology Created: 19/08/2020 Version: 2.0 DynamicWebsites_PracticalTask_AV2.docx Last Updated: 03/09/2020 Page 1 of 12 Information Technology Created: 19/08/2020 Version: 2.0 DynamicWebsites_PracticalTask_AV2.docx Last Updated: 03/09/2020 Page 2 of 10