Define the style of the page

To customize the graphical appearance of the HTML page representing the quiz, select the "Page Style" item from Document menu.

The following window appears:

It is possible to customize:

• Page background : background image, background color and foreground color, font and borders;
• Page header: background image and logo;
• page width : change the spacing of the right and left side of the page;
• separator between questions , it can be a simple horizontal line or its own image, selectable from file;
• fonts and colors : you can change most of the fonts in the quiz HTML page (font family name, size, background and foreground color) or reset them to their default value;
• position of the answers : if the text of the answers is one per line or all on the same line

Below, the dialog windows for change page background and page header:

Page style

Finally, you can add their own styles CSS (Cascading Style Sheet) by selecting the second tab "style page". The following window appears:

To make sure you have written syntactically correct CSS code, press the "Validate" button.

Below is a list of CSS class names that you can use to define your own styles:

Gap filling exercises

	qf-gap-class
	qf-gap-input-class
	qf-gap-dropdown-select-class
	qf-gap-dropdown-option-class

Questions with matching words

	qf-matching-class
	qf-matching-left-class
	qf-matching-right-class
	qf-matching-left-selected-item-class
	qf-matching-right-selected-item-class
	qf-matching-left-dropdown-class
	qf-matching-right-dropdown-class
	qf-matching-left-item-class
	qf-matching-right-item-class

Questions with open answer

	qf-openans-class

True or false questions

	qf-truefalse-radio-class

General appearance of the page

	qf-panel-all-questions-class
	qf-panel-question-class
	qf-panel-question-heading-class
	qf-panel-question-body-class

	qf-panel-result-class
	qf-panel-result-heading-class
	qf-panel-result-body-class

	qf-jumbotron-class
	qf-statusbar-class
	qf-result-summary-item-class