3 Replies - 235 Views - Last Post: 06 June 2019 - 10:19 AM

#1 tarun1980   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 19-May 19

How to save text of li after reordering li by applying sortable method

Posted 05 June 2019 - 04:20 PM

https://codepen.io/T...1980/pen/PvvWWV

$(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();

        }


    });



    $(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();


});




Is This A Good Question/Topic? 0
  • +

Replies To: How to save text of li after reordering li by applying sortable method

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: How to save text of li after reordering li by applying sortable method

Posted 05 June 2019 - 04:44 PM

What exactly is your question? What are you trying to do?
Was This Post Helpful? 0
  • +
  • -

#3 tarun1980   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 19-May 19

Re: How to save text of li after reordering li by applying sortable method

Posted 05 June 2019 - 07:53 PM

View PostArtificialSoldier, on 05 June 2019 - 04:44 PM, said:

What exactly is your question? What are you trying to do?


I am unable to insert js.ui file in codepen but when you add it, drag and drop function will begin to work and you will know what actually I want to achieve.
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.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: How to save text of li after reordering li by applying sortable method

Posted 06 June 2019 - 10:19 AM

If all of the words are in li elements in a ul list, then you can get the ul, get the first li, get the word, trim it and add it to an array, and use Element.nextElementSibling to keep going to each other li element to get the word and add it to the array. Once you've gotten them all then join the array for the sentence.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1