Sortable function help

Hello hype fans!

I have attempted to make a sortable list using sortable JS library. I have tried to follow some online guides on how to implement it but my javascript function called mySort does not seem to work. I have added the min.js library file to resources in the hype doc. I have then created the list in the innerhtml of the rectangle. I have then created a javascript function which is called on scene load. However, the list does not sort so obviously I am doing something wrong. I am a complete javascript beginner and I have no idea what's wrong. If anyone is able to help me to implement this I would be very grateful. I have attached the hype doc.sortable.hype.zip (26.2 KB)

Thanks

did not do a deep dive, but works for me when deleting the id in the element-inspector.
the id is already in use in your pasted innerHTML ...

1 Like

Thanks so much - it does work! So simple!

I have a new question. I would like to have a function called listChecker which is able to check if the list has been sorted into the correct order. If correct, the 'correct' timeline will run, if wrong the 'wrong' timeline will play on the 'click to check' element. However, my javascript knowledge is very poor so I don't know how to assign a variable to the list items (which I believe have the class 'list-group-item') and to check if they are in the correct order. I am guessing it has something to do with arrays. I could probably manage the if else part to play the timelines but I have no idea how to return the list-group-items and to check if they are in the correct order (note - the correct order needs to be a predefined order not numeric or alphabetical). I have attached the hype document.sortablev2.hype.zip (25.4 KB)

This seems like something that should be built into the library, but here's one way to do this: (likely not the most efficient way)

var item1 = document.querySelector("#sortablelist > div:nth-child(1) > div > p").innerHTML;
var item2 = document.querySelector("#sortablelist > div:nth-child(2) > div > p").innerHTML;
var item3 = document.querySelector("#sortablelist > div:nth-child(3) > div > p").innerHTML;
var item4 = document.querySelector("#sortablelist > div:nth-child(4) > div:nth-child(1) > p").innerHTML;

var combined = item1 + item2 + item3 + item4;

combinedNoSpaces = combined.replace(/\s/g, '');

console.log(combinedNoSpaces);

if (combinedNoSpaces == "ABCD") {
    alert('yes')
}

else {
    alert('no')
}
2 Likes

Amazing Daniel. Thank you so much. Works a treat!

1 Like