Creating Databases for Web Applications My addition to states caps quiz. Complete and show regular expressions Classwork/Homework: Complete your quiz. Study php and MySQL and regular expressions using Sources
Recap A html file can invoke a php file using action attribute in form OR hyperlink with query string. The php file creates html. A multi-purpose php file can create html, including a form, that invokes itself Also called self-referential script
Recap: coding A php script can contain html. The php starts with <?php and ends with ?>. Can go into and out of php, including bracketing. A string in php can contain a variable Remember all variable names start with $ Double and single quotes can be used in php strings (ignore slant of quotes) “<a href=‘handler.php’>Go to handler </a>”
Addition Wanted to add smile face or frown face depending on checking. Decided to give script a new name: statecapquizcheckPictures.php SO that meant I needed to change the other script, also statecapquizaskPictures.php Needed to make the additions and change all the file names.
StatecapquizcheckPictures.php What are the insertions? print("<br> <img src=\"smile.gif\" /><br> "); print("<br> <img src=\”frown.gif\" /><br> "); But each one needs to go in 2 places: once for answering the state correct or wrong and the other for answering the capital correct or wrong…
if ($capital == $correctcapital) { print("Correct! $correctcapital is the capital of $correctstate!"); print("<br> <img src=\"smile.gif\" /> <br> "); print("<p><a href='statecapquizaskPictures.php'>Play again </a>"); } Notice the \" This escapes quotation mark, meaning it will be treated as a symbol and not interpreted as special syntax. Note also the <br> This is a html line break tag, so I put in one before and after the image tag.
Recap Both the ask and the check scripts (with or without the addition of images, that is, img tags to the printed html) are multi-purpose. Each has if and else clauses within if and else clauses. Show each script (two ways)
<!DOCTYPE html> <html> <head> <title>State capital quiz: ask</title> </head> <body> <h1>State Capital Quiz </h1><p> All this is html and so gets stored to be sent back to browser. But the next line is the delimiter for php
<?php $saywhich=@$_GET['saywhich']; if ($saywhich){ when this is false, control … if ($which=='state') { } else { … } else { …. When there is NOT a saywhich input, and $saywhich, therefore, is interpreted as false, and so the if test fails, the ELSE clause taken is the second else clause. Guess what that does? It generates the html that ASKS the player what type of question.
Second else clause else { print("Choose form of question: do you want to be given the state or the capital?<br>"); print("<form action='statecapquizask.php' method='get'>\n"); print("Ask <input type='radio' name='which' value='state'>State"); print(" <input type='radio' name='which' value='capital'>Capital\n"); print("<input type='hidden' name='saywhich' value='true'>\n"); print("<input type='submit' value='Submit choice'>"); print("</form>"); } The html produced by this php is the first thing a player sees.
What if saywhich was set? include("statecapitals.php"); $which=$_GET['which']; $choice=rand(0, sizeOf($states)-1); if ($which=='state') { $state = $states[$choice]; print("What is the capital of $state?<br>"); print("<form action='statecapquizcheck.php' method='get'>\n"); print("<input type='text' name='capital'><br>\n"); print("<input type='hidden' name='which' value=$which>\n"); print("<input type='hidden' name='choice' value=$choice>\n"); print("<input type='submit' value='Submit Answer'>"); print("</form>\n"); } The first part is what is produced when the player picks on state
First else clause. Player did NOT choose state else { $capital = $capitals[$choice]; print("$capital is the capital of which state?<br>"); print("<form action='statecapquizcheck.php' method='get'>\n"); print("<input type='text' name='state'><br>\n"); print("<input type='hidden' name='which' value=$which>\n"); print("<input type='hidden' name='choice' value=$choice>\n"); print("<input type='submit' value='Submit Answer'>"); print("</form>\n"); } The html produced here is what is displayed when player chooses capital
Now… Show the check script, with the addition, Squeezing into 2 charts
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>State capitals quiz: check</title></head> <body><h1>State Capital Quiz</h1><p> <?php include('statecapitals.php'); $choice=$_GET['choice']; $state=@$_GET['state']; $capital=@$_GET['capital']; $which=$_GET['which']; $correctstate=$states[$choice]; $correctcapital=$capitals[$choice]; if ($which=='state') { if ($capital == $correctcapital) { print("Correct! $correctcapital is the capital of $correctstate!"); print("<br> <img src=\"smile.gif\" /> <br> "); print("<p><a href='statecapquizaskPictures.php'>Play again </a>"); } else { print("WRONG!<p>\n"); print("<br> <img src=\"frown.gif\" /> <br> "); print("<a href='statecapquizaskPictures.php'>New turn </a><p>\n"); print("OR try again: What is the capital of $correctstate?<br>"); print("<form action='statecapquizcheckPictures.php' method='get'>\n"); print("<input type='text' name='capital'><br>\n"); print("<input type='hidden' name='state' value=$state>\n"); print("<input type='hidden' name='which' value=$which>\n"); print("<input type='hidden' name='choice' value=$choice>\n"); print("<input type='submit' value='Submit Answer'>"); print("</form>\n"); } }
print("Correct! The capital of $correctstate is $correctcapital!"); else { if ($state == $correctstate) { print("Correct! The capital of $correctstate is $correctcapital!"); print("<br> <img src=\"smile.gif\" /> <br> "); $saywhich='false'; print("<p><a href='statecapquizaskPictures.php'>Play again </a>"); } else { print("WRONG!<p>\n"); print("<br> <img src=\"frown.gif\" /> <br> "); print("<a href='statecapquizaskPictures.php'>New turn </a><p>\n"); print("OR try again: $correctcapital is the capital of what state?<br>"); print("<form action='statecapquizcheckPictures.php' method='get'>\n"); print("<input type='text' name='state'><br>\n"); print("<input type='hidden' name='capital' value=$capital>\n"); print("<input type='hidden' name='which' value=$which>\n"); print("<input type='hidden' name='choice' value=$choice>\n"); print("<input type='submit' value='Submit Answer'>"); print("</form>\n"); } } ?> </body></html>
Repeat 4 additions to insert the HTML img tags 6 changes to go to the Pictures files. Notice all the hidden form input elements. This probably is a situation when the POST method would be preferable!!!! I use the query for instructional purposes.
Various examples See http://faculty.purchase.edu/jeanine.meyer/db/examples.html Try (somewhat) more complicated quiz
Issues Adding images is nice. Change method to post from get Adding the html to include images… Change method to post from get Get can be helpful during debugging What about default values? Extra credit opportunity for how to prevent BROWSER from showing previous values. Don’t make your own extra credit post unless you have something to add.
Classwork / Homework Complete and show quizzes Complete and show regular expression homework