Dimensions of the Drag-and-Drop problem block do not adjust to a mobile screen size

[jmbowman]

This is a copy of a 2022-01-28 issue from 2U's internal Jira tracker that we think is still unresolved, and we'd like some help from OpenCraft in resolving if possible.

---

Hello,

A partner reached out to us on behalf of learners. Dimensions of the Drag-and-Drop problem block do not adjust to a mobile screen size (see picture attached), creating an almost impossible mobile learning experience. The workaround is for learners to do Drag-and-Drop problems on Desktop. Could this please be fixed?

---

1. Steps to Reproduce w/ links

   1. Go to https://learning.edx.org/course/course-v1:IsraelX+infosec101+3T2020/block-v1:IsraelX+infosec101+3T2020+type@sequential+block@d65c63d022f742769bbc52e2dfa842e0/block-v1:IsraelX+infosec101+3T2020+type@vertical+block@f264725a22ad4ab999673a5b9ccc401b
   2. View problem in mobile app as learner

2. Expected Behavior Vs. Actual Behavior
   Expected Behavior: Learners expect Drag-and-Drop problem blocks to adjust to their mobile screen size
   Actual Behavior: When learners access Drag-and-Drop problem blocks on mobile, the problem are cropped and make it nearly impossible to submit answers

3. What are the implications to our business?
   Learners are unable to easily interact with Drag-and-Drop problem blocks on mobile impacting their overall learning experience and grades

Update from Colin Brash on 2022-06-17

Unfortunately this is not an app issue. This is an issue with that drag-and-drop block not being responsive. If you inspect this page on a desktop browser and change the viewport size, this block does not change width. The same thing would happen in a mobile browser.

I’m out of my area of expertise here, but I see the background image used is 2002x1125px. Maybe it is not scaling correctly? It also looks like the drag-and-drop items (“encryption”, “decryption”, etc.) are not scaling either.

That said, I’m not sure what this should look like if it were scaled down. It seems to me it would be too small to actually interact with. Perhaps it could be allowed to scale down further than it is currently, though?

[Agrendalath]

@jmbowman, I created an internal task to assign this.

[Agrendalath]

@jmbowman, this is now assigned and scheduled for our next sprint (March 21st - April 3rd).

[Agrendalath]

@jmbowman, this is resolved in openedx/frontend-app-learning#1094. Could you help us with merging it?