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

Responsiveness regression on quiz questions page.

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 5.0
    • 5.0
    • Quiz
    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • MDL-84227_main
    • Hide

      1. Create a course
      2. Add a question bank to the course. Edit the question bank and give it a long name like "This is a shared question bank with a much longer name than you'd expect"
      3. Add a question to the question bank with a long name like "This question also has a very long name, probably long enough to cause problems"
      4. Add some question text as well, like "This is some question text that should get truncated because it is so long"
      4.5 Also make a questoin with short name and quetion text, in a question bank with a short name.
      5. Add a quiz to the course
      6. Go to the questions tab, and add the question you created at step 3 to the quiz.
      7. Verify that the question is shown on the Questions page correctly, without any of the elements overlapping.
      8. Gradually make the browser window narrower.

      • Confirm that the question text and name are gradually truncated further as less space is available
      • Confirm that the badge showing the question bank name wraps below the question name, and that the text within it gradually wraps as there is less space available.
      • Once the window is at "mobile" width (less than 576px wide), confirm that the question number, name, question bank name, and actions are stacked vertically.
      Show
      1. Create a course 2. Add a question bank to the course. Edit the question bank and give it a long name like "This is a shared question bank with a much longer name than you'd expect" 3. Add a question to the question bank with a long name like "This question also has a very long name, probably long enough to cause problems" 4. Add some question text as well, like "This is some question text that should get truncated because it is so long" 4.5 Also make a questoin with short name and quetion text, in a question bank with a short name. 5. Add a quiz to the course 6. Go to the questions tab, and add the question you created at step 3 to the quiz. 7. Verify that the question is shown on the Questions page correctly, without any of the elements overlapping. 8. Gradually make the browser window narrower. Confirm that the question text and name are gradually truncated further as less space is available Confirm that the badge showing the question bank name wraps below the question name, and that the text within it gradually wraps as there is less space available. Once the window is at "mobile" width (less than 576px wide), confirm that the question number, name, question bank name, and actions are stacked vertically.
    • Hide

      Code verified against automated checks.

      Checked MDL-84227 using repository: https://github.com/marxjohnson/moodle.git

      More information about this report

      Built on: Mon Mar 17 16:09:47 UTC 2025

      Show
      Code verified against automated checks. Checked MDL-84227 using repository: https://github.com/marxjohnson/moodle.git main (0 errors / 0 warnings) [branch: MDL-84227_main | CI Job ] More information about this report Built on: Mon Mar 17 16:09:47 UTC 2025
    • Show
      Launching automatic jobs for branch MDL-84227 _main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18738/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64189/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64190/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64191/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64192/ App tests (stable app version) Built on: Thu Mar 20 20:30:17 UTC 2025

      Since 5.0 there are some regressions in the responsiveness of the question list in the quiz. In 4.5, at a narrow width the page looks like this:

      However on 5.0, the same page looks like this:

      The linked issues are making changes to the construction of this page, so may fix this as a side-effect. Once they are complete, we should review this ticket to see if further work is needed.

      Steps to reproduce:

      1. Create a quiz
      2. Add a question with a very long name
      3. Add a second question with a very long name and very long question text
      4. View the question list, and make the browser window narrower.
        • Expected: The question text and name are neatly truncated, keeping the actions visible to the right.
        • Actual: The actions overlap each other and the text.

            marxjohnson Mark Johnson
            marxjohnson Mark Johnson
            Luca Bösch Luca Bösch
            Tim Hunt Tim Hunt
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 10 minutes
                10m

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