kolibri
kolibri copied to clipboard
learningequality
quiz images go out of frame ( not aligend vertically with the pic frame)
Observed behavior
quiz images (eg. in a math counting lesson exercise/quiz from khanacademy) go out of frame in a weird way when swtiching between minimized window and full screen
see Images
- minimized window ( expected images alignment )
- swtich to full screen ( not aligned properly)
-
Expected behavior
images stay in the picture frame regardless of window size ( proper responsive design for the images is required)
User-facing consequences
uncomfortable UI and learners specially kids may get confused
Steps to reproduce
- sign in as a coach in add a quiz that contains images (eg. counting from a math lesson
- sign in as a learner and start that quiz
- minmizie the window to a width of < 500px
- increase window width to more than 500 px (or switch to full screen)
Context
- Kolibri 0.15.1
- Windows 10
- Chrome 99.0.4844.74
I just want to further add that you don't need to switch to full screen to observer this issue, just increase the width to more than 500px. I am attaching a video for further reference.
https://user-images.githubusercontent.com/65783653/163730454-88f0ba3d-3df9-49fe-96cc-66040ffb772d.mp4
Also when going from screen size less 500px to greater than 500px, image is get shifted a bit towards left (not in the center) and it may cause issue with some larger images.
https://user-images.githubusercontent.com/65783653/163730519-55df56ad-b152-4e3b-b2c9-470441178443.mp4
Noting that I believe the complexity here was the dynamic resizing after render. If you exit and reenter the exercise at the new screen resolution, I think the issue does not persist.
