Jak założyć witrynę z quizami w Bloggerze?

Tworzenie witryny z quizami w Bloggerze to prosty proces, który nie wymaga umiejętności kodowania. Blogger to bezpłatna platforma blogowa firmy Google, która umożliwia tworzenie i dostosowywanie witryny internetowej.

W tym poście na blogu przeprowadzę Cię przez kolejne kroki, dzięki którym możesz w prosty sposób założyć witrynę z quizami w Bloggerze.

Tworzenie witryny internetowej w Bloggerze jest dość łatwe. Wszystko, czego potrzebujesz, to konto Google i zarejestrować się w nowej witrynie na platformie Blogger. Jeśli chcesz sprawdzić cały proces konfiguracji, przeczytaj nasz artykuł na temat zakładania bloga na Bloggerze .

Teraz, gdy utworzyłeś bezpłatny blog w Bloggerze, musisz publikować quizy w swojej witrynie jako posty na blogu. Możesz wybrać dowolną niszę i publikować różne quizy w różnych kategoriach. Na stronie możesz omówić pytania z różnych egzaminów, testów próbnych i testów umiejętności z poprzedniego roku.

W ten sposób możesz zapewnić wartość swoim czytelnikom, a gdy zaczniesz otrzymywać duży ruch w witrynie, możesz ubiegać się o zatwierdzenie Google Adsense. Pomoże Ci to zarabiać na ruchu dzięki sponsorowanym reklamom.

Sprawdźmy teraz, jak możesz wyświetlać quizy MCQ w swojej witrynie Bloggera.

W tym celu musisz użyć poniższego kodu w sekcji „ Edytuj kod HTML ” swojego wpisu na blogu. Poniższy kod możesz wykorzystać bezpłatnie.

Uwaga: jakiekolwiek komercyjne przeznaczenie tego kodu jest niedozwolone. Nie możesz udostępniać kodu jako własnego.

Oto prosty skrypt quizu MCQ dla witryny Bloggera .

 <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>

Możesz użyć tego kodu z innymi platformami CMS, takimi jak Wix, WordPress itp.

Teraz, aby dodać więcej quizów MCQ na ten temat, musisz skopiować tę sekcję i zastąpić identyfikator podświetlony poniżej.

 <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=" pytanie5 "poprawne dane=" PRAWDA ">A) Błękitny wieloryb</div>
        <div class="opcja" data-question=" pytanie 5 " data-correct="false">B) Słoń afrykański</div>
        <div class="opcja" data-question=" pytanie 5 " data-correct="false">C) Żyrafa</div>
        <div class="opcja" data-question=" pytanie 5 " data-correct="false">D) Lew</div>
        <div class="explanation" data-question=" pytanie 5 „>Wyjaśnienie: płetwal błękitny jest największym ssakiem na świecie.</div>

Teraz musisz przypisać odpowiednią opcję jako odpowiedź, przypisując tag data-correct=”true” .

Upewnij się, że wszystkie pozostałe opcje mają wartość false.

Możesz obejrzeć poniższy film, aby dowiedzieć się, jak dodać go do Bloggera i dalej go dostosowywać.

Jeśli masz jakiekolwiek wątpliwości, możesz zadać mi je w sekcji komentarzy.

Uwaga: wypuszczę zaawansowaną wersję Quiz Script, gdy film uzyska 2 tys. wyświetleń lub 50 polubień. Nie zapomnij więc obejrzeć filmu do końca i polubić go.

Mam nadzieję, że ten artykuł pomoże Ci dodać sekcję MCQ w Bloggerze i łatwo założyć własną witrynę z quizami. Jeśli chcesz, żebym opisał więcej tutoriali, możesz zapytać w sekcji komentarzy.