CFT2111. School of Computing and Engineering. JavaScript Web Application

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Css/ Java and html Creating website

 

THE UNIVERSITY OF HUDDERSFIELD

School of Computing and Engineering

ASSIGNMENT SPECIFICATION

Module details

Module Code CFT2111

Module Title Introduction to Web Programming

Course Title/s BACB, IT, Web Design, Web Prog, Web Prog with Cyber Security, Computing

 

Assessment weighting, type and contact details

Title JavaScript Web Application 

Weighting 60%  

Mode of working for assessment task Individual/Group

Note : if the assessment task is to be completed on an individual basis there should be no collusion or collaboration whilst working on and subsequently submitting this assignment.  

Module Leader Matthew Mantle Contact details: 

SJ5/06

m.e.mantle@hud.ac.uk

 

 

Submission and feedback details

Hand-out date Term 1: Week 1

 

How to submit your work. You need to do the following to submit the work:

1. Compress your website into a zipped folder (no .rar or 7z please). This folder should contain all the files necessary for the website (HTML, CSS, JS etc). 

2. On Brightspace, under Assignments, submit your zipped assignment website. 

 

Submission date/s and times 11th January 2022 11:59PM

 

Expected amount of independent time you should allocate to complete this assessment 24hrs (assuming you have completed all the module practical work fully, 3x8hr days

Submission type and format See above.

Date by which your grade and feedback will be returned 1st February 2022

 

 

Additional guidance information

Your responsibility It is your responsibility to read and understand the University regulations regarding conduct in assessment. 

 

Please pay special attention to the assessment regulations (section 4) on Academic Misconduct. 

 

In brief: ensure that you;

1. DO NOT use the work of another student - this includes students from previous years and other institutions, as well as current students on the module.

2. DO NOT make your work available or leave insecure, for other students to view or use. 

3. Any examples provided by the module tutor should be appropriately referenced, as should examples from external sources. 

Further guidance can be found in the SCEN Academic Skills Resource and UoH Academic Integrity Resource module in Brightspace. 

 

If you experience difficulties with this assessment or with time management, please speak to the module tutor/s, your Personal Academic Tutor, or the School’s Guidance Team. (sce.guidance@hud.ac.uk). 

 

Requesting a Late Submission You are reminded to ‘back-up’ your work as late submission requests will not be given for lost work, which includes work lost due to hardware and software failure/s.

 

Late submission requests will only be approved if you can demonstrate genuine, unexpected circumstances along with independent supporting evidence (e.g. medical certificate) that may prevent you submitting an assessment on time. 

 

Submit your request for Late Submission via MyHud/MyStudies within 2 working days of the due date.

 

Late submission requests, up to a maximum of 10 working days, but typically 1-5 working days, will be considered provided that there is appropriate evidence which clearly indicates reasons for the request. 

 

You will have 5 working days after submitting a request to provide the evidence. Failure to submit evidence will result in the request being rejected and your work being marked as a late submission (see below). 

 

If you are unable to submit work within the maximum late submission period of 10 days, contact the School’s Guidance Team. (sce.guidance@hud.ac.uk), as you may need to submit a claim for Extenuating Circumstances (ECs).

 

Extenuating Circumstances (ECs) An EC claim is appropriate in exceptional circumstances, when an extension is not sufficient due to the nature of the request, or it concerns an examination or In-Class Test (ICT). 

 

You can access the EC claim form on the Registry website; where you can also find out more about the process.

 

You will need to submit independent, verifiable evidence for your claim to be considered.

 

Once your EC claim has been reviewed you will get an EC outcome email from Registry.  If you are unsure what it means or what you need to do next, please speak to the  Student Support Office – Room SJ1/01

 

An approved EC will extend the submission date to the next assessment period (e.g July resit period).

 

Late Submission 

(No ECs approved) Late submission, up to 5 working days, of the assessment submission deadline, will result in your grade being capped to a maximum of a pass mark. 

 

Submission after this period, without an approved extension, will result in a 0% grade for this assessment component.

Tutor Referral available NO

 Resources

• Please note: you can access free Office365 software and you have 1 Tb of free storage space available on Microsoft’s OneDrive – Guidance on downloading Office 365.

   

 

 

 

 

JavaScript Web Application 

Assignment Aims

This assignment provides an opportunity for students to demonstrate their understanding of basic front-end web programming concepts. Students will be required to analyse a problem statement and then design and build a web application using HTML, CSS and JavaScript that provides a solution to this problem.

Learning Outcomes

• Discuss a range of client-side web and Internet technologies.

• Explain approaches to web site design and implementation.

• Apply design techniques and web technologies to build web sites.

• Develop client-side scripts to implement dynamic behaviours and interactivity.

 

Assessment Brief

A charity for endangered animals has asked you to build a web application that will allow users to find out information about endangered species. It will allow users to enter and/or select options such as habitat, conservation status and population. The application should then present information about species that match the user's search options. Your application should be based on the following information. Your application should feature the following data:

Name Category Conservation Status Estimated Population Habitat

Orangutan Mammal Critically Endangered 120000 Forest

Snow Leopard Mammal Vulnerable 4000-6500 Mountains

Tiger Mammal Endangered 4000 Forest

Indus River Dolphin Mammal Endangered 1800 Freshwater

Galapagos Penguin Bird Endangered 2000 Ocean

Polar Bear Mammal Vulnerable 22000-31000 Arctic

Hawksbill Turtle Reptile Critically Endangered 20000-23000 Ocean

Greater sage-grouse Bird Near Threatened 100000-500000 Grasslands

Giant Ibis Bird Critically Endangered 194 Forest

Lau Banded Iguana Reptile Endangered 8000-22000 Forest

 

The web application you create should meet the following basic requirements:

• The application should be written using HTML5, CSS and JavaScript.

• There should be no use of server-side scripting.

• There should be no use of JavaScript or CSS frameworks e.g. jQuery, Bootstrap.

• The application must use the data provided above. To make a more interesting final application, feel free to add information for additional animals, but you must still use the dat in the above table. 

 

Don’t Panic

At first glance the assignment can seem very difficult. You don’t need a perfect application to pass or even to get a good grade. If you look at the assessment criteria you can show a basic level of understanding by using prompt boxes to gather user preferences, matching against a single animal and using the console to feedback to the user. By gradually implementing more complex functionality e.g. gathering data using an HTML form, you can improve the grade. 

 

 

Higher marks will be awarded to applications that:

Provide flexible matching. For example, the user may be able to specify a range of estimated population sizes they would like to search within, the user may be able to specify 'no preference' for some criteria e.g. the user might not care about the animals habitat, or the user may be able to select multiple options e.g. specifying mammals and reptiles. This is a challenge not only of your programming abilities (flexible matching and selection is harder to implement), but also of your design abilities. You will need to select appropriate form controls and think carefully about how to word questions to create an application that is intuitive and easy to use.

Provide an image of matching animals. You should be able to find example images of each of the species in the above table. When the search results are presented an image of each animal should be displayed.  The images should be licensed for re-use. 

 

Marking Scheme

HTML, CSS and design (30%)

You will need to create an HTML form and apply CSS even if you don’t get as far as form processing in your JavaScript code. When assessing the HTML and CSS the following requirements will be considered: 

Grade Descriptor

A+ Meets all the following requirements with no room for improvement:

• The HTML is valid HTML 5 according to the W3C validator (https://validator.w3.org/). 

• CSS has been applied to the page.

• Accessibility has been given consideration in the HTML form.

• An HTML form has been constructed that is suitable for the above scenario.

• A wide range of HTML features have been used appropriately.

• A wide range of CSS properties and selectors have been used appropriately and effectively. 

• The application is easy to use.

A Meets all the above requirements with minor room for improvement.

B Meets at least 5 of the above requirements and partially meets some others

C Meets at least 3 of the above requirements and partially meets some of the other requirements. 

D Meets 2-3 of the above requirements e.g. has created a form and applied CSS, but this is simplistic with no consideration for w3C validation or accessibility. 

E/F Fails to meet at least two of the above requirements

 

Gathering of user preferences (20%)

Grade Descriptor

A+ Excellent. Uses a range of form elements appropriately with flexible options and clear consideration given to the choices the user will need to make.

A Same as an A+ but is weak in some minor aspect.

B Gathers user’s preferences with a range of HTML form elements used appropriately. Room for improvement e.g. choice of form controls/options available.

C Uses an HTML form but limited range of elements e.g. only textboxes.

D Uses prompt boxes to gather user preferences

E/F Fails to gather all preferences / doesn’t work.

 

Matching to user preferences (20%)

Grade Descriptor

A+ Robustly and flexibly matches to user preferences.

A Same as an A+ but is weak in some minor aspect.

B/C Same as an A grade but has significant weaknesses e.g. program isn’t very robust, doesn’t consider all the factors. The extent of the weaknesses will determine B or C grade.

D Matches a single species to user preferences

E/F Fails to match to any species

Use of JavaScript (30%)

Grade Descriptor

A+ Same as an A grade but with significant evidence of independent study e.g. advanced DOM scripting, modular js.

A Sophisticated application that has been developed with effective use of a wide range of programming features including loops, objects, arrays and functions (not just event listeners) to structure and organise code.

B/C Same as an A grade but has significant weaknesses e.g. code could have been re-factored into different functions. The extent of the weaknesses will determine B or C grade.

D Shows understanding of some key programming concepts but there are also significant weaknesses e.g. little or no effective use of loops and arrays.

E/F Program doesn’t fully work indicating limited understand of JavaScript

 

 

 

 

 

 

 

 

 

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of