How do I do event handling in php with html?
- by TheAmazingKnight
I am constructing a simple quiz using html and php. The problem I'm having is that I'm not sure how to do event handlers since it's my first time doing php. Simply, the user click on Take Quiz and it brings up the quiz, then submit the quiz using the same page and show score results. The quiz was written in HTML as shown below:
HTML CODE:
<section>
<h1 id="theme"><span class="initial">Q</span>uiz</h1>
<div id="message">Why not go ahead and take the quiz to test your knowledge based on what you've learned in Smartphone Photography.
There are only 5 questions surrounding the content of this site. Good Luck! :)
<br/>
<button type="button" name="name" onclick="takeQuiz()">Take Quiz!</button>
</div>
</section>
</div>
<form action="grade.php" method="post" id="quiz">
<!--Question 1-->
<h3>1. How many percent of modern camera phones use CMOS?</h3>
<div>
<input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
<label for="question-1-answers-A">A) 20%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
<label for="question-1-answers-B">B) 80%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
<label for="question-1-answers-C">C) 50%</label>
<br/>
<input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
<label for="question-1-answers-D">D) 90%</label>
</div>
<!--Question 2-->
<h3>2. Which type of camera setting(s) is best for greater control and flexibility in terms of focusing on a subject?</h3>
<div>
<input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
<label for="question-2-answers-A">A) Manual Focus</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
<label for="question-2-answers-B">B) Auto Focus</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
<label for="question-2-answers-C">C) Both A and B</label>
<br/>
<input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
<label for="question-2-answers-D">D) Neither</label>
</div>
<!--Question 3-->
<h3>3. What are the three properties included in an exposure triangle?</h3>
<div>
<input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
<label for="question-3-answers-A">A) White Balance, ISO, Low Light</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
<label for="question-3-answers-B">B) Shutter Speed, Exposure, ISO</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
<label for="question-3-answers-C">C) Aperture, ISO, Exposure</label>
<br/>
<input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
<label for="question-3-answers-D">D) ISO, Aperture, Shutter Speed</label>
</div>
<!--Question 4-->
<h3>4. The higher the ISO, the more noise it produces in an image.</h3>
<div>
<input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
<label for="question-4-answers-A">A) True</label>
<br/>
<input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
<label for="question-4-answers-B">B) False</label>
</div>
<!--Question 5-->
<h3>5. What is the name of the smartphone you've seen all over this site?</h3>
<div>
<input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
<label for="question-5-answers-A">A) Nokia Pureview 808</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
<label for="question-5-answers-B">B) Nokia Lumia 1020</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
<label for="question-5-answers-C">C) Nokia Lumia 925</label>
<br/>
<input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
<label for="question-5-answers-D">D) Nokia Lumia 920</label>
</div>
<input type="submit" value="Submit Quiz" />
</form>
Then I have a php file named grade.php which will print the results of the quiz grade.
PHP CODE:
<?php
// create variables linking the questions' answers from the form
$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;
// Set up if-statements and determine the correct answers to be POSTed
if($answer1 == "D")
{
$totalCorrect++;
}
if($answer2 == "A")
{
$totalCorrect++;
}
if($answer3 == "D")
{
$totalCorrect++;
}
if($answer4 == "A")
{
$totalCorrect++;
}
if($answer5 == "B")
{
$totalCorrect++;
}
//display the results
echo "<div id='results'>$totalCorrect / 5 correct</div>";
?>
