RunestoneComponents icon indicating copy to clipboard operation
RunestoneComponents copied to clipboard

Select question toggle pop up displayed at the top of page instead of by the problem

Open bhoffman0 opened this issue 3 years ago • 8 comments

When you choose a question in selectquestion:: :toggle: exercises, the pop up appears at the top of the page instead of by the question, and you don't see it unless you scroll up. Can it be put by the question? image

bhoffman0 avatar Jul 24 '21 17:07 bhoffman0

This is how they appear in the overview book: Screen Shot 2021-07-24 at 1 02 48 PM

Are you viewing them in an assignment on the doAssignment page?

bnmnetp avatar Jul 24 '21 18:07 bnmnetp

No, this is from a page in the book: https://csawesome.runestone.academy/runestone/books/published/csawesome/Unit1-Getting-Started/topic-1-8-practice-mixed-code-toggle.html Try to toggle the second exercise and you have to scroll up to see the pop up. I tried it on a page in Barb's py4e book too and it did the same.

bhoffman0 avatar Jul 24 '21 19:07 bhoffman0

Ah --

@vqum -- We should make it so that each toggle question has its own unique id for the toggle preview. Otherwise students may click to preview the question and then have to scroll way up the page to see the preview.

I think the fix is as easy as adding the id for the toggle question to the id so that it is `

We should prefer toggle-preview over component-preview on the assignment page as well.

Looking at the code I can see you designed and wrote it to act the way it is now so maybe you and @barbarer had something in mind that @bhoffman0 and I are missing.

bnmnetp avatar Jul 24 '21 19:07 bnmnetp

Barb noticed this earlier and mentioned it to me as well. So far our hypothesis is that specifically the questions built into textbooks have this issue with the select toggle preview pane. Here's another example from Python for Everyone: image

However, questions built into assignment pages do not have this issue: image

The difference that I noticed is that on assignment pages, the page CSS includes #component-preview with position: fixed that allows the preview pane to float over the rest of the page contents while scrolling. The textbook pages CSS does not include #component-preview and therefore does not have position: fixed

Looks like #component-preview is in RunestoneServer > static > runestone-custom-sphinx-bootstrap.css. If relevant, .toggle-preview is in RunestoneComponents > runestone > selectquestion > css > selectquestion.css.

Is there a good way for position: fixed to be added to the preview pane on textbook pages?

vqum avatar Jul 24 '21 20:07 vqum

If that is what is desired, then it should be as easy as copying the CSS for #component-preview into the selectquestion.css

That would always position the toggle preview on the current page in the upper right.

Seems like an easy solution to me if @barbarer and @bhoffman0 agree.

Edit: I think I like this solution better than having the preview "attached" as it allows you to scroll the original question under the preview.

bnmnetp avatar Jul 24 '21 20:07 bnmnetp

Yes, I would like it to appear to the right at the top of the current view (not just the top of the page).

Dr. Barbara Ericson Assistant Professor, School of Information University of Michigan

On Sat, Jul 24, 2021 at 4:37 PM Bradley Miller @.***> wrote:

If that is what is desired, then it should be as easy as copying the CSS for #component-preview into the selectquestion.css

That would always position the toggle preview on the current page in the upper right.

Seems like an easy solution to me if @barbarer https://github.com/barbarer and @bhoffman0 https://github.com/bhoffman0 agree.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/RunestoneInteractive/RunestoneComponents/issues/1226#issuecomment-886108603, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKOZ7M4F5XPTGJXBIMIWXLLTZMQAPANCNFSM5A5UWYWQ .

barbarer avatar Jul 25 '21 18:07 barbarer

I am also wondering whether scrolling around the page could result in losing track of which question the preview problem corresponds to. @barbarer have you seen that happening at all? Perhaps some sort of label or indicator or a "refocus" button could be added if necessary.

vqum avatar Jul 27 '21 21:07 vqum

Maybe. It might be nice if you could scroll some to see more of the question if the pop-up is covering the question.

Dr. Barbara Ericson Assistant Professor, School of Information University of Michigan

On Tue, Jul 27, 2021 at 5:01 PM vqum @.***> wrote:

I am also wondering whether scrolling around the page could result in losing track of which question the preview problem corresponds to. @barbarer https://github.com/barbarer have you seen that happening at all? Perhaps some sort of label or indicator or a "refocus" button could be added if necessary.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/RunestoneInteractive/RunestoneComponents/issues/1226#issuecomment-887831600, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKOZ7MYTBPRMTKMWOSXY43TTZ4NBDANCNFSM5A5UWYWQ .

barbarer avatar Jul 29 '21 12:07 barbarer