1. Technology
Send to a Friend via Email

Personality Quiz Maker

3. Stylesheet

The personality quiz script provides plenty of opportunity for you to set its appearance to match whatever you need for your web page. To get you started here is an example stylesheet that you could use.

Simply save the above code in a file called quizp.css which we can then link into all of the pages where you want to use personality 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 .quiz 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 >>

©2014 About.com. All rights reserved.