🏠 مؤسسة الحنان الخاصة
رحلة إتقان المبيانتعلم، ارسم، افحص، نافس، ثم فسّر
إعداد وتطوير: الأستاذ أحمد بوعمود
مادة الاجتماعيات / الجغرافيامناسب للإعدادي والثانويقابل للرفع على Netlify

من جدول صامت إلى مبيان ناطق

تطبيق تعليمي مفصل يشرح عناصر المبيان، يدرّب التلميذ على اختيار النوع المناسب، يرسم المبيان تلقائياً، يفحص الأخطاء، ويقترح قراءة منهجية للنتائج.

ابدأ الرسم الآن ادرس العناصر ادخل المسابقة حلّل صورة مبيان
12عنصراً يراجع جودة المبيان
4أنواع أساسية: أعمدة، منحنى، دائرة، شريط
6تحديات في مسابقة أفضل مبيان
AIمساعد قراءة صورة وتجربة OCR
قاعدة ذهبية: المبيان الجيد لا يكتفي بالجمال؛ يجب أن يكون دقيقاً، مقروءاً، ومناسباً لطبيعة المعطيات.

1) الدرس الكبير: ما المبيان؟ ولماذا نرسمه؟

المبيان وسيلة لتحويل جدول إحصائي إلى شكل بصري يساعد على المقارنة، رصد التطور، وإبراز الحصص النسبية.

المبيان ليس زخرفة

هو لغة بصرية. عندما نقول إن نسبة التمدن ارتفعت، فالمبيان يجعل الارتفاع مرئياً؛ وعندما نقارن بين دول أو قطاعات، يجعل الفرق واضحاً في لحظة.

مثال: جدول إنتاج الحبوب في أربع دول يمكن قراءته، لكن مبيان الأعمدة يكشف فوراً الدولة الأعلى والأدنى.

ثلاثة أسئلة قبل الرسم

  • هل المعطيات زمنية؟ اختر غالباً منحنى.
  • هل هي فئات للمقارنة؟ اختر أعمدة.
  • هل تمثل أجزاء من مجموع؟ اختر دائرة أو نصف دائرة.

أكبر خطأ هو اختيار مبيان جميل لكنه غير مناسب لطبيعة الجدول.

القراءة المنهجية بعد الرسم

بعد إنجاز المبيان، نقرأه بثلاث خطوات: وصف ما يظهر، تفسير دلالته، ثم استخلاص خلاصة قصيرة.

  • وصف: أعلى قيمة، أدنى قيمة، اتجاه عام.
  • تفسير: لماذا يمكن أن يحدث ذلك؟
  • استخلاص: ماذا نستنتج؟

2) كيف أختار نوع المبيان؟

اختيار النوع المناسب هو نصف النجاح. استعمل الجدول الآتي كمرشد سريع.

طبيعة المعطياتأفضل مبيانلماذا؟مثال تطبيقيخطأ شائع
سلسلة زمنية: سنوات متتابعة أو متقاربةمنحنىيبرز التطور: ارتفاع، انخفاض، تذبذبتطور نسبة التمدن بين 2004 و2024رسم أعمدة كثيرة تجعل التطور أقل وضوحاً
فئات منفصلة للمقارنةأعمدةيوضح الفروق بين فئات أو دول أو قطاعاتإنتاج القمح في دول مختلفةربط رؤوس الأعمدة بخط كأنه تطور زمني
نسب مئوية مجموعها 100%دائرة / نصف دائرةيوضح حصة كل جزء من المجموعبنية السكان حسب الفئات العمريةاستعمال الدائرة لمعطيات لا تمثل مجموعاً واحداً
متغيران أو أكثر عبر الزمنمنحنيان أو أعمدة مزدوجةيقارن تطور ظاهرتين في نفس الزمنتطور الأمية والفقرغياب المفتاح فيضيع القارئ
قيم موجبة وسالبةأعمدة حول خط الصفريبين الربح والخسارة أو الزيادة والنقصاننسبة النمو الاقتصادي السنويةإخفاء الصفر يضخم الفروق

مفتاح سريع للاختيار

زمن = منحنىمقارنة = أعمدةأجزاء من 100% = دائرةظاهرتان = مفتاح ضروري

تدريب ذهني

قبل الرسم قل: “سأختار هذا النوع لأنه يخدم طبيعة الجدول”. هذه الجملة وحدها تمنع نصف الأخطاء في الفروض والامتحانات.

3) عناصر المبيان بالتفصيل

كل عنصر له وظيفة. حذف عنصر واحد قد يجعل المبيان ناقصاً أو غامضاً.

العنوان: ماذا؟ أين؟ متى؟

العنوان الجيد يجيب عن ثلاثة أسئلة: ما الظاهرة؟ ما المجال؟ ما الزمن؟

ضعيف: السكان
أفضل: تطور عدد سكان المغرب بين 2004 و2024
أفضل في الجغرافيا: تطور نسبة التمدن بالمغرب بين 2004 و2024

العنوان لا يكتب هكذا: “مبيان بالأعمدة”. نوع المبيان ليس هو موضوعه.

المحاور: أين أضع الفئات والقيم؟

المحور الأفقي غالباً للفئات أو السنوات، والمحور العمودي للقيم الرقمية. في الأعمدة نضع أسماء الفئات أسفل كل عمود، وفي المنحنى نضع السنوات على المحور الأفقي.

  • اكتب اسم المحور الأفقي: السنوات، الدول، القطاعات...
  • اكتب اسم المحور العمودي: النسبة، عدد السكان، الإنتاج...
  • لا تجعل الكلمات متداخلة؛ اختصر أو أدر الملصقات عند الحاجة.

المقياس/السلم: كيف أحول الرقم إلى طول؟

المقياس هو العلاقة بين قيمة عددية ومسافة على الورقة. في الرسم اليدوي نختار مقياساً مريحاً ومقروءاً.

المقياس التقريبي = أكبر قيمة ÷ عدد خانات المحور العمودي
مثال: أكبر قيمة 83، وعدد الخانات 10، إذن 83÷10=8.3. نختار سلماً سهلاً: كل خانة = 10.

في مبيان الأعمدة يجب غالباً البدء من الصفر حتى لا نضخم الفروق بصرياً.

الوحدة: ماذا تعني الأرقام؟

الرقم وحده لا يكفي. 50 قد تعني 50%، أو 50 مليون نسمة، أو 50 ألف طن. لذلك تكتب الوحدة قرب المحور أو في العنوان.

مثال: المحور العمودي: نسبة التمدن (%)، أو الإنتاج (مليون طن).

المفتاح: عندما تتعدد الألوان أو المتغيرات

إذا كان في المبيان أكثر من لون أو أكثر من خط، يجب وضع مفتاح يشرح معنى كل لون أو رمز.

مثال: خط أزرق = الفقر، خط برتقالي = الأمية. دون مفتاح، لا يعرف القارئ أي خط يمثل أي ظاهرة.

المصدر: من أين جاءت المعطيات؟

المصدر يزيد مصداقية المبيان. في التمارين يمكن أن يكون: “المصدر: الوثيقة 1”، أو “معطيات تدريبية”، أو اسم تقرير/موقع.

لا تكتب مصدراً وهمياً. إن لم يوجد، اكتب: المصدر: معطيات التمرين.

الإطار والجمالية: تنظيم لا تزويق زائد

الإطار يجمع عناصر المبيان بصرياً، والجمالية تعني الوضوح: ألوان محدودة، كتابة مقروءة، فراغ مناسب، وأعمدة متساوية العرض.

  • استعمل لوناً واضحاً لا يختفي عند الطبع.
  • لا تملأ المبيان بزخارف تشتت الانتباه.
  • احترم التناسب بين القيم والأطوال.

قراءة المبيان: من الملاحظة إلى الخلاصة

لا تنته المهمة عند الرسم. يجب أن يعرف التلميذ كيف يعلّق على المبيان.

أصف: أحدد الموضوع، المجال، الزمن، أعلى/أدنى قيمة، والاتجاه العام.
أفسر: أربط الظاهرة بعوامل ممكنة من الدرس أو السياق.
أستخلص: أكتب خلاصة قصيرة لا تكرر الأرقام فقط.

4) طرق الإنجاز خطوة بخطوة

شرح عملي لكل نوع مع العمليات الضرورية.

أ) المبيان بالأعمدة

أرسم محورين متعامدين.
أضع الفئات على المحور الأفقي.
أختار سلماً مناسباً للقيم.
أرسم الأعمدة بعرض متساو ومسافات متساوية.
أضيف العنوان، الوحدة، المصدر، المفتاح عند الحاجة.

ب) المبيان بالمنحنى

أضع السنوات زمنياً على المحور الأفقي.
أضع القيم على المحور العمودي بسلم مناسب.
أحدد نقطة كل سنة مع قيمتها.
أربط النقط بخط واضح دون تكسير غير مبرر.
أقرأ الاتجاه: ارتفاع، انخفاض، تذبذب.

ج) المبيان الدائري

نستعمله عندما تمثل المعطيات أجزاء من مجموع واحد.

النسبة = الجزء ÷ المجموع × 100
زاوية القطاع = النسبة × 3.6

في نصف الدائرة نستعمل: زاوية القطاع = النسبة × 1.8.

5) مرسم المبيانات الذكي

أدخل الجدول، اختر النوع، ثم دع التطبيق يرسم ويفحص جودة المبيان.

إعدادات الرسم

6) مسابقة أفضل مبيان

يختار التلميذ التحدي، يرسم المبيان، ثم يتحقق من الجواب ويحصل على نقطة وشارة.

لوحة المسابقة

قاعة المتفوقين

    7) تحليل صورة المبيان بالذكاء الاصطناعي

    ارفع صورة مبيانك — يستخرج النظام النص تلقائياً ثم يحلله ويعطيك تقييماً تربوياً كاملاً بدون أي تسجيل.

    📸 ارفع صورة المبيان

    أو صف مبيانك يدوياً إذا تعذّر رفع الصورة:

    النتيجة تقريبية ولا تعوض تصحيح الأستاذ.

    📋 نتيجة التحليل

    نص OCR المستخرج (للمراجعة)

    تعليق التلميذ على المبيان

    8) دفتر الرسم اليدوي

    شبكة تدريب تحاكي ورقة المبيان. ارسم بالقلم، امسح، ثم حمّل عملك.

    أدوات الرسم

    هذا الدفتر مفيد للتلاميذ الذين يحتاجون التدريب على احترام السلم والمسافات قبل الرسم في الدفتر الحقيقي.

    9) شبكة تنقيط المبيان

    استعملها الأستاذ أو التلميذ للتحقق من جودة الإنجاز.

    `);w.document.close();} function previewImage(e){ const file=e.target.files[0]; if(!file)return; uploadedImage=file; const img=document.getElementById('aiPreview'); img.src=URL.createObjectURL(file); img.style.display='block'; const dz=document.getElementById('dropZone'); dz.style.borderColor='var(--accent)';dz.style.background='rgba(14,118,110,.08)'; dz.innerHTML='
    ✅
    الصورة محمّلة
    اضغط للتغيير
    '; document.getElementById('imageAnalysis').innerHTML='✅ جاهز — اضغط “✨ تحليل الصورة”.'; } function analyzeImageBasic(){ const img=document.getElementById('aiPreview'); if(!img.src||img.style.display==='none'){alert('ارفع صورة أولاً');return} const c=document.createElement('canvas'),cx=c.getContext('2d'); c.width=400;c.height=Math.round(400*(img.naturalHeight||300)/(img.naturalWidth||400)); cx.drawImage(img,0,0,c.width,c.height); const d=cx.getImageData(0,0,c.width,c.height).data; let sum=0,sum2=0,dark=0,light=0,n=0; for(let i=0;i235)light++;n++;} const mean=sum/n,sd=Math.sqrt(sum2/n-mean*mean); const notes=[]; notes.push(sd>40?'✅ التباين جيد — الصورة واضحة.':'⚠️ التباين ضعيف — صوّر في إضاءة أفضل أو استخدم قلماً أغمق.'); notes.push(dark/n>.012?'✅ توجد خطوط وكتابة داكنة كافية.':'⚠️ يبدو أن الكتابة باهتة أو رفيعة.'); notes.push(light/n>.38?'✅ الخلفية فاتحة — مناسبة للقراءة.':'ℹ️ ضع الورقة على سطح أبيض.'); notes.push(c.width>c.height?'✅ صورة أفقية — مناسبة.':'ℹ️ يُنصح بالتصوير أفقياً.'); document.getElementById('imageAnalysis').innerHTML='
    🔍 جودة الصورة:
    '+notes.join('
    ')+'
    '; } async function runOCR(){ if(!uploadedImage){alert('ارفع صورة أولاً');return} const out=document.getElementById('imageAnalysis'); const btn=document.getElementById('analyzeBtn'); btn.disabled=true; out.innerHTML='⏳ المرحلة 1/2: استخراج النص من الصورة...'; let extractedText=''; try{ const fd=new FormData(); fd.append('file',uploadedImage); fd.append('apikey','helloworld'); fd.append('language','ara+fre+eng'); fd.append('OCREngine','2'); fd.append('scale','true'); fd.append('isOverlayRequired','false'); const ctrl=new AbortController(); setTimeout(function(){ctrl.abort();},18000); const ocrResp=await fetch('https://api2.ocr.space/parse/image',{method:'POST',body:fd,signal:ctrl.signal}); const ocrData=await ocrResp.json(); extractedText=(ocrData.ParsedResults&&ocrData.ParsedResults[0]&&ocrData.ParsedResults[0].ParsedText||'').trim(); if(extractedText)document.getElementById('ocrText').value=extractedText; }catch(ocrErr){/* OCR failed silently, continue with empty text */} out.innerHTML=extractedText ?'⏳ المرحلة 2/2: الذكاء الاصطناعي يحلّل النص...' :'⏳ المرحلة 2/2: إرشادات عامة من الذكاء الاصطناعي...'; var aiPrompt=extractedText ?'أنت مصحح تربوي في مادة الاجتماعيات للسنة الثالثة إعدادي بالمغرب.\nنص OCR المستخرج من صورة مبيان التلميذ:\n"""\n'+extractedText.slice(0,600)+'\n"""\n\nحلّل المبيان وأجب بالعربية الفصحى المبسطة عن:\n1. نوع المبيان\n2. العنوان\n3. المحاور والوحدة\n4. المصدر\n5. ملاحظات على الجودة\n6. نقطة من 10 مع التبرير\nأجب بأسلوب إيجابي ومشجّع.' :'أنت مصحح تربوي في مادة الاجتماعيات للسنة الثالثة إعدادي بالمغرب.\nتلميذ أرسل صورة مبيانه لكن لم يتمكن النظام من استخراج النص منها (ربما كتابة يدوية).\nقدّم له:\n1. قائمة بالعناصر الإلزامية في المبيان\n2. الأخطاء الشائعة\n3. خطوات القراءة المنهجية\nأجب بالعربية الفصحى وبأسلوب مشجّع.'; try{ const ctrl2=new AbortController(); setTimeout(function(){ctrl2.abort();},22000); const aiResp=await fetch('https://text.pollinations.ai/',{ method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({model:'openai-large',messages:[{role:'user',content:aiPrompt}]}), signal:ctrl2.signal }); if(!aiResp.ok)throw new Error('HTTP '+aiResp.status); const txt=await aiResp.text(); if(!txt||txt.length<15)throw new Error('رد فارغ'); var ocrNote=extractedText ?'📖 نص OCR: "'+extractedText.slice(0,80)+'..."' :'⚠️ لم ينجح استخراج النص — إرشادات عامة'; out.innerHTML='
    ✨ تحليل الذكاء الاصطناعي:
    '+ocrNote+''+txt.replace(/')+'
    '; out.scrollIntoView({behavior:'smooth',block:'nearest'}); }catch(e){ out.innerHTML='⚠️ '+e.message+' — تأكد من الاتصال وحاول مجدداً.'; } btn.disabled=false; } async function analyzeFromDesc(){ const el=document.getElementById('chartDesc'); const desc=el?el.value.trim():''; if(!desc||desc.length<20){alert('اكتب وصفاً كافياً للمبيان.');return} const out=document.getElementById('imageAnalysis'); out.innerHTML='⏳ الذكاء الاصطناعي يحلّل وصفك...'; var p='أنت مصحح تربوي في مادة الاجتماعيات للسنة الثالثة إعدادي.\nوصف التلميذ لمبيانه: "'+desc+'"\n\nحلّل وأجب بالعربية:\n1. تقييم نوع المبيان\n2. العنوان والمحاور\n3. ملاحظات الجودة\n4. نقطة من 10\n5. اقتراحات للتحسين\nأجب بإيجابية.'; try{ const ctrl=new AbortController(); setTimeout(function(){ctrl.abort();},22000); const r=await fetch('https://text.pollinations.ai/',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'openai-large',messages:[{role:'user',content:p}]}),signal:ctrl.signal}); if(!r.ok)throw new Error('HTTP '+r.status); const txt=await r.text(); if(!txt||txt.length<15)throw new Error('رد فارغ'); out.innerHTML='
    ✨ تحليل الوصف:
    '+txt.replace(/')+'
    '; out.scrollIntoView({behavior:'smooth',block:'nearest'}); }catch(e){ out.innerHTML='⚠️ '+e.message+''; } } function resizeAndEncode(file,maxSize){ return new Promise(function(resolve,reject){ const img=new Image(),url=URL.createObjectURL(file); img.onload=function(){ let w=img.width,h=img.height; if(w>maxSize||h>maxSize){if(w>h){h=Math.round(h*maxSize/w);w=maxSize;}else{w=Math.round(w*maxSize/h);h=maxSize;}} const c=document.createElement('canvas');c.width=w;c.height=h; c.getContext('2d').drawImage(img,0,0,w,h); URL.revokeObjectURL(url);resolve(c.toDataURL('image/jpeg',0.85).split(',')[1]); }; img.onerror=function(){URL.revokeObjectURL(url);reject(new Error('خطأ في الصورة'));}; img.src=url; }); } function copyVisionPrompt(){ const t='أنت مصحح تربوي في مادة الاجتماعيات للثالثة إعدادي بالمغرب. حلّل هذا المبيان وأذكر: النوع، العنوان، المحاور، المصدر، ملاحظات الجودة، ونقطة من 10.'; navigator.clipboard.writeText(t).then(function(){alert('تم نسخ البرومبت!');}).catch(function(){alert(t);}); } function evaluateReading(){ const el=document.getElementById('studentReading'); const t=el?el.value:''; const evalDiv=document.getElementById('readingEval'); evalDiv.style.display='block'; if(!t||t.trim().length<20){evalDiv.innerHTML='⚠️ اكتب جملة كاملة على الأقل.';return} const checks=[]; checks.push(/يبين|يوضح|يمثل|يُظهر/.test(t)?'✅ بدأت بجملة تعريفية جيدة.':'⚠️ ابدأ بـ "يبين المبيان..."'); checks.push(/نلاحظ|يظهر|يتضح|نرى/.test(t)?'✅ وصفت ما يظهر في المبيان.':'ℹ️ أضف: "نلاحظ أن..."'); checks.push(/نستنتج|خلاصة|إذن|يتبين/.test(t)?'✅ استخلصت نتيجة — ممتاز!':'ℹ️ أضف: "نستنتج أن..."'); checks.push(/%|نسبة|٠|\d/.test(t)?'✅ ذكرت أرقاماً أو نسباً — دقيق.':'ℹ️ اذكر قيمة أو نسبة من المبيان.'); evalDiv.innerHTML='
    📝 تقييم تعليقك:
    '+checks.join('
    ')+'
    '; } function calcRubric(){let s=0;document.querySelectorAll('.rub:checked').forEach(x=>s+=parseInt(x.value));document.getElementById('rubricResult').innerHTML='النقطة: '+s+'/100
    '+(s>=80?'مبيان ممتاز أو قريب من الامتياز.':s>=60?'مبيان مقبول يحتاج تحسين بعض العناصر.':'يحتاج مراجعة العناصر الأساسية قبل التسليم.');} // Drawing pad const pad=document.getElementById('drawPad');const pctx=pad.getContext('2d');let drawing=false;function initPad(){drawPadGrid();pad.addEventListener('pointerdown',e=>{drawing=true;const p=pos(e);pctx.beginPath();pctx.moveTo(p.x,p.y)});pad.addEventListener('pointermove',e=>{if(!drawing)return;const p=pos(e);pctx.lineWidth=document.getElementById('penSize').value;pctx.strokeStyle=document.getElementById('penColor').value;pctx.lineCap='round';pctx.lineTo(p.x,p.y);pctx.stroke()});window.addEventListener('pointerup',()=>drawing=false)} function pos(e){const r=pad.getBoundingClientRect();return{x:(e.clientX-r.left)*pad.width/r.width,y:(e.clientY-r.top)*pad.height/r.height}} function drawPadGrid(){pctx.fillStyle='#fff';pctx.fillRect(0,0,pad.width,pad.height);if(!padGrid)return;pctx.strokeStyle='#f1e2c9';pctx.lineWidth=1;for(let x=0;x{loadPreset('urban');initChallenges();initPad();});