[SOLVED] ISCG6420 Project 1

This project should be completed as an individual work. Students are reminded to read all pages related to assessment rules including rules for dishonest work in the student handbook. You are allowed to seek advice from any source, but your written submission must be your own work, except where clearly referenced.

Plagiarism will be reported to the Academic Leader who may award zero marks or refer the matter to the Faculty Discipline Committee.

The project has three parts. All three parts should be presented as a website page on your Github Pages site, and be accessible via link from your home page. Your repository will be cloned within 12 hours of the provided time and date of each milestone (save point and submission). Your repository main branch should retain the code you wish to submit for at least 12 hours after each milestone. If you wish to make changes to your repository in that time, push your changes to a development branch.

Part 1 – Create an advertisement using CSS

Piha, arguably the most famous beach in New Zealand, is located west of Auckland.

Piha’s website provides information

You need to develop an advertisement (horizontal banner) using CSS animation. It should advertise Piha. Your advertisement should meet following criteria:

1. a)  A storyboard for an advertisement.
   Storyboard must be completed as a PDF document and linked to home page of project 1 (add it to your repository).
2. b)  The advertisement should change appearance twice.
   Each appearance should look like a new page, and provide a transition of the word Piha to an associated word with simple animation (text change from Piha to a word (Wild, Scenic, Beauty, etc) in the loop).
3. c)  Minimum two images should be included with animation.
   1. First image – move from bottom side and fading
   2. Second image – move from right to left
4. d)  Minimum 2 text animation (one animation should have a loop with two repeats, second animation is up to you). Your text animation must meet the following:
   1. colour changes,
   2. size changes,
5. e)  Link the advertisement to the Piha web site (http://www.piha.co.nz/), and it

   must open as a new tab or a new window

6. f)  Your name and student ID number must be animated and stay visible at the end

   of animation.

Part 2 – Reproduce an advertisement functionality using HTML5

Your lecturer will provide you with an advertisement, which need to be re-develop. Please go to Moodle link “For Project 1 2021 S1”. You need to reproduce an advertisement (vertical banner) using HTML5 to achieve same animation as in the given version. Your reproduced advertisement should meet following criteria:

1. a)  A storyboard for an advertisement. Storyboard must be completed as a PDF document and linked to home page of project 1.
2. b)  Appearance of the reproduce advertisement animation must match as closely as possible to the advertisement provided.
3. c)  Text’s animation should match as closely as possible to the advertisement version provided.
4. d)  Make the following changes:
   1. Replace the images depicted with similar, royalty-free images.
   2. Replace the text fonts with suitable fonts you have access to.
   3. Change text colours to a new hue (EG: change white text to light-blue).

and educational material. Any tourist/visitor can

plan and book accommodation through the website.

e) Link to the advertiser website (EG: Hilux https://www.toyota.co.nz/new- car/hilux/ (button or link)) must open as a new tab or a window.

f) Your name and student ID must be animated and stay visible at the end of animation.

g) Button to replay reproduced advertisement.

Part 3 – Booking using JavaScript (40 marks)

• Develop 4 steps (pages) Booking system for Piha lodge with different user’s inputs presented on interactive webpages using JavaScript.
• Plan your pages using wireframes.
• Booking system should collect next information:

o when user plan to stay
o main person name,
o main person email,
o number of people adults and children in the group, o do they need cooking facilities?

o do they need to use equipment (EG: Swimming goggles, surf board)? o do they agree with the local native conservation initiative agreement

(fictional)?
o You can add any other questions if you want.

• Booking’s steps (pages) must use next HTML5 inputs: Step 1: Date-picker, Radio buttons
  Step 2: Range and Dropdown box
  Step 3: Colour-picker and Number box

  Step 4 : Email and Checkboxes

• You can add any other additional inputs to any page, it is up to you (for example

  – Text box)

• All pages must have a progress bar and clearly communicate to user his/her

  progress with Booking.

• All pages must be linked using buttons “Next” and “Previous”
• All pages must retain information entered by the user until submission
• Last page should present a summary of all entered information, after user press

  submit button.

• Booking system must be professionally written and it should be easy to

  understand and use.

  Possible sources of information

  You can use resources such as academic journals, web sites and other Internet sources, class discussions and handouts, journals, newspapers and magazines, books, CD-ROMs and businesses’ promotional literature. You need to provide references to all used media. When referencing web sites, you should, where possible, give the author, title and date of the resources, and the full URL of the page(s) referred to, rather than just the address of the home page.

Delivery

Save point- Your website is due at the determined time/date at the top of this document.

1. First storyboard for your Piha advertisement,
2. Second storyboard for existing advertisement according to your version.
3. Layout and manual in word document with all steps for booking system planned

   and described,

4. Homepage for your project 1 (index.html)

Full submission- Your website is due in its entirety at the determined time/date at the top of this document.

1. Storyboards should be attached to your homepage as links,
2. A softcopy of your web site must be uploaded on Moodle using Assignment 1 submission link before the deadline. Please use a zip file, and it should have a

name project1_YourName_YourID
3. Your web site must be live on Github Pages or Dochyper at the due time.
4. One page as a standard cover sheet softcopy should be presented in your zip

folder as well (please download cover page from Moodle). This page must include a signed declaration that “this submission is my own work, except where clearly referenced”.

5. For the purposes of academic integrity, students who haven’t demonstrated progress work in the class time (and/or no save point submission) can be asked to demo/test their working code and explain logic to the lecturer individually after assignment submission.

A copy of your submission will be kept by Computer Science Practice Pathway for future reference and audit purposes.

Rules for Late Submission of Assignments

a. The due dates of assessment work will be notified in course information.

b. Assignments submitted after the due date and time without having received an extension through Affected Performance Consideration (APC) will be penalised according to the following:

10% of marks deducted if submitted within 24hrs of the deadline

20% of marks deducted if submitted after 24hrs and up to 48hrs of the deadline

30% of marks deducted if submitted after 48hrs and up to 72hrs of the deadline

No grade will be awarded for an assignment that is submitted later than 72hrs after the deadline.

c. Students submitting assignments after the due date and time will be ineligible to resubmit a failed assignment.

Affected Performance Consideration:

A student, who due to circumstances beyond his or her control, misses a test, final exam or an assignment deadline or considers his or her performance in a test, final exam or an assignment to have been adversely affected, should complete the Affected Performance Consideration (APC) form available from the Student Central.

When requesting APC for an assignment, the APC must be submitted (along with work completed to date) within the time frame of the extension requested; i.e. if the Doctor’s certificate is for one (1) day, then all work up to this day must be submitted on an application day.

Project 1 Save Point

Missing save point submission will be 20% deduction from the assignment mark:

Marking Guide

Marks will be allocated according to the following marking schedule:

Part 1 Advertisement for Piha :

ISCG6420 IWD

5

ISCG6420 IWD

6

Part 2 Produce an advertisement using HTML5:

ISCG6420 IWD

7

Part 3 Booking for User using JavaScript:

ISCG6420 IWD

8

(4 marks)

All pages must be linked using

buttons “Next” and “Previous”

(2 marks)

Total 4 links
0.5 mark = for each correctly working 2 link