Webページ教材開発テキスト
5-2 英単語４択クイズ
正答の場合には赤色の○が、まちがいの場合には青色の×を表示します。
(1) HTMLで骨格を作る・・・step1
サンプルはこちら
<![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>
</style>
</head>
<body>
１ 次の日本文が表す英文になるように正しい語を選びましょう。
<p>
(1) 私は毎朝、朝食を作ります。<br>
<span id="maru1" class="maru">?</span>
I
<span id="12" class="tango">am cooking</span>
<span id="11" class="tango">cook</span>
<span id="13" class="tango">cooked</span>
<span id="14" class="tango">cooks</span>
breakfast every morning.
</p>
<script>
</script>
</body>
</html>
]]>
(2) cssでデザインする・・・step2
サンプルはこちら
<![CDATA[
<style></style>の間に次のcssを記入します。
<style>
.tango{
background-color: #cff;
padding: 10px 10px 10px 10px;
border-radius:4px;
border:1px solid #bbd;
cursor:pointer;
}
.maru{
font-size: 300%;
}
</style>
]]>
(3) JavaScriptで動きをつける・・・step3
サンプルはこちら
<![CDATA[
<script></script>の間に次のJavaScriptを記入します。
<script>
$(function() {
$("#11").on("click", function () {
$("#maru1").html("<font color='red' >○</font>");
});
$("#12,#13,#14").on("click", function () {
$("#maru1").html("<font color='blue' >×</font>");
});
});
</script>
]]>
(4) 回答後に正答、誤答の色分けをする・・・step4
サンプルはこちら
<![CDATA[
<script></script>の間に次のJavaScriptを記入します。
<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");
});
});
</script>
]]>
