{"id":13,"date":"2025-07-09T00:38:51","date_gmt":"2025-07-09T00:38:51","guid":{"rendered":"https:\/\/drkleenbootay.com\/?page_id=13"},"modified":"2025-07-21T16:51:36","modified_gmt":"2025-07-21T16:51:36","slug":"assessment","status":"publish","type":"page","link":"https:\/\/drkleenbootay.com\/?page_id=13","title":{"rendered":"Assessment"},"content":{"rendered":"        \n        <!-- Load Tailwind CSS -->\n        <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n        \n        <!-- Assessment Builder Container -->\n        <div id=\"assessment-builder\" class=\"max-w-4xl mx-auto p-4 bg-white\">\n            \n            <!-- Header -->\n            <div class=\"text-center mb-8\">\n                <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">\n                    \ud83e\udd16 AI Assessment & Rubric Builder                <\/h1>\n                <p class=\"text-lg text-gray-600\">Create IB Business Management assessments with automatic rubric generation<\/p>\n                \n                                    <p class=\"text-sm text-green-600 font-medium\">\u2705 AI Generation Enabled - Assessments + Rubrics<\/p>\n                                \n                <div class=\"mt-4\">\n                    <span class=\"text-sm font-medium text-gray-700\">Step <span id=\"current-step\">1<\/span> of 4<\/span>\n                <\/div>\n                <div class=\"w-full bg-gray-200 rounded-full h-2 mt-2 max-w-md mx-auto\">\n                    <div id=\"progress-bar\" class=\"bg-blue-500 h-2 rounded-full transition-all duration-300\" style=\"width: 25%\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 1: Choose Topic -->\n            <div id=\"step-1\" class=\"step bg-white rounded-lg shadow-lg p-6 mb-6 border\">\n                <h2 class=\"text-2xl font-semibold mb-4\">1. Choose Your Topic<\/h2>\n                <div class=\"grid grid-cols-2 md:grid-cols-3 gap-4\">\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"intro\">\n                        <div class=\"text-3xl mb-2\">\ud83c\udfe2<\/div>\n                        <div class=\"font-medium\">Introduction to Business<\/div>\n                    <\/div>\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"organization\">\n                        <div class=\"text-3xl mb-2\">\ud83c\udfd7\ufe0f<\/div>\n                        <div class=\"font-medium\">Business Organization<\/div>\n                    <\/div>\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"hr\">\n                        <div class=\"text-3xl mb-2\">\ud83d\udc65<\/div>\n                        <div class=\"font-medium\">Human Resources<\/div>\n                    <\/div>\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"finance\">\n                        <div class=\"text-3xl mb-2\">\ud83d\udcb0<\/div>\n                        <div class=\"font-medium\">Finance & Accounts<\/div>\n                    <\/div>\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"marketing\">\n                        <div class=\"text-3xl mb-2\">\ud83d\udcc8<\/div>\n                        <div class=\"font-medium\">Marketing<\/div>\n                    <\/div>\n                    <div class=\"topic-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all text-center\" data-topic=\"operations\">\n                        <div class=\"text-3xl mb-2\">\u2699\ufe0f<\/div>\n                        <div class=\"font-medium\">Operations Management<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 2: Choose Assessment Type -->\n            <div id=\"step-2\" class=\"step bg-white rounded-lg shadow-lg p-6 mb-6 border hidden\">\n                <h2 class=\"text-2xl font-semibold mb-4\">2. Choose Assessment Type<\/h2>\n                <div class=\"grid md:grid-cols-2 gap-4\">\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"case-study\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\ud83d\udccb<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Case Study Analysis<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Advanced + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Analyze real business scenarios with assessment rubric<\/p>\n                    <\/div>\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"presentation\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\u270f\ufe0f<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Business Presentation<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Intermediate + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Create and deliver with grading rubric<\/p>\n                    <\/div>\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"report\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\ud83d\udcc4<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Business Report<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Advanced + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Comprehensive analysis with evaluation rubric<\/p>\n                    <\/div>\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"infographic\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\ud83d\udcca<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Visual Infographic<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Beginner + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Design visual content with assessment criteria<\/p>\n                    <\/div>\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"debate\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\ud83d\udcac<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Business Debate<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Intermediate + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Structured debate with participation rubric<\/p>\n                    <\/div>\n                    <div class=\"assessment-card p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all\" data-type=\"simulation\">\n                        <div class=\"flex items-center mb-2\">\n                            <span class=\"text-2xl mr-3\">\ud83c\udfae<\/span>\n                            <div>\n                                <h3 class=\"font-semibold\">Business Simulation<\/h3>\n                                <span class=\"text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-600\">Advanced + Rubric<\/span>\n                            <\/div>\n                        <\/div>\n                        <p class=\"text-sm text-gray-600\">Role-play scenarios with performance rubric<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 3: Customize (Enhanced with Rubric Options) -->\n            <div id=\"step-3\" class=\"step bg-white rounded-lg shadow-lg p-6 mb-6 border hidden\">\n                <h2 class=\"text-2xl font-semibold mb-4\">3. Customize Assessment & Rubric<\/h2>\n                <div class=\"space-y-6\">\n                    <div>\n                        <label class=\"block text-sm font-medium mb-2\">Assessment Title<\/label>\n                        <input type=\"text\" id=\"assessment-title\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\" placeholder=\"Enter assessment title\">\n                    <\/div>\n                    \n                    <div class=\"grid md:grid-cols-2 gap-4\">\n                        <div>\n                            <label class=\"block text-sm font-medium mb-2\">Time Allocation<\/label>\n                            <select id=\"time-allocation\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\n                                <option value=\"30\">30 minutes<\/option>\n                                <option value=\"45\">45 minutes<\/option>\n                                <option value=\"60\" selected>1 hour<\/option>\n                                <option value=\"90\">1.5 hours<\/option>\n                            <\/select>\n                        <\/div>\n                        \n                        <div>\n                            <label class=\"block text-sm font-medium mb-2\">Difficulty Level<\/label>\n                            <select id=\"difficulty-level\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500\">\n                                <option value=\"beginner\">Beginner<\/option>\n                                <option value=\"intermediate\" selected>Intermediate<\/option>\n                                <option value=\"advanced\">Advanced<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- NEW: Rubric Format Selection -->\n                    <div class=\"bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-4\">\n                        <h3 class=\"text-lg font-semibold mb-3 text-purple-800\">\ud83c\udfaf Choose Rubric Format<\/h3>\n                        <div class=\"grid md:grid-cols-2 gap-3\">\n                            <label class=\"flex items-start p-3 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-50 transition-colors\">\n                                <input type=\"radio\" name=\"rubric-format\" value=\"analytic\" class=\"mr-3 mt-1\" checked>\n                                <div>\n                                    <div class=\"font-medium text-purple-900\">\ud83d\udcca Analytic Rubric<\/div>\n                                    <div class=\"text-sm text-purple-700\">Multiple criteria, 4-point scale<\/div>\n                                <\/div>\n                            <\/label>\n                            \n                            <label class=\"flex items-start p-3 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-50 transition-colors\">\n                                <input type=\"radio\" name=\"rubric-format\" value=\"holistic\" class=\"mr-3 mt-1\">\n                                <div>\n                                    <div class=\"font-medium text-purple-900\">\ud83c\udfaf Holistic Rubric<\/div>\n                                    <div class=\"text-sm text-purple-700\">Single overall performance score<\/div>\n                                <\/div>\n                            <\/label>\n                            \n                            <label class=\"flex items-start p-3 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-50 transition-colors\">\n                                <input type=\"radio\" name=\"rubric-format\" value=\"single-point\" class=\"mr-3 mt-1\">\n                                <div>\n                                    <div class=\"font-medium text-purple-900\">\ud83d\udccd Single Point Rubric<\/div>\n                                    <div class=\"text-sm text-purple-700\">Meets expectations focus<\/div>\n                                <\/div>\n                            <\/label>\n                            \n                            <label class=\"flex items-start p-3 border border-purple-200 rounded-lg cursor-pointer hover:bg-purple-50 transition-colors\">\n                                <input type=\"radio\" name=\"rubric-format\" value=\"standards-based\" class=\"mr-3 mt-1\">\n                                <div>\n                                    <div class=\"font-medium text-purple-900\">\ud83c\udf93 Standards-Based<\/div>\n                                    <div class=\"text-sm text-purple-700\">IB Learning Outcomes aligned<\/div>\n                                <\/div>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 4: Review & Generate -->\n            <div id=\"step-4\" class=\"step bg-white rounded-lg shadow-lg p-6 mb-6 border hidden\">\n                <h2 class=\"text-2xl font-semibold mb-4\">4. Review & Generate<\/h2>\n                <div id=\"review-content\" class=\"bg-gray-50 rounded-lg p-4 mb-4\">\n                    <!-- Review content will be populated here -->\n                <\/div>\n                <div class=\"text-center\">\n                    <button id=\"generate-btn\" class=\"bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-8 rounded-lg transition-colors\">\n                        \ud83e\udd16 Generate Assessment + Rubric                    <\/button>\n                    <div id=\"loading-indicator\" class=\"hidden mt-4\">\n                        <div class=\"inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-green-500\"><\/div>\n                        <p class=\"text-gray-600 mt-2\">AI is creating your assessment and rubric...<\/p>\n                        <p class=\"text-sm text-gray-500\">This may take 30-60 seconds<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Navigation -->\n            <div class=\"flex justify-between\">\n                <button id=\"prev-btn\" class=\"bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors hidden\">\n                    \u2190 Previous\n                <\/button>\n                <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors ml-auto\">\n                    Next \u2192\n                <\/button>\n            <\/div>\n\n            <!-- Enhanced Assessment Modal with Tabs -->\n            <div id=\"assessment-modal\" class=\"fixed inset-0 bg-black bg-opacity-50 hidden z-50\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;\">\n                <div class=\"flex items-center justify-center min-h-screen p-4\">\n                    <div class=\"bg-white rounded-lg shadow-2xl max-w-5xl w-full max-h-screen overflow-hidden\">\n                        <div class=\"p-6\">\n                            <div class=\"flex justify-between items-center mb-4\">\n                                <h3 class=\"text-2xl font-bold\" id=\"modal-title\">Generated Assessment & Rubric<\/h3>\n                                <button id=\"close-modal\" class=\"text-gray-500 hover:text-gray-700 text-2xl font-bold\">&times;<\/button>\n                            <\/div>\n                            \n                            <!-- Tab Navigation -->\n                            <div class=\"border-b border-gray-200 mb-6\">\n                                <nav class=\"flex space-x-8\">\n                                    <button id=\"tab-assessment\" class=\"tab-button py-2 px-1 border-b-2 border-blue-500 font-medium text-sm text-blue-600\">\n                                        \ud83d\udccb Assessment\n                                    <\/button>\n                                    <button id=\"tab-rubric\" class=\"tab-button py-2 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300\">\n                                        \ud83c\udfaf Rubric\n                                    <\/button>\n                                <\/nav>\n                            <\/div>\n                            \n                            <!-- Tab Content -->\n                            <div id=\"tab-content-assessment\" class=\"tab-content max-h-96 overflow-y-auto mb-6\">\n                                <div id=\"generated-assessment-content\">\n                                    <!-- Generated assessment will appear here -->\n                                <\/div>\n                            <\/div>\n                            \n                            <div id=\"tab-content-rubric\" class=\"tab-content max-h-96 overflow-y-auto mb-6 hidden\">\n                                <div id=\"generated-rubric-content\">\n                                    <!-- Generated rubric will appear here -->\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"flex space-x-4\">\n                                <button id=\"print-assessment-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg\">\n                                    \ud83d\udda8\ufe0f Print Assessment\n                                <\/button>\n                                <button id=\"print-rubric-btn\" class=\"bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg\">\n                                    \ud83d\udda8\ufe0f Print Rubric\n                                <\/button>\n                                <button id=\"print-both-btn\" class=\"bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg\">\n                                    \ud83d\udda8\ufe0f Print Both\n                                <\/button>\n                                <button id=\"new-assessment-btn\" class=\"bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded-lg ml-auto\">\n                                    \u2728 New Assessment\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <script>\n        \/\/ Enhanced JavaScript with rubric functionality\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ AI settings from PHP\n            const aiEnabled = true;\n            const ajaxUrl = 'https:\/\/drkleenbootay.com\/wp-admin\/admin-ajax.php';\n            const ajaxNonce = '4c80166eb9';\n            \n            \/\/ Use vanilla JavaScript to avoid jQuery conflicts\n            let currentStep = 1;\n            let selectedTopic = '';\n            let selectedType = '';\n            let assessmentData = {};\n            let generatedData = {};\n\n            \/\/ Topic selection\n            document.querySelectorAll('.topic-card').forEach(function(card) {\n                card.addEventListener('click', function() {\n                    \/\/ Remove selection from all cards\n                    document.querySelectorAll('.topic-card').forEach(function(c) {\n                        c.classList.remove('border-blue-500', 'bg-blue-50');\n                        c.classList.add('border-gray-200');\n                    });\n                    \n                    \/\/ Add selection to clicked card\n                    this.classList.remove('border-gray-200');\n                    this.classList.add('border-blue-500', 'bg-blue-50');\n                    selectedTopic = this.getAttribute('data-topic');\n                    updateNavigation();\n                });\n            });\n\n            \/\/ Assessment type selection\n            document.querySelectorAll('.assessment-card').forEach(function(card) {\n                card.addEventListener('click', function() {\n                    \/\/ Remove selection from all cards\n                    document.querySelectorAll('.assessment-card').forEach(function(c) {\n                        c.classList.remove('border-blue-500', 'bg-blue-50');\n                        c.classList.add('border-gray-200');\n                    });\n                    \n                    \/\/ Add selection to clicked card\n                    this.classList.remove('border-gray-200');\n                    this.classList.add('border-blue-500', 'bg-blue-50');\n                    selectedType = this.getAttribute('data-type');\n                    updateNavigation();\n                });\n            });\n\n            \/\/ Tab switching\n            document.getElementById('tab-assessment').addEventListener('click', function() {\n                showTab('assessment');\n            });\n            \n            document.getElementById('tab-rubric').addEventListener('click', function() {\n                showTab('rubric');\n            });\n\n            \/\/ Next button\n            document.getElementById('next-btn').addEventListener('click', function() {\n                if (currentStep === 1 && !selectedTopic) {\n                    alert('Please select a topic first!');\n                    return;\n                }\n                if (currentStep === 2 && !selectedType) {\n                    alert('Please select an assessment type first!');\n                    return;\n                }\n                \n                if (currentStep < 4) {\n                    document.getElementById('step-' + currentStep).classList.add('hidden');\n                    currentStep++;\n                    document.getElementById('step-' + currentStep).classList.remove('hidden');\n                    \n                    if (currentStep === 4) {\n                        showReview();\n                    }\n                    \n                    updateProgress();\n                    updateNavigation();\n                }\n            });\n\n            \/\/ Previous button\n            document.getElementById('prev-btn').addEventListener('click', function() {\n                if (currentStep > 1) {\n                    document.getElementById('step-' + currentStep).classList.add('hidden');\n                    currentStep--;\n                    document.getElementById('step-' + currentStep).classList.remove('hidden');\n                    updateProgress();\n                    updateNavigation();\n                }\n            });\n\n            \/\/ Generate button\n            document.getElementById('generate-btn').addEventListener('click', function() {\n                generateAssessment();\n            });\n\n            \/\/ Close modal\n            document.getElementById('close-modal').addEventListener('click', function() {\n                document.getElementById('assessment-modal').style.display = 'none';\n            });\n\n            \/\/ Print buttons\n            document.getElementById('print-assessment-btn').addEventListener('click', function() {\n                printContent('assessment');\n            });\n            \n            document.getElementById('print-rubric-btn').addEventListener('click', function() {\n                printContent('rubric');\n            });\n            \n            document.getElementById('print-both-btn').addEventListener('click', function() {\n                printContent('both');\n            });\n\n            \/\/ New assessment button\n            document.getElementById('new-assessment-btn').addEventListener('click', function() {\n                location.reload();\n            });\n\n            function showTab(tabName) {\n                \/\/ Update tab buttons\n                document.querySelectorAll('.tab-button').forEach(function(btn) {\n                    btn.classList.remove('border-blue-500', 'text-blue-600');\n                    btn.classList.add('border-transparent', 'text-gray-500');\n                });\n                \n                document.getElementById('tab-' + tabName).classList.remove('border-transparent', 'text-gray-500');\n                document.getElementById('tab-' + tabName).classList.add('border-blue-500', 'text-blue-600');\n                \n                \/\/ Update tab content\n                document.querySelectorAll('.tab-content').forEach(function(content) {\n                    content.classList.add('hidden');\n                });\n                \n                document.getElementById('tab-content-' + tabName).classList.remove('hidden');\n            }\n\n            function updateProgress() {\n                const progress = (currentStep \/ 4) * 100;\n                document.getElementById('progress-bar').style.width = progress + '%';\n                document.getElementById('current-step').textContent = currentStep;\n            }\n\n            function updateNavigation() {\n                const prevBtn = document.getElementById('prev-btn');\n                const nextBtn = document.getElementById('next-btn');\n                \n                if (currentStep === 1) {\n                    prevBtn.classList.add('hidden');\n                } else {\n                    prevBtn.classList.remove('hidden');\n                }\n\n                if (currentStep === 4) {\n                    nextBtn.classList.add('hidden');\n                } else {\n                    nextBtn.classList.remove('hidden');\n                }\n            }\n\n            function showReview() {\n                const topicNames = {\n                    'intro': 'Introduction to Business',\n                    'organization': 'Business Organization', \n                    'hr': 'Human Resources',\n                    'finance': 'Finance & Accounts',\n                    'marketing': 'Marketing',\n                    'operations': 'Operations Management'\n                };\n\n                const typeNames = {\n                    'case-study': 'Case Study Analysis',\n                    'presentation': 'Business Presentation',\n                    'report': 'Business Report',\n                    'infographic': 'Visual Infographic',\n                    'debate': 'Business Debate',\n                    'simulation': 'Business Simulation'\n                };\n\n                const rubricNames = {\n                    'analytic': 'Analytic Rubric (4-point scale)',\n                    'holistic': 'Holistic Rubric (overall score)',\n                    'single-point': 'Single Point Rubric (meets expectations)',\n                    'standards-based': 'Standards-Based Rubric (IB aligned)'\n                };\n\n                const titleInput = document.getElementById('assessment-title');\n                const timeInput = document.getElementById('time-allocation');\n                const difficultyInput = document.getElementById('difficulty-level');\n                const rubricInput = document.querySelector('input[name=\"rubric-format\"]:checked');\n\n                assessmentData = {\n                    topic: selectedTopic,\n                    topicName: topicNames[selectedTopic],\n                    type: selectedType,\n                    typeName: typeNames[selectedType],\n                    title: titleInput.value || (topicNames[selectedTopic] + ' ' + typeNames[selectedType]),\n                    time: timeInput.value,\n                    difficulty: difficultyInput.value,\n                    rubricFormat: rubricInput.value,\n                    rubricName: rubricNames[rubricInput.value]\n                };\n\n                let reviewHtml = '<h3 class=\"font-semibold text-lg mb-2\">' + assessmentData.title + '<\/h3>';\n                reviewHtml += '<p class=\"text-gray-600 mb-4\">' + assessmentData.topicName + ' \u2022 ' + assessmentData.typeName + '<\/p>';\n                reviewHtml += '<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">';\n                reviewHtml += '<div><strong>Duration:<\/strong> ' + assessmentData.time + ' minutes<\/div>';\n                reviewHtml += '<div><strong>Difficulty:<\/strong> ' + assessmentData.difficulty + '<\/div>';\n                reviewHtml += '<div class=\"md:col-span-2\"><strong>Rubric Format:<\/strong> ' + assessmentData.rubricName + '<\/div>';\n                reviewHtml += '<\/div>';\n\n                if (aiEnabled) {\n                    reviewHtml += '<div class=\"mt-4 p-3 bg-green-50 border border-green-200 rounded-lg\">';\n                    reviewHtml += '<p class=\"text-green-800 text-sm\">\u2705 AI will generate both assessment and customized rubric<\/p>';\n                    reviewHtml += '<\/div>';\n                }\n\n                document.getElementById('review-content').innerHTML = reviewHtml;\n            }\n\n            function generateAssessment() {\n                if (aiEnabled) {\n                    generateAIAssessment();\n                } else {\n                    generateStandardAssessment();\n                }\n            }\n            \n            function generateAIAssessment() {\n                \/\/ Show loading indicator\n                document.getElementById('generate-btn').style.display = 'none';\n                document.getElementById('loading-indicator').classList.remove('hidden');\n                \n                \/\/ Prepare data for AI generation\n                const data = new FormData();\n                data.append('action', 'generate_ai_assessment');\n                data.append('nonce', ajaxNonce);\n                data.append('topic', assessmentData.topic);\n                data.append('assessment_type', assessmentData.type);\n                data.append('title', assessmentData.title);\n                data.append('time', assessmentData.time);\n                data.append('difficulty', assessmentData.difficulty);\n                data.append('rubric_format', assessmentData.rubricFormat);\n                \n                \/\/ Call AI generation\n                fetch(ajaxUrl, {\n                    method: 'POST',\n                    body: data\n                })\n                .then(response => response.json())\n                .then(result => {\n                    \/\/ Hide loading indicator\n                    document.getElementById('loading-indicator').classList.add('hidden');\n                    document.getElementById('generate-btn').style.display = 'inline-block';\n                    \n                    if (result.success) {\n                        \/\/ Store generated data\n                        generatedData = result.data;\n                        \n                        \/\/ Update modal title\n                        document.getElementById('modal-title').textContent = '\ud83e\udd16 AI-Generated Assessment & Rubric';\n                        \n                        \/\/ Display AI-generated assessment\n                        let assessmentContent = '<div style=\"text-center; margin-bottom: 1.5rem;\">';\n                        assessmentContent += '<h1 style=\"font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem;\">' + assessmentData.title + '<\/h1>';\n                        assessmentContent += '<p style=\"color: #6b7280;\">AI-Generated Assessment \u2022 ' + assessmentData.topicName + ' \u2022 ' + assessmentData.time + ' minutes<\/p>';\n                        assessmentContent += '<\/div>';\n                        assessmentContent += result.data.assessment;\n                        \n                        document.getElementById('generated-assessment-content').innerHTML = assessmentContent;\n                        \n                        \/\/ Display AI-generated rubric\n                        let rubricContent = '<div style=\"text-center; margin-bottom: 1.5rem;\">';\n                        rubricContent += '<h1 style=\"font-size: 2rem; font-weight: bold; margin-bottom: 0.5rem;\">Assessment Rubric<\/h1>';\n                        rubricContent += '<p style=\"color: #6b7280;\">AI-Generated ' + assessmentData.rubricName + ' \u2022 ' + assessmentData.topicName + '<\/p>';\n                        rubricContent += '<\/div>';\n                        rubricContent += result.data.rubric;\n                        \n                        document.getElementById('generated-rubric-content').innerHTML = rubricContent;\n                        \n                        \/\/ Show modal and default to assessment tab\n                        document.getElementById('assessment-modal').style.display = 'block';\n                        showTab('assessment');\n                    } else {\n                        alert('Error generating assessment: ' + result.data);\n                    }\n                })\n                .catch(error => {\n                    \/\/ Hide loading indicator\n                    document.getElementById('loading-indicator').classList.add('hidden');\n                    document.getElementById('generate-btn').style.display = 'inline-block';\n                    \n                    console.error('Error:', error);\n                    alert('An error occurred while generating the assessment. Please try again.');\n                });\n            }\n            \n            function generateStandardAssessment() {\n                \/\/ Standard mode - show message about AI features\n                alert('AI features are disabled. Enable AI in admin settings to generate custom assessments and rubrics.');\n            }\n\n            function printContent(type) {\n                let printContent = '';\n                let title = 'Assessment';\n                \n                if (type === 'assessment') {\n                    printContent = document.getElementById('generated-assessment-content').innerHTML;\n                    title = 'Assessment - ' + assessmentData.title;\n                } else if (type === 'rubric') {\n                    printContent = document.getElementById('generated-rubric-content').innerHTML;\n                    title = 'Rubric - ' + assessmentData.title;\n                } else if (type === 'both') {\n                    printContent = '<div style=\"margin-bottom: 2rem;\">' + document.getElementById('generated-assessment-content').innerHTML + '<\/div>';\n                    printContent += '<div style=\"page-break-before: always;\">' + document.getElementById('generated-rubric-content').innerHTML + '<\/div>';\n                    title = 'Assessment & Rubric - ' + assessmentData.title;\n                }\n                \n                let printWindow = window.open('', '_blank');\n                \n                printWindow.document.write(`\n                    <!DOCTYPE html>\n                    <html>\n                    <head>\n                        <title>${title}<\/title>\n                        <style>\n                            body { \n                                font-family: Arial, sans-serif; \n                                margin: 20px; \n                                line-height: 1.6; \n                                color: #333;\n                            }\n                            h1, h2, h3 { \n                                color: #333; \n                                margin-top: 1.5rem;\n                                margin-bottom: 0.5rem;\n                            }\n                            table { \n                                width: 100%; \n                                border-collapse: collapse; \n                                margin: 1rem 0;\n                            }\n                            th, td { \n                                border: 1px solid #ddd; \n                                padding: 8px; \n                                text-align: left; \n                            }\n                            th { \n                                background-color: #f5f5f5; \n                                font-weight: bold;\n                            }\n                            .no-break { \n                                page-break-inside: avoid; \n                            }\n                            @media print { \n                                body { margin: 0; }\n                                .page-break { page-break-before: always; }\n                            }\n                        <\/style>\n                    <\/head>\n                    <body>\n                        ${printContent}\n                    <\/body>\n                    <\/html>\n                `);\n                \n                printWindow.document.close();\n                printWindow.print();\n            }\n        });\n        <\/script>\n\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":10,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":142,"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/142"}],"wp:attachment":[{"href":"https:\/\/drkleenbootay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}