Skip to content

Instantly share code, notes, and snippets.

@rfprod
Last active April 22, 2017 15:48
Show Gist options
  • Save rfprod/b9f750f9745639acb179df472adcb958 to your computer and use it in GitHub Desktop.
Save rfprod/b9f750f9745639acb179df472adcb958 to your computer and use it in GitHub Desktop.
The Eysenck Personality Questionnaire
<html ng-app="EPQ">
<body>
<div class="info wide"> <a class="btn" href="https://en.wikipedia.org/wiki/Eysenck_Personality_Questionnaire" target=_blank><span class="glyphicon glyphicon-question-sign"></span> What is EPQ</a> <a class="btn" href="https://gist.github.com/rfprod/b9f750f9745639acb179df472adcb958" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></div>
<div id="intro" ng-controller="test">
<h2 class="container">{{title}}</h2>
<input id="username" class="wide" type="text" ng-model="username" autofocus>
</div>
<div id="content" ng-controller="clickCtrl">
<div class="btn-group-justified">
<a id="greeting" type="button" class="btn btn-info" ng-click="greeting()">{{buttonText1}}</a>
</div>
<div ng-hide="progress == 0" class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" ng-style="progressStyle">{{progress}}%</div>
</div>
<div id="output" class="container"></div>
<div class="btn-group-justified">
<a id="start-test" type="button" class="btn btn-success hidden" next-turn>{{buttonText2}}</a>
</div>
</div>
</body>
</html>
var app = angular.module('EPQ',['chart.js']);
app.controller('test', ['$scope', ($scope) => {
$scope.title = 'Eyesenck Personality Questionnaire';
$scope.username = 'Type your name here';
}]);
app.controller('clickCtrl', ['$scope', ($scope) => {
$scope.results = [];
$scope.progress = 0;
$scope.progressStyle = { 'width': $scope.progress+'%' };
$scope.$watch(
function(scope){return scope.results.length},
function(newVal, oldVal){
console.log(oldVal, newVal);
$scope.progress = Math.round(100*newVal/57);
$scope.progressStyle = { 'width': $scope.progress+'%' };
}
);
$scope.turn = 'undefined';
$scope.restartTest = () => {
$scope.results = [];
$scope.turn = 'undefined';
$scope.calculated.lieScale = 0;
$scope.calculated.extroversyScale = 0;
$scope.calculated.stabilityScale = 0;
};
$scope.buttonText1 = 'Click Me';
$scope.buttonText2 = 'Start Test';
$scope.greeting = () => {
$('#output').html('Hello '+$('#username').val()+'.<br>You are welcome to take The Eysenck Personality Questionnaire test, which measures two independent dimensions of personality: Extraversion-Introversion and Neuroticism-Stability.');
$('#username').addClass("hidden");
$('#greeting').addClass('hidden');
$('#start-test').removeClass('hidden');
};
$scope.vote = (bool) => {
$scope.results.push(bool);
console.log('vote: '+bool+' | added a vote: '+JSON.stringify($scope.results));
};
$scope.undo = function(){
if ($scope.results.length > 0) $scope.results.pop();
console.log('undid a vote: '+JSON.stringify($scope.results));
};
$scope.statements = ['Do you often long for excitement?',
'Do you often need understanding friends to cheer you up?',
'Are you usually carefree?',
'Do you find it very hard to take no for an answer?',
'Do you stop and think things over before doing anything?',
'If you say you will do something do you always keep your promise, no matter how inconvenient it might be to do so?',
'Do your moods go up and down?',
'Do you generally do and say things quickly without stopping to think?',
'Do you ever feel ‘just miserable’ for no good reason?',
'10.Would you do almost anything for a dare?',
'Do you suddenly feel shy when you want to talk to an attractive stranger?',
'Once in a while do you lose your temper and get angry?',
'Do you often do things on the spur of the moment?',
'Do you often worry about things you should have done or said?',
'Generally do you prefer reading to meeting people?',
'Are your feelings rather easily hurt?',
'Do you like going out a lot?',
'Do you occasionally have thoughts and ideas that you would not like otherpeople to know about?',
'Are you sometimes bubbling over with energy and sometimes very sluggish?',
'Do you prefer to have few but special friends?',
'Do you daydream a lot?',
'When people shout at you do you shout back?',
'Are you often troubled about feelings of guilt?',
'Are all your habits good and desirable ones?',
'Can you usually let yourself go and enjoy yourself a lot at a lively party?',
'Would you call yourself tense or ‘highly strung’?',
'Do other people think of you as being very lively?',
'After you have done something important, do you come away feelingyou could have done better?',
'Are you mostly quiet when you are with other people?',
'Do you sometimes gossip?',
'Do ideas run through your head so that you cannot sleep?',
'If there is something you want to know about, would you rather look it upin a book than talk to someone about it?',
'Do you get palpitations or thumping in your hear?',
'Do you like the kind of work that you need to pay close attention to?',
'Do you get attacks of shaking or trembling?',
'Would you always declare everything at customs, even if you knewyou could never be found out?',
'Do you hate being with a crowd who play jokes on one another?',
'Are you an irritable person?',
'Do you like doing things in which you have to act quickly?',
'Do you worry about awful things that might happen?',
'Are you slow and unhurried in the way you move?',
'Have you ever been late for an appointment or work?',
'Do you have many nightmares?',
'Do you like talking to people so much that you never miss a chance of talking toa stranger?',
'Are you troubled by aches and pains?',
'Would you be very unhappy if you could not see lots of people most of the time?',
'Would you call yourself a nervous person?',
'Of all the people you know, are there some whom you definitely do not like?',
'Would you say that you were fairly self-confident?',
'Are you easily hurt when people find fault with you or your work?',
'Do you find it hard to really enjoy yourself at a lively party?',
'Are you troubled by feelings of inferiority?',
'Can you easily get some life into a dull party?',
'Do you sometimes talk about things you know nothing about?',
'Do you worry about your health?',
'Do you like playing pranks on others?',
'Do you suffer from sleeplessness?'];
$scope.lieScale = {'yes':[6,24,36],'no':[12,18,30,42,48,54]};
$scope.extraversyScale = {'yes':[1,3,8,10,13,17,22,25,27,37,39,44,46,49,53,56],'no':[5,15,20,29,32,34,41,51]};
$scope.stabilityScale = {'yes':[2,4,7,9,11,14,16,19,21,23,26,28,31,33,35,38,40,43,45,47,50,52,55,57],'no':[]};
$scope.calculateResult = () => {
var lieCounter = 0, extroversyCounter = 0, stabilityCounter = 0;
$scope.lieScale.yes.forEach((val,i,arr) => {if ($scope.results[val] == 1) lieCounter++;});
$scope.lieScale.no.forEach((val,i,arr) => {if ($scope.results[val] == 0) lieCounter++;});
$scope.extraversyScale.yes.forEach((val,i,arr) => {if ($scope.results[val] == 1) extroversyCounter++;});
$scope.extraversyScale.no.forEach((val,i,arr) => {if ($scope.results[val] == 0) extroversyCounter++;});
$scope.stabilityScale.yes.forEach((val,i,arr) => {if ($scope.results[val] == 1) stabilityCounter++;});
$scope.calculated.lieScale = lieCounter;
$scope.calculated.extraversyScale = extroversyCounter;
$scope.calculated.stabilityScale = stabilityCounter;
$scope.radarData1 = [[lieCounter, extroversyCounter, stabilityCounter]];
var neuroticVal, extrovertVal, stableVal, introvertVal;
if (extroversyCounter < 12){
introvertVal = 12 - extroversyCounter;
extrovertVal = 0;
}else if (extroversyCounter == 12){
introvertVal = 0;
extrovertVal = 0;
}else if (extroversyCounter > 12){
introvertVal = 0;
extrovertVal = extroversyCounter - 12;
}
if (stabilityCounter < 12 ){
stableVal = 12 - stabilityCounter;
neuroticVal = 0;
}else if (stabilityCounter == 12){
stableVal = 0;
neuroticVal = 0;
}else if (stabilityCounter > 12){
stableVal = 0;
neuroticVal = stabilityCounter - 12;
}
$scope.radarData2 = [[neuroticVal, extrovertVal, stableVal, introvertVal]];
if (lieCounter >= 4) return '<div>It seems like you did not answer the questions as you really would.</div><canvas id="radar" class="chart chart-radar" chart-data="radarData1" chart-labels="radarLabels1"></canvas><canvas id="radar" class="chart chart-radar" chart-data="radarData2" chart-labels="radarLabels2"></canvas><div class="btn-group-justified"><a type="button" class="btn btn-success" ng-click="restartTest()" next-turn>TRY AGAIN</a></div>';
return '<canvas id="radar" class="chart chart-radar" chart-data="radarData1" chart-labels="radarLabels1"></canvas><canvas id="radar" class="chart chart-radar" chart-data="radarData2" chart-labels="radarLabels2"></canvas><div class="btn-group-justified"><a type="button" class="btn btn-success" ng-click="restartTest()" next-turn>TRY AGAIN</a></div>';
};
$scope.radarLabels1 =["Lie Scale", "Extroversy Scale", "Emotional Stability Scale"];
$scope.radarData1 = [[3, 12, 18],[6, 9, 21]];
$scope.radarLabels2 =["Neurotic", "Extrovert", "Stable", "Introvert"];
$scope.radarData2 = [[3, 11, 0, 0],[0, 0, 5, 7]];
$scope.calculated = {'lieScale': 0,'extroversyScale': 0, 'stabilityScale': 0};
}]);
app.directive("nextTurn", ($compile) => {
return (scope, element, attrs) => {
element.bind("click", () => {
if (scope.turn == 'undefined') {
scope.turn = 0;
$('#start-test').addClass('hidden');
}
else scope.turn++;
console.log('results length: '+scope.results.length);
console.log('statements length: '+scope.statements.length);
if (scope.results.length !== scope.statements.length){
$('#output').html((scope.turn+1)+'/'+(scope.statements.length)+': '+scope.statements[scope.turn]);
angular.element(document.getElementById('output')).append($compile("<div class='btn-group-justified'><a type='button' class='btn btn-default' ng-click='vote(1)' next-turn>YES</a><a type='button' class='btn btn-default' ng-click='vote(0)' next-turn>NO</a></div><div class='btn-group-justified'><a type='button' class='btn btn-danger' ng-click='undo()' undo-turn>UNDO PREVIOUS</a></div>")(scope));
}else{
$('#output').html('You completed the test.');
var rslt = scope.calculateResult();
console.log(rslt);
angular.element(document.getElementById('output')).append($compile("<div>"+rslt+"</div>")(scope));
}
});
};
});
app.directive("undoTurn", ($compile) => {
return (scope, element, attrs) => {
element.bind("click", () => {
if (scope.turn > 0){
scope.turn--;
$('#output').html((scope.turn+1)+'/'+(scope.statements.length)+': '+scope.statements[scope.turn]);
angular.element(document.getElementById('output')).append($compile("<div class='btn-group-justified'><a type='button' class='btn btn-default' ng-click='vote(1)' next-turn>YES</a><a type='button' class='btn btn-default' ng-click='vote(0)' next-turn>NO</a></div><div class='btn-group-justified'><a type='button' class='btn btn-danger' ng-click='undo()' undo-turn>UNDO LAST</a></div>")(scope));
}
});
};
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.js"></script>
body
.info
position: absolute
top: 0
text-align: center
#intro
padding-top: 0.5em
#content
width: 100%
.progress-bar
color: #000000
.wide
width: 100%
a:hover
text-decoration: none
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.9.0/angular-chart.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment