Question Generator phase alpha

MCQ Generator – REST API Edition

MCQ Generator (Modern REST API Edition)

This version uses standard JSON to communicate with your custom WordPress REST API.

1. Exam Settings

Unique Exam ID (No spaces, e.g., api_test_01) Exam Name Subtitle / Topic

Time (Min)

Pass Mark

Negative Mark

Theme Color

2. Paste Questions

Format: Question, Options, Ans: x, Exp: …

Final Code (Copy to Elementor HTML Widget)

<div id="mcq-app-{{EXAM_ID}}" style="--t:{{THEME_COLOR}}; font-family:'Poppins',sans-serif; background:#f8fafc; padding:10px; max-width:800px; margin:0 auto; color:#1e293b;">
<style>
    .m-btn-{{EXAM_ID}} { background:var(--t); color:white; border:none; padding:12px; width:100%; border-radius:50px; font-weight:bold; cursor:pointer; margin-top:10px; font-size:1rem; }
    .st-bx-{{EXAM_ID}} { background:white; padding:10px; text-align:center; border-radius:8px; border:1px solid #e2e8f0; }
    .fs-mod-{{EXAM_ID}} { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; flex-direction:column; align-items:center; justify-content:center; }
</style>

<div id="p-start-{{EXAM_ID}}">
    <div style="background:linear-gradient(135deg, var(--t), #1e293b); color:white; padding:30px 20px; border-radius:10px; text-align:center; margin-bottom:20px;">
        <h2 style="margin:0;">{{EXAM_NAME}}</h2>
        <p style="opacity:0.9; margin:5px 0 0 0;">{{EXAM_SUB}}</p>
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:20px;">
        <div class="st-bx-{{EXAM_ID}}" style="color:#0369a1; background:#e0f2fe;"><b>{{TIME_MIN}}m</b><br><small>Time</small></div>
        <div class="st-bx-{{EXAM_ID}}" style="color:#15803d; background:#dcfce7;"><b>{{TOTAL_QS}}</b><br><small>Qs</small></div>
        <div class="st-bx-{{EXAM_ID}}" style="color:#b91c1c; background:#fee2e2;"><b>-{{NEG_MARK}}</b><br><small>Neg</small></div>
    </div>
    <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
        <label>Name</label>
        <input type="text" id="inpName-{{EXAM_ID}}" style="width:100%; padding:10px; margin:10px 0; border:1px solid #ccc; border-radius:6px;">
        <button class="m-btn-{{EXAM_ID}}" onclick="window['MCQ_{{EXAM_ID}}'].start()">START EXAM</button>
    </div>
</div>

<div id="p-exam-{{EXAM_ID}}" style="display:none;">
    <div style="background:#1e293b; color:white; padding:12px; position:sticky; top:0; z-index:50; border-radius:10px; display:flex; justify-content:space-between; font-weight:bold; margin-bottom:20px;">
        <span>Time Left</span><span id="tmr-{{EXAM_ID}}">00:00</span>
    </div>
    <div id="q-area-{{EXAM_ID}}"></div>
    <button class="m-btn-{{EXAM_ID}}" onclick="window['MCQ_{{EXAM_ID}}'].sub()">Submit Answer Sheet</button>
</div>

<div id="p-res-{{EXAM_ID}}" style="display:none;">
    <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0; text-align:center;">
        <div style="width:120px; height:120px; background:var(--t); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:bold; margin:0 auto 20px auto; border:5px solid white;">
            <span id="sc-final-{{EXAM_ID}}">0</span>
        </div>
        <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:15px;">
            <div style="background:#16a34a; color:white; padding:5px; border-radius:4px;"><b id="v-r-{{EXAM_ID}}">0</b><br><small>R</small></div>
            <div style="background:#dc2626; color:white; padding:5px; border-radius:4px;"><b id="v-w-{{EXAM_ID}}">0</b><br><small>W</small></div>
            <div style="background:#ca8a04; color:white; padding:5px; border-radius:4px;"><b id="v-s-{{EXAM_ID}}">0</b><br><small>S</small></div>
            <div style="background:#334155; color:white; padding:5px; border-radius:4px;"><b id="v-p-{{EXAM_ID}}">0</b><br><small>Pen</small></div>
        </div>
        <button class="m-btn-{{EXAM_ID}}" onclick="window['MCQ_{{EXAM_ID}}'].modal('lb')">See Leaderboard</button>
    </div>
    <div style="text-align:center; margin:20px 0;"><b>Detailed Explanations</b></div>
    <div id="rev-box-{{EXAM_ID}}"></div>
</div>

<div id="lb-modal-{{EXAM_ID}}" class="fs-mod-{{EXAM_ID}}" style="justify-content:start; padding-top:50px;">
    <div style="background:white; width:95%; max-width:600px; max-height:80vh; border-radius:8px; padding:20px; overflow-y:auto;">
        <h3 style="color:var(--t); margin-top:0;">🏆 Leaderboard</h3>
        <table style="width:100%; border-collapse:collapse; font-size:0.9rem;">
            <thead style="background:#f1f5f9;"><tr><th style="padding:10px; text-align:left;">#</th><th>Name</th><th>Score</th></tr></thead>
            <tbody id="lb-table-{{EXAM_ID}}"></tbody>
        </table>
        <button class="m-btn-{{EXAM_ID}}" style="background:#64748b; margin-top:20px;" onclick="document.getElementById('lb-modal-{{EXAM_ID}}').style.display='none'">Close</button>
    </div>
</div>

let ANS = new Array(Q.length).fill(null);
    let TMR = null, SEC = CFG.time * 60;
    
    // NEW REST API ADDRESS
    const restBase = window.location.origin + '/wp-json/mcq/v1/';

window['MCQ_{{EXAM_ID}}'] = {
        start: function() {
            let n = document.getElementById('inpName-{{EXAM_ID}}').value;
            if(!n) return alert("Enter Name!");
            
            if(localStorage.getItem('completed_' + CFG.id)) {
                if(!confirm("You have already completed this exam! Practice anyway?")) return;
            }

// SAVE TO REST API
            if(!localStorage.getItem('completed_' + CFG.id)) {
                localStorage.setItem('completed_' + CFG.id, 'true');
                fetch(restBase + 'save_score', { 
                    method: 'POST', 
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ exam_id: CFG.id, name: document.getElementById('inpName-{{EXAM_ID}}').value, score: scr })
                }).then(res => res.json()).then(data => console.log("API Response:", data)).catch(e => console.error(e));
            }
        },
        lb: function() {
            let b = document.getElementById('lb-table-{{EXAM_ID}}');
            document.getElementById('lb-modal-{{EXAM_ID}}').style.display='flex';
            b.innerHTML = '<tr><td colspan="3">Loading...</td></tr>';
            
            // FETCH FROM REST API
            fetch(restBase + 'leaderboard', { 
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ exam_id: CFG.id }) 
            })
            .then(res => res.json())
            .then(data => {
                if(data.success && data.data.length > 0) {
                    let h=''; let r=1;
                    data.data.forEach(v => {
                        h+=`<tr><td style="padding:8px; border-bottom:1px solid #eee;">#${r++}</td><td style="border-bottom:1px solid #eee;">${v.name}</td><td style="border-bottom:1px solid #eee;">${parseFloat(v.score).toFixed(2)}</td></tr>`;
                    });
                    b.innerHTML = h;
                } else {
                    b.innerHTML = '<tr><td colspan="3" style="text-align:center;">No Data yet</td></tr>';
                }
            }).catch(e => { b.innerHTML='<tr><td colspan="3">Leaderboard Error</td></tr>'; });
        }
    };
})();
</script>
</div>