Parvez

Posted on Jul 1 • Edited on Jul 9

Real-Time Bangla Dictionary Quiz API with PHP & JavaScript (React, WP, Vanilla)

#php #wordpress #react #api

Want to add an interactive quiz to your Bangla learning app or website? In this post, I’ll show you how I built a Real-Time Bangla Word Quiz API using PHP & MySQL, and connected it with React, Vanilla JS, and even WordPress Shortcodes — fully dynamic and fast.

I recently built a real-time Bangla Dictionary Quiz System that delivers dynamic word quizzes using PHP APIs, MySQL, and JavaScript-based frontends — including React, Vanilla JS, and even WordPress Shortcodes.

In this post, I’ll cover:

How I structured the quiz data
How I built a fast PHP API with difficulty filters
How I implemented 3 frontends (React, JS, WordPress).

Step 1: MySQL Quiz Data Structure

To store each quiz, I used a simple table with Bangla word, options (as JSON), correct answer, explanation, and a difficulty level.

CREATE TABLE bangla_quizzes (
  id INT AUTO_INCREMENT PRIMARY KEY,
  word VARCHAR(255),
  meaning TEXT,
  options TEXT,
  correct_option VARCHAR(255),
  explanation TEXT,
  difficulty ENUM('easy', 'medium', 'hard'),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

We store multiple-choice options as a JSON string for flexibility.

Example PHP array:

[
  "word" => "অমর",
  "meaning" => "যে মরে না",
  "options" => json_encode(["অমাবস্যা", "অমর", "অজর", "অমর্ত্য"]),
  "correct_option" => "অমর",
  "difficulty" => "easy",
  "explanation" => "‘অমর’ মানে যার মৃত্যু হয় না।"
]

Step 2: PHP API Endpoint (quiz_data_api.php).

The backend is a simple PHP API that fetches 10 random questions from the database, with optional difficulty filtering via query parameter.

Supports optional filtering via query string:

require 'db_config.php';
header("Content-Type: application/json; charset=utf-8");

$difficulty = $_GET['difficulty'] ?? '';
$where = in_array($difficulty, ['easy', 'medium', 'hard']) ? "WHERE difficulty = '$difficulty'" : "";

$sql = "SELECT * FROM bangla_quizzes $where ORDER BY RAND() LIMIT 10";
$result = mysqli_query($conn, $sql);

$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $row['options'] = json_decode($row['options']);
    $data[] = $row;
}

echo json_encode(["status" => "success", "data" => $data]);

db-config.php file should be below format.

<?php
// Display errors in development (disable in production)
ini_set('display_errors', 1);
error_reporting(E_ALL);

// Database config - update with your real credentials
$host = 'localhost';
$db_user = 'your_db_user';
$db_pass = 'your_db_password';
$db_name = 'your_database_name';

// Create MySQL connection
$conn = mysqli_connect($host, $db_user, $db_pass, $db_name);

// Check connection
if (!$conn) {
    die(json_encode([
        "status" => "error",
        "message" => "Database connection failed: " . mysqli_connect_error()
    ]));
}

// Optional: Set charset to UTF-8 for Bangla support
mysqli_set_charset($conn, "utf8mb4");
?>

Step 3: React Frontend

Using React, we fetch the quiz from the API and render a modern UI with questions and multiple-choice options.

import { useEffect, useState } from "react";

export default function BanglaQuizApp() {
  const [quizzes, setQuizzes] = useState([]);

  useEffect(() => {
    fetch("https://yourdomain.com/quiz_data_api.php?difficulty=easy")
      .then(res => res.json())
      .then(data => setQuizzes(data.data));
  }, []);

  return (
    <div className="p-4 space-y-4">
      {quizzes.map((quiz, i) => (
        <div key={i} className="p-4 border rounded-xl">
          <h2 className="text-xl font-bold">{quiz.word}</h2>
          <ul>
            {quiz.options.map((opt, idx) => (
              <li key={idx}>
                <button className="hover:bg-green-200 p-2">{opt}</button>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Vanilla JavaScript Frontend

If you don’t want to use a framework, this pure JS approach dynamically loads quiz data and renders it using DOM manipulation.

<div id="quizContainer"></div>
<script>
fetch("https://yourdomain.com/quiz_data_api.php?difficulty=medium")
  .then(res => res.json())
  .then(({ data }) => {
    const container = document.getElementById("quizContainer");
    data.forEach((quiz, index) => {
      const div = document.createElement("div");
      div.innerHTML = `<h3>${quiz.word}</h3>` +
        quiz.options.map(opt =>
          `<button onclick="alert('${opt === quiz.correct_option ? '✅ সঠিক উত্তর!' : '❌ ভুল উত্তর'}')">${opt}</button>`
        ).join(" ");
      container.appendChild(div);
    });
  });
</script>

Final Step: WordPress Shortcode Integration

WordPress Shortcode Integration
In your WordPress plugin or functions.php:

function bd_quiz_shortcode() {
  return '<div id="bdQuizApp"></div><script src="https://yourdomain.com/quiz-app.js"></script>';
}
add_shortcode('bd_quiz', 'bd_quiz_shortcode');

Then use [bd_quiz] in any page or post.
You can enqueue a full React or Vanilla JS app with dynamic API calls.

✨ Features You Can Add Next

Score tracking
Quiz timer
Leaderboards
Submit your own word
Word of the Day

Demo & Source
Live: Dictionary Quiz

If you found this useful, follow me for more Dev-friendly tutorials on building language tools, APIs, and WordPress-powered content systems!

DEV Community