var nqw_questions = [
"What's your favourite food?",
"What would you do if your phone went missing?",
"What's your favourite way to travel?",
"What was your favourite monster?"];
var nqw_answers = [
[
"Countess Hagula's Youth Juice",
"Gummy Dummies",
"Scooby Snacks"],
[
"Phone the police",
"Start looking for clues", ],
[
"Sin Cara's convertible",
"Loch Ness Monster Machine",
"Mystery Machine",
"Cherry 59 Starfire Special"],
[
"Miner Forty-Niner",
"10,000 Volt Ghost",
"Maid Mummy"],
];
var nqw_scores = [
[
0,
1,
2],
[
1,
0],
[
1,
2,
2,
0],
[
1,
2,
0],
];
var nqw_qCount = 0;
var nqw_score = 0;
$('#nqw_start').click(function () {
nqw_score = 0;
showQuestion();
});
$('#nqw_options').on('click', 'a', function (event) {
if(typeof $(this).data("score") !== 'undefined') {
// Standard question options
nqw_score += $(this).data("score");
nqw_qCount++;
if (nqw_qCount < nqw_answers.length) {
showQuestion();
} else {
showOutcome(nqw_score);
}
} else {
// Share buttons, etc
if($(this).data("action")) {
if($(this).data("action") == "restart") {
location.reload();
}
}
}
});
function showOutcome(s) {
if(s >= 5) {
nqw_outTitle = "Scooby Doo";
nqw_outDesc = "one cool cat, or should that be dog?";
nqw_outPic = "http://lorempixel.com/output/animals-q-c-300-200-8.jpg";
} else if(s >= 3) {
nqw_outTitle = "Shaggy";
nqw_outDesc = "a laid back surfer dude!";
nqw_outPic = "http://lorempixel.com/output/sports-q-c-300-200-2.jpg";
} else {
nqw_outTitle = "Fred";
nqw_outDesc = "the slightly square leader of the crew.";
nqw_outPic = "http://lorempixel.com/output/business-q-c-300-200-1.jpg";
}
nqw_outMessage = "<p>You're " + nqw_outDesc + "</p>";
nqw_shareMessage = "I took the cartoon personality test and I got " + nqw_outTitle + ". Try it at: http://example.com";
nqw_shareOpts = "<ul id='nqw_share'>";
nqw_shareOpts += "<li><a href='https://www.facebook.com/sharer/sharer.php?u=http://example.com' target='_blank'><img src='http://www.heraldandtimeslabs.com/hosted/indyquiz/pics/facebook.jpg' /><div class='label'>Share on Facebook</div></a></li>";
nqw_shareOpts += "<li><a href='https://twitter.com/intent/tweet?text=" + nqw_shareMessage +"' target='_blank'><img src='http://www.heraldandtimeslabs.com/hosted/indyquiz/pics/twitter.jpg' /><div class='label'>Share on Twitter</div></a></li>";
nqw_shareOpts += "<li><a href='#' data-action='restart'><img src='http://www.heraldandtimeslabs.com/hosted/indyquiz/pics/restart.jpg' /><div class='label'>Take the test again</div></a></li>";
nqw_shareOpts += "</ul>";
$('#nqw_question').html("You're like " + nqw_outTitle
+ "<br /><img src='" + nqw_outPic + "' />");
$('#nqw_options').html(nqw_outMessage + nqw_shareOpts);
}
function showQuestion() {
$('#nqw_question').html(nqw_questions[nqw_qCount]);
var nqw_list = "";
for (i = 0; i < nqw_answers[nqw_qCount].length; i++) {
nqw_list += "<li><a href='#' data-score='" + nqw_scores[nqw_qCount][i] + "'>" + nqw_answers[nqw_qCount][i] + "</a></li>";
}
$('#nqw_options').html("<ul>" + nqw_list + "</ul>");
}
<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>
<div id="nqw_survey">
<h1>Scooby Doo personality test</h1>
<p id="nqw_question">Answer just four short questions to find out which Scooby Doo character you're like.<br/>
<img src="http://blogs.discovermagazine.com/but-not-simpler/files/2014/03/6661567671_f97c0b14ff_o.jpg" /></p>
<div id="nqw_options">
<ul id="nqw_start">
<li><a href="#">Start the test</a></li>
</ul>
</div>
</div>
#nqw_survey {
text-align: center;
font-family: 'Tauri', sans-serif;
}
#nqw_survey h1 {
font-size: 36px;
}
#nqw_options {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
#nqw_options ul {
margin: 0;
padding: 0;
}
#nqw_options li {
display: block;
border: 2px solid #666;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
margin: 0 auto 20px;
background: rgba(254,254,254,1);
background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,254,254,1)), color-stop(49%, rgba(209,209,209,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(100%, rgba(226,226,226,1)));
background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
background: -o-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
background: linear-gradient(to bottom, rgba(254,254,254,1) 0%, rgba(209,209,209,1) 49%, rgba(219,219,219,1) 50%, rgba(226,226,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 );
max-width: 300px;
vertical-align:top;
-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}
#nqw_options li:hover {
border-color: #c00;
}
#nqw_options a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
#nqw_start li {
background: rgba(248,80,50,1);
background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0 );
}
#nqw_start li {
width: 200px;
min-height: inherit;
}
#nqw_start a {
color: #fff;
font-size: 24px;
}
#nqw_question {
font-size: 18px;
}
#nqw_question img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
margin: 10px auto 0;
max-width: 430px;
}
#nqw_share li {
width: 100px;
display: inline-block;
margin: 0 10px;
}
#nqw_share img {
width: 80px;
height: 80px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
@media only screen and (max-width : 459px) {
/* Tweaks for smaller devices */
#nqw_question img {
width: 100%;
}
#nqw_survey {
width: 100%;
}
#nqw_share li {
width: 80px;
font-size: 11px;
margin: 0 5px;
}
#nqw_share li img {
float: none;
height: auto;
width: 30px;
}
}