CDIM 1315 Homework #7: Creating web applications using input, process, and output paradigm Learning Objectives: Students will able to: 1. create an HTML form to accept user input 2. create a useful tool that accepts user input, does a calculation and decision making, and outputs a helpful answer to the user (Note. This is called “Input, Process, Output” of programming) 3. use JavaScript to create a useful toolDirections For this homework, you will create an HTML form that asks the user input, process the input using JavaScript code (i.e., manipulates inputs, calculates it, makes decisions from it) and then output an answer to the users inquiry. The following are the rules: 1. Think of something useful for a user to use. See the examples below or visit http://easycalculation.com/budget/phonebill.php or http://www.cdc.gov/widgets/ for ideas of what you could create in JavaScript. For example, you could ask them 3 quiz questions and then tell them what type of IQ they have. You write code to calculate compounding interest or present value of money given an inflation rate. Just be creative. 2. Add an introductory paragraph and labels that explain what the users need to input and do to receive an answer. Make the page user friendly. 3. Receive input from the user on at least three elements. If your scenario isn’t natural to 3 elements, then ask for first and last name or something else to insure you have at least three elements. You may use text boxes, option boxes (drop down boxes), check boxes, radio button, or any other form input element. Even images can be input options if the image is clickable to the user. 4. Add a button that says “Grade Answers” or something appropriate to your scenario. Then, the code will return some value or information back to the user. 5. If appropriate to the problem domain (i.e., what you are trying to accomplish with the web application), use an if statement, select, while, or for loop statement to help with the code’s decision making. 6. You must have at least one calculation or concatenation (i.e., combining of strings or combining a string with a variable’s value) in your code. If your scenario doesn’t lend itself to a calculation or concatenation, then add functionality until you have something. If you still cannot think of a calculation or concatenation, talk to other students or the tutor or the instructor. Tip: If desired, search google for “javascript concatenation” 7. Use comments in your JavaScript code to help explain what you are doing. At least 20% of your code must be commented. As you were taught in codehs.com, you can write the purpose of a function, any preconditions or post conditions or assumptions or requirements. For example, make statement as to what the function does “//Calulates Body Mass Index”; explain any variables “var h =0: //stores user’s height” 8. Make the HTML code look well. Use stylesheets, make fonts appropriately sized, add colors if appropriate and not distracting, ...

1. CDIM 1315 Homework #7: Creating web applications using
input, process, and output paradigm
Learning Objectives:
Students will able to:
1. create an HTML form to accept user input
2. create a useful tool that accepts user input, does a calculation
and decision making, and outputs a helpful answer to the user
(Note. This is called “Input, Process, Output” of programming)
3. use JavaScript to create a useful toolDirections
For this homework, you will create an HTML form that asks the
user input, process the input using JavaScript code (i.e.,
manipulates inputs, calculates it, makes decisions from it) and
then output an answer to the users inquiry. The following are
the rules:
1. Think of something useful for a user to use. See the examples
below or visit http://easycalculation.com/budget/phonebill.php
or http://www.cdc.gov/widgets/ for ideas of what you could
create in JavaScript. For example, you could ask them 3 quiz
questions and then tell them what type of IQ they have. You
write code to calculate compounding interest or present value of
money given an inflation rate. Just be creative.
2. Add an introductory paragraph and labels that explain what
the users need to input and do to receive an answer. Make the
page user friendly.
3. Receive input from the user on at least three elements. If
your scenario isn’t natural to 3 elements, then ask for first and
last name or something else to insure you have at least three
elements. You may use text boxes, option boxes (drop down
boxes), check boxes, radio button, or any other form input
element. Even images can be input options if the image is
clickable to the user.
4. Add a button that says “Grade Answers” or something

2. appropriate to your scenario. Then, the code will return some
value or information back to the user.
5. If appropriate to the problem domain (i.e., what you are
trying to accomplish with the web application), use an if
statement, select, while, or for loop statement to help with the
code’s decision making.
6. You must have at least one calculation or concatenation (i.e.,
combining of strings or combining a string with a variable’s
value) in your code. If your scenario doesn’t lend itself to a
calculation or concatenation, then add functionality until you
have something. If you still cannot think of a calculation or
concatenation, talk to other students or the tutor or the
instructor. Tip: If desired, search google for “javascript
concatenation”
7. Use comments in your JavaScript code to help explain what
you are doing. At least 20% of your code must be commented.
As you were taught in codehs.com, you can write the purpose of
a function, any preconditions or post conditions or assumptions
or requirements. For example, make statement as to what the
function does “//Calulates Body Mass Index”; explain any
variables “var h =0: //stores user’s height”
8. Make the HTML code look well. Use stylesheets, make fonts
appropriately sized, add colors if appropriate and not
distracting, add a nice image relating to the page (see
http://office.microsoft.com/en-us/images/ for free images to
use)
9. It is highly recommended that you use a multi-column table
(<table> tag with <th>, <tr> and <td>) to align the input
elements you use. For example make one column hold the labels
of the input elements and a second column hold the input
elements. This makes all the input elements aligned.
10. Here are some useful questions to help you think through
the process of development.
a. What inputs do you require of the user? For example, for a
Body Mass Calculator, “The page requires the user to input
their height, weight, and if they are big-boned or little-boned.

3. These are stored into three variables.”
b. What processing do you do with the inputs? In other words,
explain what and how do you calculate and make decisions? For
example, “The height and weight are calculated to give a score.
If the user is big-boned, then multiple 1.5 to the score. A value
of little-boned multiples 0.8 to the score. The final answer is
the Body Mass answer. An alert message pops up if there is an
error or if the user enters negative numbers for the inputs. “
c. What is the output and how do you get the output to the user?
For example, “The output is a Body Mass score derived from
the inputs. The Body Mass score is output to the txtAnswers
text box. An alert message pops up if there is an error or if the
user enters negative numbers for the inputs. ”
11. Create the web page(s) on Cloud 9.
Examples: Here are some ideas to start your braining juices
flowing.
http://easycalculation.com/
1. Create a 3 or 4 quiz or IQ test
2. “Choose your own adventure” game where users read a short
story and choose to go left or right, then each option gives
them another scenario until the adventurer wins in glory or
failure.
3. Calculate how long it would take to get to somewhere give
how fast you drive and distance
4. Tour of the solar system with facts about each planet as users
click on different planets.
Keep in mind – you will also be graded on your coding
techniques (e.g. appropriate use of white space, paragraphs, use
of comments to explain your code, etc.
A grading rubric is attached. Please review it to insure you have
all the required elements. Deliverable:

4. 1. Deliver the URL to your web pages(s) to WTclass...Turn
in Homework 7
Grading Rubric Homework: Creating a web application
Student’s name__________________________________
Criteria
Excellent
Satisfactory
Unsatisfactory
Creative Topic
The topic of the webpage is useful, helpful, interesting, or
novel to a user; subjectively determined by the instructor and
other users.
Create & Novel may include some of the following:
Visually stunning
Coding technique is novel or includes things not learned in
class
Accomplishes something other students haven’t considered
Experimental
Provides smiles, laughter, or cool reactions
Provides a unique benefit or helpful to a niche market
The page has no usefulness, boringly simple, or is just a
curiosity to the developer and to no one else.
Looks like a student did the project to accomplish an
assignment
Similar in idea to a learning objective, although the code and
topic may be different
Repeat of a learning activity or insignificant variant
Input (CLO5)
The app seeks input from the user with at least two web
elements (e.g., input boxes, radio boxes, drop down boxes,
clickable images, buttons, etc.)
Inputs elements are labeled so the user knows what to provide
A submit button is included so the user can trigger the JS

5. code, or other appropriate event trigger; The text of the button
is of your choice.
Variables are declared, with initial values if appropriate
Data from user is stored into variables using the
document.getElementById().value method
less than 2 elements of information
Labels are missing
developer used a prompt() function instead of a
getElementById().value method
missing inputs
No submit button is present
Processing (CLO5 & 6)
The developer uses a function for his/her JavaScript code
Function and variable names use camelCaseSyntax
If appropriate to the problem, an if statement is used, select
statement, or for loop or while loop.
The code processes according to the problem, calculates or
concatenates something appropriate to the goal of the page
Variables do not use camelCaseSyntax
Variables are not declared properly nor get values from the
users’ input
A function is not used
Output (CLO5)
The user receives an output appropriate to the goal of the page
(text on a page, answer in a text box, etc.)
Output is accomplished using the getElementById().value or
getElementById().innerHTML or document.write()
The output is understandable to the user as the answer to his/her

6. inquiry.
Output is accomplished using the alert() function
Error in the output
Output is not friendly or leads to missinterpretation
No output given
Best Business Practices
(CLO3)
HTML page is attractive
Colors and images add value to the page
A table is used to align the labels and input elements, if
appropriate
JavaScript code includes at least 20% of comments to describe
what the function does, what the variables mean, and other
helpful comments.
Distracting elements are present (misaligned, crazy fonts or
colors, etc.)
Elements are not aligned
Code is commented less than 20%
Total Points
*CLO means Course Learning Objective from the syllabus.
1