https://codepen.io/Tarun1980/pen/PvvWWV[
^]
I am unable to insert js.ui file in codepen but when you add it, drag and drop function will begin to work.
There is a list of jumbled words. They have to be reordered, by drag and drop, to make a meaningful sentence. I have applied sortable function of jQuery for that. The problem is after reordering the words, better to say lists, I am unable to store the reordered text in a variable, which is required to check whether the reordered words match the correct answer or not, so that I can give points or score.
$(document).ready(function () {
var words = [
{
question: ['can', 'you', 'How', 'I', 'help', '?'],
answer: 'How can I help you ?'
},
{
question: ['look', 'not', 'do', 'happy', 'You', '.'],
answer: 'You do not look happy today .'
},
{
question: ['There', 'temple', 'is', 'near', 'a', 'house', 'my', '.'],
answer: 'There is a temple near my house .'
},
{
question: ['you', 'do', 'What', 'me', 'from', 'want', '?'],
answer: 'What do you want from me ?'
},
{
question: ['America', 'I', 'am', 'to', 'going', 'month', 'next', '.'],
answer: 'I am going to America next month .'
},
];
var i = 0;
function showWords() {
$('#container').append("<ul id='list'></ul>");
for (var j = 0; j < words[i].question.length; j++) {
$('#list').append("<li class='box' id=" + words[i].question[j] + ">" + words[i].question[j] + " " + "</li>");
}
$('#list').sortable({
placeholder: 'back',
axis: 'x',
opacity: '0.7'
});
}
showWords();
$('body').on('click', '#btn', function () {
$('#list').remove();
if (i < words.length); {
i++;
showWords();
}
});
});
What I have tried:
$(document).on("click", "#btn", checkAnswer);
var n = 0;
var score = 0;
function checkAnswer() {
var guess = $('.box').text();
var correct = words[n].answer;
if (n <= words.length) {
n += 1;
}
if (guess === correct) {
score += 1;
}
if (score <= words.length) {
document.getElementById("score").innerHTML = z;
z = score;
}
}
checkAnswer();