Make Your Own PHP Quiz (part 3)

 PHP  Add comments
Mar 292009
 

You can download the entire source code for this series here PHP Quiz (10.88 kB)

Now that we’ve thought of some questions/answers and created ‘questionsandanswers.php’, it’s time to create the basic html pages. The quiz consists of three pages, ‘index.php’, ‘test.php’ and ‘results.php’. The first two, ‘index’ and ‘test’ are very similar so we’ll start with those.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>The Web Acronym Test</title>
</head>
<body id="splash">
<div id="wrapper">
<div id="intro">
<h1>Take the test and see how well you know your web acronyms</h1>
<p>Each acronym has 4 possible answers. Choose the answer you think is correct and click <strong>'Submit Answer'</strong>. You'll then be given the next acronym.</p>
<p>There are 20 acronyms, so let's get cracking! You'll get your score at the end of the test. It's just like facebook (honest!).</p>
<div id="leaderboard">
<h2>Top 10 Scorers</h2>
</div><!-- leaderboard-->
</div><!--intro-->
<div id="quiz">
<h2>Start The Test</h2>
<p>If featuring on the Score Board is of absolutely no interest to you,</p>
<form id="jttt" method="post" action="test.php">
<p><input type="submit" value="Just Take The Test" /></p>
</form>
<form id="questionBox" method="post" action="test.php">
<p>If you want to be placed on the 'Top Scorers' list, please enter a username below.</p>
<ul>
<li><label for="username">Create A Username:</label><br />
<input type="text" id="username" name="username" value="Username" />
<p id="exp">Username must be between 3 and 10 characters in length</p></li>
</ul>
<p><input type="hidden" name="register" value="TRUE" />
<input type="submit" id="submit" value="Register And Take The Test" /></p>
</form>
<p id="helper"></p>
</div><!--quiz-->
</div><!--wrapper-->
</body>
</html>

test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>The Web Acronym Test</title>
</head>
<body>
<div id="wrapper">
<div id="intro">
<h1>Take the test and see how well you know your web acronyms</h1>
<p>Each acronym has 4 possible answers. Choose the answer you think is correct and click <strong>'Submit Answer'</strong>. You'll then be given the next acronym.</p>
<p>There are 20 acronyms, so let's get cracking! You'll get your score at the end of the test. It's just like facebook (honest!).</p>
</div><!--intro-->
<div id="quiz">
<h2>Acronym :</h2>
<p>What does  stand for?</p>
<form id="questionBox" method="post" action="test.php">
<ul>
</ul>
<p><input type="hidden" name="num" value="" />
<input type="hidden" name="submitter" value="TRUE" />
<input type="submit" id="submit" name="submit" value="Submit Answer" /></p>
</form>
</div><!--quiz-->
</div><!--wrapper-->
</body>
</html>

The only real difference between them is that ‘index.php’ has a #leaderboard div and registration forms inside the #quiz div. They both link to the same css file ‘style.css’. It might be better if you create your own stylesheet as the one I created is, to be blunt, a mess! However, for the sake of completeness, I’ll post it here as it contains all the css for the quiz and saves you messing about.

style.css

* {
    margin:0;
    padding:0;
}
body {
    font-size: 62.5%;
    font-family:sans-serif;
    background:#c9e1ef;
}
#wrapper {
    width:850px;
    text-align:left;
    background:#fff;
    height:350px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-175px;
    margin-left:-425px;
}
#wrapresult {
    width:800px;
    margin:0 auto;
    background:#fff;
    padding-top:20px;
    text-align:left;
}
#intro {
    width:550px;
    float:right;
    padding:0 15px 0 10px;
    height:270px;
    border-left:1px dashed #ccc;
    margin-top:15px;
}
a img {
    border:none;
}
#leaderboard ul.leaders {
    width:30%;
    padding-left:5%;
    float:left;
}
#leaderboard h2 { color:#017dc7; padding-left:10px;}
#leaderboard li { margin-top:0;}
#intro p {
font-size:1.4em;
padding:5px 15px 15px 15px;
}
#intro ul li strong { color:#017dc7;}
#quiz {
width:250px;
float:left;
padding-top:15px;
padding-left:15px;
}
#quiz h2 { margin-bottom:10px;}
#quiz #jttt { margin:5px 0;}
#quiz p { font-size:1.5em; color:#017dc7;}
#splash #quiz p { font-size:1.3em;}
#quiz p#exp {
font-size:0.8em;
color:#df0d0d;
margin-top:5px;
}
#quiz #helper {
color:#df0d0d;
margin-top:5px;
}
p#compare {text-align:center; margin-top:10px;}
p#compare a:hover { text-decoration:underline;}
#quiz h4 { text-align:center; font-size:1.3em;}
#questionBox { border-top:1px dashed #ccc;}
#splash #questionBox { padding-top:10px;}
#resultpage #quiz { width:540px;}
#resultpage #intro { width:200px;height:auto;}
#resultpage #quiz h4 { text-align:left;}
.qanda {
margin-bottom:10px;
width:250px;
padding:0 10px;
float:left;
}
.qanda h4 { color:#017dc7; font-size:1.2em;}
#quiz li.correct { color:#0ccf27;}
#quiz li.correctuser { color:#0ccf27;}
#quiz li.wrong { color:#df0d0d;}
#intro h4 {
color:#017dc7;
font-size:1.4em;
padding-left:15px;
}
p#verdict { text-align:center; }
p#verdict span { font-size:2em; color:#df0d0d;}
h1 { padding-left:10px; }
h1,h2 { font-size:1.7em; font-family:serif;}
h2#score { text-align:center; }
#resultpage h2,#resultpage h1 span { color:#017dc7; }
#splash h2 { margin-bottom:10px; }
#splash form ul li { border-bottom:none; }
h3 {
color:#df0d0d;
font-size:5em;
margin-top:10px;
text-align:center;
}
ol { font-size:1.2em;}
ul { list-style:none; margin-bottom:5px;}
ul li {
font-size:1.4em;
margin-top:10px;
padding:5px;
border-bottom:1px dashed #ccc;
}
a { color:#017dc7; text-decoration:none;}
.clear { clear:both; }
#footer { text-align:center; padding:10px;}
#footer li { display:inline; border-bottom:none;}

I think that’s enough ‘copy and pasting’ for anybody! One final thing to do before part 3 is over and that’s to include ‘questionsandanswers.php’ and ‘functions.php’ into our pages. Right at the top of ‘index.php’, put this:

<?php
require_once('functions.php');
?>

and at the top of ‘test.php’, put this:

<?php
require_once('functions.php');
require_once('questionsandanswers.php');
?>

Note that for this example, all of the files are in the same folder at the same level i.e. no nested folders. As there are only 9 files in total, it’s not really a problem but for anything more complex, you should really have a ‘css’ folder, an ‘includes’ folder etc to keep your files organised. OK, part 3 is over.

Part 1
  • Part 2
  • Part 4
  • Part 5
  • Part 6
  • Final Part

    • Similar Posts:

    Posted by ElanMan at 10:57 pm  Tagged with: , , , , , , , , , ,

      3 Responses to “Make Your Own PHP Quiz (part 3)”

    1. mug says:
      March 30, 2009 at 8:31 am

      really nice quiz…
      I just scanned through the 3rd page …
      and didn’t see any results.php code
      have you posed it or are you going to post it is there a link…? somewhere..
      sorry for questions …
      I’ve been searching for a quiz template and your is by far the best .. but just want to know if it’s all there so I can start tweeking…

      thx in advance

    2. ElanMan says:
      March 30, 2009 at 8:45 am

      Hi mug, thanks for your comment!
      I decided to leave the results page for now. As the bulk of the php is to do with ‘test.php’, I thought I’d concentrate on that first. However, as you’ve requested it, I’ll post the html for ‘results.php’ in part 4 so you can have a tweek :)

    3. mug says:
      March 31, 2009 at 11:41 am

      thx so much…

       
    © 2012 ElanManSuffusion theme by Sayontan Sinha

    Page optimized by WP Minify WordPress Plugin