如何在 Blogger 啟動測驗網站？
已發表: 2023-10-13在 Blogger 上建立測驗網站是一個簡單的過程，不需要編碼技能。 Blogger 是 Google 提供的免費部落格平台，可讓您建立和自訂您的網站。
在這篇文章中，我將引導您輕鬆完成在 Blogger 上建立測驗網站的步驟。
在 Blogger 中建立網站非常簡單。 您只需要一個 Google 帳戶並在 Blogger 平台上註冊一個新網站。 如果您想查看完整的設定流程，您可以關注我們關於如何在 Blogger 上建立部落格的文章。
現在您已經在 Blogger 上創建了一個免費博客，您需要在您的網站上以博客帖子的形式發布測驗。 您可以選擇任何利基並發布不同類別的各種測驗。 您可以在網站上查看往年的各種考試題目、模擬考試和技能考試。
透過這種方式，您可以為您的讀者提供價值，一旦您開始在網站上獲得大量流量，您就可以申請 Google Adsense 批准。 它將幫助您透過搜尋廣告將流量貨幣化。
現在讓我們看看如何在您的 Blogger 網站上顯示 MCQ 測驗。
為此，您需要在部落格文章的「編輯 HTML 」部分使用以下程式碼。 您可以免費使用以下代碼。
注意：禁止將此程式碼用於任何商業目的。 您不能將程式碼作為您自己的程式碼進行共用。
這是Blogger 網站的簡單 MCQ 測驗腳本。
<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 測驗，您需要複製此部分並取代下面突出顯示的 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="問題5 “數據正確=” 真的">A) 藍鯨</div> <div class="選項" data-question=" 問題5 " data- Correct="false">B) 非洲象</div> <div class="選項" data-question=" 問題5 “ data- Correct="false">C) 長頸鹿</div> <div class="選項" data-question=" 問題5 “ data- Correct="false">D) 獅子</div> <div class="解釋" data-question=" 問題5 ">說明：藍鯨是世界上最大的哺乳動物。</div>
現在您需要透過指派標籤data- Correct=”true」來指派正確的選項作為答案。
確保將所有其他選項保留為 false。
您可以觀看下面的視頻，了解如何將其添加到 Blogger 並進一步自訂。
如果還有什麼疑問，歡迎在留言區問我。
我希望本文可以幫助您在 Blogger 中新增 MCQ 部分並輕鬆啟動您自己的測驗網站。 如果您希望我介紹更多教程，請隨時在評論部分提問。