Skip to content
A simple API to quickly create a personality quiz.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
vendor
LICENSE
PersonalityQuizzer.js
README.md
index.html

README.md

PersonalityQuizzer - v0.02

A simple API to quickly create a Personality quiz.

Try a simple demo here

Requires: jQuery, DOMBars

include libraries

	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script type="text/javascript" src="vendor/dombars.min.js"></script>
	<script type="text/javascript" src="PersonalityQuizzer.js"></script>

Start new PersonalityQuizzer object and fit it with quiz data:

	var quiz = new PersonalityQuizzer();
	quiz.set("title","What kind of Git Repo are you?")
	quiz.addQuestion({ 
		color: "#7FD863",
		title: "Tabs or Spaces?",
		answers: [
			{ 
				text: "Tabs",
				result: 1
			},
			{ 
				text: "Spaces",
				result: 2
			},
		]
	});
	quiz.addResults([
		{
			id: 1,
			text: "You are a Tabs repo!"
		},
		{
			id: 2,
			text: "You are a spaces repo!"
		},
	]);

API for PersonalityQuizzer() objects

Parameter Values Default Notes
setTitle text - sets a name. Mainly for reference in the templates
addQuestions array - an array of question objects
addQuestion object - a question object with child answer objects
addResults array - an array of result objects
render - - force quiz to render

PersonalityQuizzer Options

var quiz = new PersonalityQuizzer({
	options: {
		append: "body",
		quiz_template: "#quiz_template",
		question_template: "#question_template",
		answer_template: "#answer_template",
		result_template: "#result_template",
		shuffle: true,
		debounce: 10,
	},
	questions: [ /* questions objects */ ],
	results: [ /* result objects */ ],
});
Parameter Values Default Notes
append text body this is the css selector that the quiz will be appended to.
quiz_template text quiz_template the id of the template
question_template text question_template the id of the template
answer_template text answer_template the id of the template
result_template text result_template the id of the template
shuffle boolean true shuffles the question order.
debounce number 10 stop the template from rerendering to often.

Anatomy of a Question Object

Add as many questions as needed. Each question must have an array of answer object.

Other attributes will be passed in to the template.

{
	answers: [ /* answer object */ ] /* required */
}

Anatomy of an Answer Object

Each answer object must have a result id that corisponds with the result objects. The score is used to weight different answers in favor of diferent results.

Other attributes will be passed in to the template.

{
	result: 1, /* required */
	score: 1 /* optional */
}

Anatomy of a Result Object

each result object must have an id that will be used in reference by answer object. This can be a number or array.

Other attributes will be passed in to the template.

{
	id: 1, /* required (number | array) */
}

Add these Handelbars templates to the HTML. Though instead of using the Handelbars library we will use the DOMBars library for easy event binding and live updates. Be sure to include the 3 outlet helpers for questions, answers and results. None of the class names or html in the example below are required. Feel free to customize as much as you like!

<script id="quiz_template" type="text/x-handlebars-template">
	<div class="quiz">
		<div class="questions">
			{{{outlet 'questions'}}}
		</div>
		<div class="results">
			{{{outlet 'results'}}}
		</div>
	</div>
</script>


<script id="question_template" type="text/x-handlebars-template">
	<div class="question" >
		<h1 style="background:{{color}}">{{{title}}}</h1>
		<div class="answers">
				{{{outlet 'answers'}}}
		</div>
	</div>
</script>

<script id="answer_template" type="text/x-handlebars-template">
	
	<div class="answer {{#if selected}}selected{{/if}}" >
		<div class="wrapper">
		<div class="table">
			<div class="text" style="background:{{parent.color}}">
				{{text}}
			</div>
		</div>
		</div>
		<div class="footer">
			<div class="checkbox"></div>
		</div>
	</div>
	
</script>

<script id="result_template" type="text/x-handlebars-template">
		<div class="result {{#if selected}}selected{{/if}}" >
			<div class="wrapper">
				<div class="title">{{title}}</div>
				<p>{{text}}</p>
			</div>
		</div>
</script>
You can’t perform that action at this time.