FR: Pretext Textbook Assignment Navigation

[DavidCooperWCU]

Problem: Currently it is not intuitive to navigate a reading assignment that doesn't go sequentially through the text.

Desired experience: When doing an assignment with multiple reading sections, I'd like the user to have easy navigation between reading sections without having to go back to the assignment each time.

Ideal solution: The ideal solution would be for the arrows that go between chapter sections to be changed to arrows that go between sections of the assigned reading. The up arrow would go back to the assignment instead of back to the chapter.

Alternative solution: an alternative solution would be to take away the arrows when in an assignment, and add a text link at the bottom of each section to go to the next part of the assigned reading and a text link at the top to go to the previous part. This is similar to how it works for non pretext books now.

[debbieyuster]

+1 for this feature request. Related to this: there is currently text + basic navigation links at the bottom of each page in a reading assignment (I'm using a non-Pretext book). One of the most important such messages lets students know that they've navigated beyond the actual assignment ("This page is not part of the last reading assignment you visited."). Could this notice please be moved to the top of the page?

[DavidCooperWCU]

Based on discussions with @ascholer and @bnmnetp I have begun instrumenting the server to be able to tell if the book is rst or pretext. The first changes are in this commit on my floating-reading-navigation branch of rs on my fork.

The overall idea is to use @ascholer steps of:

1. Identify that it's pretext
2. create the links differently whether it's pretext or rst
3. update a different section of page depending on whether it is pretext or rst

Currently the reading navigation link only works in rst books, and it's put at the end of the main content id using this code: $("#main-content").append(l);

@ascholerChemeketa suggested the scprogresscontainer id as the place to put this, but I still think modifying the links of where the arrows navigate to would be ideal.

So, my current thoughts are that for rst books, the #relations-prev and #relations-next of the ul with the nextprev-list nextprev-list class are modified with the reading links for the next and the previous section to be read. If it's at the beginning the the previous link could go back to the reading page, and if it's at the end, then the next link could go back to the reading page.

For pretext books, I think the same behavior should happen, except that the previous-button button and the next-button button should be used in both the treebuttons in the ptx-navbar-contents and in the ptx-content-footer. The up-button in the treebuttons should go back to the reading page when it's in a reading.

Since the behavior of the buttons will change, I think it would be good to have an indicator that you're in a reading. In both situations, I think that the navigation bar would be the best place to add such an indication. I think adding a span with a class called page-id would be good. Then if it's not a reading, the page id could just have the chapter and section number, but if it is a reading, then there could be additional info about the name of the reading and which page of the reading they are on.

• For rst this would be in the #navbar navbar-collapse nav navbar-nav, and it might make sense to have a dropdown readingtoc-container that is similar tot the dropdown globaltoc-container.
• For pretext this would be in the #ptx-navbar-contents.

[bnmnetp]

I'd like a little more discussion before we change the navigation buttons. To me having the button take me anywhere but the next/prev page feels broken. Then you are left searching for a way to get to the page you really wanted to get to.

@ascholerChemeketa @oscarlevin @bhoffman0 @barbarer Thoughts??

[ascholerChemeketa]

I agree with Brad that changing the function of controls would be very confusing.

RS currently don't have any real notion of "active assignment" while viewing pages. We can tell if the current page is part of any reading assignments. But the page being part of a reading assignment (possibly multiple!!!) is not the same as the reader trying to work on that assignment. I really don't like the idea of hijacking the UI, or even substantially complicating it, absent clear indication that the user intends to only work on assignment X currently.

Maybe we need to let the reader explicitly control "Current Active Assignment". (Could be set automatically by following an LTI assignment link or manually from the RS assignment page".)

Setting an active assignment could put the reader into "Assignment Mode" where the UI changes to emphasize what is part of that assignment. This also might make it easier to implement #16. Part of the issue there is deciding what is currently relevant to the user (quite challenging if all the assignments open early, a user is working on a late assignment, etc...)

If the reader is in assignment mode (and can turn it off), I still don't like hijacking standard controls, but feel much better about adding a bunch of extra controls. In that case, displaying a summary of reading pages, adding controls for navigating within them, highlighting exercises that are part of the assignment (as per #16), all start to sound much more reasonable.

[DavidCooperWCU]

I was under the impression that if you click a reading link from an assignment that you'd be able to tell that you were in the reading assignment. If that's not the case, then I'd want to add that functionality before implementing navigation changes. I want it to be very clear that a student is in an assignment and that the reading is using specific sections of the book.

Right now if you make a reading assignment that jumps around, then the student has to go back to the assignment after each section read. This is very clunky on pretext books right now.

[ascholerChemeketa]

Agree 100% with the goal of making discontinuous reading assignments easier to complete.

Thinking aloud a bit...

I think tracking "current active assignment" could be entirely client side. Visiting an assignment page could use local storage to store the active assignment id, and even maybe info about the assignment (reading pages and exercise ids). Then on future page loads JS could be used to add reading navigation controls, decorate exercises, etc...

@bnmnetp Are there compelling reasons for the server to know about what the reader's active assignment is?

[oscarlevin]

Some sort of frame around the book with the progress reported in a sort of table of contents? "You are now working on completing this assignment... The next section to read is... You have this many more sections to read..." This seems super helpful and will give students a lot more confidence they are doing the assignment.

[ascholerChemeketa]

Anything that tries to "wrap" the book page is going to vastly complicate the design space.

The current HTML/CSS space assumes that the top level layout for book pages is "owned" by PTX. RS modifies elements within the page, taking taking some design cues from PTX CSS.

So, if in assignment mode RS adds itself as the top level container, the layout process will be fundamentally different in that mode vs non-assignment mode. To avoid that complexity, I strongly favor a solution that adds an "assignment" status div and modifies and/or adds new navigation controls to the existing layout to avoid that complexity.

I think a key design question is "how aggressive should assignment mode be in focusing attention".

Should assignment mode actively hide other parts of the book (rewrite standard ToC, override next/prev buttons)?
Should it provide strictly supplemental information and controls?

The former might have the implementation advantage of not having to figure out how best to cram a bunch of extra stuff into the page (in different themes and different screen sizes). But it would be important to actively communicate "you are in assignment mode" and to make exiting that mode easy.

Reader experience wise, I could see times when either would be preferred, but I think I lean to the heavily focused version.

It sounds like a fairly focused experience is what @oscarlevin and @DavidCooperWCU are both picturing?

[oscarlevin]

My first thought was loading the book in an iframe and letting the controls outside the iframe be all runestone assignment stuff that pointed to the right bits (perhaps reloading the iframe). But I don't have any reason to think this is the right way to do this or even possible.

I would strongly prefer "assignment" mode to just add something additional to the book rather than change anything about it. I'd really like this to help train students how to use the book.

[bnmnetp]

Agree 100% with the goal of making discontinuous reading assignments easier to complete.

Agreed.

@bnmnetp Are there compelling reasons for the server to know about what the reader's active assignment is?

Yes! We already set a value on eBookConfig to reduce server load when we do the real time score updates. So I guess in a sense we do know that we are "in an assignment". We just need to update the JavaScript for the page to make the reading assignment navigation work for a PreTeXt book.

I would argue that simply starting with that is an easy step forward, and then we can think about a longer term design.

I am somewhat hesitant about going too far. The Runestone philosophy has never been that we are an assignment based system. We collect what a student does when they do it and instructors can construct assignments. I get that modern students are different from the students at the dawn of Runestone/PreTeXt so I understand the need to adapt.

[bnmnetp]

I just pushed a small change to bookfuncs.js that displays the same link that RST books show to navigate. Fine with me if this is just temporary until we figure out a longer term solution to the larger problem.

I added the reading-assignment class to the link in case you want to style it.

Next commit will eliminate the jQuery from this file.

[DavidCooperWCU]

Happy New Year!

I added a pull request for two way navigation. I feel like having 2 way navigation is important for this.

I'd like it to be more immersive so that you don't have to scroll all the way to the bottom to use the navigation links.

I also think it would be good to be able to identify either the reading assignment (if you are in one) or the section you are in from the navbar, so I'd like us to continue to find consensus on a better solution.

[bnmnetp]

Space in the navbar is already at a premium.

Part of me feels like the bottom of the page is exactly where the reading assignment navigation should be. Isn't the point of the reading assignment to get them to interact with the content?

A potential compromise, which I haven't thought about enough, would be to have the reading navigation float at the bottom of the window. That would naturally obscure some of the content at the bottom, so how it is presented and styled would be important. Maybe Apple’s "Liquid Glass" could inspire us for how to make this work.

In your PR #1101, the navigation takes up two lines with a fair amount of space. What about something like:

Previous Page Assignment Name Next Page

That one line could be three links:

1. previous page
2. Go to the assignment page
3. next page

Doesn't have to be words (previous / next) could be nice glyphs

This would make for a nice compact representation that could float at the bottom of the window and not take up too much space.

[ascholerChemeketa]

Please no permanent floating navigation widgets over the top of other content. That will be unusable on mobile. Even on a short laptop screen, vertical space is already at a premium - permanently taking up more space would be bad.

Any design should start with:

1. What information is useful to the reader/what capabilities do they need)
2. When are those relevant and how important are they

i.e. "What should it look like?" should follow from what/when, not be the starting point.

---

1. Missing information that I think is relevant and things I want to do:
   -See what assignment is active (and some ability to "exit" it)
   -See where I am in the assignment, possibly including status of other pages
   -Navigate to other pages in the assignment

2. When a page loads, I want to see a warning if the current page is not part of my active assignment.

• If it is not part of my assignment I want the ability to quickly get back on track. Maybe that is selecting a page in the assignment to jump to. Maybe that is returning to the last page I was on or the best guess of what comes after the last page I was on. I also might want an easy way to say "stop bugging me, I am no longer working on that assignment".
• If the current page is part of my active assignment, I would like quick reassurance that I am on track and possibly my progress. ("You are on page 3 of 7 in this assignment"). An ability to quickly jump to other pages without scrolling all the way down would be nice. I likely don't need next button. And the back button in my browser can take me back to the previous page just fine.

I don't want to have to scroll to start actually reading though.

At the end of reading a page I want to clearly see how I continue with the assignment. Here "Go to next page" is critical. The ability to jump to other pages might be nice. It might also be nice to see the summary of where I am.

Midway through reading a page I likely don't care a lot about where I am in the current reading assignment. That information is definitely less important than interacting with the content.

---

That set of affordances suggests to me there should be some kind of shortish "Assignment Progress" at the top of ptx-content that has information similar to what is at the bottom.

It also suggests that building a complex UI to display the information mid-page is not necessary.

Using a bunch of space at the bottom seems fine, but the top should be relatively compact.

Maybe something like this at the top:

Active assignment: [Ch 15 reading]      [Exit assignment link]
On page (3 of 7) [Select input showing current page, can select others] 

Becoming this if not on a page in assignment

Active assignment: [Ch 15 reading]      [Exit assignment link]
This page is not part of that assignment. Select a page to return to it:
[Select input]

At the bottom would be something similar, but with a prominent [Next page] link. Maybe in the bottom area, since space is at less of a premium, instead of a select there could be a list of page links with checkmarks to show status of each.