ホーム / Bloggerに○×クイズを簡単に設置する方法｜初心者でもコピペでOK！ /

Bloggerに○×クイズを簡単に設置する方法｜初心者でもコピペでOK！

Bloggerの記事や固定ページに、「○×クイズ」を設置してみたいと思ったことはありませんか？

今回は、HTMLと少しのJavaScriptを使って、誰でも簡単にできるクイズの作り方を紹介します。

難しいことはありません。コピペでOK！すぐに使えます。

📘 完成イメージ

下のボタンを押すと、結果が表示されるシンプルな○×クイズです。

Q. 富士山は日本で一番高い山である。○か×か？

上記クイズは以下のコードで作成されています。 

<h3>Q. 富士山は日本で一番高い山である。○か×か？</h3>
<button onclick="checkAnswer('maru')">○</button>
<button onclick="checkAnswer('batsu')">×</button>
<p id="result"></p>

<script>
function checkAnswer(ans) {
  const correct = 'maru'; // 正解はこちらに設定
  const result = document.getElementById("result");

  if (ans === correct) {
    result.textContent = "正解!";
    result.style.color = "green";
  } else {
    result.textContent = "不正解...";
    result.style.color = "red";
  }
}
</script>

🖥 Bloggerに貼る手順

  1. Bloggerの「投稿」または「固定ページ」を開く
  2. 右上の [HTMLビュー] に切り替える
  3. このページのコードをコピペする
  4. [公開] または [更新] を押す

🔍 コードをやさしく解説

パート 内容
<h3>〜</h3> 質問を表示します
<button> 「○」「×」のボタンを作ります
onclick="..." ボタンが押された時の動作を指定します
<p id="result"> 結果（正解 or 不正解）を表示する場所です
<script>〜</script> JavaScriptで動きをつけています

💡 応用してみたい方へ

この方法に慣れてきたら、以下のような応用も可能です：

  • 複数のクイズを並べて出題する
  • 採点機能をつけて合計点を出す
  • 答えに解説を表示する
  • クイズの回答数をGoogleアナリティクスで分析する

応用版は別の記事で紹介予定です。

✅ まとめ

  • BloggerでもHTML＋JavaScriptでクイズが作れる
  • コードはコピペですぐ使える
  • 少しずつ応用して機能を増やすことも可能

続編として「採点付きクイズの作り方」や「Googleアナリティクスでクリック数を測定する方法」も今後紹介していく予定です。しばらくお待ちください。

QooQ