I am currently stuck at the answer page for about a week already, it's very depressing. How do I carry forward what the user have chosen and showed the correct answer in the worksheet/question page, when I click "Review Your Answers" button.
Here's my question page:
<!DOCTYPE html>
<head>
<title> English Kaki </title>
<link rel="stylesheet" href="bootstrap.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "Main.css">
</head>
<body>
<?php include_once"Header.php" ?>
<div class="container-fluid">
<div class="container">
<center><font color ="#FF9900"><h1>Sentence Structure</h1></font>
<p>Be our buddy, construct with us.</p> </center>
</div>
<div class="col-md-12" style="background-color:#ECEBEB;">
<div class="row">
<div class="col-sm-2" style="background-color:#ECEBEB;">
</div>
<div class="col-sm-6" style="background-color:#ECEBEB;">
<?php
$id=isset($_GET['id'])? $_GET['id']: '';
$data= array(
'Gws1' =>array(
'Name' =>'Grammar Worksheet 1',
'Questions' =>'
<form action="SSresultPage.php?id=1" method="post">
<fieldset>
<ol>
<li>
<p>This is question 1 of Gws1 </p>
<ul id="Gws1_questions1_options">
<li><input id="Gws1_questions1_options" name="Gws1_questions1_options" type="radio" value="q1 option1" /><label>q1 option1</label></li>
<li><input id="Gws1_questions1_options" name="Gws1_questions1_options" type="radio" value="q1 option2" /><label>q1 option2</label></li>
<li><input id="Gws1_questions1_options" name="Gws1_questions1_options" type="radio" value="q1 option3" /><label>q1 option3</label></li>
<li><input id="Gws1_questions1_options" name="Gws1_questions1_options" type="radio" value="q1 option4" /><label>q1 option4</label></li>
</ul>
</li>
<br>
<li>
<p>This is question 2 of Gws1</p>
<ul id="Gws1_questions2_options">
<li><input id="Gws1_questions2_options" name="Gws1_questions2_options" type="radio" value="q2 option1" /><label>q2 option1</label></li>
<li><input id="Gws1_questions2_options" name="Gws1_questions2_options" type="radio" value="q2 option2" /><label>q2 option2</label></li>
<li><input id="Gws1_questions2_options" name="Gws1_questions2_options" type="radio" value="q2 option3" /><label>q2 option3</label></li>
</ul>
</li>
<br>
<li>
<p>This is question 3 of Gws1</p>
<ul id="Gws1_questions1_options">
<li><input id="Gws1_questions3_options" name="Gws1_questions3_options" type="radio" value="q3 option1" /><label>q3 option1</label></li>
<li><input id="Gws1_questions3_options" name="Gws1_questions3_options" type="radio" value="q3 option2" /><label>q3 option2</label></li>
<li><input id="Gws1_questions3_options" name="Gws1_questions3_options" type="radio" value="q3 option3" /><label>q3 option3</label></li>
</ul>
</li>
</ol>
</fieldset>
<input type="submit" value="Get Result"/>
</form>'
),
'Gws2' =>array(
'Name' =>'Grammar Worksheet 2',
'Questions' =>' <form action="SSresultPage.php?id=2" method="post">
<input type="submit" value="Get Result"/>
</form>'
),
'Gws3' =>array(
'Name' =>'Grammar Worksheet 3',
'Questions' =>' <form action="SSresultPage.php?id=3" method="post">
<input type="submit" value="Get Result"/>
</form>'
),
'Vws1' =>array(
'Name' =>'Vocabulary Worksheet 1',
'Questions' =>' <form action="SSresultPage.php?id=4" method="post">
<fieldset>
<ol>
<li>
<p>Excuse me, my meal is cold. Could you please ________ for me?</p>
<ul id="Vws1_questions1_options">
<li><input id="Vws1_questions1_options" name="Vws1_questions1_options" type="radio" value="q1 option1" /><label>make it warmer</label></li>
<li><input id="Vws1_questions1_options" name="Vws1_questions1_options" type="radio" value="q1 option2" /><label>warm it up</label></li>
</ul>
</li>
<br>
<li>
<p>The ________ in most high end restaurants is usually excellent.</p>
<ul id="Vws1_questions2_options">
<li><input id="Vws1_questions2_options" name="Vws1_questions2_options" type="radio" value="q2 option1" /><label>service</label></li>
<li><input id="Vws1_questions2_options" name="Vws1_questions2_options" type="radio" value="q2 option2" /><label>responsibility</label></li>
</ul>
</li>
<br>
<li>
<p>I felt very _____ after the buffet.</p>
<ul id="Vws1_questions3_options">
<li><input id="Vws1_questions3_options" name="Vws1_questions3_options" type="radio" value="q3 option1" /><label>complete</label></li>
<li><input id="Vws1_questions3_options" name="Vws1_questions3_options" type="radio" value="q3 option2" /><label>full</label></li>
</ul>
</li>
</ol>
</fieldset>
<input type="submit" value="Get Result"/>
</form>'
),
'Vws2' =>array(
'Name' =>'Vocabulary Worksheet 2',
'Questions' =>' <form action="SSresultPage.php?id=5" method="post">
<input type="submit" value="Get Result"/>
</form>'
),
'Vws3' =>array(
'Name' =>'Vocabulary Worksheet 3',
'Questions' =>' <form action="SSresultPage.php?id=6" method="post">
<input type="submit" value="Get Result"/>
</form>'
)
);
if(isset($id) || $id){
echo "<h2>{$data[$id]['Name']}</h2>";
echo "<h4>Please choose the best option to complete the sentence.</h4>{$data[$id]['Questions']}";
}
?>
</center>
</div>
</div>
</div>
</div>
<div class="col-sm-3" style="background-color:#ECEBEB;"></div>
</div>
<br><br>
<?php include_once"Footer.php" ?>
</body>
</html>
Here's my result page:
<!DOCTYPE html>
<head>
<title> English Kaki </title>
<link rel="stylesheet" href="bootstrap.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "Main.css">
</head>
<body>
<?php include_once"Header.php" ?>
<div class="container-fluid">
<div class="container">
<center><font color ="#FF9900"><h1>Sentence Structure</h1></font>
</div>
<div class="col-md-12" style="background-color:#ECEBEB;">
<center>
<?php
$fid = $_GET['id'];
if ($fid == 1){
if(!empty($_POST['Gws1_questions1_options']) && !empty($_POST['Gws1_questions2_options']) && !empty($_POST['Gws1_questions3_options'])){
$answer1 = $_POST['Gws1_questions1_options'] && $answer2 = $_POST['Gws1_questions2_options'] && $answer3 = $_POST['Gws1_questions3_options'];
$score =0;
if ($answer1 == "q1 option1"){$score++;}
if ($answer2 == "q2 option1"){$score++;}
if ($answer3 == "q3 option1"){$score++;}
echo "<h3>I'm proud of you for completing the worksheet!</h3>";
echo "<h2>Your score is $score/3</h2><br>";
echo "Review your answers and find out where you went wrong!<br><br>";
echo "<center><form action='SSanswerPage.php'>
<input type = 'submit' value = 'Review your answers' class='btn'/>
</form><center><br><br>";
}
else {
echo '<p><font color="red">You must answer all questions before you can get your result.</font></p>';
}}
elseif ($fid == 2){
echo"2";
}
elseif ($fid == 3){
echo"3";
}
elseif ($fid == 4){
$answer1 = $_POST['Vws1_questions1_options'];
$answer2 = $_POST['Vws1_questions2_options'];
$answer3 = $_POST['Vws1_questions3_options'];
$score =0;
if ($answer1 == "q1 option2"){$score++;}
if ($answer2 == "q2 option1"){$score++;}
if ($answer3 == "q3 option2"){$score++;}
echo "<h3>I'm proud of you for completing the worksheet!</h3>";
echo "<h2>Your score is $score/3</h2><br>";
echo "Review your answers and find out where you went wrong!<br><br>";
echo "<center><form action='SSanswerPage.php'>
<input type = 'submit' value = 'Review your answers' class='btn'/>
</form><center><br><br>";
}
elseif ($fid == 5){
echo"5";
}
elseif ($fid == 6){
echo"6";
}
?>
</center>
</div>
</div>
<div class="col-sm-3" style="background-color:#ECEBEB;"></div>
</div>
<br><br>
<?php include_once"Footer.php" ?>
</body>
</html>
Only Grammar Worksheet 1 have questions and can compute score for now.
Thank you in advance.
Let's say you have Q1, with possible answers A1,A2,A3. You know that the correct answer is Q2, and you see from $_POST['Q1'] == 'A3' that the user answered the wrong answer A3:
css:
.user {color:red}
.correct {color:blue}
.correct.user {color:green}
php:
function is_correct_class($correct_answer, $current_answer, $user_answer) {
$class = $correct_answer == $current_answer ? 'correct' : '';
$class .= $user_answer == $current_answer ? ' user' : '';
return $class;
}
<h2>Q1</h2>
<h3 class="<?php echo is_correct_class('A2', 'A1', $_POST['Q1']);?>;">A1</h3>
<h3 class="<?php echo is_correct_class('A2', 'A2', $_POST['Q1']);?>;">A2</h3>
<h3 class="<?php echo is_correct_class('A2', 'A3', $_POST['Q1']);?>;">A3</h3>