I am trying to create a simple quiz based on a tutorial I found. http://css-tricks.com/building-a-simple-quiz/
Unfortunately, this is making me spin my wheels and the answer is probably pretty simple.
I got this working perfectly. I would like to change the functionality. Instead of it counting the answers, I want it to do something else.
It seems silly to me to have a quiz and say you missed 2 and not show what questions were missed.
I'd prefer to avoid use of a database. It can be on screen, on a new screen or e-mailed. No preference. Any suggestions?
Here is the code from the above mentioned site:
<form action="grade.php" method="post" id="quiz">
<li>
<h3>CSS Stands for...</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) Computer Styled Sections </label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) Cascading Style Sheets</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) Crazy Solid Shapes</label>
</div>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) None of the above</label>
</div>
</li>
</form>
<input type="submit" value="Submit Quiz" />
Then the PHP script:
<?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'];
$totalCorrect = 0;
if ($answer1 == "B") { $totalCorrect++; }
if ($answer2 == "A") { $totalCorrect++; }
if ($answer3 == "C") { $totalCorrect++; }
if ($answer4 == "D") { $totalCorrect++; }
if ($answer5) { $totalCorrect++; }
echo "<div id='results'>$totalCorrect / 5 correct</div>";
?>
Any suggestions or links would be much appreciated. My Google skills are failing me. Everything I think to search for brings up irrelevant stuff.
To be able to echo the answer, and not the letter you need to store the question first. You don't need to use a database, you can just use an array.
If your going to use arrays, I'd suggest storing everything in an array. Since the structure of the html is just the same, this can save you so much time. You could just write a question once and implement it automatically throughout the script.
<?php
$Questions = array(
1 => array(
'Question' => 'CSS stands for',
'Answers' => array(
'A' => 'Computer Styled Sections',
'B' => 'Cascading Style Sheets',
'C' => 'Crazy Solid Shapes'
),
'CorrectAnswer' => 'A'
),
2 => array(
'Question' => 'Second question',
'Answers' => array(
'A' => 'First answer of Second question',
'B' => 'Second answer Second question',
'C' => 'Third answer Second question'
),
'CorrectAnswer' => 'C'
)
);
if (isset($_POST['answers'])){
$Answers = $_POST['answers']; // Get submitted answers.
// Now this is fun, automated question checking! ;)
foreach ($Questions as $QuestionNo => $Value){
// Echo the question
echo $Value['Question'].'<br />';
if ($Answers[$QuestionNo] != $Value['CorrectAnswer']){
echo '<span style="color: red;">'.$Value['Answers'][$Answers[$QuestionNo]].'</span>'; // Replace style with a class
} else {
echo '<span style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</span>'; // Replace style with a class
}
echo '<br /><hr>';
}
} else {
?>
<form action="grade.php" method="post" id="quiz">
<?php foreach ($Questions as $QuestionNo => $Value){ ?>
<li>
<h3><?php echo $Value['Question']; ?></h3>
<?php
foreach ($Value['Answers'] as $Letter => $Answer){
$Label = 'question-'.$QuestionNo.'-answers-'.$Letter;
?>
<div>
<input type="radio" name="answers[<?php echo $QuestionNo; ?>]" id="<?php echo $Label; ?>" value="<?php echo $Letter; ?>" />
<label for="<?php echo $Label; ?>"><?php echo $Letter; ?>) <?php echo $Answer; ?> </label>
</div>
<?php } ?>
</li>
<?php } ?>
<input type="submit" value="Submit Quiz" />
</form>
<?php
}
?>
The cool thing about this is that you don't need to add any HTML or anything if you want to add another question. Just add the question with its answers, the correct answer and it automatically works! By the way, this is one file, not 2. So it should submit to itself.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With