Add Visual Appeal to your Online Quizzes
The Atrixware Weblearning 9 System introduced a vast number of configurations for your online quizzes. One of the more ‘technical’ settings is the ability to apply CSS to your quizzes. CSS is an acronym for ‘Cascading Style Sheets‘, and is a technology used by web designers to make web sites look nice.
There are 1,000+ page books on the subject of CSS, so this article will not even scratch the surface, but I will show you an example of what you can do, and from there, you can research more if you find it appealing.
To get started, you will need to have an online quiz (practice quiz, or graded quiz) or online presentation already created. Go to the PROPERTIES of the quiz (click MODULES > PROPERTIES, and then click the ADVANCED SETTINGS tab).
Now scroll down just a bit to the “Extra CSS” section – this is where we will be adding our CSS.
Notice on the left, there are about a dozen items in blue (like .navigate, .q_essaytext, etc.). If you position your mouse over these items, a tooltip will appear with more information on what that item represents in the online quiz. For example, hover over the .navbutton item, and the tooltip says “style applied to back/next/end buttons“. This tells us that when we use this item, we are assigning properties to the navigational back, next, and end buttons.
Ok, so how to we apply a style to an item? Here is where it gets a tad technical, but its fairly easy for basic usage. Using the .navbutton as an example, we enter the item, followed by a space, then a ‘squiggly’ bracket like this:
On each line below it, we enter in name/value pairs, and then finally, end it with a closing ‘squiggly’ bracket, like this:
(all name/value pairs go in here)
For this example, let’s make some changes to the .navbutton item. To do this, I have placed a quiz into a course, and logged in as a student so I can access the quiz many times to view the changes (you will need to do the same if you want to view your changes in real time).
So, I have started with this template (from the skins included with Weblearning 9):
And after applying some CSS, it looks like this (notice the change to the navigation buttons):
This is of course an extreme example (the buttons are very bright), but it’s quite a dramatic difference. Here is the code I wrote for the css:
border: 4px solid white;
.. or as seen in the editor:
Now understand that there are an infinite number of name/value pairs, and the more you know about CSS, the more effective you will be at making these changes. I used some basic name/value pairs (like color, font-size, etc) that are reasonably easy to understand. Trust me when I say the complexity of this can get enormous, but the results you can achieve are astounding.
So, the key points I want you to take out of this article are:
1. You can use CSS to modify just about every element in your online quizzes
2. There are an almost infinite number of CSS name/value pairs (or put another way, an almost infinite things you can do to change the look of each element)
3. The more you know about CSS, the more effective you will be at making your online quizzes look great.
Another tip: since the online quizzes you create are html documents, you can also apply CSS to all HTML document elements as well (such as body, p, h1, div, and all other HTML document elements). I know – this sounds confusing, but for those of you pursuing more CSS knowledge, you will understand how powerful of a concept this is.
So I am hoping I have opened up a new door for you to explore. Here are a few links if you are interested in learning more about CSS:
If you enjoyed this article please consider staying updated via RSS.