Sort the list activity

Submitted by cfp on Fri, 06/25/2021 - 17:23
Forums: 
Feature requests

I have often wanted a 'sort the list' type of question. I'm not a programmer and have to make it up as I go along but have given it a shot. You will see the general idea at 

https://h5p.org/node/1187087

By putting the feedback information lower down the screen and adding a couple of buttons you get

https://h5p.org/node/1187092

It's capable of working with much larger list items but the h5p iframe doesn't scroll so it doesn't work well here

https://h5p.org/node/1187093

The page itself can be seen at 

https://turnipeater.github.io/sortable%20Hamlet.html

As you will have noticed the task and the feedback information are all stored in a single page so it isn't too difficult to edit the page source to suit.

I wouldn't know how to go about turning this into a proper h5P activity but perhaps somebody else does.

0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
otacke's picture

otacke

Fri, 06/25/2021 - 20:59

Hi cfp!

You mean something like "Sort the Paragraphs" that will be released on the H5P Hub shortly?

Cheers,
Oliver

cfp

Fri, 06/25/2021 - 21:56

Yes, indeed :-)

I'm sure that will be a very well received addition. Thank you.

A pity drag and drop can't be made to work on mobile devices but I guess you can't have everything. I did see on getuikit dragging done with 'handles' which might solve that problem but would no doubt limit functionaliy on desktop machines.

otacke's picture

otacke

Fri, 06/25/2021 - 23:33

It's not a problem of dragging on mobile per se, that is simple. The problem is H5P content living inside an iframe. You could not drag beyond what is visible, or in other words: The screen wouldn't scroll up/down if you drag content to the borders. That might render content unsolvable.

That's why you either use the buttons or click/tap on one paragraph and then on another to swap their positions.

cfp

Sat, 06/26/2021 - 13:30

Hm. Ok, I'm sure you must be right but at the moment I can't figure why if draggable elements would need to go beyond the iframe boundary that wouldn't also make non-draggable elements out of bounds and inaccessible. I guess it is just frustrating that drag'n'drop is so much more intuitive especially on a tablet and yet it is precisely on a tablet it can't be used. Such is life, I suppose.

I know there are a lot of things to think about, like accessibility issues, it is just that all the arrows create a sense of visual clutter especially in your 'Ace of Spades' example. Also, although the little waggle dance helps, there is still a moment of confusion as to what has changed when the buttons are used.

I really am very grateful that this kind of task is finally going to become available but can I make a couple of observations from a users point of view.

Firstly, I'm not sure the down arrows in the 'Ace of Spades' example add anything to the exercise. I get that in one case assessment is based on relative position and in the other it is based on absolute position but that is precisely that, it is an assessment issue. It doesn't seem to alter the task that has to be undertaken. I would prefer it if those arrows, appropriately coloured, appeared superimposed over the boxes when the check button is pressed. That would remove visual clutter and enable the boxes to be closer together.

Secondly, probably much harder to implement, rather than the waggle dance, it would be much easier to follow what is going on if the box had an animated move as if it was being dragged.

Anyway, thanks again.

otacke's picture

otacke

Sun, 06/27/2021 - 16:04

Hi!

Create a large Drag the Words content type where the text does not fit onto the screen and you have to drag a word to a blank that is not visible. The content cannot scroll then if in an iframe - the draggable inside the iframe does not know that it has reached the screen border.

The extra arrows were added because in transition mode you need to indicate what transition was correct, not what draggable was placed correctly. My customer who paid for the development preferred to have the arrows there all the time instead of only adding them when one clicks on check.

I agree and I know as I documented on the review ticket of the H5P core team.That tap-to-swap mode was a late addition after the initial requirements were set, so the way the rest of the code was created, it would indeed require extra code just for adding animation. I already donated more of my free time to that content than I should have. The source code is openly available, so people can add things if they want to.

Best,

Oliver 

otacke's picture

otacke

Sun, 08/08/2021 - 10:44

I am stupid enough to work for free hour after hour. Enjoy the update.

https://www.olivertacke.de/labs/2020/11/01/a-sort-of-sorts/

cfp

Sun, 08/08/2021 - 22:02

That's tremendous. It looks good and the smooth swapping is most effective. I've no doubt it will prove to be a very popular addition. Let me say thank you on behalf of those who won't know about the time and effort you've put into it.

cfp

Fri, 06/25/2021 - 21:56

Yes, indeed :-)

I'm sure that will be a very well received addition. Thank you.

A pity drag and drop can't be made to work on mobile devices but I guess you can't have everything. I did see on getuikit dragging done with 'handles' which might solve that problem but would no doubt limit functionaliy on desktop machines.