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

Update drag-drop marker questions to be more responsive (and improve print layout)

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Set up

      1. Log in as teacher or admin.
      2. Create a test course (or use an existing one)
      3. Create your own Drag and drop marker question in the question bank (https://docs.moodle.org/38/en/Drag_and_drop_markers_question_type), or import the one attached.
      4. Create a quiz in this course.
      5. Add the drag-drop marker question to the quiz

      Question preview - using the mouse

      1. In the question bank, for the created question, click 'Edit -> Preview'.
      2. Preview the question.
      3. Verify that you can input an answer to the question by dragging the marker with the mouse to the background image.
      4. Verify that the marker will return back to home when you drop the marker outside the background image.
      5. Click the 'Submit and finish' button.
      6. Verify that the page reloads with all your answers in place, and the grade corresponds to the answer you gave.
      7. Verify that it is no longer possible to drag things.

      Question preview - using the keyboard

      1. Continuing in the question preview window, click 'Start again'.
      2. Press the Tab key a few times.
      3. Verify you can see which of the markers has keyboard focus.
      4. Press Up/Down/Left/Right arrow.
      5. Verify the marker will be moved around the background image.
      6. Verify that you can answer the whole question this way.
      7. Press Escape key.
      8. Verify that the marker will be moved to home location.

      Question preview - responsive design

      1. Continuing in the question preview window, resize the browser window.
      2. Verify that the question layout responds appropriately.

      Behaviour when printing

      1. Continuing in the question preview window, go to File -> Print or press Ctrl + P.
      2. Verify that the Drags and Drops are correctly positioned in the print preview.

      Questions in a quiz - student view during an attempt

      1. Log in as a student who can access the test course. (Might be best to do this an a second web browser or an incognito window, since you will need to go back to teacher/admin later).
      2. Go to the quiz, and start an attempt.
      3. Verify that you can input your answer to question on the page, but don't fill in all the boxes yet.
      4. Click the 'Finish attempt...' button at the bottom of the page to save your responses, but do not click 'Submit all and finish' yet.
      5. Click back to the attempt.
      6. Verify that your answers were saved and you can see the questions in the state you left them.

      Questions in a quiz - teacher/admin view during an attempt

      1. As teacher/admin, go to the quiz.
      2. Click the 'Attempts: 1' link (or choose Results -> Grades from the settings.)
      3. Cick the 'Review attempt' link by the student's name.
      4. Verify that you can see the responses the student has put it.
      5. Verify that you cannot change the response using either the mouse or keyboard.

      Questions in a quiz - student view after an attempt

      1. As student, now submit the quiz attempt.
      2. Verify that the marks and feedback looks sensible given the answer you gave (and the quiz review options).
      3. Verify that it is no longer possible to drag things.

      Questions in a quiz - teacher/admin view after an attempt

      1. As teacher/admin, reload the attempt review page (or navigate back there).
      2. Verify that you can see the marks and feedback.
      3. Verify that you cannot to drag things.
      Show
      Set up Log in as teacher or admin. Create a test course (or use an existing one) Create your own Drag and drop marker question in the question bank ( https://docs.moodle.org/38/en/Drag_and_drop_markers_question_type ), or import the one attached. Create a quiz in this course. Add the drag-drop marker question to the quiz Question preview - using the mouse In the question bank, for the created question, click 'Edit -> Preview'. Preview the question. Verify that you can input an answer to the question by dragging the marker with the mouse to the background image. Verify that the marker will return back to home when you drop the marker outside the background image. Click the 'Submit and finish' button. Verify that the page reloads with all your answers in place, and the grade corresponds to the answer you gave. Verify that it is no longer possible to drag things. Question preview - using the keyboard Continuing in the question preview window, click 'Start again'. Press the Tab key a few times. Verify you can see which of the markers has keyboard focus. Press Up/Down/Left/Right arrow. Verify the marker will be moved around the background image. Verify that you can answer the whole question this way. Press Escape key. Verify that the marker will be moved to home location. Question preview - responsive design Continuing in the question preview window, resize the browser window. Verify that the question layout responds appropriately. Behaviour when printing Continuing in the question preview window, go to File -> Print or press Ctrl + P. Verify that the Drags and Drops are correctly positioned in the print preview. Questions in a quiz - student view during an attempt Log in as a student who can access the test course. (Might be best to do this an a second web browser or an incognito window, since you will need to go back to teacher/admin later). Go to the quiz, and start an attempt. Verify that you can input your answer to question on the page, but don't fill in all the boxes yet. Click the 'Finish attempt...' button at the bottom of the page to save your responses, but do not click 'Submit all and finish' yet. Click back to the attempt. Verify that your answers were saved and you can see the questions in the state you left them. Questions in a quiz - teacher/admin view during an attempt As teacher/admin, go to the quiz. Click the 'Attempts: 1' link (or choose Results -> Grades from the settings.) Cick the 'Review attempt' link by the student's name. Verify that you can see the responses the student has put it. Verify that you cannot change the response using either the mouse or keyboard. Questions in a quiz - student view after an attempt As student, now submit the quiz attempt. Verify that the marks and feedback looks sensible given the answer you gave (and the quiz review options). Verify that it is no longer possible to drag things. Questions in a quiz - teacher/admin view after an attempt As teacher/admin, reload the attempt review page (or navigate back there). Verify that you can see the marks and feedback. Verify that you cannot to drag things.
    • Affected Branches:
      MOODLE_36_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-68382-master

      Description

      The main issue is that drad-drop marker questions do not behave responsively when the browser window gets narrow. This will become a more serious issue once MDL-68446 is done, and we plan to do that soon.

      In addition, for various reasons due to the fragile way tthe HTML of this question was originally implemented (when it had to work in old IE) think like printing would cause the layout to get messed up. It was thinking about that which made us start considering how to change things, and when we were thinking about that, we realised that we could fix the more important issue of responsiveness too.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              HuongNV Huong Nguyen
              Reporter:
              HuongNV Huong Nguyen
              Peer reviewer:
              Tim Hunt
              Integrator:
              Jake Dallimore
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Tim Hunt, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Tim Hunt, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

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