Michal Patriak Michal Patriak - 7 months ago 14
PHP Question

How to display correct answer in different color than the rest?

I am working on a quiz building application that will let a user enter a quiz question with four possible answers. They must select which answer will be correct with a radio button. I then need to display the answers in a random order with the correct one being a different color than the rest. Currently I able to display the answers in a random order, but I don't know how to make the answer that was selected with a radio button a different color. Here is what it looks like...

enter image description here

And this is the result page...

enter image description here

As you can see, the results are displayed in random order, which is what I want. How can I change the color of "Albany" on the result page to show that it is the correct answer?

Here is my form code....

<form style="text-align:center" action="QuestionReview.php" method="POST">

<br>
<label class="instructions" for="question" >Enter your question here</label><br>
<textarea name="question" rows="5" cols="40"></textarea>
<br><br>
<p class="instructions">
Please provide four answers to your question and select the
correct one.
</p>
<input type="radio" name="selection" value="answerA">
<input type="text" name="answer[]" style="width:400px">
<br><br>
<input type="radio" name="selection" value="answerB">
<input type="text" name="answer[]" style="width:400px">
<br><br>
<input type="radio" name="selection" value="answerC">
<input type="text" name="answer[]" style="width:400px">
<br><br>
<input type="radio" name="selection" value="answerD">
<input type="text" name="answer[]" style="width:400px">
<br><br>
<input type="submit" value="Submit Entry">
</form>


And here is the result page.....

<?php
// Retrieve the question and answers from the HTML form
$question = $_POST['question'];
$answers = $_POST['answer'];
$selection = $_POST['selection'];
shuffle($answers);

?>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Entry Review</title>
<style>
.instructions {
color: #696D6E;
}
</style>
</head>
<body>
<h1 class="instructions">Entry Review</h1>
<p><em>You entered the following question:</em></p>
<p><strong><?php echo $question; ?></strong></p><br>

<p><em>These are the answers you provided:</em>
<p>
<strong>
<?php
foreach($answers as $value) {
echo $value . '<br>';
}
?>
</strong>
</p>
</body>
</html>

Answer

You could wrap each answer in <div>-s and add style to them only if they were selected.

It is a good idea to change input field names in your form from selection and answer[] to answer[selected] and answer[body] respectively. This allows you to group together the body and the correctness indicator of an answer. Now you can modify your foreach in the following way:

<?php
  foreach($answers as $answer){
    // Print div with style, if this answer is correct
    $answer['selected'] ? print '<div style="color:green;">' : print '<div>';
    echo $answer['body']
    echo '</div>'
  }
?>

Form

<input type="radio" name="answer[0][selected]" value="true">
    <input type="text" name="answer[0][body]" style="width:400px">
    <br><br>
<input type="radio" name="answer[1][selected]" value="true">
    <input type="text" name="answer[1][body]" style="width:400px">
    <br><br>
<input type="radio" name="answer[2][selected]" value="true">
    <input type="text" name="answer[2][body]" style="width:400px">
    <br><br>
<input type="radio" name="answer[3][selected]" value="true">
    <input type="text" name="answer[3][body]" style="width:400px">
    <br><br>

PHP Code

<?php
  // Retrieve the question and answers from the HTML form
  $question = $_POST['question'];
  $answers = $_POST['answer'];

  shuffle($answers);
?>

// . . .

<?php
  foreach($answers as $answer){
    // Print div with style, if this answer is correct
    $answer['selected'] ? print '<div style="color:green;">' : print '<div>';
    echo $answer['body']
    echo '</div>'
  }
?>

P.S
Make sure to escape the user passed data before you use it!