代写PRG001程序、代做Programming编程、代写Java语言程序

日期：2021-04-27 10:54

PRG001 Programming Assignment 2:

(15% - Due 11 pm Sunday Week 9)

In this task, create a 2 page website incorporating JavaScript to help the user choose the right size for a

particular bike model. a bike.

You will need to use HTML tags and some simple JavaScript input, output, arithmetic, and conditional

statements.

You will need to submit:

Combine all these files into a .zip folder to submit through Moodle.

• HTML files – home.html, size.html

• Images used on webpages

• JavaScript file – size.js

• Testing logs (for Part 2 and 3) and reflection

▪ Copy testing tables into a word document and complete

▪ Answer reflection questions and add to the end

▪ Name Assignment2_testing

There are 3 parts. The following timeline is recommended:

Part Recommended completion date

Part 1 – HTML Complete by Friday week 7

Part 2 – JavaScript Complete by Friday week 8

Part 3 – JavaScript/HTML + Reflection Complete by Friday week 9

Part 1 – HTML:

Create the following 2 web pages in HTML to form the basic structure of your website.

Both HTML files should have the following comments at the top:

<!--

File: filename

Author: Your Name

SABIT Id: Your SAIBT ID

Date: Today’s date

Description: Assignment 2 – HTML file

This is my own work as defined by the SAIBT’s Academic Misconduct policy.

-->

Page 1: home.html

The home/welcome page for the bike shop

It must contain the following items/tags:

• Title (using <title>)

• 2 different heading types (using heading tags)

• Description of business

• Images of 4 different bike models (models named Coder, Looper, Implementer, Tester)

Search for images through CreativeCommons to avoid Copyright infringement.

https://search.creativecommons.org/

• List (or table) with basic specifications of bike

• Link to size.html with text "Find your size"

For example:

Page 2: size.html

This page will help the user choose the right size of bike for them.

o Title (using <title>)

o A heading (using heading tags)

o The text below

Your chosen model: MODEL

Your height in metres: HEIGHT

The best size for you in model is SIZE.

o Link back to home.html

For example:

Note: These pages must be created using HTML tags only.

You may use editing software to create/edit images for the page, but you must not use any webpage

development software.

Part 2 – JavaScript:

You will create a JavaScript program to display the correct size for the users chosen model and height

based on this graph below:

Follow the stages below to assist in creation of your JavaScript.

After you have completed a stage (before you move to the next stage)

• Check your output – it should match the test output

• Save a backup

Stage 1

1. Create a new JavaScript file in your working folder and name it bikesize.js

2. Add the following comments at the top of your file (insert your information)

/*

File: bikesize.js

Author: Your Name

SABIT Id: Your SAIBT ID

Date: Today’s date

Description: Assignment 2 – JavaScript file

This is my own work as defined by the SAIBT’s Academic Misconduct policy.

*/

3. Create a variable to store the users chosen model (as a string), give it the default value Coder

e.g. var model = "Coder";

4. Add the following code to convert the model name into uppercase.

model = model.toUpperCase();

This will help us when comparing model names (we only need to compare against uppercase)

5. Create a variable to store the user’s height in metres. Set a default value 1.8.

6. Convert the height into centimetres (x 100)

7. Display to the console the height (in centimetres) and model (in uppercase) separated by a

space. (use console.log)

You should see the following output.

model height Expected Output

Coder 1.8 CODER 180

STOP and TEST

Part 2, Stage 1 Testing: Complete the testing below

• Set the value of the variables for each test

• Run the program

• Record your output in Actual Output

• Record whether correct (same as expected output) or not (and any problems found)

model (note

different cases)

height Expected

Output

Actual Output Correct (Y/N)

Coder 1.8 CODER 180 Enter your output Enter Y/N based on output

coder 1.0 CODER 100 Enter your output Enter Y/N based on output

CODER 2.15 CODER 215 Enter your output Enter Y/N based on output

If you find a mistake in your code during the testing, record the failed test, fix the

mistake and then run the test again. You should record all tests (pass and fail) in your testing

record. For example:

Save this testing (and all future testing) in a testing log document (to be submitted)

model height Expected Output Actual Output Correct (Y/N)

Coder 1.8 CODER 180 CODER180 N – missing space

Coder 1.8 CODER 180 CODER 180 Y

Stage 2

1. Write code so that if the model is Coder, it should display the output below, if it is a different

model, it should display nothing.

You have chosen model SBT1 - Coder

2. Modify your program so it will display a similar output for other models. Check the model value

and display the following output based on the model.

You have chosen model SBT1 – Coder

You have chosen model SBT2 – Looper

You have chosen model SBT3 – Implementer

You have chosen model SBT4 - Tester

If the variable is set to a different value, your program should display the error message below:

I’m sorry, that is not a valid model name.

Please choose from Coder, Looper, Implementer or Tester.

Hint: You will need to use if/else if etc

STOP and TEST

Run your program in Visual Studio Code you should see the following output.

Change the value of your variables to run all tests and record your results below.

Part 2, Stage 2 Testing: Complete the testing below

Note: height is 1.8 in all tests

Model Expected Output Actual Output Correct (Y/N)

Coder You have chosen model SBT1 – Coder Enter your output Enter Y/N based

on output

Looper You have chosen model SBT2 – Looper Enter your output Enter Y/N based

on output

Implementer You have chosen model SBT3 – Implementer Enter your output Enter Y/N based

on output

Tester You have chosen model SBT4 - Tester Enter your output Enter Y/N based

on output

Bike I'm sorry, that is not a valid model

name. Please choose from Coder, Looper,

Implementer or Tester.

Enter your output Enter Y/N based

on output

Stage 3

1. Modify your program so if the model is Coder, it will check if the height is out of range i.e. too

short (less than 161) or too tall (taller than 185) - see the graph at the top of Part 2

If their height is out of range it should display the text to the console:

I'm sorry, Coder is not suitable for your height.

Consider a different model.

2. Add the code for the Coder model to check display the size based on the users height e.g.

The best size for you in Coder is S.

The best size for you in Coder is S or M. (if they are in the overlapping range)

STOP and TEST

Part 2, Stage 3 Testing: Complete the testing below

Note: model is Coder for all tests

Height Expected Output Actual Output Correct

(Y/N)

1.54 I'm sorry, Coder is not

suitable for your

height.

Consider a different

model.

Enter your output Enter Y/N

based on

output

1.91 I'm sorry, Coder is not

suitable for your

height.

Consider a different

model.

Enter your output Enter Y/N

based on

output

Enter your

input value

The best size for you in

Coder is S.

Enter your output Enter Y/N

based on

output

Enter your

input value

The best size for you in

Coder is M or S.

Enter your output Enter Y/N

based on

output

Enter your

input value

The best size for you in

Coder is M.

Enter your output Enter Y/N

based on

output

Enter your

input value

The best size for you in

Coder is M or L.

Enter your output Enter Y/N

based on

output

Enter your

input value

The best size for you in

Coder is L.

Enter your output Enter Y/N

based on

output

Stage 4

Add similar code as Stage 2 for the other models. Note – the height ranges are different for the

different models.

STOP and TEST

Part 2, Stage 4 Testing: – Complete the testing below

Height Model Expected Output Actual Output Correct (Y/N)

1.6 Looper Enter your expected output Enter your output Enter Y/N

based on

output

1.86 Looper Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Add more rows as needed to test all situations for the models

Part 3 – Add Javascript to HMTL

Stage 1

1. Run your JavaScript code in size.html using <script> tags.

2. Adjust your javascript file to:

• Prompt the user for the model name.

• Prompt the user for their height in metres.

For example:

• Use document.getElementById() or document.write() to display the text from Part 2 in the

format below:

Your height: 1.8 metres

Your chosen model: Coder

The best size for you in Coder is M or L.

• Use document.getElementById() or document.write() to display the image from the chosen

model:

Hint: to display an image using document.write:

document.write("<img src='coder.jpg'>")

For example:

STOP and TEST

Part 3, Stage 1 Testing: – Complete the testing below

Height Model Expected Output Actual Output Correct (Y/N)

1.6 Looper Enter your expected output Enter your output Enter Y/N

based on

output

1.86 Looper Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input value

Enter your input

value

Enter your expected output Enter your output Enter Y/N

based on

output

Add more rows as needed to test all situations for the models

Stage 2

Add error checking as below:

• If the user enters an invalid height (less than 1 or greater than 2.5) it should display the error

message in an alert window and ask again until they enter a valid height, hint you will need a

while loop.

Use the following pseudocode to help you:

GET height from user

WHILE height not ok

DISPLAY error message

GET height from user

END WHILE

STOP and TEST

Part 3, Stage 2 Testing: – Complete the testing below

Height Expected Output Actual Output Correct (Y/N)

0.9

1.0

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input values

Enter your expected output Enter your output Enter Y/N

based on

output

Enter your

input values

Enter your expected output Enter your output Enter Y/N

based on

output

Reflection:

Answer the following questions and add it to the end of your testing log document.

1. What did you find easy about this task? Give examples

2. What did you find difficult about this task? Give examples

3. What did you learn from this task?

4. What do you think you still need to work on?

Optional Extension - Suggest a new model

If the user enters a height that is out of range for the chosen model, determine if there are any

other models that would be appropriate. If there are display the model image and the appropriate

size for their height.

For example:

DUE DATE/TIME: Sunday 11 pm, Week 9

Marking Guide

Criteria Requirements

HTML and organisation: /10

(Part 1)

Comments at the top

Code follows recommended coding style.

All requirements included (headings, tables and/or lists,

images, paragraphs, links)

Files organised together in 1 folder.

Files named appropriately

Javascript: /10

(Part 2)

Comments at the top

Comments interspersed in the code to explain key parts

Appropriate variable names

Correct calculations

Well organized if/else if structures

Integration of HTML &

Javascript: (Part 3) /5

JavaScript file integrated correctly

Input and output matches examples

Validation works using while loops

Testing Logs /10 Complete for Part 2 & Part 3

Reflection /5 Questions answered with examples and detail

(Extension: + /5) Optional – can win back lost marks

Output matches example

Total /40