WP React Frontend Quiz

A fun quiz game built with React for WordPress frontend. This plugin allows you to embed an interactive quiz on any WordPress page or post using a simple shortcode.

Features

• Interactive quiz with multiple-choice questions
• Score tracking and display
• High scores leaderboard
• Responsive design that works on all devices
• WordPress REST API integration for data storage
• Built with modern React and WordPress scripts

Installation

1. Download the plugin zip file or clone the repository to your WordPress plugins directory
2. Navigate to your WordPress plugins directory: wp-content/plugins/
3. If you downloaded the zip, extract it to the plugins directory
4. Activate the plugin through the WordPress admin interface

Usage

Basic Usage

Add the quiz to any page or post using the shortcode:

[react_quiz]

Customization

The quiz questions are defined in the src/index.js file. You can modify the questions array to add your own questions:

const questions = [
    {
        question: 'Your question here?',
        options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
        correct: 2  // Index of the correct answer (0-based)
    },
    // Add more questions...
];

Development Setup

Prerequisites

• Node.js (v14 or later recommended)
• npm (v6 or later)
• WordPress development environment

Project Structure

wp-react-frontend/
├── build/                  # Compiled files (generated)
├── src/                    # Source files
│   ├── index.js            # Main React application
│   └── styles.css          # Styles
├── wp-react-frontend.php   # Main plugin file
├── package.json            # npm dependencies and scripts
└── README.md               # This file

Getting Started

1. Clone the repository to your WordPress plugins directory

git clone https://github.com/ikamal7/wp-react-frontend.git wp-content/plugins/wp-react-frontend

2. Navigate to the plugin directory

cd wp-content/plugins/wp-react-frontend

3. Install dependencies

npm install

4. Start the development server

npm start

5. Build for production

npm run build

Available Scripts

• npm start - Starts the development server with hot reloading
• npm run build - Builds the app for production
• npm run format - Formats code using WordPress coding standards
• npm run lint:js - Lints JavaScript files

REST API Endpoints

The plugin registers the following REST API endpoints:

• POST /wp-json/wp-react-frontend/v1/save-score - Save a player's score
• GET /wp-json/wp-react-frontend/v1/high-scores - Get the top 10 high scores

Database

The plugin creates a custom database table {prefix}_quiz_scores to store player scores with the following structure:

• id - Auto-incremented ID
• player_name - Name of the player
• score - Player's score
• created_at - Timestamp when the score was recorded

Support

For support, feature requests, or bug reports, please open an issue on GitHub.

License

GPL v2 or later

Credits

Developed by Kamal Hosen.