James Madison University, Spring 2018 Semester
Electronic submission due Feb 23rd before 11:59 PM.
Each student submits hw4.html and hw4.css via Canvas.
IntroductionThe goal of this assignment is for you to create a web page (manually / by hand) that displays the results of a VLDS query. Your solution should look like the image to the right (click to enlarge). Refer to the Tutorials on Web Development to get started. To complete this assignment, you will need to know the basics of HTML and CSS. In addition, you will need to become familiar with the Google Charts library.
Create two blank files named hw4.html and hw4.css. Add the following elements to the html file:
body. Link the css file in the
headsection. Write your name and JMU email in a comment at the top of each file.
Choose any high school in VLDS besides Harrisonburg. Set the
titleof your page to the school's name. Also display the title at the top of the page inside a
class="title". The title class should have a bold, 18pt font with centered text.
Below the title, add three
h1headings named Query, Results, and Chart. In hw4.css, make all
h1headings use a 15pt font and have 5 pixels of padding above them.
Write SQL (in pgAdmin) to select the average test scores of your high school for each subject each year. Paste your final SQL code into a
preelement (blurred in the image above). In hw4.css, make all
preelements use a background color of your choice.
Display the test scores under the Results heading. Your query does not need to return the scores exactly as shown above, however you should be able to create such a table by hand from the results of a single query. You may find tools like convertcsv.com or tablesgenerator.com useful.
Use a combination of html
classdefinitions to achieve the following: all text in the table must be centered; the headers must have 5 pixels of padding and a light yellow background; the data rows should have alternating background colors (e.g., white and gray).
headof your page, include the loader.js file required for Google Charts. Then add a basic line chart with default styling to the bottom of your page. (Add both the chart
divand the corresponding
body, not the
data.addRowsparameter. Change the x and y axis titles in the