Blogger에서 퀴즈 웹사이트를 시작하는 방법은 무엇입니까?

Blogger에서 퀴즈 웹사이트를 만드는 것은 코딩 기술이 필요하지 않은 간단한 과정입니다. Blogger는 웹사이트를 만들고 맞춤설정할 수 있는 Google의 무료 블로그 플랫폼입니다.

이번 블로그 게시물에서는 Blogger에서 퀴즈 웹사이트를 매우 쉽게 시작하는 단계를 안내해 드리겠습니다.

Blogger에서 웹사이트를 만드는 것은 매우 쉽습니다. 필요한 것은 Google 계정과 Blogger 플랫폼의 새 웹사이트에 가입하는 것뿐입니다. 전체 설정 프로세스를 확인하려면 Blogger에서 블로그를 시작하는 방법 에 대한 도움말을 따르세요.

이제 Blogger에 무료 블로그를 만들었으므로 웹사이트에 블로그 게시물로 퀴즈를 게시해야 합니다. 틈새 시장을 선택하고 다양한 카테고리의 다양한 퀴즈를 게시할 수 있습니다. 각종 시험, 모의고사, 스킬테스트 등 전년도 기출문제를 해당 사이트에서 다룰 수 있습니다.

이런 방식으로 독자들에게 가치를 제공할 수 있으며 웹사이트에서 많은 양의 트래픽을 받기 시작하면 Google Adsense 승인을 신청할 수 있습니다. 스폰서 광고를 통해 트래픽으로 수익을 창출하는 데 도움이 됩니다.

이제 Blogger 웹사이트에 MCQ 퀴즈를 표시하는 방법을 확인해 보겠습니다.

이를 위해서는 블로그 게시물의 “ Edit HTML ” 섹션에서 아래 코드를 사용해야 합니다. 아래 코드를 무료로 사용할 수 있습니다.

참고: 이 코드의 상업적 목적은 허용되지 않습니다. 코드를 자신의 것처럼 공유할 수 없습니다.

다음은 Blogger 웹사이트에 대한 간단한 MCQ 퀴즈 스크립트 입니다.

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

이 코드는 Wix, WordPress 등과 같은 다른 CMS 플랫폼에서 사용할 수 있습니다.

이제 여기에 더 많은 MCQ 퀴즈를 추가하려면 이 섹션을 복사하고 아래 강조 표시된 ID를 바꿔야 합니다.

 <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="옵션" 데이터-질문=" 질문5 " data-corright="false">B) 아프리카 코끼리</div>
        <div class="옵션" 데이터-질문=" 질문5 " data-corright="false">C) 기린</div>
        <div class="옵션" 데이터-질문=" 질문5 " data-corright="false">D) 라이온</div>
        <div class="설명" 데이터-질문=" 질문5 ">설명: 흰긴수염고래는 세계에서 가장 큰 포유류입니다.</div>

이제 data-corright=”true” 태그를 할당하여 올바른 옵션을 답변으로 할당해야 합니다.

다른 모든 옵션은 false로 유지하십시오.

아래 동영상을 시청하여 Blogger에 추가하고 추가로 맞춤설정하는 방법을 알아보세요.

궁금한 점이 있으면 댓글 섹션에서 언제든지 문의해 주세요.

참고: 동영상 조회수가 2,000회 또는 좋아요 50개를 달성하면 퀴즈 스크립트의 고급 버전을 출시할 예정입니다. 그러니 영상을 끝까지 시청해주시고, 영상 좋아요 누르는 것도 잊지 마세요.

이 기사가 Blogger에 MCQ 섹션을 추가 하고 퀴즈 웹사이트를 쉽게 시작하는 데 도움이 되기를 바랍니다. 더 많은 튜토리얼을 다루려면 댓글 섹션에서 자유롭게 문의하세요.