Timeline/Matching Pairs template - Mobile

Hi All,

Has anybody managed to optimise the Timeline/Matching Pairs XOT template for mobile delivery - specifically for smartphones?

I'm having a difficult time delivering this template on smaller screen sizes, primarily due to the current design, which positions the answer labels tightly in the top-right-hand-corner (absolute positioning) and the droppable areas at the very bottom of the page (see attached).

Throw in some instructional text paragraphs and when viewing on a mobile phone, the large amount of scrolling makes this a very challenging template for anybody to work through. I have a couple of ideas of how to address this, but I didn't want to 'reinvent the wheel' if somebody has already found a workaround?

I know Peter Welch was doing some related work on the 'Fill in the Blank' template, which he exhibited at the recent 2018 Conference?

For what my opinion is worth, I think the text (instructional) area is one of the biggest problems with this template and I've always felt it should be delivered independently above (or below) the drag and drop area, with the labels positioned directly above the droppable and feedback areas, which would then reduce the drag distance to an absolute minimum? The droppable areas would probably benefit from clearing and collapsing down below each other and adopting 100% width on mobile?

Hi Joel

As far as I know no one has been looking at changing this so if you have time then please do! You're right that Peter has some code that makes the fill in the blank template more workable on mobiles but it's not ready to go in the main code yet (I was going to look at this but haven't had a chance). Perhaps you could contact Peter and see if his code would be suitable for you to use in this template too?

Fay

Hi Fay,

I've been looking into this today a bit more closely and I've managed to use a simple JQuery function which reinserts the instructional text (#textholder) above all of the drag and drop components and this has helped to reduce the amount of dragging/scrolling involved:

I've then written some custom CSS which is executed via a media query when a window width is below 600px (i.e. on mobile phones):

This has resulted in a much better experience on mobile (see attached, below), but the one major issue I'm still trying to overcome is being able to drag my labels downwards (y axis) while also scrolling the main parent div (#dragDropHolder) at the exact same time. At the moment, when dragging a label, once you reach the bottom of the window on a mobile, you can't move it any further and it gets stuck, i.e. the scroll doesn't fire.

I've hit a bit of a brick wall with this one. If we can get this cracked, it would lead to the possibility of being able to drag items down to larger numbers of drop zones. I can't work out whether it is the 'position' or 'overflow' properties on the various components which are causing the scrolling problem or an underlying issue with the way the draggable labels are setup through JQuery?