Come avviare un sito Web di quiz in Blogger?

Creare un sito web di quiz su Blogger è un processo semplice che non richiede competenze di programmazione. Blogger è una piattaforma di blogging gratuita di Google che ti consente di creare e personalizzare il tuo sito web.

In questo post del blog ti guiderò attraverso i passaggi per avviare molto facilmente un sito Web di quiz su Blogger.

Creare un sito web in Blogger è abbastanza semplice. Tutto ciò di cui hai bisogno è un account Google e iscriviti a un nuovo sito web sulla piattaforma Blogger. Se vuoi controllare il processo di installazione completo puoi seguire il nostro articolo su Come avviare un blog su Blogger .

Ora che hai creato un blog gratuito su Blogger, devi pubblicare quiz sul tuo sito web come post di blog. Puoi scegliere qualsiasi nicchia e pubblicare vari quiz in diverse categorie. Puoi rispondere alle domande dell'anno precedente relative a vari esami, test simulati e test di abilità sul sito.

In questo modo, puoi fornire valore ai tuoi lettori e una volta che inizi a ricevere una buona quantità di traffico sul sito web puoi richiedere l'approvazione di Google Adsense. Ti aiuterà a monetizzare il tuo traffico con annunci sponsorizzati.

Ora controlliamo come puoi mostrare i quiz MCQ sul tuo sito web Blogger.

Per questo, devi utilizzare il codice seguente nella sezione " Modifica HTML " del tuo post sul blog. Puoi utilizzare il codice seguente gratuitamente.

Nota: qualsiasi scopo commerciale di questo codice non è consentito. Non puoi condividere il codice come se fosse tuo.

Ecco il semplice script MCQ Quiz per il sito Web di 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>

Puoi utilizzare questo codice con altre piattaforme CMS come Wix, WordPress, ecc.

Ora per aggiungere più MCQ Quiz su questo, devi copiare questa sezione e sostituire l'ID evidenziato di seguito.

 <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=" domanda5 " dati-corretti=" VERO ">A) Balena azzurra</div>
        <div class="opzione" data-question=" domanda5 " data-correct="false">B) Elefante africano</div>
        <div class="opzione" data-question=" domanda5 " data-correct="false">C) Giraffa</div>
        <div class="opzione" data-question=" domanda5 " data-correct="false">D) Leone</div>
        <div class="spiegazione" data-question=" domanda5 ">Spiegazione: La balenottera azzurra è il mammifero più grande del mondo.</div>

Ora devi assegnare l'opzione giusta come risposta assegnando il tag data-correct="true" .

Assicurati di mantenere tutte le altre opzioni come false.

Puoi guardare il video qui sotto per scoprire come aggiungerlo a Blogger e personalizzarlo ulteriormente.

Se hai qualche dubbio, non esitare a chiedermelo nella sezione commenti.

Nota: rilascerò la versione avanzata di Quiz Script una volta che il video avrà ottenuto 2.000 visualizzazioni o 50 Mi piace. Quindi, non dimenticare di guardare il video fino alla fine e di mettere "Mi piace" al video.

Spero che questo articolo ti aiuti ad aggiungere una sezione MCQ in Blogger e ad avviare facilmente il tuo sito Web di quiz. Se vuoi che copra altri tutorial, sentiti libero di chiedere nella sezione commenti.