Multiple Choice Quiz Maker

3. Stylesheet

The multiple choice quiz script provides plenty of opportunity for you to set its appearance to match whatever you need for youw web page. To get you started here is the example stylesheet commands that I used for the sample quiz.

Simply save the above code in a file called quizmc.css which we can then link into all of the pages where you want to use multiple choice quizes after you modify it to suit your requirements Of course if you need to you can always set up multiple stylesheets for separate quizes just by giving each its own filename.

Let's take a look at what each line in this script does so that you can work out which ones you need to change to set up the quiz to look the way you want.

The label tags within the script surround each answer. By setting them to display:block we get each answer to display on a separate line. If we wanted to put them next to one another with fixed width we would also add the width and also float them. If you have other label tags in your page that you don't want to use this styleing on then simply change the command to start with #quiz1 label, #quix2 label instead of just label.

The second line of the stylesheet specifies the width that each of the quiz questions along with its answers will be made to fit within.

The questions/answers are displayed within separate forms while the final results are displayed in a paragraph. The third line defines the padding and border for the quiz questions while the fourth line defines the padding and border for the results. The fifth line adjusts the appearance of the message that appears at the top of the results.

The final two lines of the script affect the appearance and positioning of the quiz questions and quiz answers respectively by referencing the class names that the script generates for this purpose.

With the stylesheet set up the way you want (and you can always come back to this file and change it if you find out that the quiz doesn't look the way that you expected, the final step is to add the quiz into your web page. NEXT >>