oppia-android: Question player progress bar & hint bulb overlap unexpectedly

Question player progress bar & hint bulb overlap unexpectedly. See screenshot:

Ideally, we should make sure there’s sufficient separation between the question progress bar & hint bulbs so that they don’t overlap.

Note that this also seems to happen in the question player.

Final Solution as per below mentioned conversation.

Scale Progress Bar to Fit

“Scale Progress Bar to Fit” will animate to the right once the hint button appears, which looks more natural flowing than if it were to move up. As per the image above the Progress Bar size will change when the hint bulb appears and the Progress Bar size will change (going back to normal) once the hint bulb disappears. Note that this change should have animation in place so that it does not look abrupt change.

Reference: https://github.com/oppia/oppia-android/issues/1839#issuecomment-704698704

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 25 (20 by maintainers)

Commits related to this issue

Fix #1839: Fixed overlapping progressbar and hint bulb (#2688) * fixed the issue. * fixed overlapping hint bulb. * changes updated. — committed to oppia/oppia-android by aishapervin 3 years ago

Most upvoted comments

Done.

aishapervin on Jan 21, 2021

Hey, @BenHenning and @mschanteltc! I am Mahe from India. I was going through your conversation above and I would like to make a suggestion.

From what I observed, the hint button appears when the user has attempted a question wrongly the second time. Along with the hint button, warning text also appears saying “No. That’s not correct! (Some more text related to the question.)”

I feel, it makes more sense if the hint button is placed immediately after this warning text. The user is more likely to notice the appearance of the hint button (the bulb symbol) if it appears near the text (which is nearer to the center of the screen) than the progress bar which is at the bottom.

And perhaps, if we add the hint button at the end of the warning text, we can change the button to be a golden/yellow bulb symbol without any background.

Thanks @ForgottenProgramme @BenHenning and @mschanteltc will get back to you on this. Also, checkout our wiki first. This will help you in setting up the project and once you sign the CLA and fill the survey form we can know what you are interested working on.

rt4914 on Oct 27, 2020

We should only make it smaller when the bulb is showing. The progress bar should animate either before or simultaneously when the hint button appears.

mschanteltc on Oct 13, 2020