Click here to Skip to main content
14,241,831 members
Rate this:
Please Sign up or sign in to vote.
See more:
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);

  // Checking Answers
  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();
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100