ドラッグ＆ドロップで回答できる並び替え問題を作るためのメモ

つきのひと

１、問題表示フェイズ

１−１、選択肢を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案を採用


サポートをしていただけると、クリエイター活動費として有難く使わせていただきます！その成果や経緯もここで発信できれば嬉しいです。