#qcm-tool{--b:#1d5fd1;--g:#1a9a63;--r:#d33f3f;--bd:#d9e1ee;--bg:#f5f8fd;font-family:Tahoma,Arial,sans-serif;color:#1c2433;max-width:760px;margin:0 auto;line-height:1.8} #qcm-tool *{box-sizing:border-box} #qcm-tool .box{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:14px} #qcm-tool h3{margin:0 0 8px;font-size:1.1em;color:var(--b)} #qcm-tool textarea,#qcm-tool input[type=text]{width:100%;padding:9px;border:1px solid var(--bd);border-radius:6px;font:inherit;background:var(--bg)} #qcm-tool textarea{min-height:130px;direction:rtl} #qcm-tool button{font:inherit;cursor:pointer;border:0;border-radius:6px;padding:9px 16px;margin:4px 0 0 6px;background:var(--b);color:#fff} #qcm-tool button.alt{background:#fff;color:var(--b);border:1px solid var(--b)} #qcm-tool button.ok{background:var(--g)} #qcm-tool button:focus-visible,#qcm-tool label:focus-within{outline:3px solid #f2b705;outline-offset:2px} #qcm-tool .opt{display:block;padding:9px 12px;margin:6px 0;border:1px solid var(--bd);border-radius:6px;cursor:pointer;background:var(--bg)} #qcm-tool .opt.right{background:#e3f6ec;border-color:var(--g)} #qcm-tool .opt.wrong{background:#fde8e8;border-color:var(--r)} #qcm-tool .bar{height:8px;background:var(--bd);border-radius:4px;overflow:hidden;margin-bottom:10px} #qcm-tool .bar i{display:block;height:100%;background:var(--g);width:0;transition:width .3s} #qcm-tool .exp{margin-top:8px;padding:8px 10px;background:#eef4ff;border-radius:6px;font-size:.95em} #qcm-tool .score{font-size:1.6em;color:var(--g);font-weight:bold} #qcm-tool .msg{color:var(--r);min-height:1.5em} #qcm-tool small{color:#5a6577} @media print{#qcm-tool .noprint{display:none}} 1. أدخل أسئلتك كل سطر سؤال بهذه الصيغة: السؤال | الاختيار 1 | الاختيار 2 | الاختيار 3 | الاختيار 4 | رقم الجواب الصحيح | شرح (اختياري) خلط ترتيب الأسئلة والاختيارات ابدأ الاختبار أمثلة جاهزة مسح (function(){ var $=function(i){return document.getElementById(i)}; var KEY='qcm_tool_text',qs=[],idx=0,score=0,wrong=[],locked=false; var SAMPLE="ما هي عاصمة المغرب؟|الدار البيضاء|الرباط|فاس|مراكش|2|الرباط هي العاصمة الإدارية للمملكة.\nكم يساوي 15% من 200؟|20|25|30|35|3|200 × 15 ÷ 100 = 30.\nأي من التالي فعل ماضٍ؟|يكتب|اكتب|كتب|كاتب|3|كتب فعل ماضٍ يدل على حدث انتهى."; try{$('q-text').value=localStorage.getItem(KEY)||''}catch(e){} function shuffle(a){for(var i=a.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1)),t=a[i];a[i]=a[j];a[j]=t}return a} function parse(t){ var out=[],errs=[]; t.split('\n').forEach(function(l,n){ l=l.trim();if(!l)return; var p=l.split('|').map(function(x){return x.trim()}); var c=parseInt(p[5],10); if(p.length<6||!p[0]||p.slice(1,5).some(function(x){return !x})||!(c>=1&&c<=4)){errs.push(n+1);return} out.push({q:p[0],o:p.slice(1,5),a:c-1,e:p[6]||''}); }); return {out:out,errs:errs}; } function start(list){ qs=list.slice();idx=0;score=0;wrong=[]; if($('q-shuffle').checked){ shuffle(qs); qs=qs.map(function(x){ var ok=x.o[x.a],o=shuffle(x.o.slice()); return {q:x.q,o:o,a:o.indexOf(ok),e:x.e}; }); } $('q-result').style.display='none';$('q-run').style.display='block';show(); $('q-run').scrollIntoView({behavior:'smooth'}); } function show(){ var x=qs[idx],h='<div class="bar"><i style="width:'+(idx/qs.length*100)+'%"></i></div>'; h+='<small>السؤال '+(idx+1)+' من '+qs.length+'</small><h3></h3><div id="q-opts"></div><div id="q-fb"></div><button id="q-next" class="ok" style="display:none"></button>'; $('q-run').innerHTML=h; $('q-run').querySelector('h3').textContent=x.q; x.o.forEach(function(t,i){ var l=document.createElement('label');l.className='opt'; var r=document.createElement('input');r.type='radio';r.name='qo';r.value=i; l.appendChild(r);l.appendChild(document.createTextNode(' '+t)); r.onchange=function(){answer(i)}; $('q-opts').appendChild(l); }); locked=false; } function answer(i){ if(locked)return;locked=true; var x=qs[idx],ls=$('q-opts').children; for(var k=0;k<ls.length;k++){ls[k].firstChild.disabled=true} ls[x.a].classList.add('right'); if(i===x.a){score++}else{ls[i].classList.add('wrong');wrong.push(x)} var fb=$('q-fb'); fb.innerHTML='<div class="exp"></div>'; fb.firstChild.textContent=(i===x.a?'✔ إجابة صحيحة. ':'✘ إجابة خاطئة. ')+x.e; var nb=$('q-next');nb.style.display='inline-block'; nb.textContent=idx+1<qs.length?'السؤال التالي':'عرض النتيجة'; nb.onclick=function(){idx++;idx<qs.length?show():finish()}; nb.focus(); } function finish(){ $('q-run').style.display='none'; var p=Math.round(score/qs.length*100),r=$('q-result'); r.style.display='block'; r.innerHTML='<h3>النتيجة النهائية</h3><div class="score">'+score+' / '+qs.length+' ('+p+'%)</div><p>'+ (p>=75?'ممتاز، واصل على هذا المستوى.':p>=50?'نتيجة مقبولة، راجع الأسئلة الخاطئة.':'تحتاج إلى مزيد من المراجعة، أعد المحاولة.')+ '</p><button id="q-again">إعادة الاختبار</button> '+ (wrong.length?'<button id="q-redo" class="alt">إعادة الأسئلة الخاطئة فقط ('+wrong.length+')</button>':'')+ '<button id="q-print" class="alt noprint">طباعة النتيجة</button>'; $('q-again').onclick=function(){start(parse($('q-text').value).out)}; if($('q-redo'))$('q-redo').onclick=function(){start(wrong)}; $('q-print').onclick=function(){window.print()}; r.scrollIntoView({behavior:'smooth'}); } $('q-start').onclick=function(){ var t=$('q-text').value,p=parse(t),m=$('q-msg'); try{localStorage.setItem(KEY,t)}catch(e){} if(!p.out.length){m.textContent='لا توجد أسئلة صالحة. تأكد من الصيغة المطلوبة (6 حقول على الأقل في كل سطر).';return} m.textContent=p.errs.length?'تم تجاهل الأسطر ذات الصيغة الخاطئة: '+p.errs.join('، '):''; start(p.out); }; $('q-sample').onclick=function(){$('q-text').value=SAMPLE;$('q-msg').textContent=''}; $('q-clear').onclick=function(){$('q-text').value='';try{localStorage.removeItem(KEY)}catch(e){}}; })();
