Web development|Multiple Choice Question Website using PHP

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 ….

Cyber Security Freelancer | Auditor| Independent Instructor |Bug Bounty Hunter | Android Application/Web/IOT/Network Security Testing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store