search

openedx / xblock-drag-and-drop-v2

GNU Affero General Public License v3.0
20 stars 70 forks source link

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

Closed jmbowman closed 1 year ago

jmbowman commented 1 year ago

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

Screen Shot 2022-01-28 at 2 59 55 PM Screen Shot 2022-01-28 at 3 00 10 PM

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?

image-20220617-151720 image-20220617-151902
Agrendalath commented 1 year ago

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

Agrendalath commented 1 year ago

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

Agrendalath commented 1 year ago

@jmbowman, this is resolved in https://github.com/openedx/frontend-app-learning/pull/1094. Could you help us with merging it?