PHP: квиз
создаем свой квиз на PHP
Как сделать квиз - страницу на которой будет представлен вопрос с несколькими типами данных для вариантов ответа (изображение, текст, файл, видео, ссылка) и результат?
Для этого необходимо выполнить всего несколько шагов с помощью HTML, jQuery, JSON, PHP и MySQL.
Создаем базу данных
Необходимо создать базу данных с таблицами, в которых будут храниться вопросы и варианты ответов:
CREATE DATABASE question_db;
USE question_db;
CREATE TABLE questions (
id INT AUTO_INCREMENT PRIMARY KEY,
question TEXT NOT NULL,
answer_type ENUM('text', 'image', 'file', 'video', 'link') NOT NULL,
answer TEXT NOT NULL
);
CREATE TABLE options (
id INT AUTO_INCREMENT PRIMARY KEY,
question_id INT,
option_type ENUM('text', 'image', 'file', 'video', 'link') NOT NULL,
option_content TEXT NOT NULL,
FOREIGN KEY (question_id) REFERENCES questions(id)
);
Заполняем таблицы
Таблицы questions и options заполняются тестовыми данными:
INSERT INTO questions (question, answer_type, answer) VALUES
("Identify the famous landmark.", "text", "Eiffel Tower");
INSERT INTO options (question_id, option_type, option_content) VALUES
(1, "text", "Eiffel Tower"),
(1, "image", "images/statue_of_liberty.jpg"),
(1, "video", "videos/great_wall.mp4"),
(1, "link", "https://en.wikipedia.org/wiki/Taj_Mahal");
PHP
PHP-скрипт извлекает вопросы и варианты ответов из базы данных.
fetch_question.php:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "question_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$question_id = 1; // You can change this to fetch different questions
$question_sql = "SELECT * FROM questions WHERE id = $question_id";
$question_result = $conn->query($question_sql);
$options_sql = "SELECT * FROM options WHERE question_id = $question_id";
$options_result = $conn->query($options_sql);
$response = array();
if ($question_result->num_rows > 0) {
$response['question'] = $question_result->fetch_assoc();
}
if ($options_result->num_rows > 0) {
$response['options'] = array();
while($row = $options_result->fetch_assoc()) {
$response['options'][] = $row;
}
}
echo json_encode($response);
$conn->close();
?>
HTML
HTML для страницы с квизом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Question Site</title>
<style>
body {
font-family: Arial, sans-serif;
}
.question-container {
margin: 20px;
}
.options-container {
margin: 20px 0;
}
.option {
margin: 10px 0;
}
.result-container {
margin: 20px 0;
display: none;
}
</style>
</head>
<body>
<div class="question-container">
<h1 id="question"></h1>
<div class="options-container" id="options-container"></div>
<button id="submit-btn">Submit</button>
</div>
<div class="result-container" id="result-container">
<h2>Result</h2>
<p id="result"></p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript
Скрипт на jQuery загружает вопросы на страницу и обеспечивает взаимодействие с пользователем.
script.js:
$(document).ready(function() {
$.ajax({
url: 'fetch_question.php',
method: 'GET',
dataType: 'json',
success: function(data) {
$('#question').text(data.question.question);
data.options.forEach(function(option) {
let optionElement;
switch (option.option_type) {
case 'text':
optionElement = `<div class="option">
<input type="radio" name="option" value="${option.option_content}">
<label>${option.option_content}</label>
</div>`;
break;
case 'image':
optionElement = `<div class="option">
<input type="radio" name="option" value="${option.option_content}">
<img src="${option.option_content}" alt="Option Image" style="max-width: 200px;">
</div>`;
break;
case 'video':
optionElement = `<div class="option">
<input type="radio" name="option" value="${option.option_content}">
<video width="320" height="240" controls>
<source src="${option.option_content}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>`;
break;
case 'link':
optionElement = `<div class="option">
<input type="radio" name="option" value="${option.option_content}">
<a href="${option.option_content}" target="_blank">${option.option_content}</a>
</div>`;
break;
}
$('#options-container').append(optionElement);
});
$('#submit-btn').click(function() {
var selectedOption = $('input[name="option"]:checked').val();
if (selectedOption) {
if (selectedOption === data.question.answer) {
$('#result').text("Correct! The answer is " + data.question.answer + ".");
} else {
$('#result').text("Incorrect. The correct answer is " + data.question.answer + ".");
}
$('#result-container').show();
} else {
alert("Please select an option.");
}
});
}
});
});
Объяснение
- База данных: создаем базу данных и таблицы, заполняем таблицу тестовыми данными.
- PHP: извлекаем из таблиц вопросы и ответы и возвращаем их в формате JSON.
- HTML: создаем базовую верстку страницы квиза с блоками для вопросов, вариантов ответов и результатов.
- JavaScript: с помощью jQuery загружаем вопрос и варианты ответов, используя AJAX. Динамически создаём соответствующие HTML-элементы и обрабатываеv отправку выбранного варианта ответа.
Предложенный вариант квиза позволяет задавать сложные вопросы с различными типами вариантов ответа и обеспечивать интерактивное взаимодействием с пользователем. Квиз можно усложнить, добавив более сложные типы вопросов, поработав над стилями страницы и добавив дополнительные функции при необходимости.
Спасибо за внимание.
Перевод статьи MD ARIFUL HAQUE “PHP crash course: PHP MYSQL QUIZ APP”
