{"id":67004,"date":"2026-07-22T10:04:22","date_gmt":"2026-07-22T07:04:22","guid":{"rendered":"https:\/\/www.alardha.com\/blog\/?page_id=67004"},"modified":"2026-07-22T10:47:57","modified_gmt":"2026-07-22T07:47:57","slug":"kja_mcq_quizzes_list","status":"publish","type":"page","link":"https:\/\/www.alardha.com\/blog\/kja_mcq_quizzes_list\/","title":{"rendered":"\u0625\u062e\u0646\u0628\u0627\u0631\u0627\u062a \u0645\u062d\u0627\u0643\u064a\u0629\u060c \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0625\u062e\u062a\u0628\u0627\u0631\u0627\u062a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"67004\" class=\"elementor elementor-67004\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3b7d865d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3b7d865d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6ae13673\" data-id=\"6ae13673\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5d3b095 elementor-widget elementor-widget-shortcode\" data-id=\"5d3b095\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div class=\"kja-mcq-quiz kja-mcq-quiz-list\" dir=\"rtl\">\r\n            <div class=\"kja-mcq-quiz-nav\" dir=\"rtl\">\r\n        <nav class=\"kja-mcq-quiz-nav-container\">\r\n            <!-- Quizzes list -->\r\n            <a href=\"https:\/\/www.alardha.com\/blog\/kja_mcq_quizzes_list\/\"\r\n               class=\"kja-mcq-quiz-nav-item\">\r\n                <span class=\"kja-mcq-quiz-nav-icon\">\ud83d\udccb<\/span>\r\n                <span class=\"kja-mcq-quiz-nav-label\">\u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a<\/span>\r\n            <\/a>\r\n\r\n            <!-- My results (logged-in only) -->\r\n            \r\n            <!-- Teacher dashboard (teachers only) -->\r\n            \r\n            <!-- Stats (teachers only) -->\r\n            \r\n            <!-- Settings (teachers only) -->\r\n                    <\/nav>\r\n    <\/div>\r\n\r\n    <style>\r\n    .kja-mcq-quiz-nav {\r\n        background: #f9f5f0 !important;\r\n        padding: 0.75rem 0;\r\n        text-align: center;\r\n        margin-bottom: 20px;\r\n    }\r\n    .kja-mcq-quiz-nav-container {\r\n        display: inline-flex;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 0.5rem;\r\n        background: #f9f5f0;\r\n        border-radius: 8px;\r\n        padding: 6px 8px;\r\n    }\r\n    .kja-mcq-quiz-nav-item {\r\n        color: #222;\r\n        background: #fff;\r\n        border-radius: 6px;\r\n        padding: 6px 12px;\r\n        text-decoration: none;\r\n        font-weight: 600;\r\n        border: 1px solid #ddd;\r\n        transition: all 0.2s ease;\r\n    }\r\n    .kja-mcq-quiz-nav-item:hover,\r\n    .kja-mcq-quiz-nav-item.active {\r\n        background: #0073aa;\r\n        color: #fff;\r\n        border-color: #0073aa;\r\n    }\r\n    .kja-mcq-quiz-nav-icon {\r\n        margin-inline-start: 4px;\r\n        margin-inline-end: 0;\r\n    }\r\n    .kja-mcq-quiz-nav-label {\r\n        white-space: nowrap;\r\n    }\r\n    @media (max-width: 600px) {\r\n        .kja-mcq-quiz-nav-item {\r\n            font-size: 14px;\r\n            padding: 6px 10px;\r\n        }\r\n    }\r\n    <\/style>\r\n            <div class=\"kja-mcq-separator\"><\/div>\r\n        <p class=\"kja-mcq-meta\" style=\"text-align:center; margin:.25rem 0 .75rem 0;\">\r\n        \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u062e\u062a\u0628\u0631\u064a\u0646: \ud83d\udc68\u200d\ud83c\udf93 <strong>0<\/strong> \u0645\u062e\u062a\u0628\u0631\u0627\u064b\r\n    <\/p>\r\n\r\n                    <p style=\"text-align:center; margin:2rem 0;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u062d\u0627\u0644\u064a\u0627\u064b.<\/p>\r\n        \r\n        <div class=\"kja-mcq-separator\"><\/div>        <p class=\"kja-mcq-quiz-footer\" style=\"text-align:center;font-size:.9rem;color:#555;margin-top:.5rem;\">\r\n            \r\n        <span style=\"display:inline-flex; align-items:center; gap:6px; font-size:.9rem; direction:rtl;\">\r\n            \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u00a9 KJA Multiple-choice Quiz 1.0.3\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/www.alardha.com\/blog\/wp-content\/uploads\/2025\/11\/kja_qr-code_icon.png\"\r\n                 alt=\"KJA QR Icon\"\r\n                 title=\"\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\"\r\n                 aria-label=\"\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\"\r\n                 class=\"kja_mcq_site-url_qr_popup\"\r\n                 style=\"width:18px; height:18px; display:inline-block; vertical-align:middle; cursor:pointer;\" \/>\r\n        <\/span>\r\n            <\/p>\r\n\r\n    <\/div>\r\n        <script>\r\n    (function(){\r\n        const quizzes = [];\r\n        const studentPage = \"https:\\\/\\\/www.alardha.com\\\/blog\\\/kja_mcq_student_page\\\/\";\r\n        const canEdit = false;\r\n        const perPage = 12;\r\n        let currentPage = 1;\r\n\r\n\r\n        \/\/ filtered array used for search + pagination\r\n        let filtered = quizzes.slice();\r\n\r\n        function esc(s){\r\n            const d=document.createElement('div');\r\n            d.textContent=s;\r\n            return d.innerHTML;\r\n        }\r\n\r\n        function attr(s){\r\n            return esc(s).replace(\/\"\/g, \"&quot;\");\r\n        }\r\n\r\n        const MCQ_KEYS = [\"a\", \"b\", \"c\", \"d\"];\r\n\r\n        const MCQ_LABELS = {a:\"\u0623\", b:\"\u0628\", c:\"\u062c\", d:\"\u062f\"};\r\n\r\n        function mcqBuilderId(builder){\r\n            let id = builder.getAttribute(\"data-builder-id\");\r\n            if (!id) {\r\n                id = \"mcq_edit_\" + Math.random().toString(36).slice(2);\r\n                builder.setAttribute(\"data-builder-id\", id);\r\n            }\r\n            return id;\r\n        }\r\n\r\n        function mcqQuestionHtml(q, index, builderId){\r\n            q = q || {};\r\n            const choices = (q.choices && typeof q.choices === \"object\") ? q.choices : {};\r\n            const correct = MCQ_KEYS.includes(q.correct) ? q.correct : \"\";\r\n            let html = `<div class=\"kja-mcq-builder-item\" data-mcq-question><div class=\"kja-mcq-builder-head\"><strong>\u0627\u0644\u0633\u0624\u0627\u0644 ${index + 1}<\/strong><button type=\"button\" class=\"kja-mcq-icon-btn\" data-mcq-remove title=\"\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0633\u0624\u0627\u0644\" aria-label=\"\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0633\u0624\u0627\u0644\"><\/button><\/div><input class=\"kja-mcq-input kja-mcq-builder-question\" type=\"text\" value=\"${attr(q.q || \"\")}\" placeholder=\"\u0646\u0635 \u0627\u0644\u0633\u0624\u0627\u0644\" aria-label=\"\u0646\u0635 \u0627\u0644\u0633\u0624\u0627\u0644 ${index + 1}\" \/>`;\r\n            MCQ_KEYS.forEach(function(key){\r\n                const label = MCQ_LABELS[key] || key;\r\n                html += `<div class=\"kja-mcq-choice-row\"><span class=\"kja-mcq-choice-key\">${label}<\/span><input class=\"kja-mcq-input kja-mcq-builder-choice\" data-choice=\"${key}\" type=\"text\" value=\"${attr(choices[key] || \"\")}\" placeholder=\"\u0627\u0644\u062e\u064a\u0627\u0631 ${label}\" aria-label=\"\u0627\u0644\u062e\u064a\u0627\u0631 ${label}\" \/><label class=\"kja-mcq-correct-choice\"><input type=\"radio\" name=\"correct_${builderId}_${index}\" value=\"${key}\" ${correct === key ? \"checked\" : \"\"} \/> \u0627\u0644\u0625\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u062d\u064a\u062d\u0629<\/label><\/div>`;\r\n            });\r\n            html += `<\/div>`;\r\n            return html;\r\n        }\r\n\r\n        function refreshMcqBuilder(builder){\r\n            const builderId = mcqBuilderId(builder);\r\n            Array.from(builder.querySelectorAll(\"[data-mcq-question]\")).forEach(function(item, index){\r\n                const title = item.querySelector(\".kja-mcq-builder-head strong\");\r\n                if (title) title.textContent = \"\u0627\u0644\u0633\u0624\u0627\u0644 \" + (index + 1);\r\n                item.querySelectorAll(\"input[type=radio]\").forEach(function(radio){\r\n                    radio.name = \"correct_\" + builderId + \"_\" + index;\r\n                });\r\n            });\r\n        }\r\n\r\n        function addMcqQuestion(builder, q){\r\n            if (!builder) return;\r\n            const builderId = mcqBuilderId(builder);\r\n            const wrap = document.createElement(\"div\");\r\n            wrap.innerHTML = mcqQuestionHtml(q || {}, builder.querySelectorAll(\"[data-mcq-question]\").length, builderId);\r\n            builder.appendChild(wrap.firstElementChild);\r\n            refreshMcqBuilder(builder);\r\n        }\r\n\r\n        function initMcqBuilder(builder, questions){\r\n            if (!builder) return;\r\n            builder.innerHTML = \"\";\r\n            (Array.isArray(questions) && questions.length ? questions : [{}]).forEach(function(q){\r\n                addMcqQuestion(builder, q);\r\n            });\r\n        }\r\n\r\n        function renderPage(page = 1) {\r\n            const tbody = document.getElementById('kja-mcq-quiz-list-tbody');\r\n            const pag = document.getElementById('kja-mcq-list-pagination');\r\n            if (!tbody || !pag) return;\r\n\r\n            const totalPages = Math.ceil(filtered.length \/ perPage) || 1;\r\n            currentPage = Math.max(1, Math.min(page, totalPages));\r\n            const start = (currentPage - 1) * perPage;\r\n            const slice = filtered.slice(start, start + perPage);\r\n\r\n            tbody.innerHTML = '';\r\n\r\n            \/\/ When filtering leaves the list empty\r\n            if (!slice.length) {\r\n                const colSpan = canEdit ? 4 : 3;\r\n                const emptyRow = document.createElement('tr');\r\n                emptyRow.innerHTML =\r\n                    `<td colspan=\"${colSpan}\" style=\"text-align:center;padding:1rem;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0628\u062d\u062b\u0643.<\/td>`;\r\n                tbody.appendChild(emptyRow);\r\n                pag.innerHTML = '';\r\n                return;\r\n            }\r\n\r\n                        slice.forEach(q => {\r\n                const separator = studentPage.indexOf('?') !== -1 ? '&' : '?';\r\n                const link = studentPage + separator + 'quiz=' + encodeURIComponent(q.id);\r\n                const statusEmoji = (q.status === 'closed')\r\n                    ? '<span title=\"\u063a\u064a\u0631 \u0645\u062a\u0627\u062d\">\ud83d\udd34<\/span>'\r\n                    : '<span title=\"\u0645\u062a\u0627\u062d\">\ud83d\udfe2<\/span>';\r\n                const questionsCount = Number(q.questions_count || (Array.isArray(q.questions) ? q.questions.length : 0));\r\n\r\n                const participantCount = Number(q.participants_count || 0);\r\n\r\n                let titleCell = \"\";\r\n\r\n                \/\/ Determine link or disabled state based on quiz status\r\n                if (q.status === \"open\") {\r\n                    \/\/ Open \u2192 clickable\r\n                    titleCell = `<a href=\"${link}\" class=\"kja-mcq-quiz-title-link\">${statusEmoji} ${esc(q.title)}<\/a>`;\r\n                } else {\r\n                    \/\/ Closed \u2192 disabled + greyed + tooltip\r\n                    titleCell = `\r\n                        <span \r\n                            class=\"kja-mcq-quiz-title-disabled\" \r\n                            title=\"\u063a\u064a\u0631 \u0645\u062a\u0627\u062d\" \r\n                            style=\"\r\n                                cursor:not-allowed;\r\n                                color:#555;\r\n                                font-weight:600;\r\n                                display:inline-flex;\r\n                                align-items:center;\r\n                                gap:0.25rem;\r\n                            \"\r\n                        >\r\n                            ${statusEmoji} ${esc(q.title)}\r\n                        <\/span>\r\n                    `;\r\n                }\r\n\r\n                \r\n                const row = document.createElement('tr');\r\n                row.innerHTML = `\r\n                    <td style=\"text-align:right;\">\r\n                        ${titleCell}\r\n                        ${questionsCount ? ` <span class=\"kja-mcq-questions-count\" style=\"color:#d32f2f;font-size:0.85em;\">[${questionsCount} \u0633]<\/span>` : ''}\r\n                    <\/td>\r\n                    <td>${participantCount}<\/td>\r\n                    <td><span class=\"kja-mcq-copy-emoji\" data-copy=\"${link}\" style=\"cursor:pointer;font-size:1.4em;\" title=\"\u0646\u0633\u062e \u0627\u0644\u0631\u0627\u0628\u0637\">\ud83d\udccb<\/span><\/td>\r\n                    ${canEdit ? `\r\n                        <td class=\"kja-mcq-actions\">\r\n                            <span class=\"kja-mcq-edit\" data-edit=\"${q.id}\" style=\"cursor:pointer;margin:0 0.5rem;color:#0073aa;\" title=\"\u062a\u062d\u0631\u064a\u0631\">\u270f\ufe0f<\/span>\r\n                            <span class=\"kja-mcq-delete-action kja-mcq-delete\" data-id=\"${q.id}\" style=\"cursor:pointer;color:#dc3545;\" title=\"\u062d\u0630\u0641\">\ud83d\uddd1\ufe0f<\/span>\r\n                        <\/td>` : ''}\r\n                `;\r\n                tbody.appendChild(row);\r\n\r\n                if (canEdit) {\r\n                    const statusOpenChecked   = (q.status === 'open') ? 'checked' : '';\r\n                    const statusClosedChecked = (q.status === 'closed') ? 'checked' : '';\r\n                    const showDetailsChecked  = ((q.show_details ?? 1) === 1) ? 'checked' : '';\r\n\r\n                    const editRow = document.createElement('tr');\r\n                    editRow.className = 'kja-mcq-edit-tr';\r\n                    editRow.style.display = 'none';\r\n                    editRow.innerHTML = `\r\n                        <td colspan=\"4\">\r\n                            <div class=\"kja-mcq-edit-form\" data-id=\"${q.id}\">\r\n                                <div class=\"kja-mcq-row\">\r\n                                    <input class=\"kja-mcq-edit-title kja-mcq-input\" type=\"text\" value=\"${esc(q.title)}\" placeholder=\"\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0627\u062e\u062a\u0628\u0627\u0631\" \/>\r\n                                <\/div>\r\n                                <div class=\"kja-mcq-row\" style=\"justify-content: flex-start; gap: 1rem; margin-bottom: 0.75rem;\">\r\n                                    <label style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n                                        \u0627\u0644\u062d\u0627\u0644\u0629:\r\n                                        <input type=\"radio\" name=\"status_${q.id}\" value=\"open\" ${statusOpenChecked} \/> \ud83d\udfe2\r\n                                        <input type=\"radio\" name=\"status_${q.id}\" value=\"closed\" ${statusClosedChecked} \/> \ud83d\udd34\r\n                                    <\/label>\r\n                                <\/div>\r\n                                <div class=\"kja-mcq-row\" style=\"justify-content: flex-start; gap: 1rem; margin-bottom: 0.75rem;\">\r\n                                    <div class=\"kja-mcq-toggle-container\">\r\n                                        \u0639\u0631\u0636 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644:\r\n                                        <label class=\"kja-mcq-toggle\">\r\n                                            <input type=\"checkbox\" name=\"show_details_${q.id}\" value=\"1\" ${showDetailsChecked} \/>\r\n                                            <span class=\"kja-mcq-toggle-slider\"><\/span>\r\n                                        <\/label>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"kja-mcq-builder\" data-mcq-builder=\"edit\"><\/div>\r\n                                <div class=\"kja-mcq-builder-actions\">\r\n                                    <button type=\"button\" class=\"kja-mcq-builder-add\" data-mcq-add>\u0625\u0636\u0627\u0641\u0629 \u0633\u0624\u0627\u0644<\/button>\r\n                                <\/div>\r\n                                <div class=\"kja-mcq-row\" style=\"justify-content: center; gap: 0.5rem; margin-top: 0.75rem;\">\r\n                                    <button class=\"kja-mcq-btn\" type=\"button\" data-mcq-save>\u062d\u0641\u0638<\/button>\r\n                                    <button class=\"kja-mcq-btn secondary kja-mcq-cancel\" type=\"button\">\u274c<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/td>\r\n                    `;\r\n                    tbody.appendChild(editRow);\r\n                    const editBuilder = editRow.querySelector(\".kja-mcq-builder\");\r\n                    initMcqBuilder(editBuilder, q.questions || []);\r\n                }\r\n            });\r\n\r\n            \/\/ Arabic pagination\r\n            pag.innerHTML = '';\r\n            const btn = (label, p, disabled = false, current = false, title = '') => {\r\n                const a = document.createElement('a');\r\n                a.href = '#';\r\n                a.textContent = label;\r\n                a.className = 'kja-mcq-page-btn';\r\n                if (disabled) a.setAttribute('aria-disabled', 'true');\r\n                if (current) a.classList.add('is-current');\r\n                if (title) a.title = title;\r\n                a.onclick = e => {\r\n                    e.preventDefault();\r\n                    if (!disabled && !current) renderPage(p);\r\n                };\r\n                return a;\r\n            };\r\n            pag.appendChild(btn('\u00ab', 1, currentPage===1, false, '\u0627\u0644\u0623\u0648\u0644\u0649'));\r\n            pag.appendChild(btn('\u2039', currentPage-1, currentPage===1, false, '\u0627\u0644\u0633\u0627\u0628\u0642'));\r\n            for (let i = 1; i <= totalPages; i++) {\r\n                pag.appendChild(btn(i, i, false, i===currentPage));\r\n            }\r\n            pag.appendChild(btn('\u203a', currentPage+1, currentPage===totalPages, false, '\u0627\u0644\u062a\u0627\u0644\u064a'));\r\n            pag.appendChild(btn('\u00bb', totalPages, currentPage===totalPages, false, '\u0627\u0644\u0623\u062e\u064a\u0631\u0629'));\r\n        }\r\n\r\n        \/\/ Global filter used by unified search handler\r\n        window.kjaMcqListFilter = function(term){\r\n            term = (term || '').toString().trim().toLowerCase();\r\n            if (!term) {\r\n                filtered = quizzes.slice();\r\n            } else {\r\n                filtered = quizzes.filter(function(q){\r\n                    const title = (q.title || '').toString().toLowerCase();\r\n                    return title.indexOf(term) !== -1;\r\n                });\r\n            }\r\n            renderPage(1);\r\n        };\r\n\r\n        document.addEventListener('DOMContentLoaded', () => renderPage(1));\r\n    })();\r\n    <\/script>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","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-67004","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/pages\/67004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/comments?post=67004"}],"version-history":[{"count":6,"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/pages\/67004\/revisions"}],"predecessor-version":[{"id":67040,"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/pages\/67004\/revisions\/67040"}],"wp:attachment":[{"href":"https:\/\/www.alardha.com\/blog\/wp-json\/wp\/v2\/media?parent=67004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}