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

Layout of multiple choice questions not well aligned

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_39_STABLE
    • Hide
      1. Import the two attached .xml files ( Multiple choice examples.xml and MC question with wild choices.xml ) into a category in your question bank.
      2. Preview each question
      3. Verify that the layout of the choices is nice. In particular, verify that the left-hand edge of the choice texts are nicely aligned, unlike the screen-grab in the issue description.
      Show
      Import the two attached .xml files ( Multiple choice examples.xml and MC question with wild choices.xml ) into a category in your question bank. Preview each question Verify that the layout of the choices is nice. In particular, verify that the left-hand edge of the choice texts are nicely aligned, unlike the screen-grab in the issue description.

      It is most easy to reproduce this if you create a multiple choice question with

      • At least 13 choices
      • Have each choice start with a letter like D with a nice straight edge on the left.
      • Set the 'Number the choices?' option to 'a., b., ...' - or, a question with slighly fewer choices, and use one of the Roman numeral options.

      (See attached XML file, which has some example questions you can use to test this.)

      The left hand side of each of the choices are not lined up:

      So, currently we have (using the roman numeral case because it is more extreme)

      i. Some text which
         wraps
      ii. More text which
          wraps
      iii. And a third
           one.
      

      I wonder if we could achieve this:

      i.  Some text which
          wraps
      ii. More text which
          wraps
      iii. And a third
          one.
      

      So, what I am suggesting is that we align everything at a fixed indent which should make space for most numbers, but for very long numbers, they indent the first line. (Acutally, no I don't think that is possible, becuase the label may include block tags like <p> or <div>.)

      Basically, on the number, put a min-width: 2em, or something.

      Also, note we have quite a lot of history of regressions here. I will link other recent fixes. We need to make sure not to regress them.

        1. 1.5em letters.png
          1.5em letters.png
          9 kB
        2. 1.5 em no numbers.png
          1.5 em no numbers.png
          7 kB
        3. 1.5em Roman.png
          1.5em Roman.png
          9 kB
        4. image-2021-01-07-13-28-03-297.png
          image-2021-01-07-13-28-03-297.png
          265 kB
        5. letter.png
          letter.png
          324 kB
        6. letter2.png
          letter2.png
          326 kB
        7. MC question with wild choices.xml
          280 kB
        8. Multiple choice examples.xml
          10 kB
        9. roman.png
          roman.png
          331 kB
        10. Screenshot_1.jpg
          Screenshot_1.jpg
          96 kB
        11. Screenshot_2.jpg
          Screenshot_2.jpg
          92 kB
        12. screenshot-1.png
          screenshot-1.png
          28 kB

            timhunt Tim Hunt
            timhunt Tim Hunt
            Jun Pataleta Jun Pataleta
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h

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