If you want to use CSS to make your pages more interactive, it will provide a platform-independent solution. One novel use of CSS is to construct a multiple choice quiz, which allows you to test the page reader’s knowledge with only CSS and HTML.
Introduction
Cascading Style Sheets (CSS) offer platform-independent solutions to a range of problems. In a previous article (Using CSS to add photo galleries to your website), we have seen how to create a photo album, and in another how to create an enhanced menu system. In this article, we will use CSS tricks to create a simple multiple choice quiz. You can see the quiz in action at https://www.alangillies.info/demos/cancer/quiz1.html .
How The Quiz Works
The opening screen offers a question with four potential answers. The code uses CSS similar to a simple menu structure to select the correct answer:
a:link { text-decoration: none; color: white; font-size:16px ;font-family:“Georgia”,“Book Antiqua”,“Times New Roman”,“Times” , serif;}
a:visited { text-decoration: none; color: white; font-size:16px ;font-family:“Georgia”,“Book Antiqua”,“Times New Roman”,“Times” , serif;}
a:active { text-decoration: none; color: white; font-size:16px ;font-family:“Georgia”,“Book Antiqua”,“Times New Roman”,“Times” , serif;}
a:hover { text-decoration: none; color: black; font-size:16px ;font-family:“Georgia”,“Book Antiqua”,“Times New Roman”,“Times” , serif;background-color:silver;}
Once an answer is selected a simple hyperlink takes the reader to a new page based upon whether the correct answer is selected:
A wrong answer takes the reader to a page with a different image with a negative facial expression and a message over the image which tells the reader it is the wrong answer.
A correct answer takes the reader to the next question accompanied by an image with a positive facial expression and a message over the image which tells the reader it is the correct answer.
The code to generate the messages is the same as described elsewhere to provide additional explanation to a CSS menu:
HTML:
CSS:
#leftimg a span img
{
border: 1px solid black;
float:right;
margin-left:10px;
margin-bottom:5px;
}
#leftimg a:hover span
{
display: block;
position:relative;
color: black;
font:14px;
margin-top: -300px;
padding: 10px;
background-color: #ffff88;
border: 1px solid black;
margin-left: -50px;
}
Conclusions
There are more sophisticated ways to generate interactive questions using Javascript, or within Flash-based or PHP/SQL-based, but the simplicity of this solution makes it easy to implement and reliable across many contexts. It can be hosted anywhere without the need for access to SQL databases, and the knowledge required to implement and manage such solutions.
Flash-based solutions can be very visually attractive, but a CSS solution offers better accessibility and search engine optimisation.
