Anchors on quizes/responses

cognitive-engineering-lab / mdbook-quiz

Interactive quizzes for Markdown

http://cel.cs.brown.edu/mdbook-quiz/

Apache License 2.0

100 stars 21 forks source link

Anchors on quizes/responses #16

Closed devdiva closed 1 year ago

devdiva commented 1 year ago

[x] I have checked the latest main branch to see if this has already been fixed
[x] I have searched existing issues and pull requests for duplicates

Introduction

Description of the problem: When the user answers a quiz it returns them to the top of the page and result is not visible. The user has to scroll in order to see the result

Checked on MacOS 12.6.2, Firefox 109 and Chrome 109

Suggested fix: A learner would expect to see the quiz result on submitting the response. Return URL should anchor to the quiz box or quiz question/response should not navigate away.

willcrichton commented 1 year ago

Hi @devdiva, sorry for the late reply. Thanks for filing this issue.

Can you check if this is still happening? I could not replicate this on macOS 12.5 / Firefox 109.

devdiva commented 1 year ago

@willcrichton sorry, mistake in my report. I wrote Introduction, but linked to Installation.

Introduction works as expected.
Installation does not work as expected.

Steps to replicate:

Go to: https://rust-book.cs.brown.edu/ch01-01-installation.html
Scroll to the bottom of the page where the quiz is
Click "Start" to open the quiz
Click "X" to close the quiz

You'll see the page scroll jump up somewhat and the quiz box is outside the viewport.

Looking in more detail, this is probably because of the quiz being the last thing on the page and the offset in this component:

https://github.com/cognitive-engineering-lab/mdbook-quiz/blob/main/js/packages/quiz/src/components/quiz.tsx#L286-L289

willcrichton commented 1 year ago

Oh ok I was able to reproduce the behavior you're describing. I think this will be fixed if I just save the user's scroll position before starting, and restore it after finishing. I'll put that in the next release. Thanks for the details @devdiva.