Web development|Multiple Choice Question Website using PHP

Akash Ranjan Patel
4 min readDec 4, 2020

--

Quiz can easily implemented in server for setting up Quiz Question for clients

Step 1:-Fronted code contain MCQ Questions quiz.php

//Create PHP file with name quiz.php

<!DOCTYPE html>
<! — code by AKASH RANJAN PATEL →
<head>
<meta charset=UTF-8" />

<title>QUIZ | AKASH RANJAN PATEL</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

<body>

<div id=”page-wrap”>

<h1>Quiz</h1>

<form action=”result.php” method=”post” id=”quiz”>

<ol>

<li>

<h3>WordPress is a…</h3>

<div>
<input type=”radio” name=”question-1-answers” id=”question-1-answers-A” value=”A” />
<label for=”question-1-answers-A”>A) Software </label>
</div>

<div>
<input type=”radio” name=”question-1-answers” id=”question-1-answers-B” value=”B” />
<label for=”question-1-answers-B”>B) Web App</label>
</div>

<div>
<input type=”radio” name=”question-1-answers” id=”question-1-answers-C” value=”C” />
<label for=”question-1-answers-C”>C) CMS</label>
</div>

<div>
<input type=”radio” name=”question-1-answers” id=”question-1-answers-D” value=”D” />
<label for=”question-1-answers-D”>D) Other</label>
</div>

</li>

<li>

<h3>SEO is Part Of…</h3>

<div>
<input type=”radio” name=”question-2-answers” id=”question-2-answers-A” value=”A” />
<label for=”question-2-answers-A”>A) Video Editing</label>
</div>

<div>
<input type=”radio” name=”question-2-answers” id=”question-2-answers-B” value=”B” />
<label for=”question-2-answers-B”>B) Graphic Designing</label>
</div>

<div>
<input type=”radio” name=”question-2-answers” id=”question-2-answers-C” value=”C” />
<label for=”question-2-answers-C”>C) Web Designing</label>
</div>

<div>
<input type=”radio” name=”question-2-answers” id=”question-2-answers-D” value=”D” />
<label for=”question-2-answers-D”>D) Digital Marketing</label>
</div>

</li>

<li>

<h3>PHP is a….</h3>

<div>
<input type=”radio” name=”question-3-answers” id=”question-3-answers-A” value=”A” />
<label for=”question-3-answers-A”>A) Server Side Script</label>
</div>

<div>
<input type=”radio” name=”question-3-answers” id=”question-3-answers-B” value=”B” />
<label for=”question-3-answers-B”>B) Programming Language</label>
</div>

<div>
<input type=”radio” name=”question-3-answers” id=”question-3-answers-C” value=”C” />
<label for=”question-3-answers-C”>C) Markup Language</label>
</div>

<div>
<input type=”radio” name=”question-3-answers” id=”question-3-answers-D” value=”D” />
<label for=”question-3-answers-D”>D) None Of Above These</label>
</div>

</li>

<li>

<h3>Localhost IP is..</h3>

<div>
<input type=”radio” name=”question-4-answers” id=”question-4-answers-A” value=”A” />
<label for=”question-4-answers-A”>A) 192.168.0.1</label>
</div>

<div>
<input type=”radio” name=”question-4-answers” id=”question-4-answers-B” value=”B” />
<label for=”question-4-answers-B”>B) 127.0.0.0</label>
</div>

<div>
<input type=”radio” name=”question-4-answers” id=”question-4-answers-C” value=”C” />
<label for=”question-4-answers-C”>C) 1080:80</label>
</div>

<div>
<input type=”radio” name=”question-4-answers” id=”question-4-answers-D” value=”D” />
<label for=”question-4-answers-D”>D) Any Other</label>
</div>

</li>

<li>

<h3>Webdevtrick Is For</h3>

<div>
<input type=”radio” name=”question-5-answers” id=”question-5-answers-A” value=”A” />
<label for=”question-5-answers-A”>A) Web Designer</label>
</div>

<div>
<input type=”radio” name=”question-5-answers” id=”question-5-answers-B” value=”B” />
<label for=”question-5-answers-B”>B) Web Developer</label>
</div>

<div>
<input type=”radio” name=”question-5-answers” id=”question-5-answers-C” value=”C” />
<label for=”question-5-answers-C”>C) Graphic Designer</label>
</div>

<div>
<input type=”radio” name=”question-5-answers” id=”question-5-answers-D” value=”D” />
<label for=”question-5-answers-D”>D) All Above These</label>
</div>

</li>

</ol>

<input type=”submit” value=”Submit” class=”submitbtn” />

</form>

</div>

</body>

</html>

Step 2:-Backed code contain functions to process and display results result.php

//Create PHP file with name result.php

<!DOCTYPE html>
<! — code by AKASH RANJAN PATEL →
<html>

<head>
<meta charset=UTF-8" />

<title>Quiz</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

<body>

<div id=”page-wrap”>

<h1>Result | HackMeFu13</h1>

<?php

$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;

if ($answer1 == “C”) { $totalCorrect++; }
if ($answer2 == “D”) { $totalCorrect++; }
if ($answer3 == “A”) { $totalCorrect++; }
if ($answer4 == “B”) { $totalCorrect++; }
if ($answer5 == “D”) { $totalCorrect++; }

echo “<div id=’results’>$totalCorrect / 5 correct</div>”;

?>

</div>

</body>

</html>

Step 3 Backed code contain functions to style the website style.css

//Create PHP file with name style.css

/*
Code By AKASH RANJAN PATEL
*/

body{ font: 14px Georgia, serif; }

#page-wrap { width: 500px; margin: 0 auto;}

h1 { margin: 25px 0; font: 18px Georgia, Serif; text-transform: uppercase; letter-spacing: 3px; }

#quiz input {
vertical-align: middle;
}

#quiz ol {
margin: 0 0 10px 20px;
}

#quiz ol li {
margin: 0 0 20px 0;
}

#quiz ol li div {
padding: 4px 0;
}

#quiz h3 {
font-size: 17px; margin: 0 0 1px 0; color: #666;
}

#results {
font: 44px Georgia, Serif;
}

Step 4 Host Website using xampp on local system and CPanel on live website and Getting Output

Simpy create quiz.php ,result.php and style.css and get your own quiz website ready for lunch…Have fun with coding ….

--

--

Akash Ranjan Patel
Akash Ranjan Patel

Written by Akash Ranjan Patel

InfoSec Writer/Instructor/Custom Course Creator Bug Bounty Hunter Penetration Tester

No responses yet