0

So I've recently developed this very basic MCQ (Multi Choice Questions) app which presents user with a question and four choices (answers) out of which they have to pick one. Upon pressing "Next", they're presented with the result before proceeding to the next question.

It's an android app centered around WebView and in typical cases, the screen is enough to cover both the question and result part in the bottom:

app screen with typical content

However, in some cases where I have source code sample as part of the question, it becomes a big lengthy and the user has to scroll down a bit in this case:

app screen with scrollable content

But there is no easy or intuitive way for the user to suddenly "know" that the content is scrollable below, right? Is there any easy way to have them pointed towards that fact? I thought about having "auto scrollbars" but that would destroy the aesthetics I think. Is there some other way?

The app is developed using HTML/CSS and Bootstrap, hence a Bootstrap based simpler solution would be preferable. I don't know much about frontend designing, I'm primarily a backend web developer.

PS:

Link to the app on Play Store: https://play.google.com/store/apps/details?id=io.github.prahladyeri.pythonmcq

2 Answers 2

1

A popular solution for this problem is adding a slight shadow at the edges where more content follows.

Taken from css-tricks, where you can read how to code this in css, this is how it looks:

At the top:
enter image description here In between: enter image description here At the bottom: enter image description here

1
1

You could save a lot of space and avoid repeating the answers by leveraging the answer key to display the results like this:

enter image description here

This has the advantage of not having to scroll at all (depending on the length of the questions/answers) and leaves more room for your code examples as well. You could couple this with the other solution proposed above in the case of very long questions/answers

3
  • Thanks Dylan! Being a developer, I often forget the very obvious! Commented Jun 18 at 18:06
  • 1
    @PrahladYeri Ah yes then this is probably your answer. I didn't quite get what you wanted so my answer is more suitable for the code block if that needs to be scrollable.
    – jazZRo
    Commented Jun 19 at 11:55
  • @jazZRo After thinking a bit more about this, I think the lower result block, though redundant, feels quite intuitive and utilitarian. Your solution of shadowing the lower part of the div to indicate scrolling is actually more pragmatic, I might go with that. Commented Jun 19 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.