How to Create a Custom MCQ Post Type for Automated Design

Introduction

• Custom post types in WordPress allow you to structure content beyond just posts and pages.
• This guide focuses on creating an MCQ (Multiple Choice Questions) post type with custom fields for questions, options, answers, and explanations.
• The implementation includes ACF (Advanced Custom Fields) for handling questions dynamically.
  

Step-by-Step Guide

1. Register the Custom Post Type

• The register_post_type() function is used to create a custom post type named MCQ Questions.
• It includes features like title, editor, thumbnail, custom fields, comments, and revisions.
• Categories and tags are also enabled for better organization.

2. Creating a Flexible MCQ Structure

• Using Advanced Custom Fields (ACF), a repeater field is utilized to add multiple questions under a single post.
• Each question can have:
  • Text-based or Image-based options.
  • A correct answer (either text or image).
  • An explanation section, which remains hidden until revealed.

3. Displaying MCQ Questions Dynamically

• The function display_mcq_questions() is hooked to the_content to automatically display MCQs on the frontend.
• It loops through the repeater field to:
  • Display questions and options.
  • Indicate the correct answer.
  • Provide an expandable explanation section.

4. JavaScript for Interactive Explanations

• A simple JavaScript function is added to toggle the visibility of explanations.
• Users can click a button to reveal/hide the explanation dynamically.

5. Styling Enhancements

• Custom styling is applied for better readability, including:
  • Bold question numbers and options.
  • Colored sections for correct answers and explanations.
  • HR separators for clear distinction between questions.

// Register Custom Post Type for MCQ Questions
function create_mcq_post_type() {
    $labels = array(
        'name'               => 'MCQ Questions',
        'singular_name'      => 'MCQ Question',
        'menu_name'          => 'MCQ Questions',
        'add_new'            => 'Add New',
        'add_new_item'       => 'Add New Question',
        'edit_item'          => 'Edit Question',
        'view_item'          => 'View Question',
        'all_items'          => 'All Questions',
        'search_items'       => 'Search Questions',
        'not_found'          => 'No questions found.',
        'not_found_in_trash' => 'No questions found in Trash.',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'show_ui'            => true,
        'menu_position'      => 4,
        'supports'           => array('title', 'editor', 'thumbnail', 'custom-fields', 'excerpt', 'author', 'comments', 'revisions'),
        'show_in_rest'       => true,
        'has_archive'        => true,
        'taxonomies'         => array('category', 'post_tag'),
        'menu_icon'          => 'dashicons-editor-paste-text',
    );

    register_post_type('mcq_question', $args);
}
add_action('init', 'create_mcq_post_type');

// Display MCQ Questions, Options, Answers, and Explanations
function display_mcq_questions($content) {
    if (is_singular('mcq_question')) {
        if (have_rows('questions')) {
            $output = '';
            $question_number = 1;

            while (have_rows('questions')) {
                the_row();

                if ($question_number > 1) {
                    $output .= '
';
                }

                // Fetch question content
                $question_text = get_sub_field('question_text');
                $question_image = get_sub_field('question_image');

                // Display question
                if ($question_text) {
                    $output .= '
Question ' . $question_number . ': ' . esc_html($question_text) . '
';
                }
                if ($question_image) {
                    $output .= '
';
                }

                // Display options
                $options_type = get_sub_field('options_type');
                $option_labels = array('A', 'B', 'C', 'D');
                $index = 0;

                if ($options_type == 'Text' && have_rows('options_type_text')) {
                    $output .= '
Options:
';
                    while (have_rows('options_type_text')) {
                        the_row();
                        $option_text = get_sub_field('options_text');
                        if ($option_text) {
                            $label = $option_labels[$index] ?? chr(65 + $index);
                            $output .= '
' . esc_html($label . ') ' . $option_text) . '
';
                            $index++;
                        }
                    }
                    $output .= '
';
                }

                // Display correct answer
                $correct_answer_type = get_sub_field('correct_answer_type');
                if ($correct_answer_type == 'Text') {
                    $correct_answer = get_sub_field('correct_answer_text');
                    $output .= '
Correct Answer: ' . esc_html($correct_answer) . '
';
                }

                // Display explanation (if available)
                $explanation_content = get_sub_field('explanation_text');
                $explanation_image = get_sub_field('explanation_image');
                $explanation_id = uniqid('explanation_');

                if ($explanation_content || $explanation_image) {
                    $output .= '
';
                    if ($explanation_content) {
                        $output .= '
Explanation: ' . wpautop(esc_html($explanation_content)) . '
';
                    }
                    if ($explanation_image) {
                        $output .= '
Explanation Image: 
';
                    }
                    $output .= '
';
                    $output .= '';
                }

                $question_number++;
            }

            $content .= $output;
            $content .= '';
        }
    }
    return $content;
}
add_filter('the_content', 'display_mcq_questions');

Conclusion

• This Custom MCQ Post Type allows automated structuring of questions in WordPress.
• ACF Repeater fields make it easy to add, edit, and manage multiple questions under one post.
• JavaScript toggling enhances the user experience by keeping the UI clean.

🚀 Now, you can create dynamic MCQ posts in WordPress easily! 🚀