ドラッグ＆ドロップで回答できる並び替え問題を作るためのメモ
１、問題表示フェイズ
１−１、選択肢をliタグに
<ul>
<li id="1">1</li>
<li id="2">2</li>
...
</ul>
１ー２、ランダムで並び替え
１−２−１、参考：要素をランダムに並び替える
■HTML
<div id="sample">
<div><img src="images/cat1.jpg"></div>
<div><img src="images/dog1.jpg"></div>
<div><img src="images/dog2.jpg"></div>
<div><img src="images/bird1.jpg"></div>
<div><img src="images/bird2.jpg"></div>
<div><img src="images/dog3.jpg"></div>
<div><img src="images/cat2.jpg"></div>
<div><img src="images/bird3.jpg"></div>
<div><img src="images/cat3.jpg"></div>
<div><img src="images/cat4.jpg"></div>
<div><img src="images/bird4.jpg"></div>
<div><img src="images/dog4.jpg"></div>
</div>
■JAVASCRIPT
$(function() {
var arr = [];
$("#sample div").each(function() {
arr.push($(this).html());
});
arr.sort(function() {
return Math.random() - Math.random();
});
$("#sample").empty();
for(i=0; i < arr.length; i++) {
$("#sample").append('<div>' + arr[i] + '</div>');
}
});
１−２−２、ここまでのコード
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body><div id="sample">
<div><li id="1">1</li></div>
<div><li id="2">2</li></div>
<div><li id="3">3</li></div>
<div><li id="4">4</li></div>
<div><li id="5">5</li></div></div>
<script>
$(function() {
var arr = [];
$("#sample div").each(function() {
arr.push($(this).html());
});
arr.sort(function() {
return Math.random() - Math.random();
});
$("#sample").empty();
for(i=0; i < arr.length; i++) {
$("#sample").append(arr[i]);
}
});
</script>
</body>
</html>
２、回答フェイズ
２ー１、ドラッグ＆ドロップで並び替える
２−１−１、参考：ドラッグ＆ドロップで要素を並び替えることができるSortable.js
html
<div class="list">
<div class="item">First</div>
<div class="item">Second</div>
<div class="item">Third</div>
<div class="item">Fourth</div>
</div>
css
.item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
js
$(function() {
Sortable.create($('.list')[0]);
});
２−１−２、ここまでのコード
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="Sortable.min.js"></script>
<style>
.item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<ul id="sample" class="list">
<div><li id="1" class="item">1</li></div>
<div><li id="2" class="item">2</li></div>
<div><li id="3" class="item">3</li></div>
<div><li id="4" class="item">4</li></div>
<div><li id="5" class="item">5</li></div>
</ul>
<script>
$(function() {
var arr = [];
$("#sample div").each(function() {
arr.push($(this).html());
});
arr.sort(function() {
return Math.random() - Math.random();
});
$("#sample").empty();
for(i=0; i < arr.length; i++) {
$("#sample").append(arr[i]);
}
});
$(function() {
Sortable.create($('.list')[0]);
});
</script>
</body>
</html>
２−２、回答決定
３、判定フェイズ
３−１−１、A案：各li要素のindexがidと一致しているかを判断
参考：jQueryでクリックされた要素が何番目か取得する
html
<ul>
<li class="some-item">hoge</li>
<li class="some-item">foo</li>
<li class="some-item">bar</li>
</ul>
js
$('li.some-item').on('click', function(){
var index = $('li.some-item').index(this);
console.log(index + 'th item clicked!');
});
３−１−２、懸念
同じ単語が複数回登場する文の場合、判定が煩雑になってしまう。
例えば、「吃 了 饭 了」など
３−２、B案：テキストを抽出して連結する
３−２−１、参考：要素配下のテキストを取得／設定するには？（text／html）
$('#list li').text()
３−２−２、ここまでのコード
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="Sortable.min.js"></script>
<style>
.item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<ul id="sample"class="list">
<div><li id="1" class="item">1</li></div>
<div><li id="2" class="item">2</li></div>
<div><li id="3" class="item">3</li></div>
<div><li id="4" class="item">4</li></div>
<div><li id="5" class="item">5</li></div>
</ul>
<script>
$(function() {
var arr = [];
$("#sample div").each(function() {
arr.push($(this).html());
});
arr.sort(function() {
return Math.random() - Math.random();
});
$("#sample").empty();
for(i=0; i < arr.length; i++) {
$("#sample").append(arr[i]);
}
});
$(function() {
Sortable.create($('.list')[0]);
});
$(function() {
console.log($('#sample li').text());
});
</script>
</body>
</html>
３−３、B案を採用
いいなと思ったら応援しよう！
