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

Improve responsive design of drag-drop into text questions (also fixes layout when printed)

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Pleas test this in both Boost and Classic themes. (No need to repeat the set-up, you can probably just change the course theme.)

      Set up

      1. Log in as teacher or admin.
      2. Create a test course (or use an existing one)
      3. Import the attached big-drag-drop-question.xml into the Question bank.
      4. Create a second Drag and drop into text question in the same question bank. (https://docs.moodle.org/38/en/Drag_and_drop_into_text_question_type)
      5. Create a quiz in this course.
      6. Add both the drag-drop into text questions to the quiz, putting them both on the same page.

      Question preview - using the mouse

      1. In the question bank, for the imported question 'Question with all the groups', click 'Edit -> Preview'.
      2. Preview the imported.
      3. Verify that you can input an answer to the question by dragging with the mouse.
      4. Verify that you cannot put an answer into a box that is the wrong shape/colour.
      5. As part of inputting your response, try dragging a different answer on top of a space that is already full.
      6. Verify that the new answer goes in the box, and the previous answer goes back home.
      7. Click the 'Submit and finish' button.
      8. Verify that the page reloads with all your answers in place, and the grade corresponds to the answer you gave.
      9. 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 both questions 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 navgiate back there).
      2. Verify that you can see the marke and feedback.
      3. Verify that you cannot to drag things.
      Show
      Pleas test this in both Boost and Classic themes. (No need to repeat the set-up, you can probably just change the course theme.) Set up Log in as teacher or admin. Create a test course (or use an existing one) Import the attached big-drag-drop-question.xml into the Question bank. Create a second Drag and drop into text question in the same question bank. ( https://docs.moodle.org/38/en/Drag_and_drop_into_text_question_type ) Create a quiz in this course. Add both the drag-drop into text questions to the quiz, putting them both on the same page. Question preview - using the mouse In the question bank, for the imported question 'Question with all the groups', click 'Edit -> Preview'. Preview the imported. Verify that you can input an answer to the question by dragging with the mouse. Verify that you cannot put an answer into a box that is the wrong shape/colour. As part of inputting your response, try dragging a different answer on top of a space that is already full. Verify that the new answer goes in the box, and the previous answer goes back home. 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 both questions 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 navgiate back there). Verify that you can see the marke 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-68113-master

      Description

      Currently, the DD into text question work normally with the responsive mode, but it's broken when Print

        Attachments

        1. big-drag-drop-question.xml
          4 kB
        2. misaligned-animation.gif
          misaligned-animation.gif
          71 kB
        3. screenshot-1.png
          screenshot-1.png
          33 kB
        4. screenshot-2.png
          screenshot-2.png
          45 kB
        5. screenshot-3.png
          screenshot-3.png
          41 kB

          Issue Links

            Activity

              People

              Assignee:
              HuongNV Huong Nguyen
              Reporter:
              HuongNV Huong Nguyen
              Peer reviewer:
              Tim Hunt
              Integrator:
              Jun Pataleta
              Tester:
              David Mudrák (@mudrd8mz)
              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:
              1 Vote for this issue
              Watchers:
              8 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, 40 minutes
                  2h 40m