You

COSC 2956 Final Examination – Fall 2023 Dec 09,2023 14:00-17:00hrs

K. Peltsch

The time allowed for this test is 3 hours (180 minutes). The exam is synchronous which means
all students need to start the exam at the same time and the time allowed begins at the specified
start time. The total points on the exam are 110.
Students will need to use the development environment on their machines that was used to
prepare assignments. Note that instructions provided earlier had indicated that students need
to ensure that their environment is working prior to the start of the exam.
There are three programs that students need to write. The questions are labelled Q1, Q2 and
Q3. Students are to prepare their work using directories call Q1, Q2 and Q3. Under those
directories, you will have two subdirectories called code and screenshots. Any code you have
written needs to be placed under the code directory, the requested screenshots in the
Screenshot directory. Do this same thing for all questions and then zip all three directories
into a single zip file and then submit this file. Your zip file name should be identified with the
course name, your name, student number as indicated in the final exam information document.
The screenshots need to be correct – I need to see the execution line as in the assignments.
You need to include all relevant code in your submission (only any code or data you altered)
since I will be executing your code to verify the results.
IF there are issues or items you wish to bring to my attention, add a file called submission in
the directory where you can articulate any items. This can be helpful for part marks but is not
mandatory.
.

[30] Q1. You are to develop a web page for a local cycling club. It should have two pages, the
home page and an ABOUT page. You are to use HTML and CSS only to format these pages.
The pages need to be developed for two form factors – a computer screen (2048*1152) and
for a cell phone (720*1280). You do not need to show the output to a phone on a screenshot,
just your terminal. Be sure to document in your code how you have done this.
The pages need to have a consistent (the same) structure – which includes a light blue
background, a header area in darker blue. Text areas are to be white. The text in the header in
appropriate font and size should indicate ‘Sault Ste. Marie Cycling Club’ with subtext that
reads ‘Sault Ste, Marie – a premier cycling destination’
Below the header line is a bar that includes pointers to other pages – ‘Home’ ‘About’ ‘Join
our Club’ ‘Donate’ ‘Where to Ride’ ‘Shop’ ’ spread evenly across the row. Implement a
mouse over on these items with list items called Home1, Home2,..., About 1, About 2, etc.

Klaus Peltsch |

Since you are only doing two pages, what will you do for the other elements on the bar – for
example ‘Join our Club’ , etc? You need to address this in your code and provide a specific
comment in the code itself.
Next there is a large graphic which serves as the background for the screen that is not used for
the other information. The graphic you will use is embedded at the end of this document. You
will add a text line called ‘Under Construction’ angled across the graphic. The graphic needs
to be sized for the screen it is displayed on.
The About page contains the same background structure as the main page, with a title page of
‘Who we are’ with the next line containing three links – Trails, Board of Directors and Projects
which point to the location on the same page. These sections will have text information – for
Trails you can just enter ‘trail 1’, trail2, etc. For Board of directors, a list of three names (your
name – three times) and for Projects a list of Project 1, Project2, Project3.
Your pages also need a footer section with your name, date and time of execution on the
bottom left of the page.
You are to create these pages, then execute and provide three screen shots – a screenshot for
each page, and one screen shot that shows the mouse over is working.
Your screenshots need to see the entire browser window that shows the execution line, the
same requirements that students saw in the assignments. This MUST be shown.
[40] Q2. The second program you need to write will utilize JavaScript. I have provided base code
for students in the file called Q2.zip. You need to download this file from the Assignment
section of the LMS, which will create the Q2 directory and then modify the code as indicated
in the instructions below. You will then create the screenshots to demonstrate the functions
and then this same directory with your changed code is included in the submitted zip file. You
may use any framework you are familiar with to improve functionality or speed of
development if that helps you. Clearly identify your rationale to include a framework or not;
this can be done in a separate file or in your code. (you are not allowed to use WordPress or
other similar higher-level tools)
Modify the required code to:
(a) You will be writing three event handlers. The first will be a click handler for each
thumbnail image. In the handler, replace the necessary code so that it displays the clicked
thumbnail.
(b) Add further coding so that the newly clicked paintings title and artist information is
displayed.
(c) Set up an event listener for each input event of each of the range sliders. The code is going
to set the filter properties on the image. This listener must use event delegation.

Klaus Peltsch |

(d) Add a listener for the click event of the reset button. This will simply remove the filters
from the image by setting the filter property to none.
Explain how your screenshots demonstrate the above changes.

[40] Q3. The third program you will need to write will utilize PHP and the simulated server back
end. In this question, you can reuse the code from Q1. In Q1, there already is an entry in the
top bar called ‘Join Our Club’. When a user clicks on this entry a new page will show. This
page will have the same overall look and feel of the previous two pages. You will build this
third page which will be a form using JavaScript and provide information that will be sent to
a database system ( of your design and does not need any security since it will be on your
machine). The database will contain a table called ‘members’ and you will store the
information from the form in the database. You can choose the database environment; your
best choice is likely the same environment used for your assignments. Members need to be at
least 18 years of age.
You will also need to do input validation checking – one check per entry in the form – before
putting in the database. The form cannot be submitted unless all of the entries have some
content. Indicate in the comments in your code what validation you are doing. Show one
screenshot where incomplete input is provided.
For this question, show a dump/listing of the database as well as the screenshot of the form to
confirm that the data was actually stored in the database.
The page should have the same setup and structure as the first two pages you created in Q1.
in theory for word file
ChatGPT
ChatGPT
It seems like you've provided detailed instructions for a final examination in a computer science

course. If you have specific questions or if there's something specific you'd like assistance with,

please let me know, and I'll do my best to help you. It looks like you've outlined tasks for three

different programming questions (Q1, Q2, and Q3) related to web development using HTML, CSS,

JavaScript, and PHP.

If you have a specific question about a particular part of the instructions or if you need help with

the implementation of any of the tasks, feel free to provide more details or ask for clarification.