Overview
This assignment will give you practice creating HTML forms and using Javascript/JQuery to process their contents to generate interesting or useful outputs. You will learn to:
- Create simple HTML forms with input elements and a button,
- Write Javascript functions that are used as event handlers,
- Write JQuery statements that gather the information from the
input
fields, store the values into variables, and perform some operations with them, - Incorporate conditional execution of code to perform file size calculations, and display results to the user, by dynamically changing the HTML page.
- Incorporate repetitive elements for multiple pages of a website by using JQuery
load()
.
Advice
We recommend that you run with the browser Console open at all times when you are
writing and debugging JavaScript. Also, make use of console.log()
in
your Javascript code, to make sure that your variables and expressions have
the values you expect them to have.
Pair Programming
On this assignment, you are required to work with a partner as part of a two-person team (re-visit the details of pair programming introduced in assignment 6). Note: You may ask an instructor for an exception to the pair programming requirement, in case there is a strong reason (illness, travel, etc.) that prevents you from finding reasonable times to schedule work with the partner.
You submit the code in one of the accounts and the same grade will be given to both team members.
Find a Partner
Use this shared Google Doc to record who your pair partner is or find a partner who has similar scheduling constraints. It is not required to pair with your project partner, you can pair with anyone in any section, as long as you are able to find time to work together.
You must enter the names of team members in this spreadsheet (or if you got permission, your name alone), since the graders will use this document for grading purposes.
Requirements
The files you create and edit should go in a folder named hw7
,
which you should upload to the protected
directory on
your server account.
Begin by downloading the hw7
folder. You are given some files to start with.
A home page, assign7_home.html
,
contains a menu which links to the pages you will create:
You should not
modify assign7_home.html
, but you will use it as a template for two new pages you will create:
assign7_madlibs.html
, which produces a
Mad Libs story based on user input,
and assign7_tomthumb.html
, which performs file size calculations using the
formulas covered in lecture and lab.
You are also given
two additional files: assign7.css
, which styles the home page and your two pages
(you will need to add some CSS to this file for various features), and assign7.js
, in which you will
define the JavaScript functions needed for both webpages (this file is empty to start with).
Finally, you are given an images
folder, which contains images for an optional feature of the
Tom Thumb page.
Part 1: Mad Libs
Many of us played with Mad Libs as kids. The idea is to ask someone — a friend, a victim — for some words, such as (1) a name, (2) a vehicle, (3) a restaurant, etc. Then, when you insert the words into a story, it yields a crazy result, because the choices were made without any idea of what the story would be. Here are screenshots of a Mad Libs page, both before and after a user has filled out the form and clicked the button:
Your task will be to create a similar webpage to interactively play the Mad Libs game.
Task 1: Creating the HTML page
Create the fileassign7_madlibs.html
by making a copy of the assign7_home.html
file.
Modify the header comment, etc., to correspond to your new page. Then:
- Replace the content of the
<main>
element with a<form>
containing four<input>
elements for the user to enter four missing words: for example, a noun for a name, a noun for an object, an adjective, and an adverb. You should only have one input for each of these words. - It'll be useful to show a default value in all input elements to simplify your testing of the page.
- The form should also have a
<button>
element with an ID so that you can attach the event handler to it. It should also have the attributetype="button"
. - There should also be a
<div>
element with an ID where the story will appear.
The requirements for the story and its appearance are:
- There must be exactly four input fields, but their meaning is up to you. Give them default values so that the form is easier to test.
- Define a new CSS rule in
assign7.css
to style all the user-supplied words, so that you can see which words were chosen when the story is displayed. You may use whatever color, font, etc. you wish - just make sure the inserted words are distinguishable from the rest of the story. - The story must be at least four, but not more than six, sentences long (no longer!).
- There should be 8 missing words in the story, so you will have to use some of the user-supplied words more than once. For example, the person's name was used three times in the sample story above. (Note that duplicated words are entered only once by the user!)
- Define HTML elements where your JavaScript code will display the values from the form. Think about how you'll target the correct element for the matching value.
- A story title should appear at the top of the
story. This story title should include your own
name (if you are Wendy, something like “Wendy's Crazy Mad Libs Story!”).
Use your story title as the
<title>
for your HTML page as well.
The content of the story can be anything that you like — be creative!
Task 2: Event Handler
In your assign7.js
file, define a function (name it whatever you like) that will process the form. It should
- Read the four form inputs using the jQuery
.val()
method, storing the values in variables. - Copy the values into the story using the jQuery
.html()
method.
In your Javascript file, add code to attach the function to the button that will be clicked.
Part 2: Tom Thumb File Calculations
You are working as a summer intern at Tom Thumb ImageWorks, a company that specializes in making thumbnails for images that its clients want to use on their websites.
To make sure that the size of the files is small, you are asked to write a form that will let the page designer enter the desired values for width, height, and number of colors. Your form calculates the file size for these values, and displays a message to notify the designer whether those values are good for a small file or not.
Here are screenshots of a Tom Thumb page, both before and after a user has filled out the form and clicked the button:
Your task will be to create a similar webpage to calculate and display the file size calculations.
To see the form in action, watch this short screencast (NOTE: the screencasts demonstrate how the form should work, but the page layout used is an older version of the assignment; your own page layout should reflect the screenshots shown above).
Task 1: The HTML file
Create the file assign7_tomthumb.html
by making a copy of the assign7_home.html
file. Then:
- Replace the content of the
<main>
element with a<form>
with<input>
elements for the user to enter three values for width, height, and number of colors. Specify a default value for each that you can use in testing and that the graders can use, as well. - The form should also have a
<button>
element with an event handler for theclick
event and the attributetype="button"
. This is just like in the Mad Libs. - There should also be an empty
<div>
element with an ID which will be used to display the calculations/messages on the page.
For the next tasks, add your code to the assign7.js
file.
Task 2: JavaScript - getBitDepth function
Define the function getBitDepth
, which takes as an
argument the number of colors in the image, and returns the bit depth
value of the colors. Hint: You can re-use code from a previous
homework to complete this function. This function is
purely functional
, which means it justs takes arguments and
returns a value; it doesn't interact with the page at all.
Task 3: JavaScript - indexedFileSize function
Define a function named indexedFileSize
that takes three
arguments: the width and height of an image and the number of colors. It
computes the file size using indexed color and returns the answer
as a number in bytes . Hint: You can re-use code from a previous homework
to complete this function. Like getBitDepth
, this is purely
functional: it just takes arguments and returns a value; it doesn't
interact with the page at all.
Task 4: JavaScript - Event Handler
Define a function to handle the event of the button click (name the function whatever you like). The function should do the following:
- Store the entered values in variables. Remember they should be
numeric, so use
parseInt
correctly. - Use the
indexedFileSize
function to compute the file size. - Use conditional statements to check that the file size is less than 50 KB (1 KB = 1000 bytes). If that is the case, display a success message for the user, otherwise, display a fail message. The calculated file size in KB, rounded to one decimal place, is shown in both messages.
In your Javascript file, be sure to attach the function to the button that will be clicked.
Test that your page works properly by repeating the scenarios shown in the screencast or other values you have calculated by hand.
Part 3: Repetitious Elements
You have probably noticed that the <header>
, <nav>
, and
<footer>
elements on both your pages are exactly the same as the original
assign7_home.html
, since you copied that file initially to create your new pages.
Copying code directly is not a recommended approach for webpages that contain repetitious elements.
Instead, use the following technique which you learned about in lecture and practiced in lab to load these elements from an existing page:
- Replace each of these elements in
assign7_madlibs.html
andassign7_tomthumb.html
with a<div>
with an ID, such as this for the<header>
:<div id="header-goes-here"></div>
- Then, in the
assign7.js
file, add code to load each element from theassign7_home.html
template:$("#header-goes-here").load("assign7_home.html header");
You must upload to the server and view your pages from there to verify that the load worked correctly!
Extra Credit Challenge
Mad Libs Magic
You can improve the appearance of the Mad Libs page for 1 extra credit point by doing the following:
- Have the story hidden when the page is first loaded.
- Once the user clicks on the button, the form should disappear, and the resulting story should be visible on the web page.
Tom Thumb Technique
You can improve the Tom Thumb page by doing the following, for 1 extra credit point:
- Check that the inputs are valid (numbers > zero). Teach
yourself about the
isNaN
function in JavaScript. If the inputs aren't valid, show an error message in red. - If the inputs are valid, show the message in either green or red, depending on whether the file is okay.
- In addition, show one of the following images:
- images/up.png:
- images/down.png:
These
images
folder in the original download contains these images.
Validation
Submission
Upload your hw7
folder to the server, into your protected
folder.
http://cs.wellesley.edu/~myname/protected/hw7/assign7_home.htmland use the menu to check each page, to make sure that all pages are displayed as expected.
Gradescope
- Open the Google Doc we shared with you titled:
CS110 Submission to Gradescope
, and follow the instructions (make a copy of the file, edit the URL in the copy to correspond to your own assignment, and then create your own .pdf version of the copy). - In your browser, go to gradescope.com and log in.
- Under
Your Courses
, selectCS 110
. - You will see all of your current assignments. Click on the assignment you are turning in.
- In the dialog box that opens:
- Click Select PDF
- locate the correct file on your computer
- Click Upload PDF
- It may be necessary to reload the page to verify your submission was uploaded.
Coding Style
All the usual coding rules apply. See the style rules. Especially important is to not forget including comments in all your files to describe your choices and decisions.
Assignments are due at midnight on the due date (check the schedule). Assignments may be turned in up to 24 hours late, for a 10% penalty. Furthermore, remember that this policy means that you should not modify work after the due time has passed, or it will be time-stamped late, and will incur the late penalty.
Honor Code
The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, your team must solve, write up, debug, test and document the assignment on your own. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or Javascript. You should not be looking at other peoples' code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.
Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering of CS110 or from past offerings.
Grading
These are the criteria we use to grade the homework:
- Homework was submitted on the server by the due date. Late penalties apply.
- Folders and files have the required names and are uploaded to the proper location.
- The two HTML files and the CSS file are valid.
- All your files have comments at the top and as necessary interspersed in the code.
- Your code follows our recommended coding style.
- Mad Libs page follows all our requirements.
- Tom Thumb page follows all our requirements and the file size calculations are correct.
- The repetitive elements of the page are loaded properly
- There are no errors in the Javascript console.
- There are comments in the Javascript file to explain your code.
Solution
The staff may want to look at this solution.
Help Room
Our tutors in the help room can help you with concrete problems and questions you have about the assignment, thus, go to the room prepared. If you find that you don't know how to start the assignment, you should visit the instructors during their office hours.