THIS LIBRARY IS BEING DEPRECATED, THERE IS A NEWER, FASTER, BETTER VERSION AVAILABLE AT https://github.com/traitify/traitify-widgets.
A widget is anything graphical element that is self contained, a widget builder is a library for that supports the self contained library (widget), and a slider is a deck of slides that is displayed in the user interface to gather personality information. By clicking me or not me per slide (Image with caption), the user is able to give the api feedback on particular elements of personality that traitify's psychology team has deamed valuable.
Stable Version:
<script src="https://cdn.traitify.com/js/widgets/v1.js"></script>
To generate an Assessment Id use a server side library, for more information please visit https://developer.traitify.com
<script src="https://cdn.traitify.com/js/widgets/v1.js"></script>
<div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
<div class="results your-class"></div>
<div class="personality-types your-class"></div>
<div class="personality-traits your-class"></div>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load(assessmentId, ".slide-deck", {
results: {target: ".results"},
personalityTypes: {target: ".personality-types"},
personalityTraits: {target: ".personality-traits"}
}); // Example selector for widget target
</script>
If you choose to pass the widget you want to load at the beginning then the loader will return you that widget, otherwise it loads all widgets and passes you back all of them in an Object.
We include three results widgets, and one slide deck widget. The slide deck allows the user to select me or not me to each image we present, giving us the information we need to generate a personality profile. The results widgets can then be used to render the personality profile, and include the user's traits, their personality type scores, and and their blend / highest personality type. They can each be rendered individually below (The slide deck will render all results at the end of the assessment unless you use the showResults: false argument read below for more details)
The slideDeck widget is a widget that is used to collect personality information by recording the user's me and not me of every slide in the assessment. This personality information is composed of traits, personality types, and in most cases a blend.
<script>
// This callback gives you the ability to trigger an event when
// the widget has finished loading
traitify = Traitify.ui.load("slideDeck", assessmentId, ".traitify-widget"); // Example selector for widget target
traitify.onInitialize(function(){
console.log(traitify.data.get("Slides"));
console.log("Initialized");
})
</script>
The results widget is the basic results widget, it displays your blend, a merge of your 2 top personality types, or if they are not capable of a merge, it shows your top personality type.
<script>
// This callback gives you the ability to trigger an event when
// the widget has finished loading
traitify = Traitify.ui.load("results", assessmentId, ".traitify-widget"); // Example selector for widget target
traitify.onInitialize(function(){
console.log(traitify.data.get("PersonalityTypes"));
console.log("Initialized");
})
</script>
The personalityTypes widget displays personality type data, each personality type is a sumation of a particular set of personality traits recorded from the user's assessment.
<script>
// This callback gives you the ability to trigger an event when
// the user has finished playing the slide deck
traitify = Traitify.ui.load("personalityTypes", assessmentId, ".traitify-widget"); // Example selector for widget target
traitify.onInitialize(function(){
console.log(traitify.data.get("PersonalityTypes"));
console.log("Initialized!");
})
</script>
The personalityTraits widget displays personality trait data, each trait contains a value recorded from each slide played on the assessment, which allows for us to create personality type values and your blend, it also gives a more granular view of the user's personality.
<script>
// This callback gives you the ability to trigger an event when
// the user has finished playing the slide deck
traitify = Traitify.ui.load("personalityTraits", assessmentId, ".traitify-widget"); // Example selector for widget target
traitify.onInitialize(function(){
console.log(traitify.data.get("PersonalityTraits"));
console.log("Initialized!");
})
</script>
The famousPeople widget displays famous people associated with an assessment's personality blend. You must include the widgets bundle that includes the famous people widget as outlined below.
<script src="https://cdn.traitify.com/js/widgets/famous-people.js"></script>
<div class="traitify-widget"></div>
<script>
traitify = Traitify.ui.load("famousPeople", assessmentId, ".traitify-widget");
</script>
The careers
widget displays careers matched to an assessment's personality traits. The careers widget includes career matches and a career details modal when a career is clicked. You must include the widgets bundle that includes the careers
widget as outlined below.
<script src="https://cdn.traitify.com/js/widgets/careers.js"></script>
<div class="careers"></div>
<script>
var traitify = Traitify.ui.load("careers", assessmentId, ".careers", {
careers: {
experience_levels: "1,2", // Comma deliminated list
number_of_matches: 5, // max 100
columns: 5
}
});
</script>
<script src="https://cdn.traitify.com/js/widgets/v1.js"></script>
<div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
<div class="results your-class"></div>
<div class="personality-types your-class"></div>
<div class="personality-traits your-class"></div>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load(assessmentId, ".slide-deck", {
results: {target: ".results"},
personalityTypes: {target: ".personality-types"},
personalityTraits: {target: ".personality-traits"}
}); // Example selector for widget target
</script>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load(assessmentId, ".slide-deck",{slideDeck: {showResults: false}})
traitify.slideDeck.onFinished(function(){
alert("Finished")
})
</script>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load("slideDeck", assessmentId, ".slide-deck",{slideDeck: {showResults: false}})
traitify.onFinished(function(){
alert("Finished")
})
traitify.onMe(function(){
alert("You clicked me!")
})
traitify.onNotMe(function(){
alert("You clicked not me!")
})
traitify.onAdvanceSlide(function(){
alert("You clicked advance slide!")
})
</script>
<div class="slide-deck"></div>
<div class="yay-me">Yay Me!</div>
<div class="yay-not-me">Yay Not Me!</div>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load("slideDeck", assessmentId, ".slide-deck",{slideDeck: {showResults: false}})
/********************************************
* Vanilla Javascript
********************************************/
document.querySelector(".yay-me").onclick = function(){
traitify.actions.trigger("me")
}
document.querySelector(".yay-not-me").onclick = function(){
traitify.actions.trigger("notMe")
}
/********************************************
* jQuery
********************************************/
$(".yay-me").click(function(){
traitify.actions.trigger("me")
})
$(".yay-me").click(function(){
traitify.actions.trigger("notMe")
})
You will notice that we added a class to your widgets called "your-class", we are going to use this class to scope our css therefore overriding the default widget css.
Every tag added to the widget is recorded with a class, to find the class name use your inspector, often the css that styles a tag is scoped all the way from .tf-slide-deck to .me with all of the containers in between. If you add your own class to the root container though you can use the same scope with the addition of ".your-class" and you should be able to override different anything.
<script src="https://cdn.traitify.com/js/widgets/v1.js"></script>
<div class="slide-deck your-class"></div> <!-- Example Target Div for the widget -->
<div class="results your-class"></div>
<div class="personality-types your-class"></div>
<div class="personality-traits your-class"></div>
<script>
Traitify.setPublicKey("8asdf8sda-f98as-df8ads-fadsf"); // Example Public Key
Traitify.setHost("api-sandbox.traitify.com"); // Example host url (Defaults to api.traitify.com)
Traitify.setVersion("v1"); // Example Version
var assessmentId = "34aeraw23-3a43a32-234a34as42"; // Example Assessment id
traitify = Traitify.ui.load(assessmentId, ".slide-deck", {
results: {target: ".results"},
personalityTypes: {target: ".personality-types"},
personalityTraits: {target: ".personality-traits"}
}); // Example selector for widget target
</script>
Styling the me Button
<style>
.your-class.tf-slide-deck-container .me{
background-color: #aaa;
}
</style>
Styling the Results description
<style>
.your-class.tf-results .personality-type .description{
font-size: 50px;
}
</style>
Styling the Personality Traits name
<style>
.your-class.tf-personality-traits .personality-traits .trait .name{
font-size: 50px;
}
</style>
Styling the Personality Types background color
<style>
.your-class.tf-personality-types .personality-types-container{
background-color: #aaa;
}
.your-class.tf-personality-types .personality-types-container .personality-types{
background-color: #aaa;
}
.your-class.tf-personality-types .personality-types-container .personality-types .arrow .icon{
background-color: #aaa;
border-top: 20px solid #aaa;
}
</style>
This can be used for testing purposes, or so that you can make all your api requests on your own server instead of using the client.
<script src="https://cdn.traitify.com/js/widgets/v1.js"></script>
<div class="slide-deck"></div>
<script>
slideDeck = Traitify.ui.widgets.slideDeck(assessmentId, currentTarget, options)
slideDeck.data.add("Slides", [{caption:"Your Caption", image_desktop:"Your Image", id: "Your UUID"})
slideDeck.actions.add("processSlide", function(data){alert("You Clicked " + data.caption)})
slideDeck.run()
</script>
##Contributing Please create a pull request for review if you wish to give back
Building, Testing and Bundling:
$ cake watch
$ cake build
$ cake bundle
$ cake test