จะเริ่มเว็บไซต์แบบทดสอบใน Blogger ได้อย่างไร
เผยแพร่แล้ว: 2023-10-13การสร้างเว็บไซต์แบบทดสอบบน Blogger เป็นกระบวนการที่ไม่ซับซ้อนและไม่ต้องใช้ทักษะการเขียนโค้ด Blogger เป็นแพลตฟอร์มบล็อกฟรีจาก Google ที่ให้คุณสร้างและปรับแต่งเว็บไซต์ของคุณได้
ในบล็อกโพสต์นี้ ฉันจะแนะนำคุณตลอดขั้นตอนในการเริ่มเว็บไซต์แบบทดสอบบน Blogger อย่างง่ายดาย
การสร้างเว็บไซต์ใน Blogger นั้นค่อนข้างง่าย สิ่งที่คุณต้องมีคือบัญชี Google และลงชื่อสมัครใช้เว็บไซต์ใหม่บนแพลตฟอร์ม Blogger หากคุณต้องการตรวจสอบกระบวนการตั้งค่าทั้งหมด คุณสามารถปฏิบัติตามบทความของเราเกี่ยวกับ วิธีเริ่มต้นบล็อกบน Blogger
ตอนนี้คุณได้สร้างบล็อกฟรีบน Blogger แล้ว คุณต้องโพสต์แบบทดสอบบนเว็บไซต์ของคุณเป็นโพสต์ในบล็อก คุณสามารถเลือกช่องใดก็ได้และเผยแพร่แบบทดสอบต่างๆ ในหมวดหมู่ต่างๆ คุณสามารถครอบคลุมคำถามของปีที่แล้วเกี่ยวกับการสอบ การทดสอบจำลอง และการทดสอบทักษะต่างๆ บนเว็บไซต์
ด้วยวิธีนี้ คุณสามารถให้คุณค่าแก่ผู้อ่านของคุณได้ และเมื่อคุณเริ่มได้รับปริมาณการเข้าชมเว็บไซต์ในปริมาณที่ดี คุณสามารถสมัครเพื่อขออนุมัติ Google Adsense ได้ มันจะช่วยให้คุณสร้างรายได้จากการเข้าชมของคุณด้วยโฆษณาที่ได้รับการสนับสนุน
ตอนนี้เรามาดูวิธีที่คุณสามารถแสดงแบบทดสอบ MCQ บนเว็บไซต์ Blogger ของคุณ
ในการดำเนินการนี้ คุณจะต้องใช้โค้ดด้านล่างในส่วน " แก้ไข HTML " ของโพสต์ในบล็อก คุณสามารถใช้โค้ดด้านล่างได้ฟรี
หมายเหตุ: ไม่อนุญาตวัตถุประสงค์ทางการค้าใดๆ ของรหัสนี้ คุณไม่สามารถแชร์รหัสเป็นของคุณเองได้
นี่คือ สคริปต์ MCQ Quiz ง่ายๆ สำหรับเว็บไซต์ 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 Quiz เกี่ยวกับเรื่องนี้ คุณต้องคัดลอกส่วนนี้และแทนที่ Id ที่ไฮไลต์ด้านล่าง
<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 = "ตัวเลือก" ข้อมูลคำถาม =" คำถามที่ 5 " data-correct="false">B) ช้างแอฟริกา</div> <div class = "ตัวเลือก" ข้อมูลคำถาม =" คำถามที่ 5 " data-correct="false">C) ยีราฟ</div> <div class = "ตัวเลือก" ข้อมูลคำถาม =" คำถามที่ 5 " data-correct="false">D) สิงโต</div> <div class = "คำอธิบาย" ข้อมูลคำถาม =" คำถามที่ 5 ">คำอธิบาย: วาฬสีน้ำเงินเป็นสัตว์เลี้ยงลูกด้วยนมที่ใหญ่ที่สุดในโลก</div>
ตอนนี้คุณต้องกำหนดตัวเลือกที่ถูกต้องเป็นคำตอบโดยการกำหนดแท็ก data-correct=”true”
ตรวจสอบให้แน่ใจว่าตัวเลือกอื่นๆ ทั้งหมดเป็นเท็จ
คุณสามารถชมวิดีโอด้านล่างเพื่อเรียนรู้วิธีเพิ่มลงใน Blogger และปรับแต่งเพิ่มเติม
หากคุณมีข้อสงสัยใด ๆ โปรดถามฉันในส่วนความคิดเห็น
ฉันหวังว่าบทความนี้จะช่วยให้คุณ เพิ่มส่วน MCQ ใน Blogger และเริ่มเว็บไซต์ Quiz ของคุณเองได้อย่างง่ายดาย หากคุณต้องการให้ฉันครอบคลุมบทช่วยสอนเพิ่มเติม โปรดถามในส่วนความคิดเห็น