\documentclass[12pt]{article}
\usepackage{palatino}
\usepackage{epsfig}
\usepackage{enumerate}
\pagestyle{myheadings}
\markboth{CS316 Spring 2021: Final exam}{CS316 Spring 2021: Final exam}
\setlength{\topmargin}{-0.5in}
\setlength{\hoffset}{-1.1in}
\setlength{\textheight}{8.8in}
\setlength{\textwidth}{7.1in}
\usepackage{hyperref} % 
\hyperbaseurl{https://www.cs.uky.edu/~raphael/courses/CS316/exams}
\usepackage{url}

\begin{document}
\section*{General rules}
\begin{enumerate}
\item This test is {\bf open book}.  You may consult the class notes, the
recordings of the lectures, your programs, the textbook, and the Internet.  You
may not consult any person. 
\item There are 5 questions.
\item You may use up to 2 hours minutes for this exam (including any time you spend
consulting sources).  If you have a documented disability, you may spend
additional time.  If you turn in the exam after the scheduled end time, include
a note indicating why the exam is late.
\item You must submit this exam as a web page that you upload via the Canvas
website.  Any CSS or JavaScript you write must be included as part of the page.
\item Your web page
should have an {\tt <h1>} heading for each question.
The W3c validator should report no errors for the page.
\item When a question refers to {\bf the standard text}, it means this text:
\\
{\tt It is an ancient mariner, and he stoppeth one of three.}
\item If something is not specified in the questions, you may complete the
specification however you want.

\end{enumerate}

\section*{Signatures}
\begin{enumerate}[(a)]
\item Place this note in your web page: \\
{\tt I have not spoken with other people about this exam, and I will not speak
with
others who have not yet finished the exam.  I have only used the allowed amount of
time on the exam. }
\item Place a list of all sources you referred to during the exam on the web
page.
\item Place your name in the exam.  This name stands as your signature to the
statements above.
\end{enumerate}

\section{Simple HTML}
For this question, you may not use Bootstrap.  However, you may use jQuery.
\begin{enumerate}[(a)]
\item Show the standard text (as defined above) with a tooltip on the word
{\tt mariner}.  The tooltip should say {\tt albatross-killer}, and it should
have pink background and blue foreground.
Caution: don't use the id "tooltip"; it conflicts with Bootstrap.  Call it
something else.
\item Show the standard text (as defined above) with a blurred
brown shadow of 4px in both the X and Y directions.
\item Build a $4 \times 4$ table.  The middle 4 cells
should all be combined into a single cell, so in total there should be 13 cells,
that is, 12 small ones and 1 big one.  Each cell should contain a centered
text "water" and have a padding of 3px on all sides.
The big middle cell should have a light blue background; the others
should not be colored.
\end{enumerate}

\section{Bootstrap}
\sloppy
For this question, you must use Bootstrap. You may also use jQuery.
Place a {\tt <div class='container-fluid'>} region
around the entire contents of the body of your web page.
\begin{enumerate}[(a)]
\item Using Bootstrap's grid layout (without any additional CSS) and a single
{\tt <div>} element,
place the standard text (as defined above) in the middle
region (horizontally) of the page.  If the viewport is extra small, use all 12
cells.  If it is small, use the middle 10 cells.  If it is medium, use the
middle 8 cells.  Otherwise use the middle 4 cells.
\item Make three Bootstrap buttons, with text {\tt about}, {\tt reel}, and
{\tt rout}.  They should have no effect when clicked.
They should have Bootstrap green, red, and blue backgrounds with white letters.
\item Make a Bootstrap drop-down menu with label {\tt menu} with three entries, 
{\tt drifts}, {\tt snowy}, and {\tt clifts} (that's not a misprint!).
When clicked, the page should jump to your answers to question 1, question 2, and
question 3, respectively.
\item Show the standard text (as defined above) with a Bootstrap tooltip on the word
{\tt stoppeth}.  The tooltip should say {\tt with his skinny hand}.  Use default
Bootstrap coloring.
\end{enumerate}

\section{DataTables}
Build a DataTable based on the data provided by \\
\url{http://www.cs.uky.edu/~raphael/courses/CS316/examples/services.cgi}. \\
It must have these properties:
\begin{itemize}
\item It has three columns, titled {\tt Port number},
{\tt Service name}, 
and {\tt Protocol version}, referring to the port number,
the service, and the protocol of each entry returned by the CGI-bin program.
Beware: the program provides these items in a different order.
\item The table should use Bootstrap striping, and hovering the cursor over a
line should darken its background.  There should be no other CSS associated
with the table.
\end{itemize}

\section{Canvas}
You must use jCanvas for this question.
Create a $500 \times 500$ canvas with a 2px-wide green border that
contains the following elements, drawn in order.
\begin{enumerate}[(a)]
\item a blue circle in the middle with radius 200
\item a red circle centered at 500, 300 with radius 50
\item an uncolored square centered at 100, 50 with size 30, with a brown border of
width 3.
\item the text {\tt sadder and wiser} centered at 250, 400 with font size 19.
\end{enumerate}

\section{A game of buttons}
For this question, you may not introduce any CSS, either in a {\tt style}
attribute, a {\tt <style>} entry, or via jQuery.  You must use Bootstrap classes
to accomplish all styling.
\begin{enumerate}[(a)]
\item Build three Bootstrap buttons, with text {\tt mist}, {\tt snow}, and {\tt
cold}.  They all start red. (Use the Bootstrap coloring scheme.)
\item Use jQuery to create this effect: clicking the first button, {\tt mist},
causes the second button, {\tt snow}, to become green.
\item Use jQuery to create this effect: clicking the second button, {\tt snow},
causes the third button, {\tt cold}, to
change its text to {\tt wondrous} and its color to become blue.
\item Use jQuery to create this effect: clicking the third button (whether it
has text {\tt cold} or {\tt wondrous} causes 
the second button button, {\tt snow}, to return to its initial state and hides the
first button, {\tt mist}.
\end{enumerate}

\end{document}
