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

Checkboxes/Radio Buttons within multiple choice questions become invisible or shrink

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-71366-master
    • Hide

      Please test this in all supported Browsers for Moodle

      Test the checkbox sizes

      1. Login as admin
      2. Create a new quiz
      3. Import the quiz backup attached to this issue
      4. Attempt the quiz
      5. Verify the checkboxes for the answers are all the same size

      See screenshot below:

      Test the scrolling behaviour

      1. Attempt the quiz
      2. Verify the question answers show a scrollbar
      3. Verify you can use the scrollbar to see the whole question text.
      4. Verify that there is no scrollbar for text that can be broken into a new line (text that contains spaces) in question 3

       

       

       

       

      Show
      Please test this in all supported Browsers for Moodle Test the checkbox sizes Login as admin Create a new quiz Import the quiz backup attached to this issue Attempt the quiz Verify  the checkboxes for the answers are all the same size See screenshot below: Test the scrolling behaviour Attempt the quiz Verify the question answers show a scrollbar Verify you can use the scrollbar to see the whole question text. Verify that there is no scrollbar for text that can be broken into a new line (text that contains spaces) in question 3        

      When creating multiple-choice question with a long non breaking answer (for example a long <code> segment), the checkboxes/radiobuttons might resize such that their width gets reduced to zero. Therefore this can cause users to not see the checkbox/radiobutton and be confused/unable to answer the quiz.

      This is due to the parent div of the checkboxes being a display: flex, and the inputs not having the correct style settings set. (As far as I understand flex, and skipping over [1]).
      This behavior happens in Chrome. It does not happen in Firefox. However, I believe this is not a Chrome bug.
       

      [1]: https://css-tricks.com/making-width-and-flexible-items-play-nice-together/

      Disclaimer: not sure about the affected version 3.10.3; I could reproduce the issue on https://sandbox.moodledemo.net/ and assume it runs on 3.10.3; I could only see that it runs 3.10, not which exact version. Version 3.9.6 is deployed by my University.

        1. chrome_2021-04-18_18-44-54_Impish-Housefly.png
          chrome_2021-04-18_18-44-54_Impish-Housefly.png
          37 kB
        2. MDL-71366_Test Passed.png
          MDL-71366_Test Passed.png
          221 kB
        3. mobile view.png
          mobile view.png
          104 kB
        4. multichoice questions.png
          multichoice questions.png
          283 kB
        5. questions-000117-phys103-0-Default for 000117-phys103-0-20210701-0426.xml
          5 kB

            basbrands Bas Brands
            snhebrok Sven Hebrok
            Tim Hunt Tim Hunt
            Adrian Greeve Adrian Greeve
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours, 11 minutes
                5h 11m

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