Webページ教材開発テキスト
5-4 英文の並べ替え問題
正答の場合には赤色の○が、まちがいの場合には青色の×を表示します。
英単語をドラッグして並べ替える問題を作ります。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1, maximum-scale=1">
<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>
li{
display: inline;
}
.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>
<span id="maru1" class="maru"> </span>
<ul id="mondai1">
<li id="12" class="tango">is</li>
<li id="14" class="tango">popular</li>
<li id="13" class="tango">the most</li>
<li id="11" class="tango">Mt.Iwate</li>
<li id="15" class="tango">.</li>
</ul>
</P>
<script>
$(function() {
$("#mondai1").disableSelection();
$("#mondai1").sortable({
update: function(e, ui) {
if(($("#mondai1").sortable("toArray")) == "11,12,13,14,15"){
$("#maru1").html("<font color='red' >○</font>");
};
}
});
});
</script>
</body>
</html>
]]>
(2) 問題を追加してみましょう
サンプルはこちら
以下の文を追加してください。
<![CDATA[
<body>
２ 次の日本文が表す英文になるように語をドラッグして正しく並べかえて
ください。文頭に来る語も小文字で表していることもあります。
<P>
(1) 岩手山が一番人気です。<br>
<span id="maru1" class="maru"> </span>
<ul id="mondai1">
<li id="12" class="tango">is</li>
<li id="14" class="tango">popular</li>
<li id="13" class="tango">the most</li>
<li id="11" class="tango">Mt.Iwate</li>
<li id="15" class="tango">.</li>
</ul>
</P>
<br>
<P>
(2) この机を使ってもいいですか。
<br>
<span id="maru2" class="maru"> </span>
<ul id="mondai2">
<li id="24" class="tango">this desk</li>
<li id="23" class="tango">use</li>
<li id="22" class="tango">I</li>
<li id="21" class="tango">may</li>
<li id="25" class="tango">?</li>
</ul>
</P>
<br>
(3) お味噌はカナダで売られていますか。
<br>
<span id="maru3" class="maru"> </span>
<ul id="mondai3">
<li id="34" class="tango">in Canada</li>
<li id="33" class="tango">sold</li>
<li id="31" class="tango">is</li>
<li id="32" class="tango">miso</li>
<li id="35" class="tango">?</li>
</ul>
</P>
<br>
<script>
$(function() {
$("#mondai1").disableSelection();
$("#mondai1").sortable({
update: function(e, ui) {
if(($("#mondai1").sortable("toArray")) == "11,12,13,14,15"){
$("#maru1").html("<font color='red' >○</font>");
};
}
});
$("#mondai2").disableSelection();
$("#mondai2").sortable({
update: function(e, ui) {
if(($("#mondai2").sortable("toArray")) == "21,22,23,24,25"){
$("#maru2").html("<font color='red' >○</font>");
};
}
});
$("#mondai3").disableSelection();
$("#mondai3").sortable({
update: function(e, ui) {
if(($("#mondai3").sortable("toArray")) == "31,32,33,34,35"){
$("#maru3").html("<font color='red' >○</font>");
};
}
});
});
</script>
</body>
]]>
