A simple quiz randomizer that I wrote using PHP and MySQL I hope you will find it useful.
My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
My telephone number at home here in Bacolod City, Negros Occidental Philippines is +63 (034) 4335675.
Here in Bacolod City I also accepting computer repair, networking, and Arduino Project development at a very affordable price. My website is www.jakerpomperada.blogspot.com and www.jakerpomperada.com
If you like this video please click the LIKE button, SHARE, and SUBSCRIBE to my channel.
Your support on my channel is highly appreciated.
Program Listing
index.php
<?php
// index.php
// Prof. Jake Rodriguez Pomperada, MAED-IT, MIT
// www.jakerpomperada.blogspot.com and www.jakerpomperada.com
// jakerpomperada@gmail.com
// Bacolod City, Negros Occidental
// include database connection
include "connection.php";
$stmt = $con->prepare("SELECT * FROM `data` ORDER BY RAND()");
$stmt->execute();
$res = $stmt->get_result();
$links = $slides = $options = $choices = "";
if ($res->num_rows > 0) {
$num = 0;
while ($row = $res->fetch_assoc()) {
$num++;
$links .= '<a href="#slide-'.$num.'">'.$num.'</a>';
$con1 = [1,2,3,4];
shuffle($con1);
for ($i=1; $i <= 4; $i++) {
$choice = "choice_".$con1[$i-1];
($i == 1)? $required="required":"";
$options .= '
<input type="hidden" name="qid'.$num.'" value="'.$row["id"].'">
<label class="option option-'.$i.'">
<input type="radio" name="answer'.$num.'" class="optionbox" id="option-'.$num.$i.'" value="'.$row[$choice].'" '.$required.'>
<span>'.wordwrap($row[$choice], 25, "<br />\n").'</span>
</label>';
}
$slides .= '
<div id="slide-'.$num.'">
<table>
<tr>
<td colspan="2">
<div class="titleblock">Question #'.$num.'</div>
<textarea name="txtQuestion'.$row["id"].'" rows="5" placeholder="Enter question #'.$row["id"].' here..." disabled required>'.$row["question"].'</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<div class="wrapper">
'.$options.'
</div>
</td>
</tr>
</table>
</div>
';
$options = $choices = "";
}
} else {
header("Location: questions.php");
}
$con->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz | Quiz Randomizer in PHP MySQL</title>
<link rel="stylesheet" href="styles.css">
<style>
.titleblock,
table th div,
button,
.slider .links>a {
background: #2196f3!important;
}
</style>
</head>
<body>
<main>
<form method="post" action="result.php">
<div class="title">
<h1>Quiz Randomizer in PHP MySQL</h1>
<h2>» Jake R. Pomperada, MAED-IT, MIT «</h2>
<br>
<hr>
<h3>Quiz</h3>
<hr>
</div>
<div class="slider">
<div class="links">
<?php echo $links; ?>
</div>
<div class="slides">
<?php echo $slides; ?>
</div>
<button type="submit" name="btnSubmit" class="btnSubmit">Submit</button>
</div>
</form>
</main>
</body>
</html>
connection.php
<?php
// Prof. Jake Rodriguez Pomperada, MAED-IT, MIT
// www.jakerpomperada.blogspot.com and www.jakerpomperada.com
// jakerpomperada@gmail.com
// Bacolod City, Negros Occidental
// Enable error reporting for mysqli
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Hostname
$host = "localhost";
// Username
$user = "root";
// Password
$pass = "";
// Database Name
$db = "r_questions";
// Establish database connection
$con = new mysqli($host, $user, $pass, $db);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
questions.php
<?php
// Prof. Jake Rodriguez Pomperada, MAED-IT, MIT
// www.jakerpomperada.blogspot.com and www.jakerpomperada.com
// jakerpomperada@gmail.com
// Bacolod City, Negros Occidental
// include database connection
include "connection.php";
$message = "";
if(isset($_POST["btnSubmit"])) {
for ($i=1; $i < 5; $i++) {
$qn = "txtQuestion".$i;
$c1 = "txtChoice".$i."1";
$c2 = "txtChoice".$i."2";
$c3 = "txtChoice".$i."3";
$c4 = "txtChoice".$i."4";
$ans = "txtAnswer".$i;
$stmt_check = $con->prepare("SELECT `id` FROM `data` WHERE `id`=?");
$stmt_check->bind_param("i", $i);
$stmt_check->execute();
$stmt_check->store_result();
if($stmt_check->num_rows > 0) {
$stmt = $con->prepare("UPDATE `data` SET `question`=?,`choice_1`=?,`choice_2`=?,`choice_3`=?,`choice_4`=?,`answer`=? WHERE `id`=?");
$stmt->bind_param("sssssii", $_POST[$qn], $_POST[$c1], $_POST[$c2], $_POST[$c3], $_POST[$c4], $_POST[$ans], $i);
$message = '<div class="message update">Record Successfully Updated</div>';
} else {
$stmt = $con->prepare("INSERT INTO `data`(`question`, `choice_1`, `choice_2`, `choice_3`, `choice_4`, `answer`) VALUES (?,?,?,?,?,?)");
$stmt->bind_param("sssssi", $_POST[$qn], $_POST[$c1], $_POST[$c2], $_POST[$c3], $_POST[$c4], $_POST[$ans]);
$message = '<div class="message save">Record Successfully Saved</div>';
}
$stmt->execute();
$stmt->close();
}
}
$stmt = $con->prepare("SELECT * FROM `data`");
$stmt->execute();
$res = $stmt->get_result();
$links = $slides = $options = $choices = "";
if ($res->num_rows > 0) {
while ($row = $res->fetch_assoc()) {
for ($i=1; $i <= 4; $i++) {
$i == $row["answer"]? $selected ="selected": $selected = "";
$options .= '<option value="'.$i.'" '.$selected.'>Choice #'.$i.'</option>';
$choice = "choice_".$i;
$choices .= '<tr>
<th><div>Choice #'.$i.':</div></th>
<td><input type="text" name="txtChoice'.$row["id"].$i.'" placeholder="Enter choice #'.$i.' here..." value="'.$row[$choice].'" required></td>
</tr>';
}
$links .= '<a href="#slide-'.$row["id"].'">'.$row["id"].'</a>';
$slides .= '
<div id="slide-'.$row["id"].'">
<table>
<tr>
<td colspan="2">
<div class="titleblock">Question #'.$row["id"].'</div>
<textarea name="txtQuestion'.$row["id"].'" rows="5" placeholder="Enter question #'.$row["id"].' here..." required>'.$row["question"].'</textarea>
</td>
</tr>
'.$choices.'
<tr>
<th><div>Answer:</div></th>
<td>
<select name="txtAnswer'.$row["id"].'" required>
'.$options.'
</select>
</td>
</tr>
</table>
</div>
';
$options = $choices = "";
}
} else {
$message = '<div class="message error"><b>ERROR:</b> No Questions to display. Please add some questions first.</div>';
for ($reps=1; $reps < 5; $reps++) {
$links .= '<a href="#slide-'.$reps.'">'.$reps.'</a>';
for ($i=1; $i <= 4; $i++) {
$options .= '<option value="'.$i.'">Choice #'.$i.'</option>';
$choice = "choice_".$i;
$choices .= '<tr>
<th><div>Choice #'.$i.':</div></th>
<td><input type="text" name="txtChoice'.$reps.$i.'" placeholder="Enter choice #'.$i.' here..." required></td>
</tr>';
}
$slides .= '
<div id="slide-'.$reps.'">
<table>
<tr>
<td colspan="2">
<div class="titleblock">Question #'.$reps.'</div>
<textarea name="txtQuestion'.$reps.'" rows="5" placeholder="Enter question #'.$reps.' here..." required></textarea>
</td>
</tr>
'.$choices.'
<tr>
<th><div>Answer:</div></th>
<td>
<select name="txtAnswer'.$reps.'" required>
<option value="" selected disabled>~ Select Answer ~</option>
'.$options.'
</select>
</td>
</tr>
</table>
</div>
';
$options = $choices = "";
}
}
$con->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Questions | Quiz Randomizer in PHP MySQL</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php echo $message; ?>
<main>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="title">
<h1>Quiz Randomizer in PHP MySQL</h1>
<h2>» Jake R. Pomperada, MAED-IT, MIT «</h2>
<br>
<hr>
<h3>Questions</h3>
<hr>
</div>
<div class="slider">
<div class="links">
<?php echo $links; ?>
</div>
<div class="slides">
<?php echo $slides; ?>
</div>
<div class="btnWrapper">
<button type="submit" name="btnSubmit" class="btnHalf btnSubmit">Save Entries</button>
<a href="index.php" class="btnHalf btnQuiz">Take the Quiz!</a>
</div>
</div>
</form>
</main>
</body>
</html>
result.php
<?php
// Prof. Jake Rodriguez Pomperada, MAED-IT, MIT
// www.jakerpomperada.blogspot.com and www.jakerpomperada.com
// jakerpomperada@gmail.com
// Bacolod City, Negros Occidental
// include database connection
include "connection.php";
$key = [];
$num = 0;
if(isset($_POST["btnSubmit"])) {
for ($i=1; $i < 5; $i++) {
$stmt = $con->prepare("SELECT * FROM `data` WHERE `id`=?");
$stmt->bind_param("i", $_POST["qid".$i]);
$stmt->execute();
$res = $stmt->get_result();
while ($row = $res->fetch_assoc()){
for ($x=1; $x < 5; $x++) {
if ($_POST["answer".$i] == $row["choice_".$x]) {
($row["answer"] == $x)? $num++:"";
}
}
}
$stmt->close();
}
}
$con->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Result | Quiz Randomizer in PHP MySQL</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div class="title">
<h1>Quiz Randomizer in PHP MySQL</h1>
<h2>» Jake R. Pomperada, MAED-IT, MIT «</h2>
<br>
<hr>
<h3>Result</h3>
<hr>
<h1 class="txtScore">Score: <?php echo ($num*25)."%"; ?></h1>
<div class="btnWrapper">
<a href="questions.php" class="btnHalf btnSubmit">Back to Questions</a>
<a href="index.php" class="btnHalf btnQuiz">Take the Quiz Again?</a>
</div>
</div>
</main>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
:root {
--width: 400px;
--height: auto;
--maincolor: #ED4264;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
text-align: center;
}
body {
background: #fff;
font-family: 'Poppins', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
main {
padding: 100px 0;
display: flex;
align-items: center;
justify-content: center;
}
.title {
display: block;
margin: 0 0 30px;
text-align: center;
color: #000;
}
h1 {
font-size: 25px;
line-height: 25px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
h2 {
font-size: 20px;
margin: 0 0 10px 0;
}
.slider {
width: var(--width);
text-align: center;
overflow: hidden;
display: block;
margin: 0 auto;
}
.slider>.links {
position: absolute;
left: calc(50% - 242px);
align-items: center;
z-index: 9999;
}
.slider .links>a {
background: var(--maincolor);
text-align: center;
text-decoration: none;
display: block;
padding: 20px 15px;
color: #fff;
margin-bottom: 2px;
}
.slider .links>a:focus {
background: #000;
}
.slides {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides>div {
scroll-snap-align: start;
flex-shrink: 0;
width: var(--width);
height: var(--height);
margin-right: 50px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* font-size: 100px; */
padding: 30px;
}
.titleblock {
display: block;
width: 100%;
text-align: center;
padding: 20px;
color: #f1f1f1;
text-transform: uppercase;
}
table th {
vertical-align: top;
}
table th div {
display: block;
text-transform: uppercase;
color: #f1f1f1;
text-align: center;
padding: 10px;
}
table td {
white-space: nowrap;
}
textarea,
select,
input {
font-family: 'Poppins', sans-serif;
display: block;
background: #e1e1e1;
width: 100%;
padding: 10px;
border: none;
font-size: 15px;
resize: none;
}
input:hover,
input:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus {
background: #dbdbdb;
}
textarea,
input {
margin-bottom: 5px;
}
.btnWrapper {
display: inline-flex;
}
.btnblock {
display: flex;
}
.txtScore {
margin: 80px 0;
font-size: 50px;
line-height: 1.2;
}
.btnQuiz,
.btnSubmit,
button {
font-family: 'Poppins', sans-serif;
color: #fff;
padding: 15px;
opacity: 0.9;
outline: none;
font-size: 20px;
text-transform: uppercase;
border: none;
text-align: center;
cursor: pointer;
text-decoration: none;
display: block;
margin: 2px 0 0;
}
.btnSubmit {
width: var(--width);
}
.btnQuiz,
.btnSubmit,
button:hover {
opacity: 1;
}
.titleblock,
table th div,
.btnSubmit,
.btnQuiz,
button {
background: var(--maincolor);
font-weight: bold;
font-size: 15px;
}
.btnWrapper {
display: flex;
padding: 0;
margin: 0;
}
.btnHalf {
width: 50%;
}
.btnQuiz {
background: #2196f3;
}
.wrapper {
background: #fff;
width: 300px;
border-radius: 5px;
padding: 10px;
display: block;
}
.wrapper .option {
background: #fff;
width: 100%;
border-radius: 5px;
cursor: pointer;
border: 2px solid lightgrey;
transition: all 0.3s ease;
margin-bottom: 5px;
display: block;
text-align: left;
display: flex;
align-items: center;
}
.wrapper .option:last-child {
margin-bottom: 0;
}
input[type="radio"] {
display: inline-block;
height: 14px;
width: 14px;
margin: 0 10px;
padding: 0;
}
.wrapper .option span {
display: inline-block;
font-size: 18px;
color: #808080;
width: calc(100% - 32px);
white-space: nowrap;
}
.message {
position: fixed;
top: 20px;
left: calc(50% - 200px);
width: 400px;
padding: 20px;
text-align: center;
-webkit-animation: cssAnimation 0s ease-in 4s forwards;
animation: cssAnimation 0s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
color: #fff;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
padding: 0;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
padding: 0;
}
}
.message.update {
background: #ffc107;
color: #000;
}
.message.save {
background: #4caf50;
}
.message.error {
background: #f44336;
}
r_questions.sql
-- phpMyAdmin SQL Dump
-- version 5.0.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 11, 2021 at 11:44 PM
-- Server version: 10.4.14-MariaDB
-- PHP Version: 7.4.11
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `r_questions`
--
-- --------------------------------------------------------
--
-- Table structure for table `data`
--
CREATE TABLE `data` (
`id` int(11) NOT NULL,
`question` varchar(500) NOT NULL,
`choice_1` text NOT NULL,
`choice_2` text NOT NULL,
`choice_3` text NOT NULL,
`choice_4` text NOT NULL,
`answer` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `data`
--
INSERT INTO `data` (`id`, `question`, `choice_1`, `choice_2`, `choice_3`, `choice_4`, `answer`) VALUES
(1, '1 + 1 = ?', '2', '3', '4', '5', 1),
(2, '2+2=?', '6', '8', '10', '4', 4),
(3, 'Highest Mountain in the World.', 'Mt. Carmel', 'Mt. Liza', 'Mt. Everest', 'Mt. John', 3),
(4, 'Latest version of Microsoft Windows?', 'Window XP', 'Windows 10', 'Windows 11', 'Windows 95', 3);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `data`
--
ALTER TABLE `data`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `data`
--
ALTER TABLE `data`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
