Templating

Preset Template

The preset templates cannot be edited. We have a small choice of preset templates with more being added soon.

Simple Editable Template

The simple editable template allows you to easily change the look of you assessment without any technical knowledge. The amount you can actually change is limited to the background color and the fonts.

Advanced Editable Template

The advanced editable assessment template is for advanced users only. To use this method of template creation you must have knowledge of HTML and CSS.

If you do not have knowledge of these technologies You can find information and tutorials on these technologies on many sites around the web.

Using this method you can have a great deal of control of your assessment look and feel. This can be useful when positioning your assessment logo and tailoring your assessment to match with your corporate look. You can also blend your assessment seamlessly with the look of your web site and link the assessment using the assessment link or the JavaScript API.

When using advanced editing it is a good idea to cut and paste the default template and modify this. The default template is shown below.

					
@import url('https://fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic');

.question-text, .question, .given-comment, .summary-comment {
	white-space: pre-wrap;       /* CSS-3 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
 	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */		
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
 	font-family: Exo 2 !important;
}

body { padding: 0; margin: 0; font-family: Exo 2; }

form {
	font-size: 18px;
}

li {
    list-style: outside none none;
}

button:focus { outline: 0; }


/* logo */

#default-logo {
	padding: 15px;
	background-color: #879db3;
}

#access-logo {
	padding-left: 15px;
}

#logo {
	margin-left: 20px;
	margin-top: 10px;
}

#quiz-logo {
	margin: 0;
	float: none;
}

#quiz-logo {
	margin-top: 0;
	margin-left: -30px;
}


/* general */

#begin-comment {
    margin: 13px 0px 13px;
    font-size: 18px;
}

#outer-quiz-content { 
    margin: 0px auto;
    text-align: left;
    padding: 10px;
}

#outer-quiz-content div, #outer-quiz-content p, 
#outer-quiz-content span.number, #outer-quiz-content span.question, 
#outer-quiz-content td, #outer-quiz-content th, 
#outer-quiz-content input[type=text], #outer-quiz-content pre {
	font-weight: 300;
	color: black;
	font-size: 20px;
	line-height: 26px;	
}

div.quiz-header-content h1 {
	margin: 0;
	margin-bottom: 10px;
	line-height: 1.1em;
	 font-size: 28px;
}

div#quiz-content form label {
	width: auto;
	text-align: left;
	font-weight: normal;
	margin-bottom: 12px;
}

#question-answer div.comment-container label {
	display: block;
}

.comment-container textarea, .comment-container input[type=text] {
	max-width: 95%;
}

div#quiz-content span.show { display: inline !important }

#outer-quiz-content ul {
    list-style: none;
    margin-left: 0;
}

#outer-quiz-content .hide {
    display: none;
}

#outer-quiz-content .clear {
    clear: both;
}

#outer-quiz-content .option-lettering {
    list-style-type: lower-alpha;
}

#quiz-app-viewport {
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

#outer-quiz-content, #quiz-section-instructions {
    min-height: 100px;
    padding: 10px;
}

#quiz-section-instructions h2 {
	margin: 10px 0 10px -10px;
	line-height: 1.1em;    
}

#quiz-navigation {
	padding: 10px 0;
	min-height: 20px;
	float: none;
	width: auto;
}

#quiz-header {
	clear: both;
	width: auto;
}

#quiz-header-content {
	float: left;
}

#quiz-logo-container {
	padding-bottom: 0 !important;
	padding-left: 20px;
}

#timer-container { margin-top: 20px; }

#quiz-section-instructions { min-height: 30px; }

#outer-quiz-content .question-image-container {
}

#quiz-results, #time-out-content, #click-next {
	font-size: 1em !important;
	font-weight: bold !important;
	clear: both;
	margin-top: 15px;
	color: red !important;
}

#outer-quiz-content .summary-question-container { margin-bottom: 20px; }

#summary { border-spacing: 0px; }

#summary-header-comment { margin-bottom: 20px; }

#summary-text { margin-bottom: 20px; }

#outer-quiz-content .no-answer { font-style: italic; }

#outer-quiz-content .summary-question .correct img {
	display: inline-block;
	margin-left: -30px;
	margin-bottom: -5px;
}

span.correct span.glyphicon-ok  { color: green; }

span.correct span.glyphicon-remove  { color: red; }


#outer-quiz-content div, #outer-quiz-content p, #outer-quiz-content span, 
#outer-quiz-content td, #outer-quiz-content th, #outer-quiz-content input[type=text] {
	font-size: 20px;	
}

div.quiz-header-content h1 {
	font-size: 1.7em
}
 
#timer-container {
 	float: right;
}
 
#time-label {
 	font-size: 1.2em;
 	margin-right: 10px;
}
 
#timer {
 	font-family: digital-7 mono;
    font-size: 1.6em !important;
}

#summary-header {
	color: black;
	font-size: 18px;
	font-weight: normal;
} 

#previous-button {
	float: left;
}

button {
	padding: 5px 10px;
	font-size: 16px;
}

div#question-answer {
	padding: 20px 20px 10px 15px;
}

ul#options {
    margin-top: 0;
    padding-left: 5px;
}    

ul#options li {
	padding: 7px 0;	
}

ul#options label { display: inline }

#start {
	margin-top: 20px;
}

#summary h2, .summary-question-container * {
	color: #333;	
}

.summary-question-container * {
	font-size: 1.05em;
	font-weight: normal;
}

#summary h2 {
	font-size: 1.4em
}

div#instructions {
	margin-left: -10px
}

#previous {
	margin-right: 20px;
}
			
		

You can also edit a certificate template using CSS code. Below is the default CSS code which can customized to suit your needs.

					
body {
	height: 100%;
	text-align: center;
	width: 19cm;
	height: 25cm
}

p, p strong, td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
}

h1 {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	text-align: center;
	font-size: 44px;
}

table#certificate {
	margin: 22px;
	padding: 10px;
	height: 93%;
	width: 93%;
}

table#certificate tr td {
	text-align: center;
}

#course-name, #respondent-name, #date, #comment {
	display: block;
	padding: 20px 0
}

#course-name strong {
	margin-top: 10px
}

#course-name span {
	margin-bottom: 10px
}

#comment {
	font-size: 22px;
	display: block;
}

#date strong {
	display: inline-block;
	margin-right: 20px;
}