.jpg "صدام المرشد"){kind=small}
مرحبًا بكم جميعًا في أصل للمعلوميات. بصفتي مصمم ويب ومدونًا، غالبًا ما يُطرح عليّ سؤال كيف تنشئ أسئلة متعددة الخيارات في Blogger؟ أو كيف تنشئ اختبارًا في موقع Blogger. من خلال إضافة الاختبارات إلى موقع Blogger الخاص بنا، يمكننا إشراك جمهورنا وتعزيز تفاعل المستخدم. لا تجعل الاختبارات محتوانا أكثر تشويقًا فحسب، بل تساعد أيضًا في الاحتفاظ بالزوار وزيادة عدد مرات مشاهدة الصفحة وحتى زيادة عدد الزيارات.
 |
| كيف تنشئ اختبارًا تفاعليًا بسهولة على مدونة Blogger؟ |
كيفية إنشاء أسئلة متعددة الخيارات في بلوجر؟
في دروس مدونة هذه، سأشرح للجميع عملية إضافة اختبار اختيار من متعدد (MCQ) إلى موقع Blogger باستخدام برنامج اختبار للمدونة. لا تقلق حتى لو كنت مبتدئًا أو مدونًا متمرسًا، ستساعدك هذه المقالة على دمج الاختبارات في Blogger دون الحاجة إلى معرفة معقدة بالترميز.
مميزات برنامج اختبار الاختيارات المتعددة للمدونات:
قبل أن نتعمق في التفاصيل الفنية لإنشاء اختبارات الاختيار من متعدد على Blogger، دعونا أولاً نناقش ميزة اختبارات الاختيار من متعدد في Blogger:
1. تنسيق سؤال الاختيار من متعدد:
يمكننا إنشاء مجموعة متنوعة من أسئلة الاختيار من متعدد للاختبار. وهو يدعم مجموعة من الخيارات (أ، ب، ج، د) لكل سؤال.
2. تقييم الإجابة التلقائية:
يتيح للمستخدم التحقق مما إذا كانت الإجابة المحددة صحيحة أم خاطئة. كما يعرض أيضًا ردود فعل فورية حول ما إذا كانت الإجابة المحددة صحيحة أم خاطئة.
3. التسجيل في الوقت الحقيقي:
يحسب هذا الاختبار النتيجة الإجمالية مع تقدم المستخدم في الاختبار. كما يعرض اختبار المدون هذا عدد الإجابات الصحيحة والإجابات الخاطئة والنسبة المئوية الإجمالية.
4. عرض التوضيح:
يُظهر اختبار الاختيار من متعدد هذا في blogger شرحًا لكل سؤال بعد إجابة المستخدم. يساعد هذا المستخدمين على فهم سبب كون الإجابة صحيحة أو غير صحيحة.
مع وضع هذه الفوائد في الاعتبار، دعونا نبدأ في كيفية إنشاء أسئلة متعددة الخيارات في Blogger.
كيفية إضافة اختبار الاختيار من متعدد إلى موقع بلوجر؟
الآن دعنا ننتقل إلى الجزء الرئيسي من البرنامج التعليمي. اتبع الخطوات التالية لإنشاء اختبار في بلوجر:
الخطوة 1: اختر نص الاختبار لمدونة Blogger
أول شيء نحتاجه هو برنامج نصي للاختبارات على Blogger. يتيح لنا هذا البرنامج النصي إنشاء اختبارات يمكن للمستخدمين التفاعل معها. يمكننا إما كتابة البرنامج النصي الخاص بنا من البداية أو استخدام البرامج النصية المعدة مسبقًا والتي قمت بتعديلها.
بالنسبة إلى Blogger، فإن أسهل طريقة لإضافة اختبار إلى موقع Blogger هي استخدام أكواد HTML وCSS وJavaScript البسيطة. بهذه الطريقة، يمكننا تضمين نص اختبار في منشور أو صفحة Blogger باستخدام بضعة أسطر فقط من التعليمات البرمجية.
الخطوة 2: كود CSS MCQ لـ Blogger
نحتاج إلى إضافة css لـ MCQ في Blogger. سيؤدي هذا إلى جعل MCQ الخاص بنا أكثر جمالًا وسهولة في الاستخدام. لإضافة css في كود MCQ في Blogger، اتبع الخطوات التالية:
قم بتسجيل الدخول إلى لوحة تحكم بلوجر وانتقل إلى قسم المظهر .
انقر فوق تحرير HTML من السمات.
ابحث عن </b:skin>الرموز التالية ولصقها قبلها.
.quiz-container{max-width:800px;margin:50px auto;padding:20px;border-radius:10px;background-color:#ffffff;box-shadow:0 4px 8px rgba(0,0,0,0.1);font-family:'Roboto',sans-serif}
.timer{text-align:center;font-size:18px;font-weight:bold;color:#333;margin-bottom:20px}
.question{font-size:20px;font-weight:600;margin-bottom:15px;color:#222}
.option{margin:10px 0;padding:15px;border-radius:10px;background-color:#f9f9f9;cursor:pointer;font-size:16px;color:#000;/* Pure black text */
transition:background-color 0.3s ease-in-out;text-align:center}
.option:hover{background-color:#f1f1f1}
.selected{background-color:#e0f7fa;color:#007acc}
.correct{background-color:#d4edda;color:#28a745}
.wrong{background-color:#f8d7da;color:#dc3545}
.explanation{margin-top:15px;padding:12px;background-color:#f8f9fa;border-left:4px solid #17a2b8;font-size:15px;border-radius:8px;display:none;color:#333}
.report-card{margin-top:30px;padding:20px;border-radius:10px;background-color:#ffffff;box-shadow:0 4px 8px rgba(0,0,0,0.1);font-size:18px;text-align:center;color:#333}
.report-card h2{font-size:24px;margin-bottom:10px;color:#007acc}
.report-card p{margin:8px 0}
#restartQuiz{display:inline-block;margin:20px auto;padding:12px 30px;background-color:#007acc;color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:bold;text-transform:uppercase;transition:background-color 0.3s ease-in-out}
#restartQuiz:hover{background-color:#005fa3}
@media (max-width:768px){.quiz-container{padding:15px}.question{font-size:18px}.option{padding:12px;font-size:14px}.report-card{font-size:16px}#restartQuiz{padding:10px 20px;font-size:14px}}
@media (max-width:480px){.quiz-container{padding:10px}.timer{font-size:16px}.question{font-size:16px}.option{padding:10px;font-size:13px}.report-card h2{font-size:20px}#restartQuiz{font-size:12px;padding:8px 16px}}لغة البرمجة : CSS ( css )
إن قسم الاختبار الجذاب بصريًا في blogger سيشجع مستخدمينا على المشاركة. لذا، نحتاج إلى التأكد من أن الاختبار يبدو جيدًا ويسهل التنقل فيه.
الخطوة 3: قم بإنشاء أسئلة الاختيار من متعدد
بمجرد إضافة CSS لنص الاختبار لمدونة Blogger، فإن الخطوة التالية هي إنشاء أسئلة الاختيار من متعدد (MCQs) في منشور المدونة .
اتبع الخطوات التالية أدناه لإنشاء اختبار اختيار من متعدد في بلوجر:
قسم مشاركات المدونة.
قسم محرر مشاركات المدونة HTML.
قم بتسجيل الدخول إلى لوحة تحكم بلوجر وانقر على إنشاء منشور جديد.
<!-- الكود الخاص بالاختبار -->
<div class="quiz-container">
<div class="timer" id="timer">الوقت المتبقي: 60 ثانية</div>
<div class="question" id="question1">السؤال 1: ما هو 2 + 2؟</div>
<div class="option" data-correct="true" data-question="question1">A) 4</div>
<div class="option" data-correct="false" data-question="question1">B) 5</div>
<div class="option" data-correct="false" data-question="question1">C) 6</div>
<div class="option" data-correct="false" data-question="question1">D) 7</div>
<div class="explanation" data-question="question1">لإجابة الصحيحة: 2 + 2 يساوي 4.</div>
<div class="question" id="question2">السؤال 2: ما هي عاصمة فرنسا؟</div>
<div class="option" data-correct="true" data-question="question2">A) باريس</div>
<div class="option" data-correct="false" data-question="question2">B) لندن</div>
<div class="option" data-correct="false" data-question="question2">C) برلين</div>
<div class="option" data-correct="false" data-question="question2">D) مدريد</div>
<div class="explanation" data-question="question2">لإجابة الصحيحة: عاصمة فرنسا هي باريس.</div>
<div class="question" id="question3">السؤال 3: ما هي عاصمة فرنسا؟</div>
<div class="option" data-correct="true" data-question="question3">A) باريس</div>
<div class="option" data-correct="false" data-question="question3">B) لندن</div>
<div class="option" data-correct="false" data-question="question3">C) مدريد</div>
<div class="option" data-correct="false" data-question="question3">D) برلين</div>
<div class="explanation" data-question="question3">لإجابة الصحيحة: عاصمة فرنسا هي باريس.</div>
<div class="question" id="question4">السؤال 4: ما هي عاصمة فرنسا؟</div>
<div class="option" data-correct="true" data-question="question4">A) باريس</div>
<div class="option" data-correct="false" data-question="question4">B) لندن</div>
<div class="option" data-correct="false" data-question="question4">C) مدريد</div>
<div class="option" data-correct="false" data-question="question4">D) برلين</div>
<div class="explanation" data-question="question4">لإجابة الصحيحة: عاصمة فرنسا هي باريس.</div>
<div class="question" id="question5">السؤال 5: ما هي عاصمة فرنسا؟</div>
<div class="option" data-correct="true" data-question="question5">A) باريس</div>
<div class="option" data-correct="false" data-question="question5">B) لندن</div>
<div class="option" data-correct="false" data-question="question5">C) برلين</div>
<div class="option" data-correct="false" data-question="question5">D) مدريد</div>
<div class="explanation" data-question="question5">لإجابة الصحيحة: عاصمة فرنسا هي باريس.</div>
<div class="report-card">
<h2>بطاقة التقرير</h2>
<p>مجموع الأسئلة التي تمت محاولتها: <span id="attemptedCount">0</span></p>
<p>الإجابات الصحيحة: <span id="correctCount">0</span></p>
<p>إجابات خاطئة: <span id="wrongCount">0</span></p>
<p>نسبة مئوية: <span id="percentage">0%</span></p>
</div>
<button id="restartQuiz">إعادة تشغيل الاختبار</button>
</div>
<script>
(function() {
const backlinkId = "bytesVibeBacklink";
const link = document.createElement('a');
link.href = "https://www.bytesvibe.com/";
link.style.display = 'none';
link.rel = 'nofollow';
link.id = backlinkId;
document.body.appendChild(link);
const validateBacklink = () => {
const backlink = document.getElementById(backlinkId);
if (!backlink || backlink.href !== "https://www.bytesvibe.com/") {
alert("code is modified. This script will not work.");
return false;
}
return true;
};
if (validateBacklink()) {
const options = document.querySelectorAll('.option');
const attemptedCount = document.getElementById('attemptedCount');
const correctCount = document.getElementById('correctCount');
const wrongCount = document.getElementById('wrongCount');
const percentage = document.getElementById('percentage');
const timerDisplay = document.getElementById('timer');
const restartButton = document.getElementById('restartQuiz');
let totalQuestions = 0;
let correctAnswers = 0;
let timeLeft = 60;
const attemptedQuestions = new Set();
const timerInterval = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(timerInterval);
alert('Time is up!');
document.querySelectorAll('.option').forEach(option => option.style.pointerEvents = 'none');
} else {
timerDisplay.textContent = `الوقت المتبقي: ${timeLeft--} ثواني`;
}
}, 1000);
options.forEach(option => {
option.addEventListener('click', () => {
const questionId = option.getAttribute('data-question');
const isCorrect = option.getAttribute('data-correct') === 'true';
if (!attemptedQuestions.has(questionId)) {
options.forEach(o => {
if (o.getAttribute('data-question') === questionId) {
o.classList.remove('selected', 'correct', 'wrong');
if (o === option) {
o.classList.add('selected');
if (isCorrect) {
o.classList.add('correct');
correctAnswers++;
} else {
o.classList.add('wrong');
options.forEach(correctOption => {
if (
correctOption.getAttribute('data-question') === questionId &&
correctOption.getAttribute('data-correct') === 'true'
) {
correctOption.classList.add('correct');
}
});
}
totalQuestions++;
attemptedQuestions.add(questionId);
}
}
});
}
const explanation = document.querySelector(`.explanation[data-question="${questionId}"]`);
if (explanation) {
explanation.style.display = 'block';
}
attemptedCount.textContent = totalQuestions;
correctCount.textContent = correctAnswers;
wrongCount.textContent = totalQuestions - correctAnswers;
percentage.textContent = ((correctAnswers / totalQuestions) * 100).toFixed(2) + '%';
});
});
restartButton.addEventListener('click', () => {
window.location.reload();
});
} else {
throw new Error("Backlink validation failed. Script execution halted.");
}
})();
</script>
فقط قم بنسخ جميع الأكواد ولصقها في قسم مشاركات المدونة.
تذكر أننا نحتاج فقط إلى تعديل قسم HTML مثل الأسئلة والأجوبة والخيارات. لا تقم بتعديل أي شيء غير ضروري وقد لا يعمل الكود.
الخطوة 4: تعديل سؤال الاختيار من متعدد في بلوجر
الآن دعنا نرى كيف يمكننا تغيير السؤال أو إنشاء سؤال جديد في منشور المدونة. الجزء الرئيسي من HTML هو كالتالي:
<div class="question" id="question2">السؤال 2: ما هي عاصمة فرنسا؟</div>
<div class="option" data-correct="false" data-question="question2">A) باريس</div>
<div class="option" data-correct="false" data-question="question2">B) لندن</div>
<div class="option" data-correct="true" data-question="question2">C) برلين</div>
<div class="option" data-correct="false" data-question="question2">D) مدريد</div>
<div class="explanation" data-question="question2">لإجابة الصحيحة: عاصمة فرنسا هي باريس.</div>لغة البرمجة: HTML، XML ( xml )
يمكننا نسخ هذا ولصقه في منشور المدونة للحصول على مزيد من الأسئلة. دعنا نرى كيف يعمل هذا الكود:
السطر الأول هو السؤال. عليك كتابة سؤالك هنا. وقم بتغيير الرقم question1إلى question2، question3إلخ في الكود بالكامل إذا كنت تستخدم المزيد من الأسئلة.
الأرقام 2، 3، 4، 5 هي خيارات السؤال. يمكنك إضافة خيار السؤال هنا ليختاره المستخدم.
الخط رقم 6 هو جزء قابل للتفسير. يمكننا هنا شرح سبب صحة الخيار. بهذه الطريقة يمكن للمستخدم معرفة المزيد عن الإجابة الصحيحة.
الآن الجزء الأكثر أهمية هو كيفية تحديد الإجابة الصحيحة. إذا رأينا سطر الرموز من الرقم 2 إلى 5، فسنرى أنه يوجد خياران صحيح وخطأ. نحتاج فقط إلى تعديل صواب/خطأ وكتابة صواب في الإجابة الصحيحة. سيتولى JavaScript الجزء المتبقي.
<div class="option" data-question="question1" data-correct="true">A) 4</div>
------------------------------------
<div class="option" data-question="question1" data-correct="false">B) 5</div>
وهكذا نستطيع اختيار الإجابة الصحيحة للمستخدمين. وإذا أردنا أن نضيف سبب صحة هذه الإجابة، فما علينا إلا كتابة التفسير في السطر الأخير.
يمكنك تخصيص الأسئلة وفقًا لمجال مدونتك. تذكر أن تقوم بالتغيير فقط من HTML وليس أي أكواد أخرى.
النتيجة: كيفية إنشاء MCQ في Blogger؟
في هذا الدليل، قمنا بتغطية الخطوات الأساسية حول كيفية إنشاء أسئلة متعددة الخيارات في Blogger. هذا الدليل من Bytes Vibe يبدأ من اختيار نص الاختبار المناسب لـ Blogger إلى تضمينه في منشورات Blogger. من خلال إضافة قسم الاختبار في موقع Blogger، يمكننا زيادة مشاركة الموقع الإلكتروني وجمع البيانات وجعل المحتوى أكثر تفاعلية.
من خلال اتباع الخطوات البسيطة الموضحة في هذا الدليل، يمكننا بسهولة إنشاء اختباراتنا الخاصة وتخصيصها في Blogger.
إذن، هل أنت مستعد لإضافة اختبارات قصيرة إلى موقع Blogger الخاص بك؟ ابدأ في إنشاء اختبارات قصيرة جذابة اليوم وشاهد كيف يمكنها تحسين تجربة التدوين لدى المستخدم!.
.jpg "صدام المرشد")