I'm struggling to output the object array in 2 columns.
I need to output match2 in 2 seperate solumns.
Thank you.
JS:
$(function() {
createQuizLayout();
initQuiz();
$('#reset').on('click', function() {
$('#source
li').draggable('destroy');
$('#target
li').droppable('destroy');
createQuizLayout();
initQuiz();
});
});
function createQuizLayout() {
var match1 = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];
var match2 = [
{
"drop":"Drop1",
"definition": "This is the definition1"
},
{
"drop":"Drop2",
"definition": "This is the definition2"
},
{
"drop":"Drop3",
"definition": "This is the definition3"
},
{
"drop":"Drop4",
"definition": "This is the definition4"
},
{
"drop":"Drop5",
"definition": "This is the definition5"
},
{
"drop":"Drop6",
"definition": "This is the definition6"
},
{
"drop":"Drop7",
"definition": "This is the definition7"
},
{
"drop":"Drop8",
"definition": "This is the definition8"
},
{
"drop":"Drop9",
"definition": "This is the definition9"
},
{
"drop":"Drop10",
"definition": "This is the definition10"
},
];
var arrMatch1 = [];
for (var i = 0; i < match1.length; i++) {
arrMatch1.push('<li data-index="' + (i + 1) + '">' + match1[i] + '</li>');
}
var arrMatch2 = [];
for (var i = 0; i < match2.length; i++) {
arrMatch2.push('<li data-index="' + (i + 1) + '">' + match2[i] + '</li>');
}
//shuffle the arrays
arrMatch1 = shuffle(arrMatch1);
arrMatch2 = shuffle(arrMatch2);
//insert them into DOM
$('#source').html(arrMatch1.join(''));
$('#target').html(arrMatch2.join(''));
}
function shuffle(v) {
for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
function initQuiz() {
$('#source li').draggable({
revert: true,
revertDuration: 600,
cursor: "all-scroll",
});
var totalScore = 0;
$('#score').text(totalScore + ' correct answer');
$('#target
li').droppable({
accept: function(draggable) {
if (parseInt(draggable.data('index'), 10) ===
parseInt($(this).data('index'), 10)) {
return true;
} else {
return false;
}
},
drop: function(event, ui) {
var that = $(this);
that.addClass("ui-state-highlight").html('Correct!');
that.droppable('disable');
ui.draggable.addClass('correct
ui-state-highlight');
(ui.draggable).draggable('disable');
totalScore++;
$('#score').text(totalScore + '
matching answer');
if ($('li.correct').length == 10) {
$("#dialog-complete").dialog({
resizable: false,
modal: true
});
}
}
});
}