CSS Tricks: Using CSS to Build Multiple Choice Questions for E-learning Applications

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 http://www.alangillies.info/demos/cancer/quiz1.html.

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:

<div>What kind of organisation is behind the http://www.discern.org.uk site?</div>

<div class="selected"><a href="quiz1b.html" title="Click here to select this answer">1. A commercial organisation?</a></div>

<div class="selected"><a href="quiz1b.html" title="Click here to select this answer">2. A government organisation?</a></div>

<div class="selected"><a href="quiz2a.html" title="Click here to select this answer">3. A non-profit making organisation?</a></div>

<div class="selected"><a href="quiz1b.html" title="Click here to select this answer">4. An academic organisation?</a></div>

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:

<div><a href="#"><img src="correct.jpg" width="195" height="396" alt="" /><span><img alt="Jill " src="jill.jpg" height="100" width="80" />

&quot;Well done! You got that one right.<br/> Now try this one. Click on the answer that you think is correct.&quot;</span></a></div>

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;

}

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.