PHP quiz with on screen results

Question

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.

I would like to display the questions again.
Also, with the chosen answer and the correct answer. echo the answer, not the letter A,B,C,D.

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.

You'll have to find a way to incorporate the functions in `grade.php` in `index.php` quiz file and set the form action as `$_SERVER['PHP_SELF'];`, and/or setup an `include file` somewhere in there (in a DIV perhaps) with the quiz questions. Other than that, it'll call for some pretty fancy coding. I probably could pull it off, but that'll take me some time. Good question though. — Funk Forty Niner, Mar 18 '13 at 17:08

Gilly · Accepted Answer · 2013-03-18T17:53:37.033

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.

Thanks Gillian, works well. Change form action from `grade.php` to `` "C B" — Funk Forty Niner, Mar 18 '13 at 18:06
Gillian, that is an awesome solution. I did take Fred's advise and it worked great. I'm curious about a section. With the if else, it returns the incorrect in red. Can it be made to return the correct answer as well (black or green doesn't matter)? — C B, Mar 18 '13 at 21:49
Within that foreach, the right answer is stored in $Value['CorrectAnswer']. And the provided answer by the user is stored in $Answers[$QuestionNo]. Thanks — Gilly, Mar 19 '13 at 08:18
Isn't it confusing when using uppercase to name vars and arrays? — Kard Nails, Jan 31 '15 at 08:44
@KardNails You're right. It can be confusing. I guess I was a bit of a newbie 2 years ago :) — Gilly, Feb 04 '15 at 16:31

score 2 · Answer 2 · answered Mar 18 '13 at 16:43

The basic structure would be something like

if ($answer1 == "B") { 
   $totalCorrect++;
} else {
   $wronganswers[] = "You got #1 wrong. correct answer is B / ...text_of_answer_here ";
}

...

if ($totalCorrect != $number_of_questions) {
    echo implode($wronganswers);
}

Izzy · Answer 3 · 2013-03-18T16:52:14.977

Here's a simple rule of thumb* when it comes to webpages:

html - content

css - styling

javascript - behaviour

Just wack some really simple JS in there instead of just $totalcorrect and it should update in real-time.

PHP is server sided and only runs once on the server (and outputs your webpage to the client). JS is client sided and will run for as long as you tell it to* on the client.

(*General jist, not exactly 100% correct, but functional)

EDIT: If you're following a PHP Tutorial this wouldn't help

score 0 · Answer 4 · answered Mar 03 '17 at 17:06

Try this: i edited the code of Gillian lo wong. i added a score at the end and also display your wrong answer.

<?php 

    $Questions = array(
        1 => array(
            'Question' => '1. CSS stands for',
            'Answers' => array(
                'A' => 'Computer Styled Sections',
                'B' => 'Cascading Style Sheets',
                'C' => 'Crazy Solid Shapes'
            ),
            'CorrectAnswer' => 'B'
        ),
        2 => array(
            'Question' => '2. What is the Capital of the Philippines',
            'Answers' => array(
                'A' => 'Cebu City',
                'B' => 'Davao City',
                'C' => 'Manila City'
            ),
            '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 'You answered: <span style="color: red;">'.$Value['Answers'][$Answers[$QuestionNo]].'</span><br>'; // Replace style with a class
                 echo 'Correct answer: <span style="color: green;">'.$Value['Answers'][$Value['CorrectAnswer']].'</span>';
            } else {
                echo 'Correct answer: <span style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</span><br>'; // Replace style with a class
                echo 'You are correct: <span style="color: green;">'.$Value['Answers'][$Answers[$QuestionNo]].'</span>'; $counter++;

            }

            echo '<br /><hr>'; 
                                    if ($counter=="") 
                                    { 
                                    $counter='0';
                                    $results = "Your score: $counter/2"; 
                                    }
                                    else 
                                    { 
                                    $results = "Your score: $counter/2"; 
                                    }
                }                           echo $results;
    } else {  
    ?>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="quiz">
        <?php foreach ($Questions as $QuestionNo => $Value){ ?>

            <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 } ?>

        <?php } ?>
        <input type="submit" value="Submit Quiz" />
        </form>
    <?php 
    }
    ?>

PHP quiz with on screen results

4 Answers4

Linked