Как запустить сайт викторины в Blogger?

Создание веб-сайта с викторинами в 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=" вопрос5 "данные-корректные=" истинный ">А) Синий кит</div>
        <div class="option" data-question=" вопрос5 " data-correct="false">Б) Африканский слон</div>
        <div class="option" data-question=" вопрос5 " data-correct="false">C) Жираф</div>
        <div class="option" data-question=" вопрос5 " data-correct="false">D) Лев</div>
        <div class="explanation" data-question=" вопрос5 ">Пояснение: Синий кит — самое большое млекопитающее в мире.</div>

Теперь вам нужно назначить правильный вариант ответа, присвоив тег data-correct="true" .

Обязательно оставьте все остальные параметры ложными.

Вы можете посмотреть видео ниже, чтобы узнать, как добавить его в Blogger и настроить его дальше.

Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать меня в разделе комментариев.

Примечание. Я выпущу расширенную версию Quiz Script, как только видео наберет 2 тысячи просмотров или 50 лайков. Так что не забудьте посмотреть видео до конца и поставить лайк.

Я надеюсь, что эта статья поможет вам добавить раздел MCQ в Blogger и легко запустить собственный веб-сайт с викторинами. Если вы хотите, чтобы я осветил еще какие-либо уроки, не стесняйтесь спрашивать в разделе комментариев.