DEV Community

Cover image for PHP crash course: PHP MYSQL QUIZ APP
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on • Edited on

PHP crash course: PHP MYSQL QUIZ APP

#php #backends #beginners #tutorial

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)
);
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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();
?>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.");
                }
            });
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

Explanation

  1. Database Setup: Creates the necessary tables and inserts sample data.
  2. PHP Script: Fetches the question and options from the database and returns them as a JSON response.
  3. HTML Structure: Defines the basic structure of the page with containers for the question, options, and result.
  4. 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:

Source Code

Top comments (1)

Collapse
 
madeinmilwaukee profile image
Chuck Watson •

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.

Read next

m_muhd8 profile image

Rock Paper Scissors Game - Flutter

Muha-mmed -

trish_07 profile image

Create a 2D Pong Game with Rust and Bevy: A Step-by-Step Guide

Trish -

easycat profile image

H2 и весёлые тесты в Spring

Olga Lugacheva -

abdibrokhim profile image

Step-by-Step Tutorial on Building AI Coding Interviewer with AI/ML API and Integration with Clerk Auth and Deploying to Vercel

Ibrohim Abdivokhidov -