ISCG6420 - Create an Interactive Website - Project 1 - Solved

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. 

 

Part 1 - Advertisement for Piha Beach using CSS only

 

 

 
 
 

Part 3 

Write a booking system for lodge accommodation at Piha Beach Lodges (fictional). It should have 4 steps.

 
Part 2 

Develop your animated advertisement  (JavaScript and CSS)
 

Part 1 – Create an advertisement using CSS                      (25 marks)
  

Piha, arguably the most famous beach in New Zealand, is located west of Auckland. Piha’s website provides information and educational material. Any tourist/visitor can plan and book accommodation through the website. 

 

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

 

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).  

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).

c)      Minimum two images should be included with animation.  

a.       First image - move from bottom side and fading

b.      Second image – move from right to left

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:  

a.       colour changes,  

b.      size changes,  

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  

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            
(35 marks) 

  


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:

 

a)      A storyboard for an advertisement. Storyboard must be completed as a PDF document and linked to home page of project 1.

b)      Appearance of the reproduce advertisement animation must match as closely as possible to the advertisement provided.  

c)      Text’s animation should match as closely as possible to the advertisement version provided.

d)      Make the following changes:

a.       Replace the images depicted with similar, royalty-free images.

b.      Replace the text fonts with suitable fonts you have access to.

c.       Change text colours to a new hue (EG: change white text to light-blue).

 

 

e)      Link to the advertiser website (EG: Hilux https://www.toyota.co.nz/newcar/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.


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)



 

 

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:

No. 
Item 
Criteria 
Marks 
 
 
 
 
 
Part 1 Documentation

(storyboard)      

 
6 = Storyboard screen provided for each major scene of the animation sequence

-1 mark for each missing detail or uncompleted description,

 -1 spelling errors or grammar problems,   
6 
 
Part 2 Documentation

(storyboard)

 
6 = Storyboard screen provided for each major scene of the animation sequence

-1 mark for each missing detail or uncompleted description,

-1 spelling errors or grammar problems,   
6 
 
Part 3 Documentation: Outline your Bookings for each page, draw wireframes and write list of fields and plan your inputs for each step / pages.

You should use draw.io 
8 = all criteria are met: each wireframe has clear explanation is given, with all detail descriptions are outlined  

-1 mark for each missing detail or uncompleted description,

-1 spelling errors or grammar problems,   

-3 for each meaningless writing or drawing 

 
8 
 

 
 
 
 
 
Part 1 
Advertisement for Piha : 
 
 
a. 
 A storyboard for an advertisement.  

•      Storyboard must be completed as a PDF document  

•      linked to home page of project

1.     

•      clear sequence/steps of events are outline

•      elements in each step are
8= all criteria are met

5-7=if one or two criteria are missing and/or incomplete description in one of the step or link to home page is missing  2-4 = if more than 2 criteria are missing or incomplete description in more than two steps or link to home page is missing and untidy drawing,   

1 = only one step is outline and number
8 
 

 
described which includes - details are outlined (type, position, animation), duration, delay.  

• Sketch out the story is drawn.  

                                       (8 marks)
of criteria are missing and untidy drawing,   

 
 
b. 
 The advertisement should change appearance twice.   

 

Each appearance should must look like new page.  Animated translation.

(5 marks)

 
5 = all criteria are met

3-4 = if similar background and not so clear distinguish between different steps

  2.5     =     if     same     background    and

advertisement looks like one page 1-2 = very simple setting

 
5 
c. 
 

Minimum two images should be included with animation.  

First image - move from right side and fading

Second image – move from bottom  to top  

 

  

 (5 marks)

 
5 = all criteria are met

4 = most of criteria are met, but image’s quality is low and some parts is not clear. 3 = most of criteria are met, but image movement are the same

2 = if one image is missed and other image’s quality is low   

=1 if one image is missed and other image’s quality is low   and it is blended with background.

 
5 
d. 
Minimum 2 text animation  

(one animation should have an infinitive loop, second animation two times repetition and third animation is up to you). Your text animation must meet the following:  

•      colour changes,  

•      size changes            

(4 marks)

 
4 = all criteria are met

3= most criteria are met, but colour change is blended with background or size change is not so noticeable.

2= some criteria are met, but one animation is missing completely.  

1= only one text animation had been implemented, and two animations are missing completely.  

this animation has colour change is blended with background or size change is not so noticeable.

 
4 
e 
Link the advertisement  to the advertiser’s web site and it must open as a new tab or a window.   

(2 marks)  

 
2 = all criteria are met

1 =if Link is open in the same window  

0 = error in URL address  
2 
f 
Your name and student ID number must be animated and stay visible at the end of animation.  Text with student’s name, ID animated  

(1 marks) 
1 = all criteria are met

0.5 = no animation or if text is not visible after animation

 
1 
 

 
 
 
 
 
 
 
 
 
Part 2 Produce an advertisement using HTML5: 
 
 
a.
A storyboard for an advertisement.  

•      Storyboard must be completed as a PDF document  

•      linked to home page of project

1.     

•      clear sequence/steps of events are outline

•      elements in each step are described which includes - details are outlined (type, position, animation), duration, delay.  

•      Sketch out the story is drawn.  

                                       (8 marks)
8 = all criteria are met

5-7 = if one or two criteria are missing  and/or incomplete description in one of the step or link to home page is missing  2-4 = if more than 2 criteria are missing or incomplete description in more than two steps or link to home page is missing and untidy drawing,   

1 = only one step is outline and number of criteria are missing and untidy drawing,   

 
8 
b.
Appearance of the reproduce advertisement must match as closely as possible to the advertisement version provided.  

(9 marks)

 
9 = all criteria are met

7-8 = most of appearance of the reproduce advertisement is matches closely but minor one or two details are missing.  

4-6 = some of appearance of the reproduce advertisement matches closely but three or more details are missing.  

2-3 = only one part of appearance   of the reproduce advertisement is presented.  

1 = attempt had been made but reproduced advertisement has one or two details that match assign version.  

 
9 
c.
 

Text’s animation should match as closely as possible to the advertisement version provided.  

(9 marks)  

 
9 = all criteria are met

7-8 = all text animation in advertisement  matches closely to original version but minor one or two details are missing.  

4-6 = some text animation in advertisement matches closely to original version but three or more details are missing.  

2-3 = only one text is animated in the same way as original version.  

 1 = attempt had been made but only one text is animated.  
 

9 
d.
Link to the advertiser     website (button or link) and it must open as a new tab or a window.  

(3 marks)
3 = all criteria are met

2 =if Link is open in the same window  

1= working Link to other source

0= error in URL address 
3 
 

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

(1 marks) 

  
1 = all criteria are met

0.5 = no animation or if text is not visible after animation

 
1 
f. 
Button to replay reproduced advertisement.  

(5 marks)

 
5 = if advertisement is replay completely  2-4 = if only part of advertisement is replay  

1 button exist but script has errors, and can’t work  
5 
 
 
 
 
 
Part 3 Booking for User using JavaScript: 
 
 
 
Professionally written 4 steps

(pages) Booking

•      Clearly design interface, follow design principals  

•      All pages must have a progress bar

•      Clear story line  

•      spelling, punctuation and grammar, the language, structure and style of English used in New Zealand  

(12 marks)
3 marks = for each page

3= complies to all criteria to the highest standard

2 = complies with some criteria with brief explanation

1 = not up to the standard and explanation is lacks clarity or not relevant 0 = if copied from online Booking  
12 
 
Booking Steps(pages)

•      Use JavaScript and HTML5 to write booking

•      Summary of all entered information display to user, after user press submit button.  

•      Booking’s pages meets predefined user inputs:  Page 1: Date-picker,  Number box  

Page 2: Radio buttons and

Dropdown box

Page 3: Colour-picker

,Checkboxes and Range  

Page 4 : Email

 

 (16 marks)

 
4 marks = for each demo  

3 = complies with most criteria

2= complies with some criteria with minor errors

1 = not up to the standard and number of errors.

0 = if copied from online booking 
16 
 
All pages must have a progress bar and clearly communicate to user his/her progress with Booking.
 

 
 
6 
 
All pages must be linked using buttons “Next” and “Previous”  (2 marks)
Total 4 links

0.5 mark = for each correctly working link
2 
 
Overall project

•      professionally presented (required layout) as web pages on dochyper/github space,  

•      folder Project1,  • homepage – index.html,  

•      external CSS files.  

•      required layout is follow Any additional work done

 (It will be up to 5 marks deduction if one of criteria missed)
0 = all criteria are met

-1                  = most criteria are met, but no external CSS file

-2                  = folder is Project1, and homepage file is not “index.html” and, and external CSS file is used

-3                  = folder is  not named Project1, but homepage file is not “index.html”   and no external CSS file.

-5 = folder is  not named Project1, and homepage file is not “index.html” , and external CSS file is not used.