CSS quiz

It's better to do a quiz with php, but here's a way to it with CSS.

This behaves quite badly in Internet Explorer and slightly strangely in Opera, but it seems fine in Firefox.

Q1
Answer 1
Q2
Answer 2
CSS
#cssquiz a {
text-decoration:none;
color:black;
}
#cssquiz {
width:18em;
list-style:none;
}
#cssquiz dt, #cssquiz dd {
float:left;
margin:1em;
width:6em;
border:1px solid red;
height:2em;
}
#cssquiz dd a {
float:left;
display:block;
width:6em;
height:2em;
text-align:center;
}
#cssquiz dd a span {
display:none;
}
#cssquiz dd a:active span,
#cssquiz dd a:focus span {
display:block;
}
HTML
<h1>CSS quiz</h1>
<p>It's better to do a quiz with php, but here's a way to it with CSS.</p>
<p>This behaves quite badly in Internet Explorer and slightly strangely in Opera, but it seems fine in Firefox.</p>
<dl id="cssquiz">
<dt>Q1</dt>
<dd><a href="#n"><span>Answer 1</span></a></dd>
<dt>Q2</dt>
<dd><a href="#n"><span>Answer 2</span></a></dd>
</dl>
Comment form

Please type the word 'chocolate' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url