오늘의 가짜 뉴스 퀴즈 위젯

블로그 체류시간을 늘리고, 방문자와 함께 소통하고 싶은 분들을 위해 오늘도 실전 위젯 콘텐츠를 소개합니다.
이번에는 ‘가짜 뉴스 판별 퀴즈 위젯’을 만들어봤습니다. 하루 1개 뉴스 문제를 제시하고, 방문자가 진짜/가짜를 선택하게 만들어 댓글 참여와 재방문을 유도할 수 있어요.

💡 오늘의 뉴스, 진짜일까 가짜일까?

아래 위젯은 HTML로 삽입 가능하며, 문제는 직접 수정 가능합니다.
정답은 바로 공개하지 않고 “내일 공개됩니다”라고 안내해 반복 방문을 유도합니다.

직접 풀어보고 댓글로 남겨보세요!

📌 HTML 코드 복사해서 내 블로그에 설치하기

티스토리나 블로그스팟의 HTML 편집기에 아래 코드를 붙여넣으면 바로 작동합니다.
문제 문장은 "quiz-question" 부분에서 자유롭게 바꿔주세요!

<!-- 가짜 뉴스 퀴즈 위젯 시작 -->
<div style="background-color: #fffdf5; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); font-family: 'Noto Sans KR', sans-serif;">
  <h2 style="text-align: center; color: #2c3e50;">📰 오늘의 가짜 뉴스 퀴즈</h2>
  <p style="font-size: 15px; line-height: 1.8;">
    아래 뉴스는 실제로 보도된 내용일까요, 아니면 가짜 뉴스일까요?
  </p>
  <div id="quiz-container" style="background: #f0f6fa; border-radius: 10px; padding: 20px; margin-top: 20px;">
    <p id="quiz-question" style="font-weight: bold;">🔎 "2030년까지 서울 지하철 전 구간이 자율주행 무인 열차로 바뀐다?"</p>
    <label><input type="radio" name="answer" value="true"> 진짜 뉴스</label><br />
    <label><input type="radio" name="answer" value="false"> 가짜 뉴스</label><br />
    <button id="submit-btn" style="margin-top: 15px;">정답 확인</button>
    <p id="quiz-result" style="margin-top: 15px;"></p>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const submitBtn = document.getElementById("submit-btn");
  const result = document.getElementById("quiz-result");

  submitBtn.addEventListener("click", function() {
    const answers = document.getElementsByName("answer");
    let selected = null;
    for (let i = 0; i < answers.length; i++) {
      if (answers[i].checked) {
        selected = answers[i].value;
        break;
      }
    }
    if (selected === null) {
      result.innerHTML = "⚠️ 정답을 선택해주세요!";
      result.style.color = "#e74c3c";
    } else {
      result.innerHTML = "✅ 선택 완료! 정답은 내일 공개됩니다.";
      result.style.color = "#2ecc71";
    }
  });
});
</script>
<!-- 가짜 뉴스 퀴즈 위젯 끝 -->

👉 위 코드를 블로그 본문에 붙여넣기만 해도, 오늘의 가짜뉴스 퀴즈가 작동합니다.
문제를 바꾸거나 정답을 다음 날 댓글로 공유하면, 방문자와의 교감도 커지고 체류시간도 늘어납니다!

5편 예고 🎯

다음 편에서는 ‘소비습관 자가진단 시뮬레이터’를 HTML 위젯으로 소개합니다.
자신의 월급과 소비패턴을 입력하면 소비성향 분석 결과를 알려주는 위젯도 기대해 주세요!