\documentclass[12pt]{article}
\usepackage{palatino}
\usepackage{epsfig}
\usepackage{enumerate}
\pagestyle{myheadings}
\markboth{CS316 Fall 2020: Final exam}{CS316 Fall 2020: 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/examples}
\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; {\bf do any 4}.  If you do all 5, we will drop the
lowest-scoring question from your total.
\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.
\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 page should validate without error.
\item When a question refers to {\bf the standard text}, it means this text:
\\
{\tt It was many and many a year ago, in a kingdom by the sea.}
\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 are still taking 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}
\begin{enumerate}[(a)]
\item Without using Bootstrap techniques, show the standard text with a tooltip
on the word
{\tt kingdom}.  The tooltip should say {\tt Eldorado}, and it should have green
background and white foreground.
Caution: don't use the id "tooltip"; it conflicts with Bootstrap.  Call it
something else.
\item Without using Bootstrap techniques, show the standard text with a blurred
green shadow of 5px in both the X and Y directions.
\item Without using Bootstrap techniques, build a $5 \times 5$ table.  The
middle 9 cells
should all be combined into a single cell, so in total there should be 17 cells,
that is, 16 small ones and 1 big one.  Each cell should contain a centered
letter Z.  The middle big cell should have a light green background; the others
should not be colored.
\end{enumerate}

\section{Bootstrap}
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, place the standard text 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 6 cells.
\item Make three Bootstrap buttons, with text {\tt Winken}, {\tt Blinken}, and
{\tt Nod}.  They should have no effect when clicked.
They should have Bootstrap green, red, and blue backgrounds with white letters.
\item Make a Bootstrap dropdown menu with label {\tt menu} with two entries, 
{\tt maybe} and {\tt perhaps}.  They should have no effect when clicked.
\item Show the standard text with a Bootstrap tooltip on the word
{\tt kingdom}.  The tooltip should say {\tt Eldorado}.  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 only two columns, titled {\tt What} and {\tt Where}, referring to
the service and the port number of each entry returned by the CGI-bin program.
\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{Playful elements}
\begin{enumerate}[(a)]
\item Build three Bootstrap buttons, with text {\tt one}, {\tt two}, and {\tt
three}.  They all start green. (Use the Bootstrap coloring scheme.)
\item Use jQuery to create this effect: clicking {\tt one} causes {\tt one} and
{two} to become red.
\item Use jQuery to create this effect: clicking {\tt two} causes {\tt three} to
change its text to {\tt 3} and its color to become blue.
\item Use jQuery to create this effect: clicking the third button causes 
all the buttons to return to their initial state.
\end{enumerate}

\section{Canvas}
You should use jCanvas for this question.
Create a $400 \times 400$ canvas containing the following elements, drawn in
order.
\begin{itemize}
\item a red circle in the middle with radius 200
\item a blue circle at 300, 300 with radius 50
\item an uncolored square at 300, 100, with size 20, with a green border of
width 2.
\item the text {\tt Lenore} at 100, 100 with font size 20.
\end{itemize}

\end{document}
