In 2013-2014, I had a series of client projects where I needed to build a quiz in PHP.
Taking what I learned from that, I designed a quiz of my own, where you answer multiple choice questions and determine what heavy metal band your personality resembles.
The subject matter can be changed to whatever your own needs are. The focus of this tutorial is to show how to build this particular quiz and explain how the logic works.
First, let me show you the finished quiz. Go ahead — try it out.
The Concept
This quiz consists of three PHP rendered pages: an intro screen, the quiz page, and a page that tallies the score and serves up the appropriate result. We will call these three files index, test, and grade. We actually only need the Test and Grade files — the Index file is just there to tell people what the quiz is.
This quiz was built to be embedded. The client projects I built from this original concept were also modified further to be responsive. (Thanks to some special developer magic on the destination site.) These “quizzes” were special ad placements for three well-known global brands that appeared on EW.com.
The Test page only shows one question screen at a time, but the real height of the page is greater than what is visible. You can make the Test page a single visible page with all the questions visible with a few small adjustments.
The basic idea is there are four possible outcomes. Each of these outcomes has a “scorecard” that starts at zero and clicking certain answers will add points to certain scorecards. When we get to the Grade screen, the scores are compared, and the outcome with the highest point total is shown. A call to action button asking users if they to play again links back to the Test screen, where the process starts over.
Implementing the Code
Let’s build the index.php file first. Here we have a simple form that collects answers, and when the Submit button is clicked, takes you to the test.php screen. The whole quiz screen is 600 by 450 pixels. There is a CSS folder and Images folder in the same folder as the PHP files.
The body is relatively positioned to stay centered, and many of the quiz elements are absolutely positioned. Your own variations on this may vary, so feel free to experiment.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>What Metal Band Are You? Quiz</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page-wrap">
<form id="start-quiz" method="post" action="test.php">
<div class="overlay index">
<div class="quiz-overlay"></div>
<h1 class="index-headline">What Metal Band Are You?</h1>
<p class="index-sell">This personality quiz will reveal which iconic metal band you resemble most.</p>
<input type="submit" id="submit" class="take-quiz-btn index-btn" value="Take The Quiz" />
</div>
</form>
</div>
</body>
</html>
/* CSS Part One */
* {
margin: 0;
padding: 0;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
width: 600px;
}
body {
background: #020305 url('../imgs/bg-texture.jpg') center center no-repeat;
color: #fff;
font-family: 'Droid Serif', Times, serif;
font-size: 14px;
max-width: 600px;
}
#page-wrap {
height: 450px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 600px;
}
h1 {
letter-spacing: 3px;
margin: 25px 0;
text-transform: uppercase;
}
.index-sell, .index-headline {
color: #1c2d37;
left: 100px;
margin: 0;
position: absolute;
text-align: center;
width: 400px;
}
.index-headline {
font-size: 36px;
height: 0;
letter-spacing: 1px;
text-shadow: 1px 1px 2px #fff;
top: 55px;
}
.index-sell {
font-size: 21px;
line-height: 28px;
text-transform: uppercase;
}
.index-sell { top: 155px; }
.transparent {
color: transparent;
display: none;
opacity: 0;
visibility: hidden;
}
.take-quiz-btn, .embed-btn, .close-btn {
-webkit-appearance: none;
border: none;
background: #28505e;
color: #f3f4ef;
cursor: pointer;
font-family: 'Droid Serif', Times, serif;
}
.take-quiz-btn, .close-btn {
background: #28505e;
font-size: 21px;
text-shadow: 1px 1px rgba(66,66,66,.666);
text-transform: uppercase;
}
.take-quiz-btn {
top: 267px;
width: 259px;
}
.index-btn {
height: 49px;
left: 168px;
padding: 9px 0 6px 0;
position: absolute;
top: 267px;
}
.quiz-overlay, .result {
height: 325px;
position: absolute;
width: 552px;
z-index: -1;
}
.index .quiz-overlay, .quiz-overlay {
background: rgba(226,255,246,.52) url(../imgs/horns-up.png);
background-size: cover;
}
.index .quiz-overlay {
left: 24px;
}
The Test Questions
Now the test.php file is loaded. Here, the test questions are wrapped in a form tag and the answers will be recorded for the grade.php file, then evaluated, and an outcome determined.
Each question is the height of the visible screen. When an answer (or any element with the .fwrd class) is clicked on, a jQuery script moves the screen height up to display the next question. Each of the answers are radio buttons, meaning there can only be one answer accepted for each question input. The labels for each radio button lay on top of the buttons themselves, and have the illusion of being clickable links or buttons. These form labels can be styled in any manner you wish with CSS.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>What Metal Band Are You? Quiz</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page-wrap">
<h1 class="transparent index-headline">Lockedown SEO: What Metal Band Are You?</h1>
<form action="grade.php" method="post" id="quiz">
<ul id="test-questions">
<li>
<div class="quiz-overlay"></div>
<h3>What do you enjoy watching on TV?</h3>
<div class="mtm">
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A" class="fwrd labela">a. Science Fiction movies</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B" class="fwrd labelb">b. CNN and MSNBC</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C" class="fwrd labelc">c. History Channel</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D" class="fwrd labeld">d. Fantasy movies, like <em>Lord of the Rings</em></label>
</div>
<p class="quiz-progress">1 of 5</p>
</li>
<li>
<div class="quiz-overlay"></div>
<h3>What’s your preferred method of travel?</h3>
<div class="mtm">
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A" class="fwrd labela">a. Riding a Harley Davidson</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B" class="fwrd labelb">b. Offroading in a 4 by 4</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C" class="fwrd labelc">c. Piloting my own plane</label>
</div>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D" class="fwrd labeld">d. Riding a horse across the countryside</label>
</div>
<p class="quiz-progress">2 of 5</p>
</li>
<li>
<div class="quiz-overlay"></div>
<h3>What’s your favorite piece of clothing that you wear?</h3>
<div class="mtm">
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A" class="fwrd labela">a. My leather jacket</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B" class="fwrd labelb">b. A dress shirt or nice pair of jeans</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C" class="fwrd labelc">c. My favorite concert T shirt</label>
</div>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D" class="fwrd labeld">d. Custom handmade clothing by a local artisan</label>
</div>
<p class="quiz-progress">3 of 5</p>
</li>
<li>
<div class="quiz-overlay"></div>
<h3>Out of these, what is your favorite type of music?</h3>
<div class="mtm">
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
<label for="question-4-answers-A" class="fwrd labela">a. Softer rock, like Fleetwood Mac or folk music</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
<label for="question-4-answers-B" class="fwrd labelb">b. Punk rock, like the Sex Pistols</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" />
<label for="question-4-answers-C" class="fwrd labelc">c. 70s hard rock and arena rock</label>
</div>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" />
<label for="question-4-answers-D" class="fwrd labeld">d. Classical music from the masters</label>
</div>
<p class="quiz-progress">4 of 5</p>
</li>
<li>
<div class="quiz-overlay"></div>
<h3>If you could meet anyone from history, who would you choose?</h3>
<div class="mtm">
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
<label for="question-5-answers-A" class="fwrd labela">a. Someone mythic, like Nostradamus or Rasputin</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
<label for="question-5-answers-B" class="fwrd labelb">b. A famous writer, like John Steinbeck</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
<label for="question-5-answers-C" class="fwrd labelc">c. A famous conquerer, like Alexander the Great</label>
</div>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
<label for="question-5-answers-D" class="fwrd labeld">d. One of the Egyptian Pharaoahs</label>
</div>
<p class="quiz-progress">5 of 5</p>
</li>
<li>
<div class="quiz-overlay"></div>
<h3 class="anticipate">Now it’s time to see your results...</h3>
<input type="submit" value="Submit Quiz" id="submit-quiz" />
</li>
</ul>
</form>
<div class="nomargin"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script>
(function($) {
var timeout= null;
var $mt = 0;
$("#quiz .fwrd").click(function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
$mt = $mt - 430;
$("#test-questions").css("margin-top", $mt);
}, 333);
});
}(jQuery))
</script>
</body>
</html>
/* CSS Part Two */
#quiz {
margin: 0 18px;
padding: 0 0 0 1px;
position: relative;
-webkit-transition: all linear .35s;
-moz-transition: all linear .35s;
-o-transition: all linear .35s;
-ms-transition: all linear .35s;
transition: all linear .35s;
}
#quiz .anticipate {
color: #1c2d37;
font-size: 32px;
line-height: 41px;
padding: 50px 0 0 0;
text-shadow: 1px 1px rgba(255,255,255,.666);
}
#start-quiz {
margin-top: 25px;
}
#quiz ul li div.quiz-overlay { margin: 0; }
#quiz ul {
list-style-type: none;
margin-top: 0;
}
#quiz h3 {
color: #222;
font-size: 22px;
font-weight: 400;
line-height: 32px;
margin: 0 0 1px 0;
min-height: 64px;
padding: 9px 50px 0;
text-align: center;
}
#quiz ul li {
height: 335px;
margin: 25px 0 95px 0;
max-height: 335px;
min-height: 335px;
}
#quiz ul li div {
color: #ebe9e6;
margin: 10px 0;
padding: 1px 0;
}
#quiz ul li div.mtm {
margin-top: 20px;
}
#quiz input {
opacity: 0;
vertical-align: middle;
width: 20px;
}
#quiz label, #quiz input#submit-quiz {
background-color: #1f4c5b;
cursor: pointer;
display: inline-block;
z-index: 99;
}
#quiz label {
height: 31px;
font-size: 13px;
line-height: 2.55em;
margin: 0 30px 0 0;
max-width: 476px;
min-width: 476px;
padding: 2px 0 4px 16px;
width: 476px;
}
#quiz input#submit-quiz {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #1f4c5b;
border: none;
color: #ebe9e6;
display: block;
font-family: 'Droid Serif', Times, serif;
font-size: 21px;
height: 74px;
margin: 43px auto 0;
opacity: 1;
width: 250px;
}
#quiz label, #quiz input[type=radio]:checked + label, #quiz input#submit-quiz, #replay, .take-quiz-btn {
-webkit-transition: all ease .11s;
-moz-transition: all ease .11s;
-o-transition: all ease .11s;
-ms-transition: all ease .11s;
transition: all ease .11s;
}
#quiz label:hover, #quiz input[type=radio]:checked + label, #quiz input#submit-quiz:hover, #replay:hover, .take-quiz-btn:hover {
background: #098636;
color: #fbfbfb;
}
#quiz .quiz-progress {
color: #ebe9e6;
font-size: 14px;
padding: 7px 30px 5px 0;
text-align: right;
text-shadow: 1px 1px #131313;
}
.nomargin { margin: 0;}
Many of the class names on this page are unused. What is necessary is the name attribute on each radio button. These must be present for the grading portion of the quiz to work.
The Submit Quiz button at the end takes us to the grading file, where the scores are assessed.
Grading The Answers, Choosing An Outcome
Next, we will build the grade.php. We had to think about how the scoring and outcomes would be determined before we build a test.php to gather those scores. Remember each outcome has its own score, which will be stored in the variables $totalA, $totalB, $totalC and $totalD.
There is a second set of variables, the $answer1 through $answer5 variables. These correspond to the answers for each question, which are
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>What Classic Metal Band Are You? Quiz Results</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page-wrap">
<h1 class="transparent index-headline" >Here’s What Metal Band You Are</h1>
<?php
$answer1 = $_POST['question-1-answers'];
$answer2 = $_POST['question-2-answers'];
$answer3 = $_POST['question-3-answers'];
$answer4 = $_POST['question-4-answers'];
$answer5 = $_POST['question-5-answers'];
$totalA = 0;
$totalB = 0;
$totalC = 0;
$totalD = 0;
if ($answer1 == "A") { $totalA = $totalA + 1.17; $totalD = $totalD + .06; }
if ($answer1 == "B") { $totalB = $totalB + 1.15; $totalC = $totalC + .05; }
if ($answer1 == "C") { $totalC = $totalC + 1.13; $totalA = $totalA + .05; }
if ($answer1 == "D") { $totalD = $totalD + 1.16; $totalA = $totalA + .07; }
if ($answer2 == "A") { $totalA = $totalA + 1.23; }
if ($answer2 == "B") { $totalB = $totalB + 1.15; }
if ($answer2 == "C") { $totalC = $totalC + 1.13; }
if ($answer2 == "D") { $totalD = $totalD + 1.16; }
if ($answer3 == "A") { $totalA = $totalA + 1.17; $totalC = $totalC + .05; }
if ($answer3 == "B") { $totalB = $totalB + 1.15; $totalC = $totalC + .03; }
if ($answer3 == "C") { $totalC = $totalC + 1.13; $totalB = $totalB + .07; }
if ($answer3 == "D") { $totalD = $totalD + 1.16; }
if ($answer4 == "A") { $totalA = $totalA + 1.17; }
if ($answer4 == "B") { $totalB = $totalB + 1.15; }
if ($answer4 == "C") { $totalC = $totalC + 1.13; $totalA = $totalA + .05; $totalB = $totalB + .06; $totalD = $totalD + .07; }
if ($answer4 == "D") { $totalD = $totalD + 1.16; $totalB = $totalB + .04; $totalA = $totalA + .045; $totalC = $totalC + .034; }
if ($answer5 == "A") { $totalA = $totalA + 1.17; $totalD = $totalD + .08; }
if ($answer5 == "B") { $totalB = $totalB + 1.15; }
if ($answer5 == "C") { $totalC = $totalC + 1.14; $totalA = $totalA + .06; $totalD = $totalD + .08; }
if ($answer5 == "D") { $totalD = $totalD + 1.16; $totalC = $totalC + .04; }
?>
One of the issue you will have to address in any quiz is how to score tie breakers. Since we have five questions on this quiz, we can end up with two outcomes with two votes apiece (Example: 2 “A” answers, 2 “C” answers, 1 “D” answer).
One way to solve this is to weigh all the outcomes slightly different. To clarify, if all of the outcome questions have the same amount of votes, there will be a predetermined pecking order, where one outcome always wins, and one outcome always loses. You could also make one particular question a tie-breaker, weighted heavier than the other questions.
Another way to solve this problem is to select certain questions, add full points for the “most correct” answer, and add small increments to the other scores for that answer. Because many of the questions I wrote related to more than one of the four outcomes, this is what I used for this particular quiz.
The downside to this solution is that you will have to experiment with how to weight the scores for each answer. I found very small fractions work best in this scenario. The more questions your quiz contains, the less feasible this is for a tie-breaker solution. The code above is what I went with for this quiz — you will have to adjust this for your own content.
The Outcomes
Below is the remainder of the grade.php file. For each outcome, the scores are being compared. For Outcome A to win, it must be greater than B, C, and D. If not, it goes to Outcome B, which must be greater than A, C, and D…and so on.
Whichever outcome scores highest is displayed. The HTML is output via an echo statement for each possible outcome.
<div class="results-overlay">
<?php
if ($totalA > $totalB && $totalA > $totalC && $totalA > $totalD) {
echo '<div class="quiz-overlay result priest"></div><div class="results-text"><p class="you-chose">You Scored:</p><img src="../imgs/priest.jpg" alt="Judas Priest" class="results-img" /><div class="results test-results2"><p class="score">Judas Priest</p><p class="score-details">Judas Priest brought heavy metal to a new level with the twin guitars of Glen Tipton and KK Downing and vocals of Rob Halford. Songs you should listen to: Sinner, Victim of Changes, The Ripper, Beyond The Realms of Death, Delivering The Goods, Breaking The Law, Solar Angels, The Sentinel, Painkiller, Nightcrawler, Burn In Hell, Hellrider, Judas Rising.</p><a id="replay" class="take-quiz-btn" href="/test.php">Play Again?</a></div>';
}
elseif ($totalB > $totalA && $totalB > $totalC && $totalB > $totalD) {
echo '<div class="quiz-overlay result megadeth"></div><div class="results-text"><p class="you-chose">You Scored:</p><img src="../imgs/megadeth.jpg" alt="Megadeth" class="results-img" /><div class="results test-results2"><p class="score">Megadeth</p><p class="score-details">After getting tossed from Metallica, guitarist/singer Dave Mustaine formed Megadeth with bassist Dave Ellefson, one of the iconic thrash metal bands. Songs to check out: Peace Sells (But Who’s Buying), In My Darkest Hour, Holy Wars, Hangar 18, Tornado Of Souls, High Speed Dirt, Sweating Bullets, Angry Again, Trust, Kill The King.</p><a id="replay" class="take-quiz-btn" href="/test.php">Play Again?</a></div>';
}
elseif ($totalC > $totalA && $totalC > $totalB && $totalC > $totalD) {
echo '<div class="quiz-overlay result maiden"></div><div class="results-text"><p class="you-chose">You Scored:</p><img src="../imgs/maiden.jpg" alt="Iron Maiden" class="results-img" /><div class="results test-results2"><p class="score">Iron Maiden</p><p class="score-details">Iron Maiden was one of the first bands to play with extreme speed and precision, and were forerunners of speed and thrash metal. Their mascot, Eddie, is another part of their appeal. Be aure to check out these songs: Running Free, Number of the Beast, The Prisoner, Run To The Hills, The Trooper, 2 Minutes To Midnight, Deja Vu, Fear Of The Dark.<p></p><a id="replay" class="take-quiz-btn" href="/test.php">Play Again</a></div>';
}
elseif ($totalD > $totalA && $totalD > $totalB && $totalD > $totalC) {
echo '<div class="quiz-overlay result dio"></div><div class="results-text"><p class="you-chose">You Scored:</p><img src="../imgs/rjd.jpg" alt="Ronnie James Dio" class="results-img" /><div class="results test-results2"><p class="score">Ronnie James Dio</p><p class="score-details">Ronnie James Dio possessed one of the most powerful voices in rock history. He sang for Rainbow and Black Sabbath before forming his own band, Dio. Noteworthy songs to check out include: Heaven and Hell, Neon Nights, The Mob Rules, Holy Diver, Rainbow in The Dark, Don’t Talk To Strangers, The Last In Line, I, The Devil Cried.</p><a id="replay" class="take-quiz-btn" href="test.php">Play Again</a></div>';
}
?>
</div>
</div>
/* CSS Part Three */
#replay {
display: block;
height: 46px;
line-height: 46px;
margin: 20px 0 0 0;
padding: 0;
text-align: center;
text-decoration: none;
}
.results-img {
border: 4px solid #ebe9e6;
left: -25px;
position: absolute;
top: 8px;
width: 208px;
}
.test-results2 {
color: #fff;
font-size: 15px;
line-height: 21px;
text-shadow: 1px 1px rgba(2,3,5,.666);
}
.test-results2 .score {
color: #678792;
font-size: 22px;
line-height: 30px;
margin-bottom: 4px;
text-transform: uppercase;
}
.results-overlay {
background-color: transparent;
margin: 42px 0 0 65px;
max-height: 325px;
position: relative;
width: 510px;
}
.results-overlay .quiz-overlay {
left: -41px;
top: -7px;
}
.results-text {
padding: 5px 35px 30px 215px;
}
.score-details {
font-size: 12px;
line-height: 19px;
}
.score-details-sm {
font-size: 12px;
line-height: 19px;
}
.result {
height: 325px;
}
.priest {
background: url(../imgs/priest-bg.jpg) no-repeat;
}
.megadeth {
background: url(../imgs/megadeth-bg.jpg) no-repeat;
}
.maiden {
background: url(../imgs/maiden-bg.jpg) no-repeat;
}
.dio {
background: url(../imgs/dio-bg.jpg) no-repeat;
}
At the end, there is a simple JavaScript modal that displays the embed code when the appropriate button at the top right of the screen is clicked. Note this is a button element made to resemble a text link.
<p class="embed"><button class="embed-btn" onclick="modalshow()">Embed This Quiz</button></p>
<div id="modalbg"></div>
<div id="modalwindow">
<p id="modalmsg">Copy the code below to embed it into your own website.</p>
<textarea class="c-p"><iframe src="http://metalquiz.lockedownseo.com/" height="450" width="600"></iframe></textarea>
<button class="close-btn" onclick="modalhide()">Close</button>
</div>
</body>
</html>
/* CSS Part Four */
.embed {
font-size: 14px;
position: absolute;
right: 26px;
text-shadow: 1px 1px #131313;
top: 8px;
}
#modalbg {
background: #333;
display: none;
height: 100%;
left: 0;
opacity: .4;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
#modalwindow {
background: rgba(255,255,255,.95);
border: 3px outset #ccc;
display: none;
height: 254px;
left: 25px;
padding: 32px;
position: absolute;
top: 35px;
width: 480px;
z-index:10;
}
#modalmsg {
color: #222;
text-align: center;
}
.embed-btn {
background-color: transparent;
font-size: 14px;
}
textarea.c-p {
display: block;
height: 50px;
margin: 25px auto;
width: 420px;
}
.close-btn {
display: block;
margin: 70px auto 0;
padding: 12px 24px;
}
Additional Notes
If you Right-Click > View Source on the actual iframe or subdomain where the quiz is located, you’ll notice most of the code is minified for the sake of speed. If you want to analyze the regular the source code for this project, be sure to take a look at the GitHub repo.
Much thanks to Chris Coyier and CSS-Tricks for giving me an idea of how to get this started.
I’d love to see some quizzes that you have put together yourselves. Post your links in the comments below!
