├── LICENSE
├── README.md
├── db
    └── create_tables.sql
├── fetch_question.php
├── images
    └── .gitignore
├── index.html
├── questions.json
├── script.js
└── videos
    └── .gitignore


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 MD ARIFUL HAQUE
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # PHP MYSQL QUIZ APP
 2 | A web application for presenting questions with multiple types of options (image, text, file, video, link) and an answer. Built with HTML, jQuery, JSON, PHP, and MySQL.
 3 | 
 4 | ## Features
 5 | 
 6 | - Displays questions with various types of options.
 7 | - Options can be text, images, videos, files, or links.
 8 | - Users can select an option and receive feedback on their choice.
 9 | - Data is dynamically loaded from a MySQL database using PHP.
10 | 
11 | ## Project Structure
12 | 
13 | - `index.html`: The main HTML file for the application.
14 | - `script.js`: jQuery script for dynamic content and user interactions.
15 | - `fetch_question.php`: PHP script to fetch questions and options from the database.
16 | - `questions.json`: Example JSON file (if needed for development/testing).
17 | - `images/`: Directory for image files.
18 | - `videos/`: Directory for video files.
19 | - `db/`: Database scripts and schema.
20 | 
21 | ## Setup
22 | 
23 | 1. **Clone the Repository**
24 | 
25 |     ```sh
26 |     git clone https://github.com/yourusername/php-mysql-quiz-app.git
27 |     cd php-mysql-quiz-app
28 |     ```
29 | 
30 | 2. **Set Up the Database**
31 | 
32 |     - Import the database schema from `db/create_tables.sql` into your MySQL server.
33 | 
34 | 3. **Configure PHP**
35 | 
36 |     - Make sure to set up your PHP server to handle the `fetch_question.php` script.
37 |     - Update the database connection details in `fetch_question.php` if needed.
38 | 
39 | 4. **Run the Application**
40 | 
41 |     - Open `index.html` in your web browser to view the application.
42 | 
43 | ## Contributing
44 | 
45 | Feel free to submit issues or pull requests for improvements.
46 | 
47 | ## License
48 | 
49 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
50 | ```
51 | 
52 | ### Steps to Create the Repository
53 | 
54 | 1. **Create a New Repository:**
55 |    - Go to GitHub and create a new repository with the name `php-mysql-quiz-app`.
56 | 
57 | 2. **Initialize Local Repository:**
58 |    - Navigate to your project directory and run:
59 |      ```sh
60 |      git init
61 |      git add .
62 |      git commit -m "Initial commit"
63 |      ```
64 | 
65 | 3. **Add Remote and Push:**
66 |    - Add your GitHub repository as a remote and push your changes:
67 |      ```sh
68 |      git remote add origin https://github.com/yourusername/php-mysql-quiz-app.git
69 |      git push -u origin master
70 |      ```
71 | 
72 | 4. **Add Topics:**
73 |    - Go to your GitHub repository’s settings and add the topics listed above to help others discover your repository. 
74 | 
75 | By setting up your repository with these details, you'll provide clear information on the project and its structure, making it easier for others to understand, use, and contribute to your application.
76 | 


--------------------------------------------------------------------------------
/db/create_tables.sql:
--------------------------------------------------------------------------------
 1 | CREATE DATABASE question_db;
 2 | 
 3 | USE question_db;
 4 | 
 5 | CREATE TABLE questions (
 6 |     id INT AUTO_INCREMENT PRIMARY KEY,
 7 |     question TEXT NOT NULL,
 8 |     answer_type ENUM('text', 'image', 'file', 'video', 'link') NOT NULL,
 9 |     answer TEXT NOT NULL
10 | );
11 | 
12 | CREATE TABLE options (
13 |     id INT AUTO_INCREMENT PRIMARY KEY,
14 |     question_id INT,
15 |     option_type ENUM('text', 'image', 'file', 'video', 'link') NOT NULL,
16 |     option_content TEXT NOT NULL,
17 |     FOREIGN KEY (question_id) REFERENCES questions(id)
18 | );
19 | 
20 | INSERT INTO questions (question, answer_type, answer) VALUES
21 | ("Identify the famous landmark.", "text", "Eiffel Tower");
22 | 
23 | INSERT INTO options (question_id, option_type, option_content) VALUES
24 | (1, "text", "Eiffel Tower"),
25 | (1, "image", "images/statue_of_liberty.jpg"),
26 | (1, "video", "videos/great_wall.mp4"),
27 | (1, "link", "https://en.wikipedia.org/wiki/Taj_Mahal");
28 | 
29 | 


--------------------------------------------------------------------------------
/fetch_question.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $servername = "localhost";
 3 | $username = "root";
 4 | $password = "";
 5 | $dbname = "question_db";
 6 | 
 7 | $conn = new mysqli($servername, $username, $password, $dbname);
 8 | 
 9 | if ($conn->connect_error) {
10 |     die("Connection failed: " . $conn->connect_error);
11 | }
12 | 
13 | $question_id = 1; // You can change this to fetch different questions
14 | 
15 | $question_sql = "SELECT * FROM questions WHERE id = $question_id";
16 | $question_result = $conn->query($question_sql);
17 | 
18 | $options_sql = "SELECT * FROM options WHERE question_id = $question_id";
19 | $options_result = $conn->query($options_sql);
20 | 
21 | $response = array();
22 | 
23 | if ($question_result->num_rows > 0) {
24 |     $response['question'] = $question_result->fetch_assoc();
25 | }
26 | 
27 | if ($options_result->num_rows > 0) {
28 |     $response['options'] = array();
29 |     while($row = $options_result->fetch_assoc()) {
30 |         $response['options'][] = $row;
31 |     }
32 | }
33 | 
34 | echo json_encode($response);
35 | 
36 | $conn->close();
37 | ?>
38 | 
39 | 


--------------------------------------------------------------------------------
/images/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Complex Question Site</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |         }
11 |         .question-container {
12 |             margin: 20px;
13 |         }
14 |         .options-container {
15 |             margin: 20px 0;
16 |         }
17 |         .option {
18 |             margin: 10px 0;
19 |         }
20 |         .result-container {
21 |             margin: 20px 0;
22 |             display: none;
23 |         }
24 |     </style>
25 | </head>
26 | <body>
27 |     <div class="question-container">
28 |         <h1 id="question"></h1>
29 |         <div class="options-container" id="options-container"></div>
30 |         <button id="submit-btn">Submit</button>
31 |     </div>
32 |     <div class="result-container" id="result-container">
33 |         <h2>Result</h2>
34 |         <p id="result"></p>
35 |     </div>
36 | 
37 |     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
38 |     <script src="script.js"></script>
39 | </body>
40 | </html>
41 | 
42 | 


--------------------------------------------------------------------------------
/questions.json:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function() {
 2 |     $.ajax({
 3 |         url: 'fetch_question.php',
 4 |         method: 'GET',
 5 |         dataType: 'json',
 6 |         success: function(data) {
 7 |             $('#question').text(data.question.question);
 8 | 
 9 |             data.options.forEach(function(option) {
10 |                 let optionElement;
11 |                 switch (option.option_type) {
12 |                     case 'text':
13 |                         optionElement = `<div class="option">
14 |                                             <input type="radio" name="option" value="${option.option_content}">
15 |                                             <label>${option.option_content}</label>
16 |                                         </div>`;
17 |                         break;
18 |                     case 'image':
19 |                         optionElement = `<div class="option">
20 |                                             <input type="radio" name="option" value="${option.option_content}">
21 |                                             <img src="${option.option_content}" alt="Option Image" style="max-width: 200px;">
22 |                                         </div>`;
23 |                         break;
24 |                     case 'video':
25 |                         optionElement = `<div class="option">
26 |                                             <input type="radio" name="option" value="${option.option_content}">
27 |                                             <video width="320" height="240" controls>
28 |                                                 <source src="${option.option_content}" type="video/mp4">
29 |                                                 Your browser does not support the video tag.
30 |                                             </video>
31 |                                         </div>`;
32 |                         break;
33 |                     case 'link':
34 |                         optionElement = `<div class="option">
35 |                                             <input type="radio" name="option" value="${option.option_content}">
36 |                                             <a href="${option.option_content}" target="_blank">${option.option_content}</a>
37 |                                         </div>`;
38 |                         break;
39 |                 }
40 |                 $('#options-container').append(optionElement);
41 |             });
42 | 
43 |             $('#submit-btn').click(function() {
44 |                 var selectedOption = $('input[name="option"]:checked').val();
45 |                 if (selectedOption) {
46 |                     if (selectedOption === data.question.answer) {
47 |                         $('#result').text("Correct! The answer is " + data.question.answer + ".");
48 |                     } else {
49 |                         $('#result').text("Incorrect. The correct answer is " + data.question.answer + ".");
50 |                     }
51 |                     $('#result-container').show();
52 |                 } else {
53 |                     alert("Please select an option.");
54 |                 }
55 |             });
56 |         }
57 |     });
58 | });
59 | 


--------------------------------------------------------------------------------
/videos/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------