Description
here are the html/ java assignments that needed to be completed
Unformatted Attachment Preview
CSCE 102 Lab 7
CSS Layouts and Columns plus more Buttons
In this lab you will be creating two web pages: lab7axx.html and lab7bxx.html (where
the xx are your initials).
Creating lab7axx.html:
•
•
•
•
•
•
•
•
•
•
Include your name, section number and today’s date in an HTML comment in the head of the
document.
Include your name and section number at the top of the page using the heading tags
Use an internal CSS to set styles for your page.
Create a page discussing your favorite TV Show, Movie, Band or Book.
Your page should include a header, and a section of text with at least two columns.
You will need another header for your second favorite TV Show, Movie, Band or Book and an
additional section of text with at least four columns.
Each section of your page needs to have CSS styles defined for it.
You should include a minimum of three images related to your topic. The images should be included
within the columns for your topics. You may need to resize these to make them fit within your
columns.
I am intentionally being as vague as possible with respect to the CSS properties you are being asked
to use for this page. I want to give you as much creative freedom as possible to create an
aesthetically pleasing page. That being said, simply setting a background-color for your page as your
only style is insufficient and will be graded appropriately.
Include a link to 7b at the bottom of your page (below all the columns).
Creating lab7bxx.html:
•
•
•
•
•
•
•
•
•
Include your name, section number and today’s date in an HTML comment in the head of the
document.
Include your name and section number at the top of the page using the heading tags
Use an internal CSS to set styles for your page.
Set the background and text color of the page to colors of your choice. Be careful with your color
selections going forward. You want to avoid having, for example, blue text on a blue background.
This can create invisible text and should generally be avoided.
Include an h2 element with the title of one of your favorite childhood books or stories. Make sure
you give this element an id.
Include a paragraph below this describing the story and why you liked it (one of mine was the
Sneetches by Dr. Seuss). Give this paragraph some styles (columns, color, font, etc.). This element
also needs an id.
Create a group of four buttons below the paragraph. Two of these should change the text color for
the page. Two should change the background color of the page. If you wish, you may make the
buttons modify the h2 element or paragraph instead.
Specify CSS properties for the four buttons above giving them a similar look and feel.
Create another group of three buttons with distinctly different styles. One of these buttons should
link to 7a. One should link to a page related to your childhood story mentioned in the paragraph.
The third button should change the paragraph where you talk about your favorite story into some
new text using innerHTML.
Useful Links
CSS Multiple Columns:
CSS Box Model (revisited):
CSS for Buttons:
https://www.w3schools.com/css/css3_multiple_columns.asp
https://www.w3schools.com/css/css_boxmodel.asp
https://www.w3schools.com/css/css3_buttons.asp
JavaScript DOM (Document Object Model):
innerHTML Property:
JavaScript DOM Methods:
Location Object:
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
https://www.w3schools.com/js/js_htmldom_methods.asp
https://www.w3schools.com/jsref/obj_location.asp
Reminders:
•
•
•
•
•
DO NOT COPY AND PASTE YOUR PARAGRAPHS. Sorry for the all caps, but make sure these are
in your own words, not copy and pasted from Wikipedia or somewhere. Plagiarism is a violation
of the USC honor code.
Your external style sheet should only contain CSS rules. No HTML comments, head tag, etc.
A paragraph is not three very short sentences. These should be well written paragraphs that are
long enough to cover whatever topic they are to address.
HTML5 pages must include:
▪ All tags listed in the HTML5 template in your text.
▪ An HTML comment immediately following the opening tag that includes, your name,
email address and section number
▪ An appropriate title using the tag
Don’t forget to include all image files in your zip file when you submit your lab
To submit this lab, you will need create a zip file containing all the files for this lab, including images you
use on your page (see instructions on my web site), then login to blackboard (blackboard.sc.edu), and
upload the zip file for this lab using the assignment manager (also see instructions on my web site).
If you have any questions or problems, please email.
DO NOT wait till the last minute to upload your files.
Don’t forget to save backup copies of all your work.
Academic Honesty
1.
2.
3.
4.
5.
6.
The work you turn in is to be your work, not copied from someone else, from the web, or
generated by an HTML editor.
Never allow anyone access to your files.
Never give anyone your password.
Never share your flash drive or email your files to anyone.
Never give anyone a printed copy of your file or an electronic copy.
Never allow anyone to copy your work.
CSCE 102 Lab 09
if Statements and Slideshows
Creating lab09a.html and lab09b:
In this lab, you will be creating two web pages, lab09aXX.html and lab09bXX.html (where the “XX” are
your initials).
lab09a.html — Creating a Magic 8-Ball (see useful links for info)
•
•
•
•
•
Create a page named lab09a.html that contains a heading and a paragraph about CSCE 102 labs.
Include the usual comments.
Create an area of your page with an image and some text. This can be done using a table, div, or
other method.
Create a button below the image and text that when clicked on will call a function to display a
random image and message in the elements above (similar to the function of a Magic 8-Ball). You can
pick any messages and images you prefer (although keep things PG-13). You must have a minimum
of eight message/image combos. There is a link below to a page with public domain game icons if
you wish to use those.
Create a second button that links to lab09b.
lab09b.html — Slideshows
•
•
•
•
•
•
•
•
•
Create a page named lab09b.html that contains a heading and a paragraph about the images we are
about to see in the slideshow.
Include the usual comments.
Create a slideshow that cycles through at least 4 images.
Use the onload event handler to make your slideshow start when the page loads.
Create a button that will cause your slideshow to stop.
Create another button that will cause your slideshow to start.
In the internal CSS change the look of the buttons to something nice. You should use id’s for your
buttons.
Include any other CSS rules you like to make your page look nice.
Include a button that links to lab09a.
Useful Links
Free Game Icons page:
Magic 8-Ball Information:
https://game-icons.net/
https://en.wikipedia.org/wiki/Magic_8-Ball
JavaScript if else and else if:
JavaScript setTimeout():
JavaScript Event Handlers:
https://www.w3schools.com/js/js_if_else.asp
https://www.w3schools.com/jsref/met_win_settimeout.asp
https://www.w3schools.com/js/js_events.asp
JavaScript Scope:
https://www.w3schools.com/js/js_scope.asp
Reminders:
•
DO NOT COPY AND PASTE YOUR PARAGRAPHS. Sorry for the all caps, but make sure these are
in your own words, not copy and pasted from Wikipedia or somewhere. Plagiarism is a violation
of the USC honor code.
•
•
•
•
Your external style sheet should only contain CSS rules. No HTML comments, head tag, etc.
A paragraph is not three very short sentences. These should be well written paragraphs that are
long enough to cover whatever topic they are to address.
HTML5 pages must include:
▪ All tags listed in the HTML5 template in your text.
▪ An HTML comment immediately following the opening tag that includes, your name,
email address and section number
▪ An appropriate title using the tag
Don’t forget to include all image files in your zip file when you submit your lab
To submit this lab, you will need create a zip file containing all the files for this lab, including images you
use on your page (see instructions on my web site), then login to blackboard (blackboard.sc.edu), and
upload the zip file for this lab using the assignment manager (also see instructions on my web site).
If you have any questions or problems, please email.
DO NOT wait till the last minute to upload your files.
Don’t forget to save backup copies of all your work.
Academic Honesty
1.
2.
3.
4.
5.
6.
The work you turn in is to be your work, not copied from someone else, from the web, or
generated by an HTML editor.
Never allow anyone access to your files.
Never give anyone your password.
Never share your flash drive or email your files to anyone.
Never give anyone a printed copy of your file or an electronic copy.
Never allow anyone to copy your work.
CSCE 102 Lab 10
Text Boxes and Grade Calculation
Basics of Web Design: HTML5 & CSS – Read Chapter 10.
Creating lab10a.html:
In this lab, you will be creating lab10aXX.html (where the “XX” are your initials).
Part I:
Create a table that is structured, with input elements, similar to as shown in Figure A below. You will
need to adjust the text boxes to reflect the way the grade for the course is calculated (refer to the
syllabus on blackboard under “Course Documents” for this information). You will need to define CSS
styles to make the layout nice and aesthetically pleasing. Below is merely an example.
Figure A: initial HTML setup
Figure B: example result of completed lab
Part II—Text & button input elements
When the button is clicked call a function that:
1. Writes the numeric grade in the bottom left cell of the table. You should get your formula
for this grade from the syllabus for this class.
1. And the associated letter grade in the bottom right cell of the table. (For this problem use: A
>= 90 > B >= 80 > C >= 70 > D >= 60 > F)
1. If the grade is passing the background color of the letter grade cell changes to green. If the
grade is failing the background color of the letter grade cell should turn red.
Part III — Test case
1.
Carefully test your code and make sure it is correct.
Useful Links
HTML Input tags:
JavaScript if else and else if:
Javascript parseFloat():
JavaScript Comparisons:
https://www.w3schools.com/tags/tag_input.asp
https://www.w3schools.com/js/js_if_else.asp
https://www.w3schools.com/jsref/jsref_parsefloat.asp
https://www.w3schools.com/js/js_comparisons.asp
Reminders:
•
•
•
•
•
DO NOT COPY AND PASTE YOUR PARAGRAPHS. Sorry for the all caps, but make sure these are
in your own words, not copy and pasted from Wikipedia or somewhere. Plagiarism is a violation
of the USC honor code.
Your external style sheet should only contain CSS rules. No HTML comments, head tag, etc.
A paragraph is not three very short sentences. These should be well written paragraphs that are
long enough to cover whatever topic they are to address.
HTML5 pages must include:
▪ All tags listed in the HTML5 template in your text.
▪ An HTML comment immediately following the opening tag that includes, your name,
email address and section number
▪ An appropriate title using the tag
Don’t forget to include all image files in your zip file when you submit your lab
To submit this lab, you will need create a zip file containing all the files for this lab, including images you
use on your page (see instructions on my web site), then login to blackboard (blackboard.sc.edu), and
upload the zip file for this lab using the assignment manager (also see instructions on my web site).
If you have any questions or problems, please email.
DO NOT wait till the last minute to upload your files.
Don’t forget to save backup copies of all your work.
Academic Honesty
1.
2.
3.
4.
5.
6.
The work you turn in is to be your work, not copied from someone else, from the web, or
generated by an HTML editor.
Never allow anyone access to your files.
Never give anyone your password.
Never share your flash drive or email your files to anyone.
Never give anyone a printed copy of your file or an electronic copy.
Never allow anyone to copy your work.
CSCE 102 Lab 11
The Guessing Game
Creating lab11a.html:
In this lab, you will be creating one web page: lab11aXX.html (where the “XX” are your initials).
lab11a.html — Creating the Guessing Game (see video on Blackboard under
“Screencasts” for Labs 11-12)
Direct Video Link: https://youtu.be/5zJ9yBbgANk
•
•
•
Create a page named lab11a.html that contains all the usual required tags and comments.
For this lab you will be creating a guessing game with similar features to the one shown in the video.
You need to use any CSS properties and HTML to get an aesthetically pleasing look for your game
page (hopefully much better than my questionable color scheme).
Hints:
• Creating this game does not require the use of loops.
• You will want one global variable (one declared outside of any function but inside a script element) to
store the number to be guessed and another for the number of guesses the user has left.
• You will want two functions. One to process the user’s guess and a second one to create a new
game.
• The new game function needs to reset the various parts of the page to their original state, reset the
number of guesses and generate a new random number for the user to guess.
• Don’t forget to handle the user trying to guess with zero guesses remaining.
Useful Links
JavaScript Operators:
JavaScript innerHTML:
JavaScript for loop:
JavaScript while loop:
https://www.w3schools.com/jsref/jsref_operators.asp
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
https://www.w3schools.com/js/js_loop_for.asp
https://www.w3schools.com/js/js_loop_while.asp
Reminders:
•
•
•
•
•
DO NOT COPY AND PASTE YOUR PARAGRAPHS. Sorry for the all caps, but make sure these are
in your own words, not copy and pasted from Wikipedia or somewhere. Plagiarism is a violation
of the USC honor code.
Your external style sheet should only contain CSS rules. No HTML comments, head tag, etc.
A paragraph is not three very short sentences. These should be well written paragraphs that are
long enough to cover whatever topic they are to address.
HTML5 pages must include:
▪ All tags listed in the HTML5 template in your text.
▪ An HTML comment immediately following the opening tag that includes, your name,
email address and section number
▪ An appropriate title using the tag
Don’t forget to include all image files in your zip file when you submit your lab
To submit this lab, you will need create a zip file containing all the files for this lab, including images you
use on your page (see instructions on my web site), then login to blackboard (blackboard.sc.edu), and
upload the zip file for this lab using the assignment manager (also see instructions on my web site).
If you have any questions or problems, please email.
DO NOT wait till the last minute to upload your files.
Don’t forget to save backup copies of all your work.
Academic Honesty
1.
2.
3.
4.
5.
6.
The work you turn in is to be your work, not copied from someone else, from the web, or
generated by an HTML editor.
Never allow anyone access to your files.
Never give anyone your password.
Never share your flash drive or email your files to anyone.
Never give anyone a printed copy of your file or an electronic copy.
Never allow anyone to copy your work.
Purchase answer to see full
attachment
