Blogger でクイズ Web サイトを始めるには?
公開: 2023-10-13Blogger でクイズ Web サイトを作成するのは簡単なプロセスで、コーディングのスキルは必要ありません。 Blogger は、Web サイトを作成およびカスタマイズできる Google の無料ブログ プラットフォームです。
このブログ投稿では、Blogger でクイズ Web サイトを非常に簡単に開始する手順を説明します。
Blogger で Web サイトを作成するのは非常に簡単です。 必要なのは、Google アカウントと Blogger プラットフォームの新しいウェブサイトにサインアップすることだけです。 完全なセットアップ プロセスを確認したい場合は、Blogger でブログを開始する方法に関する記事を参照してください。
Blogger で無料ブログを作成したので、Web サイトにブログ投稿としてクイズを投稿する必要があります。 任意のニッチを選択し、さまざまなカテゴリでさまざまなクイズを公開できます。 サイト上では、前年度の各種試験・模擬試験・技能試験の問題を網羅することができます。
このようにして、読者に価値を提供することができ、Web サイトで十分な量のトラフィックを受け取り始めたら、Google Adsense の承認を申請できます。 スポンサー付き広告でトラフィックを収益化するのに役立ちます。
それでは、Blogger Web サイトで MCQ クイズを表示する方法を確認してみましょう。
このためには、ブログ投稿の「 HTML の編集」セクションで以下のコードを使用する必要があります。 以下のコードは無料で使用できます。
注:このコードの商業目的は許可されません。 コードを自分のものとして共有することはできません。
以下は、 Blogger Web サイト用の簡単な 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>このコードは、Wix、WordPress などの他の CMS プラットフォームで使用できます。
これにさらに 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="question5 " データ修正 = 真実">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 セクションを追加し、独自のクイズ Web サイトを簡単に開始するのに役立つことを願っています。 さらにチュートリアルを取り上げてほしい場合は、お気軽にコメント欄で質問してください。