Click here to Skip to main content
15,891,708 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900