You need to follow several steps to create a website that presents a question with multiple types of options (image, text, file, video, link) and an answer using HTML, jQuery, JSON, PHP, and MySQL. Here's a detailed guide:
Step 1: Database Setup
First, create a MySQL database and table to store the questions and options.
SQL to create the database and tables:
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)
);
Step 2: Insert Sample Data
Insert sample data into the questions and options tables.
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");
Step 3: PHP Script to Fetch Data
Create a PHP script to fetch the questions and options from the database.
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();
?>
Step 4: HTML Structure
Create the HTML structure for your site.
index.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>
Step 5: jQuery Script
Create a jQuery script to load the question and handle user interaction.
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.");
}
});
}
});
});
Explanation
- Database Setup: Creates the necessary tables and inserts sample data.
- PHP Script: Fetches the question and options from the database and returns them as a JSON response.
- HTML Structure: Defines the basic structure of the page with containers for the question, options, and result.
- jQuery Script: Loads the question and options using AJAX, dynamically creates the appropriate HTML elements, and handles the submission of the selected option.
This setup allows you to present complex questions with various types of options and handle user interactions seamlessly. You can extend this by adding more complex question types, improving the styling, and adding additional functionalities as needed.
Connecting Links
If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!
If you want more helpful content like this, feel free to follow me:
Top comments (1)
SELECT * is usually not the best idea when doing a select query. You should always use prepared statements with PHP even if you aren't using user input in a query, it is just a good rule of thumb. As is using try/catch blocks, and handling errors gracefully - you should not be using "die" in a production level app. There is absolutely no reason to use jQuery here, vanilla JavaScript can handle this without the bloat of a 3rd party library. When you send the answer along with the question to the browser in a JSON object it can easily be read using the browser's inspector so this is not at all an ideal way to make a quiz. Also, if you are posting here to educate then you should explain your code. This is just blocks of code, without comments. Not really informational at all.