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

    • MOODLE_36_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE
    • MOODLE_39_STABLE
    • MDL-68113-master
    • 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.

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

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

            HuongNV Huong Nguyen
            HuongNV Huong Nguyen
            Tim Hunt Tim Hunt
            Jun Pataleta Jun Pataleta
            David Mudrák (@mudrd8mz) David Mudrák (@mudrd8mz)
            Votes:
            1 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

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

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