Programming Assignment 3 - Project (25%)

Create a website incorporating HTML and JavaScript that will collect information on websites and generate a reference list (using Harvard Referencing).

Your website must have 2 webpages:

Page 1. index.html (HTML only)

• Welcomes people to the site and provides description of why and when students need to reference (approx. 100 words)

• Give an explanation and some examples of how to reference websites

• Use different headings/text types

• Include at least 1 image

2. Links to at least 2 websites with referencing guides (search UniSA referencing) (Displayed as lists)

3. Link to page to generate reference list

You are encouraged to use images and colours to make the website more visually appealing

For example:

Page 2 - Referencing list generator (HTML, JavaScript)

Your program should use loops, if structures, and arrays to create your reference list

1. Create an empty array to store your references as strings

2. Asks user details for each website to build the reference (using prompt windows)

• author name (in format family name. initial) or authoring body

• title of webpage

• year if known

• title of website

• publisher if known

• date viewed (in the form day monthName year e.g. 6 July 2018)

• url

3. Use a function to convert these details into a string with the correct formatting for the website i.e. Author's family name, Initial(s) OR Authoring body year, Title of webpage, Title of website, Publisher where known, viewed date, <URL>.

This function should take in the details of the reference and return the complete reference as a string (including formatting tags)

// function definition

function buildReference(author, webpage, year, website, publisher,

dateViewed, url) {

/* Insert your javascript code here */

return refString; // return reference string

}

// function call

var refString = buildReference(author, webpage, year, website, publisher,

dateViewed, url);

If the user does not enter a year (i.e. enters an empty string “”) it should use n.d. For example: Author's family name, Initial(s) OR Authoring body n.d., Title of webpage, Title of website, Publisher where known, viewed date, <URL>.
If the user does not enter a Publisher, it should leave this out. For example: Author's family name, Initial(s) OR Authoring body n.d., Title of webpage, Title of website, viewed date, <URL>.

Note: To display the character ‘<’ and ‘>’ in document.write you will need to use <, and > otherwise it will think it is a tag and not display correctly i.e. document.write(‘<hello>’) will display ‘<hello>’

4. Add this string to an array named refList[] which will store all the reference strings

5. Repeat the above steps while the user has more references using a while loop

Do you have another website? Y/N

6. Include validation so that if they do not enter Y or N, it will display an error message (as an alert window) and ask again.

7. Sort the array (alphabetical order)8. Display the array as a reference list using a for loop to move through the array.

8. Display the array as a reference list using a for loop to move through the array.

9. Link back to home page

For example:

References:

Department of Immigration and Citizenship 2012, Permanent visa options for doctors, Department of Immigration and Citizenship, Australian Government, viewed 6 November 2012, <http://www.immi.gov.au/skilled/medical-practitioners/permanent-visas.htm>.

Smith, A. 2012, Permanent visa options for doctors, Department of Immigration and Citizenship, Australian Government, viewed 6 November 2012, <http://www.immi.gov.au/skilled/medical-practitioners/permanent-visas.htm>.

Return home

You must use and document the Design Process in this project. See further details below.

You must include the following details.
A report template will be provided on Moodle.

1. Analysis (5 marks)

What are the inputs, outputs and constraints? (5 marks)

2. Design (30 marks)

What will your webpages look like? Include a sketch of each webpage (10 marks)
List your content on Referencing for your first page (10 marks)
Write your algorithm using a flow chart OR Pseudocode for the interactive component of the project (JavaScript) (10 marks)

3. Implementation – Create your code (30 marks)

Ensure you include :

i. Comments describing the code on your HTML and JavaScript files.

ii. Appropriate variable names

iii. Well organised loops and selection (if)structures

iv. Use of arrays to store referencing content

v. Function to convert array to reference string

vi. Correct spelling/punctuation for all output

vii. Meets requirements:

Contains links and content on Referencing
Links to move between pages
Asks questions to produce each reference
Displays reference list in correct order

4. Testing (10 marks)

Record at least 5 tests on different components on your website. Ensure you include the details below for each test:

Purpose of test - What are you testing?,
i.e. links work, records correct results etc)
Input data for tests
Expected results – What should you see if it works?
Actual results – What did you see? Include screenshots.• Comments/Problems – Did you discover any issues from the test, what needs to be changed?

5. Reflection (5 marks)

Answer the following questions with examples in your report

What did you find easy/difficult?

What did you learn?

What do you still need to work on?