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: [url removed, login to view]). 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 [url removed, login to view](), as it wouldn´t work within Twine ([url removed, login to view])
Hello, I can do this project for you. However I have a question: do you need the layout to have a specific design or any generic design will do? Hoping to hear back, With Best Regards, Jewel Mahanta