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

Make drag-and-drop onto image questions responsive and fix the print layout

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.2, 3.2.2, 3.3.2, 3.5, 3.6.5, 3.7, 3.8, 3.9
    • Fix Version/s: 3.9
    • Component/s: Questions, Quiz
    • 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 onto image question in the question bank (https://docs.moodle.org/38/en/Drag_and_drop_onto_image_question_type)
      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 dropzone.
      4. Verify that the marker will return back to home when you drop the marker outside the dropzone.
      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 answer boxes has keyboard focus.
      4. Press Space, Left arrow or Right arrow.
      5. Verify that this cycles through all the choices that are right for that answer box.
      6. Verify that you can answer the whole question this way.

      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 onto image question in the question bank ( https://docs.moodle.org/38/en/Drag_and_drop_onto_image_question_type ) 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 dropzone. Verify that the marker will return back to home when you drop the marker outside the dropzone. 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 answer boxes has keyboard focus. Press Space, Left arrow or Right arrow. Verify that this cycles through all the choices that are right for that answer box. Verify that you can answer the whole question this way. 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_32_STABLE, MOODLE_33_STABLE, MOODLE_35_STABLE, MOODLE_36_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-58645-master

      Description

      The real issue is that drag-drop onto image questions are not very responsive, which will become more of an issue once MDL-68446 lands.

      We started thinking about the issues with this question type because we noticed the they layout of these questions broke when you tried to print them, and the changes here alos fix that scenario.

      See https://moodle.org/mod/forum/discuss.php?d=340845

      Example question can be found there too

        Attachments

        1. drag-drop-onto-image.xml
          49 kB
        2. qtype_ddwtos.jpg
          qtype_ddwtos.jpg
          80 kB
        3. Screenshot_1.png
          Screenshot_1.png
          177 kB
        4. Screenshot_2.png
          Screenshot_2.png
          85 kB
        5. Screenshot_3.png
          Screenshot_3.png
          88 kB
        6. Selection_212.png
          Selection_212.png
          273 kB
        7. Untitled1.jpg
          Untitled1.jpg
          138 kB

          Issue Links

            Activity

              People

              Assignee:
              HuongNV Huong Nguyen
              Reporter:
              jand Jan Derriks
              Peer reviewer:
              Tim Hunt
              Integrator:
              Jake Dallimore
              Tester:
              Janelle Barcega
              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:
              4 Vote for this issue
              Watchers:
              14 Start watching this issue

                Dates

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

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 hours, 30 minutes
                  2h 30m