With templating you can change the look and feel of your assessment and customize the to fit the look and feel of your organization and make them more engaging.

When creating a Brainsbuilder assessment you also have the choice of using a Preset template, the easy-to-edit Simple editable template, or the Advanced editable template for those people with knowledge of HTML (Hyper-Text Markup Language) and CSS (Cascading Style Sheets).

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

Advanced Editable 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.

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;
}
			
		

For more information on assessment templating please contact us at post@brainsbuilder.com.

You can also edit a certificate 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;
}