Custom Quiz Frontend
7 min readDec 12, 2025
//index.php
<?php
/*
Plugin Name: Quiz Plugin
Description: Quiz Plugin that manages create quiz subject and class wise.
Author: Sk
*/
class QUIZ
{
public function __construct()
{
register_activation_hook(__FILE__, array('QUIZ', 'createTable'));
// register_deactivation_hook(__FILE__, array('QUIZ', 'dropTable'));
add_action('wp_enqueue_scripts', array($this, 'addScripts'));
add_shortcode('quiz_form', array($this, 'quizFormShortcode'));
add_shortcode('list_quiz', array($this, 'listQuizShortcode'));
add_action('wp_ajax_addQuiz', array($this, 'addQuiz'));
add_action('wp_ajax_nopriv_addQuiz', array($this, 'addQuiz'));
add_action('wp_ajax_updateQuiz', array($this, 'updateQuiz'));
add_action('wp_ajax_nopriv_updateQuiz', array($this, 'updateQuiz'));
}
function addScripts()
{
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', array(), '5.3.3', 'all');
wp_enqueue_style("quiz-style", plugin_dir_url(https://medium.com/__FILE__) . '/assets/css/style.css', array(), "1.0", "all");
wp_enqueue_script(
'quiz-js',
plugin_dir_url(https://medium.com/__FILE__) . '/assets/js/script.js',
array('jquery'),
'1.0',
true
);
wp_localize_script('quiz-js', 'my_ajax_object', array(
'ajax_url' => admin_url(https://medium.com/'admin-ajax.php'),
));
wp_enqueue_script(
'jquery-validate',
'https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js',
array('jquery',),
'1.19.5',
true
);
wp_enqueue_script('sweetalert', 'https://cdn.jsdelivr.net/npm/sweetalert2@11', [], null, true);
}
public function quizFormShortcode()
{
global $wpdb;
$table_name = $wpdb->prefix . 'quiz_table';
$quiz_data = null;
$quiz_id = 0;
if (isset($_GET['id'])) {
$quiz_id = intval($_GET['id']);
$quiz_row = $wpdb->get_row("SELECT * FROM $table_name WHERE id = $quiz_id");
if ($quiz_row) {
$questions_json = json_decode($quiz_row->question, true) ?? [];
$options_a_json = json_decode($quiz_row->option_a, true) ?? [];
$options_b_json = json_decode($quiz_row->option_b, true) ?? [];
$options_c_json = json_decode($quiz_row->option_c, true) ?? [];
$options_d_json = json_decode($quiz_row->option_d, true) ?? [];
$correct_ans_json = json_decode($quiz_row->correct_ans, true) ?? [];
$quiz_data = [
'class_option' => $quiz_row->class_option,
'subject_option' => $quiz_row->subject_option,
'questions' => []
];
for ($i = 0; $i < count($questions_json); $i++) {
$quiz_data['questions'][] = [
'question' => $questions_json[$i][0] ?? '',
'option_a' => $options_a_json[$i][0] ?? '',
'option_b' => $options_b_json[$i][0] ?? '',
'option_c' => $options_c_json[$i][0] ?? '',
'option_d' => $options_d_json[$i][0] ?? '',
'correct_ans' => $correct_ans_json[$i][0] ?? ''
];
}
}
}
$questions = $quiz_data['questions'] ?? [
['question'=>'', 'option_a'=>'', 'option_b'=>'', 'option_c'=>'', 'option_d'=>'', 'correct_ans'=>'']
];
ob_start();
?>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="card vw-100 shadow-lg p-4">
<h3 class="text-center mb-4"><?php echo $quiz_data ? 'Update Quiz' : 'Add Quiz'; ?></h3>
<form action="" method="post" id="add-quiz-form">
<input type="hidden" name="quiz_id" value="<?php echo esc_attr($quiz_id); ?>">
<div class="row mb-3">
<div class="col-md-6">
<label for="classDropdown" class="form-label">Choose Class</label>
<select id="classDropdown" name="class_option" class="form-select">
<option value="">--Please choose--</option>
<?php
$classes = ['BCA','MCA','B.tech','Diploma'];
foreach ($classes as $class) {
$selected = ($quiz_data && $quiz_data['class_option'] === $class) ? 'selected' : '';
echo "<option value='{$class}' {$selected}>{$class}</option>";
}
?>
</select>
</div>
<div class="col-md-6">
<label for="subjectDropdown" class="form-label">Choose Subject</label>
<select id="subjectDropdown" name="subject_option" class="form-select">
<option value="">--Please choose--</option>
<?php
$subjects = ['Computer','Javascript','PHP','C++'];
foreach ($subjects as $subject) {
$selected = ($quiz_data && $quiz_data['subject_option'] === $subject) ? 'selected' : '';
echo "<option value='{$subject}' {$selected}>{$subject}</option>";
}
?>
</select>
</div>
</div>
<div id="quiz-container">
<?php foreach ($questions as $index => $q): ?>
<div class="quiz mb-3" style="background-color: #efeded; padding: 19px; border-radius: 10px;">
<span class="close-icon" style="color:red;float: right;cursor:pointer;">X</span>
<div class="mb-3">
<label class="form-label">Question</label>
<input type="text" name="question[]" class="form-control" placeholder="Enter question" value="<?php echo esc_attr($q['question']); ?>">
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="options">Option A</label>
<input type="text" name="option_a[]" class="form-control choice-input" placeholder="Option A" value="<?php echo esc_attr($q['option_a']); ?>">
</div>
<div class="col-md-6">
<label class="options">Option B</label>
<input type="text" name="option_b[]" class="form-control choice-input" placeholder="Option B" value="<?php echo esc_attr($q['option_b']); ?>">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="options">Option C</label>
<input type="text" name="option_c[]" class="form-control choice-input" placeholder="Option C" value="<?php echo esc_attr($q['option_c']); ?>">
</div>
<div class="col-md-6">
<label class="options">Option D</label>
<input type="text" name="option_d[]" class="form-control choice-input" placeholder="Option D" value="<?php echo esc_attr($q['option_d']); ?>">
</div>
</div>
<div class="mb-3">
<label class="form-label">Correct Answer</label>
<select name="correct_ans[]" class="form-select">
<option value="">--Please choose--</option>
<option value="<?php echo esc_attr($q['correct_ans']); ?>">--Please choose--</option>
<?php
// $options_map = ['option_a'=>'A','option_b'=>'B','option_c'=>'C','option_d'=>'D'];
// foreach ($options_map as $key=>$label) {
// $selected = ($q['correct_ans'] === $q[$key]) ? 'selected' : '';
// echo "<option value='{$q[$key]}' {$selected}>{$label}</option>";
// }
?>
</select>
</div>
</div>
<?php endforeach; ?>
</div>
<button type="button" id="clone_btn" class="btn btn-primary mb-3">Add more</button>
<button type="submit" name="submit_quiz" class="btn btn-primary w-100"><?php echo $quiz_data ? 'Update' : 'Submit'; ?></button>
</form>
</div>
</div>
<?php
if (isset($_POST['submit_quiz'])) {
$quiz_id = intval($_POST['quiz_id'] ?? 0);
$class_option = sanitize_text_field($_POST['class_option']);
$subject_option = sanitize_text_field($_POST['subject_option']);
$question = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['question']);
$option_a = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['option_a']);
$option_b = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['option_b']);
$option_c = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['option_c']);
$option_d = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['option_d']);
$correct_ans = array_map(fn($v)=>[sanitize_text_field($v)], $_POST['correct_ans']);
$data = [
'class_option' => $class_option,
'subject_option' => $subject_option,
'question' => wp_json_encode($question),
'option_a' => wp_json_encode($option_a),
'option_b' => wp_json_encode($option_b),
'option_c' => wp_json_encode($option_c),
'option_d' => wp_json_encode($option_d),
'correct_ans' => wp_json_encode($correct_ans),
];
if ($quiz_id) {
$wpdb->update($table_name, $data, ['id' => $quiz_id]);
echo "<div class='alert alert-success'>Quiz updated successfully!</div>";
} else {
$wpdb->insert($table_name, $data);
echo "<div class='alert alert-success'>Quiz added successfully!</div>";
}
}
return ob_get_clean();
}
public static function createTable()
{
global $wpdb;
$table_name = $wpdb->prefix . "quiz_table";
$charset_collate = $wpdb->get_charset_collate();
$tableSql = "CREATE TABLE $table_name (
id int(5) NOT NULL AUTO_INCREMENT,
class_option varchar(120) NOT NULL,
subject_option varchar(120) NOT NULL,
question varchar(120) NOT NULL,
option_a varchar(120) NOT NULL,
option_b varchar(120) NOT NULL,
option_c varchar(120) NOT NULL,
option_d varchar(120) NOT NULL,
correct_ans varchar(120) NOT NULL,
created_at timestamp NOT NULL DEFAULT current_timestamp(),
PRIMARY KEY (id)
) $charset_collate;";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($tableSql);
}
public static function dropTable()
{
global $wpdb;
$tablePrefix = $wpdb->prefix;
$dropTableMySQL = "DROP TABLE IF EXISTS {$tablePrefix}quiz_table";
$wpdb->query($dropTableMySQL);
}
public function addQuiz()
{
$class_option = sanitize_text_field($_POST['class_option']);
$subject_option = sanitize_text_field($_POST['subject_option']);
$question = array_map('sanitize_text_field', $_POST['question']);
$option_a = array_map('sanitize_text_field', $_POST['option_a']);
$option_b = array_map('sanitize_text_field', $_POST['option_b']);
$option_c = array_map('sanitize_text_field', $_POST['option_c']);
$option_d = array_map('sanitize_text_field', $_POST['option_d']);
$correct_ans = array_map('sanitize_text_field', $_POST['correct_ans']);
$question_json = wp_json_encode(array_map(fn($q) => [$q], $question));
$option_a_json = wp_json_encode(array_map(fn($o) => [$o], $option_a));
$option_b_json = wp_json_encode(array_map(fn($o) => [$o], $option_b));
$option_c_json = wp_json_encode(array_map(fn($o) => [$o], $option_c));
$option_d_json = wp_json_encode(array_map(fn($o) => [$o], $option_d));
$correct_ans_json = wp_json_encode(array_map(fn($c) => [$c], $correct_ans));
global $wpdb;
$questions = $_POST['question'];
$inserted = $wpdb->insert(
$wpdb->prefix . 'quiz_table',
[
'class_option' => $class_option,
'subject_option' => $subject_option,
'question' => $question_json,
'option_a' => $option_a_json,
'option_b' => $option_b_json,
'option_c' => $option_c_json,
'option_d' => $option_d_json,
'correct_ans' => $correct_ans_json
],
);
if ($inserted) {
wp_send_json_success('Form submitted successfully!');
} else {
wp_send_json_error('Form not submitted!');
}
wp_die();
}
public function listQuizShortcode()
{
global $wpdb;
$table_name = $wpdb->prefix . 'quiz_table';
$quizzes = $wpdb->get_results("SELECT * FROM $table_name ORDER BY id");
?>
<div class="container mt-4">
<h3 class="text-center mb-4">Quiz Questions</h3>
<?php foreach ($quizzes as $quizIndex => $quiz): ?>
<?php
$questions = json_decode($quiz->question, true);
$options_a = json_decode($quiz->option_a, true);
$options_b = json_decode($quiz->option_b, true);
$options_c = json_decode($quiz->option_c, true);
$options_d = json_decode($quiz->option_d, true);
$correct_ans = json_decode($quiz->correct_ans, true);
?>
<div class="card mb-4 shadow-lg">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<span>Quiz <?= $quizIndex + 1 ?> (<?= esc_html($quiz->class_option) ?> - <?= esc_html($quiz->subject_option) ?>)</span>
<div>
<a href="<?php
echo add_query_arg(
'id',
$quiz->id,
get_permalink(109)
);
?>" class="btn btn-warning">Edit</a>
<a href="?action=delete&id=<?= $quiz->id ?>"
class="btn btn-danger">
Delete
</a>
</div>
</div>
<div class="card-body">
<?php foreach ($questions as $i => $q): ?>
<div class="mb-4">
<h5>Q<?= $i + 1 ?>. <?= $q[0] ?></h5>
<ul class="list-group list-group-flush">
<li class="list-group-item <?= ($correct_ans[$i][0] == 'A') ? 'list-group-item-success' : '' ?>">
<strong>A:</strong> <?= $options_a[$i][0] ?>
</li>
<li class="list-group-item <?= ($correct_ans[$i][0] == 'B') ? 'list-group-item-success' : '' ?>">
<strong>B:</strong> <?= $options_b[$i][0] ?>
</li>
<li class="list-group-item <?= ($correct_ans[$i][0] == 'C') ? 'list-group-item-success' : '' ?>">
<strong>C:</strong> <?= $options_c[$i][0] ?>
</li>
<li class="list-group-item <?= ($correct_ans[$i][0] == 'D') ? 'list-group-item-success' : '' ?>">
<strong>D:</strong> <?= $options_d[$i][0] ?>
</li>
</ul>
<p class="mt-2"><strong>Correct Answer:</strong> <?= $correct_ans[$i][0] ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php
}
public function updateQuiz()
{
global $wpdb;
$table_name = $wpdb->prefix . 'quiz_table';
$id = intval($_POST['id']);
if (!$id) {
wp_send_json_error(['message' => 'Invalid Quiz ID']);
}
$class_option = sanitize_text_field($_POST['class_option']);
$subject_option = sanitize_text_field($_POST['subject_option']);
$question = array_map('sanitize_text_field', $_POST['question']);
$option_a = array_map('sanitize_text_field', $_POST['option_a']);
$option_b = array_map('sanitize_text_field', $_POST['option_b']);
$option_c = array_map('sanitize_text_field', $_POST['option_c']);
$option_d = array_map('sanitize_text_field', $_POST['option_d']);
$correct_ans = array_map('sanitize_text_field', $_POST['correct_ans']);
$question_json = wp_json_encode(array_map(fn($q) => [$q], $question));
$option_a_json = wp_json_encode(array_map(fn($o) => [$o], $option_a));
$option_b_json = wp_json_encode(array_map(fn($o) => [$o], $option_b));
$option_c_json = wp_json_encode(array_map(fn($o) => [$o], $option_c));
$option_d_json = wp_json_encode(array_map(fn($o) => [$o], $option_d));
$correct_ans_json = wp_json_encode(array_map(fn($c) => [$c], $correct_ans));
$updated = $wpdb->update(
$table_name,
[
'class_option' => $class_option,
'subject_option' => $subject_option,
'question' => $question_json,
'option_a' => $option_a_json,
'option_b' => $option_b_json,
'option_c' => $option_c_json,
'option_d' => $option_d_json,
'correct_ans' => $correct_ans_json,
],
['id' => $id]
);
if ($updated !== false) {
wp_send_json_success(['message' => 'Quiz updated successfully!']);
} else {
wp_send_json_error(['message' => 'Quiz update failed!']);
}
wp_die();
}
}
new QUIZ();
// script.jsGet developer_word’s stories in your inbox
Join Medium for free to get updates from this writer.
jQuery(document).ready(function ($) {
console.log("abc");
$("#add-quiz-form").submit(function (e) {
e.preventDefault();
$("#add-quiz-form").validate({
rules: {
class_option: {
required: true,
// minlength: 2,
},
subject_option: {
required: true,
// number: true,
// min: 5,
},
'question[]': {
required: true,
},
'options[]': {
required: true,
},
'correct_ans[]': {
required: true,
},
},
messages: {
class_option: "Please select class.",
subject_option: "Please select subject.",
question: "Please add question.",
options: "Please add options",
answer_option: "Please select correct answer",
},
});
$("#add-quiz-form").submit(function (e) {
e.preventDefault();
if (!$(this).valid()) {
return;
}
var formData = new FormData(this);
let quizId = $("#quiz_id").val();
if (quizId) {
console.log('id',quizId);
formData.append("action", "updateQuiz");
formData.append("id", quizId);
} else {
formData.append("action", "addQuiz");
}
$.ajax({
url: my_ajax_object.ajax_url,
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (response) {
if (response.success) {
let msg = quizId
? "Quiz Updated Successfully"
: "Quiz Added Successfully";
// $("#add-quiz-form")[0].reset();
Swal.fire({
icon: "success",
title: "Success",
text: msg,
timer: 3000,
showConfirmButton: false,
}).then((result) => {
console.log("result", result);
}, 3000);
if (!quizId) {
$("#add-quiz-form")[0].reset();
}
} else {
Swal.fire({
icon: "error",
title: "Error",
text: response.data.message || "Something went wrong",
timer: 6000,
showConfirmButton: false,
});
}
},
});
});
});
$("#clone_btn").click(function () {
let $clone = $(".quiz").first().clone();
$clone.find("input:text").val("");
$clone
.find("select.answer")
.empty()
.append('<option value="">--Please choose--</option>');
$clone.find(".close-icon").show();
$("#container").append($clone);
// updateIndexes();
});
$(".quiz").first().find(".close-icon").hide();
$(document).on("click", ".close-icon", function () {
$(this).closest(".quiz").remove();
// updateIndexes();
});
$(document).on("keyup", ".choice-input", function () {
let quizBlock = $(this).closest(".quiz");
console.log(quizBlock);
updateCorrectAnswer(quizBlock);
});
function updateCorrectAnswer(quizBlock) {
let choices = quizBlock.find(".choice-input");
console.log("Closest Block Value", choices);
let answer = quizBlock.find("#answer");
answer.empty().append('<option value="">--Please choose--</option>');
$.each(choices, function (index, el) {
if (el.value.trim() != "") {
answer.append(
'<option value="' + el.value + '">' + el.value + "</option>"
);
}
console.log("Index: " + index + ", Value: " + el.value);
});
}
// function updateIndexes() {
// $(".quiz").each(function (quizIndex, quizBlock) {
// $(quizBlock)
// .find("input, select")
// .each(function () {
// let name = $(this).attr("name");
// if (name) {
// let base = name.split("[")[0];
// $(this).attr("name", base + "[" + quizIndex + "]");
// }
// });
// });
// }
// var inputValue = $(".options").val();
// console.log('input value',inputValue);
// $("#answer").val("inputValue");
// $("#displayValue").text(inputValue);
// const dropdown = document.getElementById('answer');
// const selectedValue = dropdown.value;
// const selectedText = dropdown.options[dropdown.selectedIndex].text;
// console.log("Selected Value:", selectedValue);
// console.log("Selected Text:", selectedText);
});
//css
.quiz{
background-color: #dad1d1;
padding: 19px;
border-radius: 10px;
}
