كيفية بدء موقع مسابقة في مدون؟

يعد إنشاء موقع ويب للاختبارات على Blogger عملية مباشرة ولا تتطلب مهارات برمجية. Blogger عبارة عن منصة مجانية للتدوين من Google تتيح لك إنشاء موقع الويب الخاص بك وتخصيصه.

في منشور المدونة هذا، سأرشدك خلال الخطوات اللازمة لبدء موقع ويب للاختبارات على Blogger بسهولة شديدة.

يعد إنشاء موقع ويب على Blogger أمرًا سهلاً للغاية. كل ما تحتاجه هو حساب Google والاشتراك في موقع ويب جديد على منصة Blogger. إذا كنت تريد التحقق من عملية الإعداد الكاملة، فيمكنك متابعة مقالتنا حول كيفية بدء مدونة على Blogger .

الآن بعد أن قمت بإنشاء مدونة مجانية على Blogger، فأنت بحاجة إلى نشر الاختبارات على موقع الويب الخاص بك كمشاركات مدونة. يمكنك اختيار أي مجال ونشر اختبارات متنوعة في فئات مختلفة. يمكنك تغطية أسئلة العام السابق لمختلف الاختبارات والاختبارات التجريبية واختبارات المهارات على الموقع.

بهذه الطريقة، يمكنك تقديم قيمة لقرائك وبمجرد أن تبدأ في تلقي قدر جيد من الزيارات على موقع الويب، يمكنك التقدم بطلب للحصول على موافقة Google Adsense. سيساعدك ذلك على تحقيق الدخل من حركة المرور الخاصة بك من خلال الإعلانات المدعومة.

الآن دعونا نتحقق من كيفية عرض اختبارات MCQ على موقع Blogger الخاص بك.

لهذا، تحتاج إلى استخدام الكود أدناه في قسم " تحرير HTML " الخاص بمنشور مدونتك. يمكنك استخدام الكود أدناه مجانًا.

ملحوظة: غير مسموح بأي غرض تجاري لهذا الكود. لا يمكنك مشاركة الرمز الخاص بك.

إليك البرنامج النصي البسيط لاختبار MCQ لموقع Blogger .

 <style> body { font-family: Arial, sans-serif; } .quiz-container { max-width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .question { font-weight: bold; margin-bottom: 10px; } .option { margin: 5px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } .option:not(.selected):hover { background-color: #f0f0f0; } .selected { background-color: #007acc; color: white; } .correct { background-color: green; color: white; } .wrong { background-color: red; color: white; } .explanation { margin-top: 10px; display: none; } .report-card { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #f0f0f0; } .report-card h2{ margin: 0px!important; } .report-card p{ margin: 0.5em 0!important; } </style> <div class="quiz-container"> <div class="question">Question 1: What is 2 + 2?</div> <div class="option" data-question="question1" data-correct="true">A) 4</div> <div class="option" data-question="question1" data-correct="false">B) 5</div> <div class="option" data-question="question1" data-correct="false">C) 6</div> <div class="option" data-question="question1" data-correct="false">D) 7</div> <div class="explanation" data-question="question1">Explanation: 2 + 2 equals 4.</div> <div class="question">Question 2: What is the capital of France?</div> <div class="option" data-question="question2" data-correct="true">A) Paris</div> <div class="option" data-question="question2" data-correct="false">B) London</div> <div class="option" data-question="question2" data-correct="false">C) Berlin</div> <div class="option" data-question="question2" data-correct="false">D) Madrid</div> <div class="explanation" data-question="question2">Explanation: The capital of France is Paris.</div> <div class="question">Question 3: What is the largest planet in our solar system?</div> <div class="option" data-question="question3" data-correct="true">A) Jupiter</div> <div class="option" data-question="question3" data-correct="false">B) Earth</div> <div class="option" data-question="question3" data-correct="false">C) Mars</div> <div class="option" data-question="question3" data-correct="false">D) Venus</div> <div class="explanation" data-question="question3">Explanation: Jupiter is the largest planet in our solar system.</div> <div class="question">Question 4: Which gas do plants absorb from the atmosphere?</div> <div class="option" data-question="question4" data-correct="true">A) Carbon dioxide</div> <div class="option" data-question="question4" data-correct="false">B) Oxygen</div> <div class="option" data-question="question4" data-correct="false">C) Nitrogen</div> <div class="option" data-question="question4" data-correct="false">D) Hydrogen</div> <div class="explanation" data-question="question4">Explanation: Plants absorb carbon dioxide from the atmosphere.</div> <div class="question">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question="question5" data-correct="true">A) Blue whale</div> <div class="option" data-question="question5" data-correct="false">B) African elephant</div> <div class="option" data-question="question5" data-correct="false">C) Giraffe</div> <div class="option" data-question="question5" data-correct="false">D) Lion</div> <div class="explanation" data-question="question5">Explanation: The blue whale is the largest mammal in the world.</div> <div class="report-card"> <h2>Report Card</h2> <p>Total Questions Attempted: <span>0</span></p> <p>Correct Answers: <span>0</span></p> <p>Wrong Answers: <span>0</span></p> <p>Percentage: <span>0%</span></p> </div> </div> <script> 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'); let totalQuestions = 0; let correctAnswers = 0; options.forEach(option => { option.addEventListener('click', () => { const questionId = option.getAttribute('data-question'); const isCorrect = option.getAttribute('data-correct') === 'true'; 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'); // Highlight the correct answer options.forEach(correctOption => { if ( correctOption.getAttribute('data-question') === questionId && correctOption.getAttribute('data-correct') === 'true' ) { correctOption.classList.add('correct'); } }); } totalQuestions++; } } }); // Show explanation const explanation = document.querySelector(`.explanation[data-question="${questionId}"]`); if (explanation) { explanation.style.display = 'block'; } // Update report card attemptedCount.textContent = totalQuestions; correctCount.textContent = correctAnswers; wrongCount.textContent = totalQuestions - correctAnswers; percentage.textContent = ((correctAnswers / totalQuestions) * 100).toFixed(2) + '%'; }); }); </script>

يمكنك استخدام هذا الرمز مع منصات CMS الأخرى مثل Wix وWordPress وما إلى ذلك.

الآن لإضافة المزيد من اختبارات MCQ حول هذا الموضوع، تحتاج إلى نسخ هذا القسم واستبدال المعرف الموضح أدناه.

 <div class="question"has-inline-color has-theme-palette-2-color">question5 ">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question=" <div class="question"has-inline-color has-theme-palette-2-color">question5 ">Question 5: What is the largest mammal in the world?</div> <div class="option" data-question=" question5 "صحيحة البيانات =" حقيقي ">أ) الحوت الأزرق</div>
        <div class="option" data-question=" سؤال5 " data-correct="false">ب) الفيل الأفريقي</div>
        <div class="option" data-question=" سؤال5 " data-correct="false">ج) الزرافة</div>
        <div class="option" data-question=" سؤال5 " data-correct="false">د) الأسد</div>
        <div class="explanation" data-question=" سؤال5 ">شرح: الحوت الأزرق هو أكبر حيوان ثديي في العالم.</div>

أنت الآن بحاجة إلى تعيين الخيار الصحيح كإجابة عن طريق تعيين العلامة data-correct=”true” .

تأكد من إبقاء جميع الخيارات الأخرى خاطئة.

يمكنك مشاهدة الفيديو أدناه للتعرف على كيفية إضافته إلى Blogger وتخصيصه بشكل أكبر.

إذا كانت لديك أي شكوك، فلا تتردد في سؤالي في قسم التعليقات.

ملاحظة: سأقوم بإصدار الإصدار المتقدم من Quiz Script بمجرد حصول الفيديو على 2 ألف مشاهدة أو 50 إعجابًا. لذا لا تنسوا مشاهدة الفيديو حتى النهاية والإعجاب بالفيديو.

آمل أن تساعدك هذه المقالة في إضافة قسم MCQ في Blogger وبدء موقع الاختبار الخاص بك بسهولة. إذا كنت تريد مني أن أغطي المزيد من الدروس، فلا تتردد في السؤال في قسم التعليقات.