{"id":271,"date":"2011-05-10T22:18:31","date_gmt":"2011-05-11T03:18:31","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=271"},"modified":"2012-09-15T15:08:46","modified_gmt":"2012-09-15T20:08:46","slug":"quiz-template","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2011\/05\/10\/quiz-template\/","title":{"rendered":"Quiz template"},"content":{"rendered":"<p>This article explains how the Quiz Template works in great details. It can help you better understand the inner workings of this template and provide the guidance you need in designing your own. <\/p>\n<p><a href=\"http:\/\/demo.asprunner.net\/volinrok_yahoo_com\/Tests\/responses_add.php?testid=1\">Quiz template live demo<\/a><\/p>\n<p><a href=\"https:\/\/usd.swreg.org\/cgi-bin\/s.cgi?s=32557&#038;p=32557-3&#038;q=1&#038;v=0&#038;d=0\">Purchase Quiz template for $25<\/a>. <\/p>\n<p>Lets start with database design. In this tutorial we use MySQL database.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-299\" title=\"quiz_tables\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_tables.png\" alt=\"Quiz template database schema\" width=\"609\" height=\"464\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_tables.png 609w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_tables-300x228.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_tables-150x114.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_tables-400x304.png 400w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/p>\n<p><!--more--><\/p>\n<h3>Database schema<\/h3>\n<p><strong>Table:<\/strong> tests<\/p>\n<p>Stores test\/quiz names and description.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\nname &#8211; varchar(50)<br \/>\ndescription &#8211; varchar(512)<\/p>\n<p><strong>Table:<\/strong> questions<\/p>\n<p>Stores questions for each test. testid points to the parent test in tests table. asnswer_explained (optional) contains detailed answer to this question. The number of questions per test is unlimited.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\ntestid &#8211; int<br \/>\nquestion &#8211; varchar(255)<br \/>\nasnswer_explained &#8211; varchar(4000)<\/p>\n<p><strong>Table:<\/strong> answers<\/p>\n<p>Stores answer choices for each question. Each question can have as many answers as you want. <strong>correct<\/strong> field indicates if this is a correct answer.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\nquestionid &#8211; int<br \/>\ntext &#8211; varchar(512)<br \/>\ncorrect &#8211; tinyint<\/p>\n<p><strong>Table:<\/strong> responses<\/p>\n<p>This table contains actual responses. There might be more than one response per user to the same test.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\nuserid &#8211; int<br \/>\ntestid &#8211; int<br \/>\nscore &#8211; int<\/p>\n<p><strong>Table:<\/strong> response_details<\/p>\n<p>Related as Details to Responses. Stores response details for each question user answered (some question can be left unanswered).<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\nresponseid &#8211; int<br \/>\nquestionid\u00a0 &#8211; int<br \/>\nasnwerdid &#8211; int<\/p>\n<p><strong>Table:<\/strong> users<\/p>\n<p>This table stores users info like email and IP address. You may want to add more fields to this table, especially if you want users to register before taking the quiz.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\nemail &#8211; varchar(50)<br \/>\npassword &#8211; varchar(50)<br \/>\nip &#8211; varchar(20)<\/p>\n<p><strong>Table:<\/strong> messages<\/p>\n<p>On quiz results page you may want to show user a custom message like &#8220;Good job!&#8221; or &#8220;Needs more work&#8221;. Add your messages to this table and specify score range which triggers the message to be displayed. Messages are test specific.<\/p>\n<p><strong>Fields<\/strong><\/p>\n<p>id &#8211; int, primary key<br \/>\ntestid &#8211; int<br \/>\nmin &#8211; int<br \/>\nmax &#8211; int<br \/>\nmessage &#8211; varchar(1000)<\/p>\n<h3>Application setup<\/h3>\n<p>Quiz template utilizes a simple security model. There is one admin user (username: admin@test.com password: admin1) with access to all tables and data. Guest access is enabled and guests users are allowed to access Add page of Responses table. Users do not have to register in order to take the quiz.<\/p>\n<p>Most of application logic is stored in two events of Responses table Add page: BeforeProcess and BeforeDisplay.<\/p>\n<p><strong>BeforeProcess event<\/strong><\/p>\n<p>&#8211; get current user id. we use IP address lookup to find if such a user already exists. If IP address not found we create a new user.<br \/>\n&#8211; insert a record into responses table and get a responseid.<br \/>\n&#8211; insert one record per answer in response_details table.<br \/>\n&#8211; calculate score and save it in the database<\/p>\n<p><strong>BeforeDisplay event<\/strong><\/p>\n<p>This event is responsible for the visual representation of our quiz. As a first step we override default template file as we want to use our own (quiz.htm).<\/p>\n<p>This template requires three display modes:<\/p>\n<p>&#8211; Questions mode. Default mode.<br \/>\n&#8211; Results mode. Triggered by $_POST[&#8220;a&#8221;]==&#8221;save&#8221; condition.<br \/>\n&#8211; Questions and answers mode. Triggered by $_REQUEST[&#8220;showanswers&#8221;]==1 condition.<\/p>\n<p>As we said, this project also uses a custom HTML template &#8211; quiz.htm which provides a completely different look and feel than all standard PHPRunner pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-297\" title=\"quiz_appearance\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_appearance.png\" alt=\"Quiz template appearance\" width=\"720\" height=\"311\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_appearance.png 720w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_appearance-300x129.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_appearance-150x64.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_appearance-400x172.png 400w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>The template file is a regular HTML file stuffed with the template variables. For instance, here is the section that displays the quiz results:<\/p>\n<pre lang=\"html4strict\">{BEGIN results_block}\r\n\r\n\r\n<div class=\"results\">\r\n<strong>Score:<\/strong> {$right_answers} out of {$total_questions}\r\n<strong>Percentage:<\/strong> {$percentage}%<\/div>\r\n\r\n\u00a0\r\n\r\n<div class=\"message\">\r\n{$message}<\/div>\r\n\r\n\u00a0\r\n\r\n<div class=\"results\">\r\n<input class=\"button\" type=\"button\" value=\"Retry test\" \/>\r\n<input class=\"button\" type=\"button\" value=\"View answers\" \/><\/div>\r\n\r\n{END results_block}\r\n<\/pre>\n<p>Here is the code snippet that processes template variables:<\/p>\n<pre lang=\"php\">$xt->assign(\"results_block\", true);\r\n$xt->assign(\"questions_block\", false);\r\n$rs1 = CustomQuery(\"select message from messages where min<=\".$_SESSION[\"right_answers\"].\"  \t\r\n       and max>=\".$_SESSION[\"right_answers\"].\" and testid=\".$_SESSION[\"testid\"] );\r\n$data1 = db_fetch_array($rs1);\r\nif ($data1)\r\n\t$xt->assign(\"message\", $data1[\"message\"]);\r\n$xt->assign(\"right_answers\", $_SESSION[\"right_answers\"]);\r\n$xt->assign(\"total_questions\", $_SESSION[\"total_questions\"]);\r\n$xt->assign(\"percentage\", $_SESSION[\"percentage\"]);<\/pre>\n<p>Here is the HTML code generated by this template:<\/p>\n<pre lang=\"html4strict\"><div class=\"results\">\r\n<strong>Score:<\/strong> 0 out of 13\r\n<strong>Percentage:<\/strong> 0.0%<\/div>\r\n<div class=\"message\">\r\n<span style=\"font-weight: bold;\">Rank:<\/span> Student\r\n<\/div>\r\n<div class=\"results\">\r\n<input class=\"button\" onclick=\"window.location='responses_add.php?testid=1'\" type=\"button\" value=\"Retry test\" \/>\r\n<input class=\"button\" onclick=\"window.location='responses_add.php?testid=1&amp;showanswers=1'\" type=\"button\" value=\"View answers\" \/>\r\n<\/div><\/pre>\n<h3>Additional files<\/h3>\n<p>We are going to use a few additional files. You can find them in <strong>the source<\/strong> directory under your project directory.<\/p>\n<p><strong>templates\\quiz.htm<\/strong> &#8211; custom quiz template file. If you need to modify your quiz visual appearance this is the file to edit.<br \/>\n<strong>quiz.css<\/strong> &#8211; stylesheet file<br \/>\n<strong>images<\/strong> folder &#8211; a few extra images we are going to need<\/p>\n<h3>How to create a new test<\/h3>\n<p>1. Login as an admin and proceed to the <strong>tests<\/strong> table. Add a new test. If you use inline mode you can add tests, questions and answers without leaving the same page.<\/p>\n<p>2. Add questions for this test.<\/p>\n<p>3. Add answers for each question. Make sure to mark one of answers as the correct one.<\/p>\n<p>4. Add messages (optional). Make sure to specify the range (min and max score values that triggers message to be displayed).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-298\" title=\"quiz_create_test\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_create_test.png\" alt=\"Create a new quiz\" width=\"718\" height=\"388\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_create_test.png 718w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_create_test-300x162.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_create_test-150x81.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2011\/05\/quiz_create_test-400x216.png 400w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/p>\n<p>This is it. Click &#8220;Take test&#8221; next to test name to take the test. Save this URL and add a link to this quiz somewhere on your website or send this link via email.<\/p>\n<h3>Further enhancements<\/h3>\n<p>You may want to add the following functionality:<\/p>\n<p>1. Charts or reports to visualize the percentage of answered questions by quiz or by a separate question.<\/p>\n<p>2. You can make users register before they take their test. Add a registration page, turn off Guest access and make sure Default group has access to the Add page of the Responses table.<\/p>\n<p>3. You may want to add an option make the quiz inactive. This will require a new field in <strong>tests<\/strong> table. You can either make quiz active\/inactive manually or you can add an expiration date.\u00a0 In both cases you will need to add a few lines of code to Responses Add page BeforeProcess event to stop processing if quiz is currently inactive.<\/p>\n<p>4. Post your own suggestions in comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article explains how the Quiz Template works in great details. It can help you better understand the inner workings of this template and provide the guidance you need in designing your own. Quiz template live demo Purchase Quiz template for $25. Lets start with database design. In this tutorial we use MySQL database.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4,3,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/271"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":53,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}