test 3 - MCQPorikkha

MCQ Generator – WP Edition (400 Error Fixed)

MCQ Generator (WordPress Edition – API Fixed)

This tool injects your questions into the working Elementor code template below.

1. Exam Settings

Unique Exam ID (No spaces, e.g., eng_model_10) 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)

▼ Advanced: View/Edit The Template Base Code

Do not change the {{PLACEHOLDERS}} inside this code.

<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;">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<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; box-shadow:0 3px 5px rgba(0,0,0,0.1); 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:0 0 20px 20px; text-align:center; margin:-10px -10px 20px -10px;">
        <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; box-sizing:border-box;">
        <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:0 0 10px 10px; display:flex; justify-content:space-between; font-weight:bold; margin:0 -10px 20px -10px;">
        <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; outline:3px solid var(--t);">
            <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;
    const ajaxUrl = window.location.origin + '/wp-admin/admin-ajax.php';

window['MCQ_{{EXAM_ID}}'] = {
        start: function() {
            let n = document.getElementById('inpName-{{EXAM_ID}}').value;
            if(!n) return alert("Enter Name!");
            
            // First Attempt Checker
            if(localStorage.getItem('completed_' + CFG.id)) {
                if(!confirm("You have already completed this exam! Your new score will not be saved to the leaderboard. Practice anyway?")) return;
            }

for(let k=0;k<4;k++) {
                let e = document.getElementById(`opt_${CFG.id}_${q}_${k}`);
                if(e){e.style.background='white';e.style.borderColor='#e2e8f0';}
            }
            let s = document.getElementById(`opt_${CFG.id}_${q}_${o}`);
            if(s){s.style.background='#fef08a';s.style.borderColor='#ca8a04';}
        },
        loadProgress: function() {
            for(let i=0; i<Q.length; i++) {
                let saved = localStorage.getItem('prog_' + CFG.id + '_q' + i);
                if(saved !== null) {
                    this.sel(i, parseInt(saved), true);
                }
            }
        },
        timer: function() {
            let d = document.getElementById('tmr-{{EXAM_ID}}');
            TMR = setInterval(()=>{
                SEC--;
                let m=Math.floor(SEC/60), s=SEC%60;
                d.innerText = `${m}:${s<10?'0':''}${s}`;
                if(SEC<=0){ clearInterval(TMR); this.sub(); }
            },1000);
        },
        sub: function() {
            clearInterval(TMR);
            this.modal('sub');
        },
        modal: function(type) {
            let m = document.getElementById('ovl-{{EXAM_ID}}');
            let t = document.getElementById('ovl-txt-{{EXAM_ID}}');
            m.style.display='flex';
            
            // Randomized Load Balancing Delay
            let delaySeconds = (type === 'sub') ? Math.floor(Math.random() * 10) + 1 : 1;
            
            let iv = setInterval(()=>{
                if(type==='sub') t.innerHTML = `Calculating. <b>Wait <span style="color:#ef4444; font-size:1.4rem;">${delaySeconds}</span>s...</b>`;
                else t.innerHTML = `Loading Leaderboard...`;
                
                delaySeconds--;
                if(delaySeconds < 0){
                    clearInterval(iv);
                    m.style.display='none';
                    if(type==='sub') this.calc(); else this.lb();
                }
            },1000);
        },
        calc: function() {
            let r=0, w=0, s=0, html='';
            Q.forEach((q,i)=>{
                let u = ANS[i];
                if(u===null) s++; else if(u===q.c) r++; else w++;
                let cls = (u===q.c)?'#22c55e':(u===null?'#94a3b8':'#ef4444');
                html += `<div style="background:white; padding:15px; margin-bottom:15px; border-radius:8px; border-left:4px solid ${cls}; box-shadow:0 2px 4px rgba(0,0,0,0.05);">
                    <p><b>${i+1}. ${q.q}</b></p>
                    ${q.o.map((o,ox)=>{
                        let bg = 'transparent';
                        if(ox===q.c) bg='#dcfce7'; else if(ox===u && ox!==q.c) bg='#fee2e2';
                        return `<div style="background:${bg}; padding:5px; margin:2px 0; border-radius:4px;">${o}</div>`;
                    }).join('')}
                    <div style="margin-top:10px; padding:10px; background:#f8fafc; font-size:0.9rem; border-top:1px dashed #e2e8f0;"><b>Exp:</b> ${q.e||'None'}</div>
                </div>`;
            });
            
            let scr = (r*1)-(w*CFG.neg);
            if(scr<0) scr=0;
            
            document.getElementById('p-exam-{{EXAM_ID}}').style.display='none';
            document.getElementById('p-res-{{EXAM_ID}}').style.display='block';
            document.getElementById('sc-final-{{EXAM_ID}}').innerText = scr.toFixed(2);
            document.getElementById('v-r-{{EXAM_ID}}').innerText=r; document.getElementById('v-w-{{EXAM_ID}}').innerText=w;
            document.getElementById('v-s-{{EXAM_ID}}').innerText=s; document.getElementById('v-p-{{EXAM_ID}}').innerText=(w*CFG.neg).toFixed(2);
            document.getElementById('rev-box-{{EXAM_ID}}').innerHTML = html;
            
            // Clear Autosave
            for(let i=0; i<Q.length; i++) localStorage.removeItem('prog_' + CFG.id + '_q' + i);

// Save First Attempt & Send to Server (URLSearchParams Fix)
            if(!localStorage.getItem('completed_' + CFG.id)) {
                localStorage.setItem('completed_' + CFG.id, 'true');
                
                const params = new URLSearchParams();
                params.append('action', 'save_mcq_score');
                params.append('exam_id', CFG.id);
                params.append('name', document.getElementById('inpName-{{EXAM_ID}}').value);
                params.append('score', scr);

fetch(ajaxUrl, { 
                    method: 'POST', 
                    body: params
                }).then(res => res.json()).then(data => console.log("Save Response:", data)).catch(e => console.log(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>';
            
            const params = new URLSearchParams();
            params.append('action', 'get_mcq_leaderboard');
            params.append('exam_id', CFG.id);

fetch(ajaxUrl, { 
                method: 'POST', 
                body: params 
            })
            .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; padding:10px;">No Data yet</td></tr>';
                }
            })
            .catch(e => { b.innerHTML='<tr><td colspan="3">Leaderboard Error</td></tr>'; });
        }
    };
})();
</script>
</div>