Webページ教材開発テキスト
5-3 社会４択クイズ「わたしは誰？」
正答の場合には赤色の○が、まちがいの場合には青色の×を表示します。
「英単語４択クイズ」を、ほんの少し訂正するだけで別のクイズに応用できます。
まずは、名前をつけて別名でファイルを保存してください。
「英単語４択クイズ」を名前を変えて保存して、次のように書き換えてください。
<![CDATA[
<body>
わたしの名前を当ててください
<p>
(1) 私は、憲法を作るためにヨーロッパへ調査に行きました。
大日本帝国憲法を作成し、４５歳で初代総理大臣になりました。
私は誰？。
<div id="maru1" class="maru">?</div>
<div id="12" class="tango">木戸孝允</div>
<div id="11" class="tango">伊藤博文</div>
<div id="13" class="tango">板垣退助</div>
<div id="14" class="tango">大久保利通</div>
</p>
]]>
(2) 問題文を増やしてみましょう
<![CDATA[
① コピー＆ペーストでHTML文を増やして、問題文を修正する
② <div id='11' class='tango'>のidを修正する
③ JavaScriptをコピー＆ペーストで行を増やして修正する
]]>
私は、鹿児島の士族を引き連れて戦いましたが、西南戦争で政府軍に敗れてしまいました。
今は上野公園にいます。私は誰？
西郷隆盛
坂本龍馬
大隈重信
木戸孝允
私は海援隊を結成しました。だけど歌手でも俳優でもありません。私は誰？
坂本龍馬
西郷隆盛
勝海舟
伊藤博文
「天は人の上に人をつくらず 人の下に人をつくらず」。
私の肖像画がたくさん出回っているらしい・・・。私は誰？
福沢諭吉
樋口一葉
夏目漱石
坂本龍馬
※ 正答の位置は変えてみてください。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
.tango{
background-color: #cff;
padding: 10px 10px 10px 10px;
border-radius:4px;
border:1px solid #bbd;
cursor:pointer;
}
.maru{
font-size: 300%;
}
</style>
</head>
<body>
わたしの名前を当ててください
<p>
(1) 私は、憲法を作るためにヨーロッパへ調査に行きました。
大日本帝国憲法を作成し、４５歳で初代総理大臣になりました。<br>
私は誰？。
<div id="maru1" class="maru">?</div>
<div id="12" class="tango">木戸孝允</div>
<div id="11" class="tango">伊藤博文</div>
<div id="13" class="tango">板垣退助</div>
<div id="14" class="tango">大久保利通</div>
</p>
<br>
<p>
(2) 私は、鹿児島の士族を引き連れて戦いましたが、
西南戦争で政府軍に敗れてしまいました。
今は上野公園にいます。<br>
私は誰？
<div id="maru2" class="maru">?</div>
<div id="22" class="tango">坂本龍馬</div>
<div id="23" class="tango">大隈重信</div>
<div id="21" class="tango">西郷隆盛</div>
<div id="24" class="tango">木戸孝允</div>
</p>
<br>
<p>
(3) 私は海援隊を結成しました。
だけど歌手でも俳優でもありません。<br>
私は誰？
<div id="maru3" class="maru">?</div>
<div id="32" class="tango">西郷隆盛</div>
<div id="33" class="tango">勝海舟</div>
<div id="34" class="tango">伊藤博文</div>
<div id="31" class="tango">坂本龍馬</div>
</p>
<br>
<p>
(4) 「天は人の上に人をつくらず 人の下に人をつくらず」。
今は私の肖像画がたくさん出回っているらしい・・・。<br>
私は誰？
<div id="maru4" class="maru">?</div>
<div id="41" class="tango">福沢諭吉</div>
<div id="42" class="tango">樋口一葉</div>
<div id="43" class="tango">夏目漱石</div>
<div id="44" class="tango">坂本龍馬</div>
</p>
<br>
<script>
$(function() {
$("#11").on("click", function () {
$("#maru1").html("<font color='red' >○</font>");
$("#11").css("background-color","#fbb");
$("#12,#13,#14").css("background-color","#aaa");
});
$("#12,#13,#14").on("click", function () {
$("#maru1").html("<font color='blue' >×</font>");
$("#11").css("background-color","#fbb");
$("#12,#13,#14").css("background-color","#aaa");
});
$("#21").on("click", function () {
$("#maru2").html("<font color='red' >○</font>");
$("#21").css("background-color","#fbb");
$("#22,#23,#24").css("background-color","#aaa");
});
$("#22,#23,#24").on("click", function () {
$("#maru2").html("<font color='blue' >×</font>");
$("#21").css("background-color","#fbb");
$("#22,#23,#24").css("background-color","#aaa");
});
$("#31").on("click", function () {
$("#maru3").html("<font color='red' >○</font>");
$("#31").css("background-color","#fbb");
$("#32,#33,#34").css("background-color","#aaa");
});
$("#32,#33,#34").on("click", function () {
$("#maru3").html("<font color='blue' >×</font>");
$("#31").css("background-color","#fbb");
$("#32,#33,#34").css("background-color","#aaa");
});
$("#41").on("click", function () {
$("#maru4").html("<font color='red' >○</font>");
$("#41").css("background-color","#fbb");
$("#42,#43,#44").css("background-color","#aaa");
});
$("#42,#43,#44").on("click", function () {
$("#maru4").html("<font color='blue' >×</font>");
$("#41").css("background-color","#fbb");
$("#42,#43,#44").css("background-color","#aaa");
});
});
</script>
</body>
</html>
]]>
