Bible Quiz

function bible_quiz_selector_shortcode() {
    ob_start();
    ?>
    <div id="bible-quiz-container">
        <label for="bookSelect">Select Book:</label>
        <select id="bookSelect">
            <option value="">--Choose Book--</option>
            <option value="Matthew">Matthew</option>
            <option value="Mark">Mark</option>
            <!-- Add more books as needed -->
        </select>

        <label for="chapterSelect">Select Chapter:</label>
        <select id="chapterSelect">
            <option value="">--Choose Chapter--</option>
        </select>

        <div id="quizArea"></div>
    </div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Map of quizzes: Book -> Chapter -> Quiz ID
        const quizMap = {
            "Matthew": {
                1: 12,
                2: 13,
                3: 14
            },
            "Mark": {
                1: 20,
                2: 21
            }
        };

        const bookSelect = document.getElementById("bookSelect");
        const chapterSelect = document.getElementById("chapterSelect");
        const quizArea = document.getElementById("quizArea");

        // Populate chapters when book changes
        bookSelect.addEventListener("change", function() {
            const book = this.value;
            chapterSelect.innerHTML = '<option value="">--Choose Chapter--</option>';

            if (quizMap[book]) {
                Object.keys(quizMap[book]).forEach(ch => {
                    let opt = document.createElement("option");
                    opt.value = ch;
                    opt.text = "Chapter " + ch;
                    chapterSelect.appendChild(opt);
                });
            }
        });

        // Load quiz when chapter is selected
        chapterSelect.addEventListener("change", function() {
            const book = bookSelect.value;
            const chapter = this.value;

            if (quizMap[book] && quizMap[book][chapter]) {
                const quizId = quizMap[book][chapter];
                quizArea.innerHTML = '[ays_quiz id="' + quizId + '"]';

                // Render the shortcode properly (WordPress AJAX)
                fetch('<?php echo admin_url("admin-ajax.php"); ?>?action=do_shortcode&sc=' + encodeURIComponent('[ays_quiz id="' + quizId + '"]'))
                    .then(res => res.text())
                    .then(html => {
                        quizArea.innerHTML = html;
                    });
            } else {
                quizArea.innerHTML = "";
            }
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('bible_quiz_selector', 'bible_quiz_selector_shortcode');

// AJAX handler for rendering shortcodes
function bible_quiz_do_shortcode() {
    if (!empty($_GET['sc'])) {
        echo do_shortcode(sanitize_text_field($_GET['sc']));
    }
    wp_die();
}
add_action('wp_ajax_do_shortcode', 'bible_quiz_do_shortcode');
add_action('wp_ajax_nopriv_do_shortcode', 'bible_quiz_do_shortcode');