code Javascript function (fill <ul> with shuffled array)

I need a javascript (+ jQuery + jQueryUI) function for an online exercise, which does the following things: 1. Take an array as an argument (e.g. a dialog: "Hey Bill", "Hey Joe.", "Can you pick me up at the airport tonight?", "What time?", "I should arrive at 6.30.", "Can´t make it until 7", “Ok, I´ll wait for you until 7. See you later”, “See you.”) 2. Save the first element of array in a variable. Shuffle the rest of the array. 3. Create two divs next to each other. The first one remains empty except for the first element (see #3, e.g. <li>Hey Bill</li>, the second one holds a <ul> with the <li>-elements from the SHUFFLED array, e.g. <li> Can´t make it until 7</li> <li> Can you pick me up at the airport tonight?</li> <li> Ok, I´ll wait for you until 7. See you later </li> <li> Hey Joe.</li> <li> What time?"</li> <li> I should arrive at 6.30.", </li> 4. The user should be able to drag and drop the sentences from the right <div> into the left <div> (as to be seen here: [login to view URL]). in order to reconstruct the dialog. Assign different CSS-classes to the even and odd <li> elements in the left <div>. 5. There is a boolean, let´s call it orderCorrect, which is FALSE by default and turns TRUE in the moment the dialog has been put into the correct order in the left <div>. 6. You must not use [login to view URL](), as it wouldn´t work within Twine ([login to view URL])