Persönlichkeitstest


Was für ein Typ bist du?

  • Frage 1: Bist du eher zärtlich

  • Ja

  • Nein

  • Frage 2: Bist du eher häuslich

  • Ja

  • Nein

  • Frage 3: Kannst du dich gut unterordnen

  • Ja

  • Nein

  • Frage 4: Liebst du Kinder

  • Ja

  • Nein

  • Du bist also:

Quellcode
<html>
<head>
<script> window.console = window.console || function(t) {};</script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }</script>

<style type="text/css">
#quizzie {margin: 0; padding: 0; width: 100%; height: 50%;}
h1 {font-family: 'Satisfy', 'cursive'; font-size: 2em;}
h2, p {font-family: 'Pathway Gothic One', 'sans-serif'; font-size: 1.5em;}
h1, h2, p {text-align: center; display: block; width: auto; margin: 1%;}
#quizzie {padding: 2% 0;}
#quizzie ul {list-style: none; display: block; width: auto; margin: 2% 2%; padding: 2%; overflow: auto; display: none;}
#quizzie ul.current {display: block;}
#quizzie ul li {display: inline-block; float: left; width: 20%; margin-left: 20%; overflow: auto; text-align: center;}
#quizzie ul li.quiz-answer {cursor: pointer;}
#quizzie ul li.question, #quizzie ul li.results-inner {display: block; float: none; width: 100%; text-align: center; margin: 0; margin-bottom: 2%;}
#quizzie ul li.results-inner {padding: 5% 2%;}
#quizzie ul li.results-inner img {width: 250px;}
#quizzie ul li:last-child {margin-right: 0;}
#quizzie .question-wrap, #quizzie .answer-wrap {display: block; padding: 1%; margin: 1em 10%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#quizzie .answer-wrap {background: Turquoise; -moz-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease; transition: background-color 0.5s ease;}
#quizzie .answer-wrap:hover {background: DarkTurquoise;}

</style>
</head>

<body>
<div id="quizzie">
<h1>Was für ein Typ bist du?</h1>
<ul class="quiz-step step1 current">
<li class="question"><div class="question-wrap"><h2>Frage 1: Bist du eher zärtlich </h2></div></li>
<li class="quiz-answer low-value" data-quizIndex="2"><div class="answer-wrap"><p class="answer-text">Ja</p></div></li>
<li class="quiz-answer high-value" data-quizIndex="4"><div class="answer-wrap"><p class="answer-text">Nein</p></div></li>
</ul>
<ul class="quiz-step step2">
<li class="question"><div class="question-wrap"><p>Frage 2: Bist du eher häuslich</p></div></li>
<li class="quiz-answer low-value" data-quizIndex="2"><div class="answer-wrap"><p class="answer-text">Ja</p></div></li>
<li class="quiz-answer high-value" data-quizIndex="4"><div class="answer-wrap"><p class="answer-text">Nein</p></div></li>
</ul>
<ul class="quiz-step step3">
<li class="question"><div class="question-wrap"><p>Frage 3: Kannst du dich gut unterordnen</p></div></li>
<li class="quiz-answer low-value" data-quizIndex="2"><div class="answer-wrap"><p class="answer-text">Ja</p></div></li>
<li class="quiz-answer high-value" data-quizIndex="4"><div class="answer-wrap"><p class="answer-text">Nein</p></div></li>
</ul>
<ul class="quiz-step step4">
<li class="question"><div class="question-wrap"><p>Frage 4: Liebst du Kinder</p></div></li>
<li class="quiz-answer low-value" data-quizIndex="2"><div class="answer-wrap"><p class="answer-text">Ja</p></div></li>
<li class="quiz-answer high-value" data-quizIndex="4"><div class="answer-wrap"><p class="answer-text">Nein</p></div></li>
</ul>
<ul id="results"><li class="results-inner"><p>Du bist also:</p><h1></h1><p class="desc"></p></li></ul>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
var resultOptions = [
{ title: '', desc: '<p>Ein seriöser Mensch</p><img src="https://i.imgur.com/tXTjD9k.jpg"/>' },
{ title: '', desc: '<p>Ein sympathischer Mensch</p><img src="https://i.imgur.com/dipkE0v.jpg"/>' },
{ title: '', desc: '<p>Ein humorvoller Mensch</p><img src="https://i.imgur.com/WXox0Yv.jpg"/>' },
{ title: '', desc: '<p>Du kennst nur Arbeit</p><img src="https://i.imgur.com/NH5cunw.png"/>' },
{ title: '', desc: '<p>Ein gefährlicher Mensch</p><img src="https://i.imgur.com/NH5cunw.png"/>' }];
var quizSteps = $('#quizzie .quiz-step'), totalScore = 0;
quizSteps.each(function () {
var currentStep = $(this),
ansOpts = currentStep.children('.quiz-answer');
ansOpts.each(function () {
var eachOpt = $(this);
eachOpt[0].addEventListener('click', check, false);
function check() {
var $this = $(this),
value = $this.attr('data-quizIndex'),
answerScore = parseInt(value);
if (currentStep.children('.active').length > 0) {
var wasActive = currentStep.children('.active'),
oldScoreValue = wasActive.attr('data-quizIndex'),
oldScore = parseInt(oldScoreValue);
currentStep.children('.active').removeClass('active');
$this.addClass('active');
totalScore -= oldScoreValue;
totalScore += answerScore;
calcResults(totalScore); } else {
$this.addClass('active');
totalScore += answerScore;
calcResults(totalScore);
updateStep(currentStep); } } }); });
function updateStep(currentStep) {
if (currentStep.hasClass('current')) {
currentStep.removeClass('current');
currentStep.next().addClass('current'); } }
function calcResults(totalScore) {
if (quizSteps.find('.active').length == quizSteps.length) {
var resultsTitle = $('#results h1'),
resultsDesc = $('#results .desc');
var lowestScoreArray = $('#quizzie .low-value').map(function () {
return $(this).attr('data-quizIndex'); });
var minScore = 0;
for (var i = 0; i < lowestScoreArray.length; i++) {if (window.CP.shouldStopExecution(0)) break;
minScore += lowestScoreArray[i] << 0; }
window.CP.exitedLoop(0);var highestScoreArray = $('#quizzie .high-value').map(function () {
return $(this).attr('data-quizIndex'); });
var maxScore = 0;
for (var i = 0; i < highestScoreArray.length; i++) {if (window.CP.shouldStopExecution(1)) break;
maxScore += highestScoreArray[i] << 0; }
window.CP.exitedLoop(1);var range = maxScore - minScore,
numResults = resultOptions.length,
interval = range / (numResults - 1),
increment = '', n = 0;
while (n < numResults) {if (window.CP.shouldStopExecution(2)) break;
increment = minScore + interval * n;
if (totalScore <= increment) {
resultsTitle.replaceWith("<h1>" + resultOptions[n].title + "</h1>");
resultsDesc.replaceWith("<p class='desc'>" + resultOptions[n].desc + "</p>");
return; } else { n++; } }window.CP.exitedLoop(2); } }
</script>
</body>

</html>