Como iniciar um site de teste no Blogger?

Criar um site de teste no Blogger é um processo simples que não requer habilidades de codificação. O Blogger é uma plataforma de blog gratuita do Google que permite criar e personalizar seu site.

Nesta postagem do blog, orientarei você nas etapas para iniciar um site de teste no Blogger com muita facilidade.

Criar um site no Blogger é bastante fácil. Tudo que você precisa é de uma Conta do Google e se inscrever em um novo site na plataforma Blogger. Se quiser verificar o processo de configuração completo, você pode seguir nosso artigo sobre Como iniciar um blog no Blogger .

Agora que você criou um blog gratuito no Blogger, precisa postar questionários em seu site como postagens de blog. Você pode escolher qualquer nicho e publicar vários questionários em diferentes categorias. Você pode cobrir as questões do ano anterior de vários exames, testes simulados e testes de habilidades no site.

Desta forma, você pode agregar valor aos seus leitores e, assim que começar a receber uma boa quantidade de tráfego no site, poderá solicitar a aprovação do Google Adsense. Isso o ajudará a monetizar seu tráfego com anúncios patrocinados.

Agora vamos verificar como você pode mostrar questionários MCQ no site do Blogger.

Para isso, você precisa usar o código abaixo na seção “ Editar HTML ” da postagem do seu blog. Você pode usar o código abaixo gratuitamente.

Nota: Qualquer finalidade comercial deste código não é permitida. Você não pode compartilhar o código como se fosse seu.

Aqui está o script simples do MCQ Quiz para o site do 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>

Você pode usar este código com outras plataformas CMS como Wix, WordPress, etc.

Agora, para adicionar mais MCQ Quiz sobre isso, você precisa copiar esta seção e substituir o ID destacado abaixo.

 <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 " dados corretos = " verdadeiro ">A) Baleia Azul</div>
        <div class="opção" data-question=" pergunta5 " data-correct="false">B) Elefante africano</div>
        <div class="opção" data-question=" pergunta5 " data-correct="false">C) Girafa</div>
        <div class="opção" data-question=" pergunta5 " data-correct="false">D) Leão</div>
        <div class="explicação" data-question=" pergunta5 ">Explicação: A baleia azul é o maior mamífero do mundo.</div>

Agora você precisa atribuir a opção correta como resposta atribuindo a tag data-correct=”true” .

Certifique-se de manter todas as outras opções como falsas.

Você pode assistir ao vídeo abaixo para saber como adicioná-lo ao Blogger e personalizá-lo ainda mais.

Se você tiver alguma dúvida, sinta-se à vontade para me perguntar na seção de comentários.

Observação: lançarei a versão avançada do Quiz Script assim que o vídeo obtiver 2 mil visualizações ou 50 curtidas. Então não esqueça de assistir o vídeo até o final e curtir o vídeo.

Espero que este artigo ajude você a adicionar uma seção MCQ no Blogger e a iniciar seu próprio site de quiz facilmente. Se você quiser que eu cubra mais tutoriais, fique à vontade para perguntar na seção de comentários.