CSS scripts

Here are some examples of the CSS scripts that you can use to change the appearance of your quiz.

Question Writer Additional CSS

To change the background colour of the text input box add the following script:

n.fibinput {    border: 1px solid
#000066;    background: #ffffcc;}

You can choose your own hexadecimal color code instead of #ffffcc – here is a useful webpage.

To change the background color of the whole page, you can use:

body {background-color:#b0c4de;}

You can include whichever hexadecimal color code you want.

To center your quiz title:

.quiztitle{
text-align:center;
}

To get horizontally lined items:

ul {
 float: left;
}

This will get you a rough horizontal layout, but you might get some unexpected visual effects.

To change the line spacing:

span > label
{
line-height: 60px;
padding: 0 0 0 66px;
margin-left: 40px;
}

You can change the three numerical values (eg 60px) to give you additional spacing between the lines, spacing between the button and the text, and spacing between the buttons and the left margin.

To change the spacing between the identifier fields:

.candidateblock{
margin-top:10px;
}

You can adjust the number of pixel to 20px or any other number to vary the spacing.

To center the quiz page in the browser:

body{
text-align:center;
}

.assessmentcontainer{
margin-left:auto;
margin-right:auto;
}

Note – you should switch off the ‘Maximize quiz in browser‘ option if adding this CSS or you will have problems with Internet Explorer and FireFox.

To change the font size of the next button:

.nextbutton{
font-size:50%;
}

Change the percentage to change the size

To change the color of the timer

.timer{
color:green;
}

You can add your desired color.

To allow a wider space to be used for the text label for user identifiers:

.candidateprompt
{
text-align:right;
float: left;
width: 600px;
padding-right:5px;
}

To display your answer options in 2 or more columns

It is now (from Question Writer HTML5.2) possible to apply the CSS script to a particular question. You need to add a metadata node to the question you want to adjust, and use the ‘Class Name’ field –

Enter

threecolumns

or

twocolumns

depending on which you want.

You’ll then need to add the CSS script in Appearance Settings.

.optionandlabel{
width:33%;
float:left;
}

.itemfeedback{
width:33%;
float:left;
}

.questionvalue{
clear:left
}

This is for 3 columns . . . you can change the 33% to 50% or 25% to change the number of columns.

Note: You need to be using the latest version of Question Writer HTML5 (version 5.0.5728.27642 (or higher) to create a quiz with this CSS and this won’t work with IE8, so make sure your users are using a modern browser.

To give the cells a bit more definition:

.match_box, .choice_box, .stand_box {
box-shadow: 1px 1px 1px #000000;
}

To change the colour of the numbers in the sequence question background

.sequencenumber{
color: #00FF00 !important;
}

Leave a Reply