Just the coding bit done
1 Assignment 3: Forms and the DOM Unit: DGTL11006 Coding Fundamentals, 2020 Term 2 Due date: 9:00 pm AEST, Friday of Week 12 Weighting: 40% Objectives This assignment relates to unit learning outcomes 1, 2, 3, 4 and 5, as stated in the unit profile. Task You are required to build a web page that helps users calculate the cost of a ticket for admission to a fictitious theme park named Wizard World. The web page must be implemented using HTML5 and JavaScript code. You must write all of the code yourself. Your web page must not contain any automatically-generated JavaScript code such as the JavaScript behaviours available within Dreamweaver. You are also required to write a report about your work. To simplify development and marking, the appearance of the web page must match the example shown below. Don’t try to enhance the appearance of the page or add extra elements to it. CSS code is not required. Visual appeal is not part of the assessment criteria for this assignment. The border around the screenshot below is not part of the web page. Figure 3-1: Screenshot of the assignment solution 2 The page contains the following elements: • a heading; • a paragraph of instructions; • a group of three radio buttons for the ticket type labelled: • Admission only • Admission and all shows • Admission, all shows and unlimited rides • a checkbox labelled 'Click here if you will be purchasing a two-day ticket'; • a group of three radio buttons for the guest type labelled: • Adult • Concession • Child (under 12) • a submit button labelled 'Calculate'; and • a reset button labelled 'Reset'. The HTML form prompts users to select their ticket type, whether they want a two-day ticket or not, and their guest type. When the user supplies the requested input and clicks the Calculate button, the script calculates the total cost of the ticket and displays the answer in an alert box. The alert box should say ‘The cost of the ticket is $...’. The cost that is displayed should be rounded to the nearest dollar (integer). It should not be displayed as a floating-point number. If the user clicks the Reset button, all form fields should be cleared. When the web page is first loaded, all form fields should be empty. The following information can be used to calculate the cost of a ticket. • Table 3-1 lists the cost of the various one-day ticket types for a child. • The cost of a concession ticket is 1.5 times the cost of a child ticket. • The cost of an adult ticket is 1.9 times the cost of a child ticket. • The cost of a two-day ticket is 2 times the cost of a one-day ticket. Table 3-1: Child ticket prices for a single day at Wizard World Ticket type Cost of one-day ticket Admission only 30 Admission and all shows 40 Admission, all shows and unlimited rides 50 The following examples illustrate how the cost is calculated. Example 1: A pensioner eligible for a concession wants a one-day-ticket covering admission and all shows. The cost will be $60. 3 One-day child ticket covering admission and all shows = $40 One-day concession ticket covering admission and all shows = $40 1.5 = $60 Rounded ticket price = $60 Example 2 An adult wants a one-day-ticket covering admission and all shows. The cost will be $76. One-day child ticket covering admission and all shows = $40 One-day adult ticket covering admission and all shows = $40 1.9 = $76 Rounded ticket price = $76 Example 3: An adult wants a one-day-ticket covering admission, all shows and unlimited rides. The cost will be $95. One-day child ticket covering admission, all shows and unlimited rides = $50 One-day adult ticket covering admission, all shows and unlimited rides = $50 1.9 = $95 Rounded ticket price = $95 Example 4: An adult wants a two-day-ticket covering admission, all shows and unlimited rides. The cost will be $190. One-day child ticket covering admission, all shows and unlimited rides = $50 One-day adult ticket covering admission, all shows and unlimited rides = $50 1.9 = $95 Two-day adult ticket covering admission, all shows and unlimited rides = $95 2 = $190 Rounded ticket price = $190 During the calculation process, the JavaScript code should validate the data supplied by the user. If the data are incomplete or incorrect, the script should display an alert box explaining the problem rather than attempt the calculation. The script should use the getElementById() function to access the form input fields and their values rather than use alternative techniques. Technical constraints The following technical constraints apply to this assignment. • The web page should display correctly in the latest versions of Mozilla Firefox and Google Chrome on a PC. • The web page must be constructed with HTML5, CSS and JavaScript only. • The appearance of the web page must match the screenshots that are provided. Don’t try to enhance the appearance of the page or add extra elements to it. Use only the CSS code that has been provided for this assignment (if applicable). Additional CSS code is not required. • The web pages should not be installed on a web server. The pages must not contain any server-side scripts such as PHP, ASP.NET, Node.js, Java, Ruby, Perl or Python code. It should be possible for the marker to view the pages from the submitted files without connecting to the Internet. Hints The following suggestions will help you to complete the assignment. • Build the HTML form first. This is the easiest part of the assignment and the logical starting point. Forms are discussed in Study Guide modules 10 and 11. 4 • Define an event handler for your Calculate button that calls a user-defined function when you click it. Give the function an appropriate name. Event handlers and functions are discussed in Study Guide modules 6 and 11. • Write the function that you called in the previous step. This function should extract the data it needs from the form, calculate the answer, and display it in an alert box. The function has the following basic parts or sub-problems: 1. Inspect each Ticket Type radio button to identify which one has been selected. 2. Use the selected Ticket Type radio button to determine the cost of a one-day child's ticket. 3. Determine whether the two-day ticket checkbox has been selected or not. 4. If the two-day ticket checkbox has been selected, adjust the ticket price accordingly. 5. Inspect each Guest Type radio button to identify which one has been selected. 6. Use the selected Guest Type radio button to adjust the ticket price accordingly. 7. Round the ticket price to the nearest integer and display the appropriate message in an alert box. • Refer to Study Guide modules 10 and 11 for examples of how to manipulate radio buttons and checkboxes. You can use similar techniques when you write the function. Report You are required to write a report about your work on this assignment. The report should be prepared as a Microsoft Word document with a professional appearance. Use left-justified alignment for the text. Provide a heading for each section. Check your spelling. grammar and punctuation before submitting the assignment. Ideally, have someone else proof-read your assignment. Report structure The following outline explains how to structure your report. It lists the headings for each of the sections of your report, and the topics that should be discussed. Title page The title page should display the unit code, the unit name, the assignment number, the assignment name, the assignment due date, your student number, your name, and the word count. Microsoft Word has a feature for counting the number of words in a document. Introduction The introduction should tell the reader that this report will discuss your experiences working on DGTL11006 Assignment 3. Provide an estimate of the total number of hours you spent working on the assignment. This estimate should not include the time you spent attending classes or engaging in personal study. Resources This section should describe the resources you used to complete this assignment. For example, you might have benefited from the course materials, the online discussion forum, a textbook, an online tutorial, or help from others. 5 Method This section should describe the steps you performed to complete this assignment Difficulties This section should describe any difficulties you encountered while working on this assignment and how you resolved or overcame those difficulties. Lessons This section should describe what you learned from this assignment. Conclusion This section should explain whether you think this assignment was a useful learning exercise or not, and provide reasons. References This section should provide a complete list of references to any works that are cited in your report, such as books, journals, periodicals, newspapers and websites. References must be provided whenever you quote, paraphrase or summarise the work of another author. You might not have any references since this report is primarily reflective and does not involve research. This section may be omitted if you have no references. Word count The length of the report should be between 600 and 800 words. The word count is considered to be from the first word of the introduction to the last word of the conclusion. It includes in-text citations, direct quotations and words contained within any tables that are in the body of the report. It excludes any title page, abstract, table of contents, list of references or appendices. No abstract, table of contents or appendices are required for this report. Writing style The report may be written in either the first-person style or the third-person style. Writing in the first-person style means using personal pronouns in your writing (e.g. ‘I chose this typeface because ...’). In contrast, writing in the third-person style means removing personal pronouns from your writing and using alternatives (e.g. ‘This typeface was chosen because