Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-76982

Add floating previous/next buttons to navigate book chapters

    XMLWordPrintable

Details

    • MOODLE_401_STABLE
    • MOODLE_403_STABLE
    • MDL-76982-master
    • Hide

      Note:

      • These tests need to be done on both the Boost and Classic themes.
      • These tests need to be done on different screen widths - large, medium and small.
      • Test this with both LTR and RTL languages.

      Test data:

      A. Create a book with:

      • Short description.
      • Three or more chapters. There should be a short chapter that requires no scrolling and longer chapters that require scrolling.
      • Include some hyperlinks in the chapter content.
         

      B. Create a book with:

      • Description is empty.
      • Three or more chapters. There should be a short chapter that requires no scrolling and longer chapters that require scrolling.
      • Include some hyperlinks in the chapter content.

      C. Create a book with:

      • Short description.
      • One chapter only.
      • Include some hyperlinks in the chapter content.

      D. Create a book with:

      • Description is empty.
      • One chapter only.
      • Include some hyperlinks in the chapter content.

       

      Test Steps: Book with multiple chapters

      1. Access the book with multiple chapters.
      2. A "button with an icon" is present to navigate to the next chapter.
      3. Click the next chapter button to go to the next chapter.
      4. Notice that when next page loads, you can clearly see the chapter title.
      5. If the chapter content requires scrolling, check that when scrolling up or down, the next and previous buttons are always available on screen.
      6. Check that you can select text from the book chapter.
      7. Check that you can click on any links in the book chapter.
      8. Ensure that the next and previous buttons easily allow you to traverse the book chapters.
      9. Ensure that there is no overlapping or cut-off content.
      10. Resize the browser and repeat these steps.

       

      Test Steps: Book with single chapter

      1. Access the book with one chapter only.
      2. There should be no next button.
      3. Check that you can select text from the book chapter.
      4. Check that you can click on any links in the book chapter.
      5. Ensure that there is no overlapping or cut-off content.
      6. Resize the browser and repeat these steps.

       

      Test Steps: Book chapter navigation in RTL language

      1. Change to a RTL language such as Arabic.{}
      2. Check that the next chapter button is placed on the left hand side.
      3. Check that the next chapter button icon is pointing to the left.
      4. Check that the previous chapter button is placed on the right hand side.
      5. Check that the previous chapter button icon is pointing to the right.
      Show
      Note: These tests need to be done on both the Boost and Classic themes. These tests need to be done on different screen widths - large, medium and small. Test this with both LTR and RTL languages. Test data: A . Create a book with: Short description. Three or more chapters. There should be a short chapter that requires no scrolling and longer chapters that require scrolling. Include some hyperlinks in the chapter content.   B . Create a book with: Description is empty. Three or more chapters. There should be a short chapter that requires no scrolling and longer chapters that require scrolling. Include some hyperlinks in the chapter content. C . Create a book with: Short description. One chapter only. Include some hyperlinks in the chapter content. D . Create a book with: Description is empty. One chapter only. Include some hyperlinks in the chapter content.   Test Steps: Book with multiple chapters Access the book with multiple chapters. A "button with an icon" is present to navigate to the next chapter. Click the next chapter button to go to the next chapter. Notice that when next page loads, you can clearly see the chapter title. If the chapter content requires scrolling, check that when scrolling up or down, the next and previous buttons are always available on screen. Check that you can select text from the book chapter. Check that you can click on any links in the book chapter. Ensure that the next and previous buttons easily allow you to traverse the book chapters. Ensure that there is no overlapping or cut-off content. Resize the browser and repeat these steps.   Test Steps: Book with single chapter Access the book with one chapter only. There should be no next button. Check that you can select text from the book chapter. Check that you can click on any links in the book chapter. Ensure that there is no overlapping or cut-off content. Resize the browser and repeat these steps.   Test Steps: Book chapter navigation in RTL language Change to a RTL language such as Arabic. { } Check that the next chapter button is placed on the left hand side. Check that the next chapter button icon is pointing to the left. Check that the previous chapter button is placed on the right hand side. Check that the previous chapter button icon is pointing to the right.

    Description

      Books have previous/next buttons displayed at the top and bottom of the content to help you navigate.

      If you have books with long pages/content then its a bit annoying if you want to move to the next or previous chapter. You have to either scroll to the top or bottom to access the previous/next button. (Or you'd have to show the block drawer and choose the relevant chapter title you wish to go to.)

      A nice improvement would be to have floating previous/next buttons. As the reader reads and scrolls the page, the previous/next buttons are always there to allow the user to navigate to the next page.

      This would reduce the need to scroll to the top or bottom, providing a much better user experience.
      It will also mean that there is only one set of previous/next buttons, instead of two, as is currently the case.

       

      Here is a screen capture of how this would look like, taken from Moodle Academy. If you'd like to get a feel of this, try accessing any book on Moodle Academy.

       

      Attachments

        1. book-nav.gif
          book-nav.gif
          2.16 MB
        2. boost-large-1.png
          boost-large-1.png
          138 kB
        3. boost-small-1.png
          boost-small-1.png
          86 kB
        4. classic-large-1.png
          classic-large-1.png
          154 kB
        5. classic-small-1.png
          classic-small-1.png
          82 kB
        6. image-2023-08-16-16-44-43-932.png
          image-2023-08-16-16-44-43-932.png
          89 kB
        7. MDL-76982-multiple chapters.png
          MDL-76982-multiple chapters.png
          4.07 MB
        8. MDL-76982-rtl.png
          MDL-76982-rtl.png
          2.85 MB
        9. MDL-76982-single chapter.png
          MDL-76982-single chapter.png
          952 kB

        Issue Links

          Activity

            People

              rjnl Rajneel Totaram
              rjnl Rajneel Totaram
              Mihail Geshoski Mihail Geshoski
              Sara Arjona (@sarjona) Sara Arjona (@sarjona)
              Ron Carl Alfon Yu Ron Carl Alfon Yu
              Votes:
              3 Vote for this issue
              Watchers:
              16 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 3 hours, 36 minutes
                  3h 36m

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.