Cum să pornești un site web cu test în Blogger?

Crearea unui site web de test pe Blogger este un proces simplu care nu necesită abilități de codificare. Blogger este o platformă gratuită de blogging de la Google care vă permite să vă creați și să vă personalizați site-ul web.

În această postare pe blog, vă voi ghida prin pașii pentru a începe foarte ușor un site web cu test pe Blogger.

Crearea unui site web în Blogger este destul de ușoară. Tot ce aveți nevoie este un Cont Google și să vă înscrieți pentru un site web nou pe Platforma Blogger. Dacă doriți să verificați procesul complet de configurare, puteți urmări articolul nostru despre Cum să începeți un blog pe Blogger .

Acum că ați creat un blog gratuit pe Blogger, trebuie să postați chestionare pe site-ul dvs. ca postări de blog. Puteți alege orice nișă și puteți publica diverse chestionare în diferite categorii. Puteți acoperi întrebările din anul precedent pentru diferite examene, teste simulate și teste de îndemânare pe site.

În acest fel, puteți oferi valoare cititorilor dvs. și, odată ce începeți să primiți o cantitate bună de trafic pe site, puteți aplica pentru aprobarea Google Adsense. Vă va ajuta să generați bani din Trafic cu reclame sponsorizate.

Acum haideți să verificăm cum puteți afișa chestionare MCQ pe site-ul dvs. Blogger.

Pentru aceasta, trebuie să utilizați codul de mai jos în secțiunea „ Editați HTML ” postarea de blog. Puteți folosi gratuit codul de mai jos.

Notă: orice scop comercial al acestui cod nu este permis. Nu poți partaja codul ca al tău.

Iată scriptul simplu de test MCQ pentru site-ul web 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>

Puteți utiliza acest cod cu alte platforme CMS precum Wix, WordPress etc.

Acum, pentru a adăuga mai multe teste MCQ pe aceasta, trebuie să copiați această secțiune și să înlocuiți id-ul evidențiat mai jos.

 <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=" întrebare5 "data-corect=" Adevărat „>A) Balena albastră</div>
        <div class="opțiune" data-question=" întrebarea 5 " data-correct="false">B) Elefant african</div>
        <div class="opțiune" data-question=" întrebarea 5 " data-correct="false">C) Girafa</div>
        <div class="opțiune" data-question=" întrebarea 5 " data-correct="false">D) Leu</div>
        <div class="explicație" data-question=" întrebarea 5 „>Explicație: Balena albastră este cel mai mare mamifer din lume.</div>

Acum trebuie să atribuiți opțiunea corectă ca răspuns prin atribuirea etichetei data-correct="true" .

Asigurați-vă că păstrați toate celelalte opțiuni ca fiind false.

Puteți viziona videoclipul de mai jos pentru a afla cum să îl adăugați la Blogger și să îl personalizați în continuare.

Dacă aveți îndoieli, nu ezitați să mă întrebați în secțiunea de comentarii.

Notă: voi lansa versiunea avansată a Quiz Script după ce videoclipul va obține 2.000 de vizualizări sau 50 de aprecieri. Deci, nu uitați să vizionați videoclipul până la sfârșit și să dați Like videoclipului.

Sper că acest articol vă va ajuta să adăugați o secțiune MCQ în Blogger și să începeți cu ușurință propriul dvs. site web Test. Dacă doriți să acopăr mai multe tutoriale, nu ezitați să întrebați în secțiunea de comentarii.