"What Are You?" Quiz

Developer
Boyd Massie
Size
4,030 Kb
Views
10,120
  1. "What Are You?" Quiz Previews
  2. "What Are You?" Quiz HTML Codes
  3. "What Are You?" Quiz CSS Codes
  4. "What Are You?" Quiz JS Codes

How do I make an "what are you?" quiz?

Https://gist.github.com/pung86/179840028c058ff456f4. What is a "what are you?" quiz? How do you make a "what are you?" quiz? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

"What Are You?" Quiz Previews
IQ Test

"What Are You?" Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>"What Are You?" Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<div id="quizzie"> <h1>What Techie Should You Be?!</h1> <ul class="quiz-step step1 current"> <li class="question"> <div class="question-wrap"> <h2>Question #1: Are you more of an Introvert or Extrovert?</h2> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">Introvert</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Extrovert</p> </div> </li> </ul> <ul class="quiz-step step2"> <li class="question"> <div class="question-wrap"> <h2>Do You Like Problem Solving?</h2> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">YES!</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Not Really...</p> </div> </li> </ul> <ul class="quiz-step step3"> <li class="question"> <div class="question-wrap"> <h2>Question #3: Where Do You Want to Work?</h2> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">From Bed!</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">In a bumping office!</p> </div> </li> </ul> <ul class="quiz-step step4"> <li class="question"> <div class="question-wrap"> <h2>Question #4: Are You Creative?</h2> </div> </li> <li class="quiz-answer low-value" data-quizIndex="2"> <div class="answer-wrap"> <p class="answer-text">I draw a mean stick figure</p> </div> </li> <li class="quiz-answer high-value" data-quizIndex="4"> <div class="answer-wrap"> <p class="answer-text">Basically an Artist</p> </div> </li> </ul> <ul id="results"> <li class="results-inner"> <p>Your result is:</p> <h1></h1> <p class="desc"></p> </li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>

"What Are You?" Quiz - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Satisfy|Pathway+Gothic+One);
/* Defaults */
html, body, #quizzie { margin: 0; padding: 0; width: 100%; height: 100%;
}
* { box-sizing: border-box;
}
body { background: #336699; color: #fff;
}
h1 { font-family: 'Satisfy', 'cursive'; font-size: 2.5em;
}
h2, p { font-family: 'Pathway Gothic One', 'sans-serif'; font-size: 2em;
}
h1, h2, p { text-align: center; display: block; width: auto; margin: 1%;
}
#quizzie { padding: 5% 0; /* Individual Steps/Sections */ /* Content */
}
#quizzie ul { list-style: none; display: block; width: auto; margin: 2% 2%; padding: 2%; overflow: auto; display: none; /* Step Questions and Answer Options */
}
#quizzie ul.current { display: block;
}
#quizzie ul li { display: inline-block; float: left; width: 49%; margin-right: 2%; 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;
}

"What Are You?" Quiz - Script Codes JS Codes

var resultOptions = [ { title: 'You should be a Software Dev!', desc: '<p>These are tools for making other tools! Software is huge and slick and complicated. Hope youre prepared to keep updating this for months or years. The work is very focused and youll spend a lot of time staring at your computer screen.' }, { title: 'You should be a Backend Dev!', desc: '<p>Backend Development involves setting up databases and figuring out how to best manipulate your data to create websites and applications.</p>' }, { title: 'You should be a Frontend Dev!', desc: '<p>Frontend Developers work with Javascript, HTML, and CSS to make the wireframe created by the backend developers palettable to human eyes and hands. Its similar to UX/UI.</p>' }, { title: 'You Should Be a UX Designer!', desc: '<p>Developers dont like making interfaces. You do. Take their (probably ugly) output and make something that users will not only use, but will WANT to use.</p>' }, { title: 'You should be a PM!', desc: '<p>Theres not a lot of actual coding, so youll need to know more theory than skills. For large projects, though, youre incredibly important because youll be organizing the code monkeys (developers) and ensuring on-time delivery. You focus on the big picture but keep your eye on the deadlines. Youre good at nuturing relationships with clients.</p>' }
];
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(1)) { break; } minScore += lowestScoreArray[i] << 0; } window.CP.exitedLoop(1); 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(2)) { break; } maxScore += highestScoreArray[i] << 0; } window.CP.exitedLoop(2); var range = maxScore - minScore, numResults = resultOptions.length, interval = range / (numResults - 1), increment = '', n = 0; while (n < numResults) { 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++; } } }
}
"What Are You?" Quiz - Script Codes
"What Are You?" Quiz - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 3.5
Size 4,030 Kb
Views 10,120
Do you need developer help for "What Are You?" Quiz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boyd Massie (massiebn) Script Codes
Name
Round-A-Bout Image Showcase
Background Video
Countdown Timer
QuickFlip
Page Peel
Fancy Image Showcase With Timer Bar
Drag and Drop Images
Image Hover
JQuery Quiz
Advanced JQuery Carousel
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!