FIT1050 Sample Exam Responses
How to interpret the sample responses:
Red text provides some information about general answer strategy for the response.
• Blue text is used for the actual responses.
• Remember to consider the number of marks allocated for each question
Be aware that questions may have multiple correct solutions. These responses
are provided examples of acceptable answer formats.
0. The world’s first website
Look at the screenshot of the world’s first website below and think about how the design of web pages has changed since the early 1990s.
1. Considering the types of devices and web browsers used in during the early 1990’s, what is one of the benefits of this simple design? (2 marks)
This response should show an understanding of the capabilities of older browsers and the features of the design that are beneficial.
• Limitation: Some early web browsers, such as Line Mode, could not display images or visual formatting.
• Benefit: The webpage shown in the picture only uses text, making it possible to display the content on a wide variety of different browsers.
2. If you were to redesign this website today for a modern target demographic, what changes would you make to each of the aspects listed below? (4 marks)
• Use of media
• Typography design
• Navigation
• Page layout design
This response needs to cover all 4 points listed in the question. Each needs to show an understanding of how modern webpages are designed.
• Use of media: Add more visual content. For example, a video that explains the key concepts of how World Wide Web works.
• Typography design: Use a sans-serif font for a more modern appearance.
• Navigation: Add a consistent navigation menu to the top of the page and organise
links in drop-down menus.
• Page layout design: Show main options as larger tiles arranged in a grid to make
use of the empty space and make items easier to see and click.
Programming Help
1. Understanding URLs
Consider the following standard URL format:
http://localhost/index.php?view=home
1. Which part of this address could be replaced with an IP address? Rewrite the URL above so that it includes an IPv4 address. (2 marks)
This response should show an understanding of URL structure, as well as the correct format of an IPv4 address. Any valid IPv4 address is acceptable.
• The authority “localhost” can be replaced with an IP address • http://127.0.0.1/index.php?view=home
2. Some servers and clients are switching from IPv4 addresses to IPv6 addresses. Why is this necessary? What is the main benefit of IPv4 compared to IPv6? (2 marks)
This response should show an understanding of why adoption of IPv6 is necessary, but also why IPv4 is still preferred or more convenient in some situations. Remember that the context of this question is “Understanding URLs”
• IPv6 has a much larger address space making it easier to assign unique IP addresses to devices.
• IPv4 addresses have the benefit of a simpler format, making addresses easier to read and write in a URL.
3. What is the purpose a query string? Rewrite the URL above so that 3 variables can be passed to a server for processing. (3 marks)
This response should correctly describe the purpose of a query string, identify the part of the URL that contains the query, as well the correct structure to include 3 variables.
• A query string allows variables to be sent to a server via a GET request. • http://localhost/index.php?view=home&first=john&last=smith
2. Writing valid HTML code
The HTML standards include rules about how elements that can nested within other elements.
1. Write an example of valid HTML code that includes the following: (5 marks)
• An ordered list containing 3 list items
• A hyperlink within each list item
• An image within the first hyperlink
The code in this response needs to be valid. All elements described in the question need to be included in the correct structure. Note that img elements require an alt attribute to be valid.
2. In HTML5, self-closing a void element is optional. Explain what this means and write an example of an empty element that has not been self-closed. (2 marks)
This response needs to show an understanding of what a void element is and a valid code containing an element that is void and missing a self-closing forward slash.
• Void elements don’t have end tags because they don’t contain content. •
3. Image optimisation
Different image file formats have characteristics that will make them more suitable for some types of images than others.
1. The logo and icon images at the top of the screenshot could be saved as a PNG-24 or SVG images. How are these two formats different? Which format would you choose and why? (2 marks)
Both formats in this question are lossless. You must identify the key difference. The choice of format should make it clear where one of the formats has a practical advantage.
• PNG-24 stores an image as pixel data, SVG stores descriptions of shapes.
• I would choose SVG. The images could be resized without loss of quality to
display perfectly at different sizes or on different devices.
2. The photograph above “Shop Board Games” could be saved as a JPEG or PNG-24 image. How are these two formats different? Which format would you choose and why? (2 marks)
Both formats support 16.7million colours, but they differ in compression type (lossy/lossless) and transparency support. Your explanation should show an understanding a difference and impact on practical use.
• JPEG is a lossy format that may reduce quality slightly. PNG-24 is lossless and maintains perfect quality.
• I would choose JPEG. The image will lose some quality, but it will not be too noticeable with photographs. The file size will be significantly smaller.
3. The GIF image format has some unique features that give it an advantage the JPEG format. What are 3 things that GIF images can do that are impossible with JPEG? (3 marks)
There are several differences – identify any 3 but make sure the differences are attributed to the correct format and express where GIF has an advantage.
• The GIF format uses lossless compression.
• The GIF format supports transparency.
• The GIF format supports animation.
浙大学霸代写 加微信 cstutorcs
4. CSS Box Model
Consider the following HTML and CSS code and the result that it produces:
Assume that no other CSS rules are being applied to this element.
1. What are the dimensions of the main element, measured from the outside of the blue border? Describe how the size of the element is calculated (3 marks)
This response relies on a correct understanding of the CSS box model as well how the border, margin, and padding properties work.
• 260px wide (200 width + 25 left padding + 25 right padding + 5 left border + 5 right border)
• 160px tall (100 height + 25 top padding + 25 bottom padding + 5 top border + 5 bottom border)
2. How does the CSS box-sizing property affect how the browser calculates the size of elements? What will the dimensions of this main element be if box-sizing is set
to border-box? (3 marks)
This can be answered without providing a description of how the final dimensions are calculated.
• “Box-sizing” determines whether the width and height properties include or exclude the padding and border measurements.
• When set to “border-box”, both the padding and border are included in the width and height.
• 200px wide, 100px tall.
Accessibility and Forms
Consider the design of the 2 forms below.
W3C WCAG 2.0 defines 4 basic principles for accessible web content:
• Perceivable
• Operable
• Understandable
1. Which of the forms has better support for accessibility? Identify 2 WCAG principles that the form supports and describe how the design of the form benefits people with specific disabilities or impairments. (5 marks)
Form 1 is objectively better – but you need to be able to justify this using 2 different WCAG principles. When identifying benefits, you must be specific.
• Form 1 has better support for accessibility.
• Perceivable – The labels in form 1 have more contrast.
• The label will still be visible after the user has started entering text into the input.
• Understandable – Checkbox and button labels in form 1 are less ambiguous.
• Clear language in a form means users will make fewer mistakes filling it in.
2. Would it be a good idea to indicate a correctly filled field using a green border and an
incorrectly filled field with a red border? Justify your decision. (2 marks)
The answer should recognise that colour can be cause accessibility problems.
• No, relying on colour only to communicate important information is a bad idea.
• Colour-blind users might not be able to see the difference between a red or green
border and won’t be able to tell which fields contain mistakes.
3. In terms of information architecture, suggest one other type of label that could be added to this form to help users understand how to fill it in correctly. (1 mark)
Several possible answers. Describe a specific feature and the benefit that it offers.
• Add red asterisks to indicate that some of the fields are required to reduce the chance of submitting an incomplete form.
程序代写 CS代考 加微信: cstutorcs
6. JavaScript
JavaScript code can be added to an HTML document in a few different ways.
1. Write an example of an HTML script element that contains a JavaScript function. (3 marks)
This response needs to show an understanding of how to write an HTML script element and a JavaScript function. The code should be syntactically valid for full marks. All valid function declaration styles accepted.
function myFunction() {
2. Write an example of an HTML script element that loads an external JavaScript file. (2 marks)
This response needs to show understanding of how to write a script element to load an external script. The HTML code should be valid for full marks.
3. What is one of the key benefits of writing JavaScript code in an external JS file? (1 mark)
The response should explain a practical benefit of using external JS files.
• External JS files can be reused on multiple pages. Changes made to code in the external file will automatically be applied to all pages that link to the JS file.
7. Mobile Website Design
Imagine you are working on a project for a music festival. A desktop-optimised website has already been built:
This is the intended design of the mobile website.
Consider the similarities and differences between the 2 designs.
1. Would you recommend that the client that use the responsive web design approach for this project? Why or why not? (3 marks)
This question does not have a simple yes/no correct response. Either “yes” or “no” may suffice provided that the justification identifies and applies appropriate understanding of the strengths and weaknesses of responsive web design techniques.
• I would not recommend the use of responsive web design as the proposed mobile design has too many differences compared to the desktop design.
• Differences in the branding design of the sites means that much of the CSS styling will be different for each version of the site.
• Significant differences in the links presented in the navigation menu means that different HTML will be required for each version of the site.
2. Briefly describe an alternative mobile delivery approach that could be used for this project and how it differs from responsive web design. What is a potential advantage or disadvantage of the alternative approach? (4 marks)
The response should show an understanding of how each alternative approach works as well as why it could be a good choice for the project.
• A separate mobile app could be used to target mobile users.
• This would work well if the mobile version needed to have unique app-like
functionality such as the music player shown in the design mock-up.
• A separate mobile website could be built, but with the use of server-side scripting to
fetch content from a database.
• This approach allows each site to have completely separate HTML and CSS code
to optimise delivery to each type of device while still allowing the same content to be used throughout the project.
8. PHP Scripting
You are debugging some PHP functionality in a website that is not producing the expected output. You are trying to output a title into a heading.
$title = ‘Welcome to My Website’;
if ( $title ) echo ‘The title is: $title’
if ( $content ) echo ‘$content’
1. Identify the errors in the code and rewrite it as valid PHP. (3 marks)
This response should be syntactically valid for full marks. There are several valid string output methods, including interpolation and concatenation.
$title = ‘Welcome to My Website’;
if ( $title ) echo “The title is: $title”; if ( $content ) echo “$content”;
2. Clearly describe the 3 mistakes in the code that you have corrected. (3 marks)
This response needs describe changes made in the previous question’s rewritten code, demonstrating that the changes are understood and not random or unnecessary changes.
• Added tags around the PHP code.
• Changed ‘single quotes’ into “double quotes” to interpolate variables.
String concatenation could also be used as a valid solution here.
• Added missing semicolons ; at the end of the 2 if statements.
Braces { } could be used around code executed by the if statement.
9. Client-side vs. server-side Scripting
While using an online file storage website, you notice that the photo management page has 3 main features:
• Images in the left-hand column can be re-ordered by dragging an image and dropping into a new position in the column.
• When an image is clicked, information about the image appears in the form in the right- hand column without leaving this page.
• After modifying information in the form and clicking “Update Details”, the browser navigates to a page that shows a success message.
1. One of these features will require client-side scripting. Which feature is it? Explain why client-side scripting required. (2 marks)
The response should identify a feature that benefits from JavaScript.
• Dragging and dropping of images requires client-side scripting.
• This feature requires user-input events and real-time manipulation of the DOM.
2. One of these features will require server-side scripting. Which feature is it? Explain why server-side is scripting required. (2 marks)
The response should identify where a server-side capability is required.
• Saving form information by clicking “update details” requires server-side scripting.
• This feature navigates to a new page which is likely to save data to the server.
3. One of these features will require AJAX. Which feature is it? Explain why AJAX functionality is used for this feature. (3 marks)
The response must show an understanding of how server-resources can be used with client-side scripting, as well as the fundamental purpose of AJAX.
• Loading image data into the form is most likely to require AJAX.
• When clicking an image, data could be requested from the server.
• To display the data without loading the page, an asynchronous request needs to be
made using JavaScript, then displayed by writing data into to the DOM.