Free Demo
Atrixware » Blog Archive Using CSS Tricks in Your Online Quizzes - Atrixware

Using CSS Tricks in Your Online Quizzes

20_dog_doing_card_tricks.jpgWith the plethora of settings and configurations available to your quizzes inside of your Weblearning LMS account, you may have passed over or discounted the Extra CSS Field.

While it’s not obvious by looking at it (just a big empty white text box), you can do some pretty cool things using it – and I am going to show you a few in this article!

Where the heck is this EXTRA CSS box?
When you edit a quiz ( Learning Modules > List All > Edit [pencil icon] ), click on the ADVANCED sub-tab, and the EXTRA CSS section is right below the SKINS section.


Trick #1: Hiding the BACK Button
Your online quizzes default to navigational mode, with back and next buttons to let the user view each question. However, you may want them to only be able to go forward (and not backward). To do this, place the following code into the EXTRA CSS field (for css experts, you can also use display:none):

#back_button_span { visibility: hidden; }

Trick #2: Hiding the END Button
Your online quizzes also by default place an END button along the bottom right of the quiz. However, you may not want your users to be able to end the quiz without first going through each question. In that case, you can hide the end button by placing the following code into the EXTRA CSS field (for css experts, you can also use display:none):

#end_button_span { visibility: hidden; }

Trick #3: Overriding Question Text Size
Each skin has its own settings for every element in your quiz – things like color, sizes, fonts, background images, and more. Often, you will find a skin that works, but you may wish you could tweak the question text (like size, or color). You can! Here is a snippet of CSS code that changes the question text size, color, font-family, and even letter-spacing (you can tinker with the values to come up with your own desired result):

.tp_question {

2.pngTrick #4: Make Your Images Pop
You probably have some questions that include images. If so, you can enhance the look of the images and make them pop!

There are really a limitless number of things you can do here, but I had to come up with a simple example, so I tried to come up with something useful you can use and easily tinker with to get your desired result.

In the example code I provide here, each image is made to look like a photo, with a white border, and then pops off the screen with a drop-shadow applied to it (note – if you are using Internet Explorer, IE9 is needed to see the drop-shadow):

.tp_question img {
border:1px solid #333;
box-shadow: 2px 2px 4px #333;
-moz-box-shadow: 2px 2px 4px #333;
-webkit-box-shadow: 2px 2px 4px #333;

3.pngTrick #5: Slick Gradient Background
Most skins come with a solid color background, but you can spice up your quiz by making the background a gradient instead of a solid color.

The example I provide is a blue gradient, but you can tinker with the values and get your own gradient color scheme.

Note the gradient works on most browsers, but some older versions will not render the gradient (but instead will simply use the solid color already there instead).

body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000066', endColorstr='#ffffff');
background: -webkit-gradient(linear, left top, left bottom, from(#006), to(#fff));
background: -moz-linear-gradient(top, #006, #fff);

As you might imagine, the possibilities are nearly limitless. CSS is very powerful. Every item on your quiz has a corresponding CSS selector, class, or id which you can assign visual styling to. A good place to start is below the CSS text area – where you will see all the class and id selectors you can use.

The Weblearning Learning Management System is a powerful, budget-friendly, easy-to-use Online E-Learning System for authoring, managing, and tracking online quizzes and learning presentations. To try it FREE,  go to the Weblearning E-Learning System Sign-up Form.

If you enjoyed this article please consider staying updated via RSS.

Comments are closed.

Looking for a Better, Easier or Less Expensive LMS? Try Axis LMS