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

Drag-drop markers: allow graphical editing of drop zones, and update all JS to AMD

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.5
    • Fix Version/s: 3.6
    • Component/s: Questions
    • Testing Instructions:
      Hide

      Note: These changes need to be tested on a range of devices, including Chrome, Firefox, IE, and Mobile devices

      Setup

      1. Create a course with a student enrolled in it
      2. Create a new Quiz

      Creating a new question

      1. Edit the quiz
      2. Start creating a new drag-drop markers question
      3. Complete the required fields.
      4. Try add a background image. Verify that the preview updates.
      5. In the Drop zones section, set a marker shape. Some coordinates should appear, and the shape should appear in the preview.
      6. Edit the coordinates
        1. The preview shape should update to match.
      7. In the Marker section, type a marker name.
      8. That marker name should be be available to select as the marker for your drop zone. Select it.
        1. The marker name should now be shown on the preview.
      9. Edit the marker name
        1. The preview should update immediately with the new name.
      10. Click on the drop zone in the preview
        1. Some handles should appear
      11. Drag the handles
        1. The shape should change, and the coordinates in the form should update in real time.
      12. Add more markers and drop zones.
      13. Change the shape of a drop zone
        1. The coordinates and the shape in the preview should change to match.
      14. Change one of the shape to polygon.
      15. Hold down CTRL and drag a marker
        1. This should add an extra marker to the polygon.
      16. Save the question, and preview it.
      17. Drag the handles into the relevant areas and save
        1. Confirm that it marked the response correctly

      Editing an existing question

      1. Edit an existing question test that the above manipulations work there too.
      2. Try loading a different background image. Verify the form updates correctly.

      Attempting questions as a student

      1. Login as a student
      2. Attempt the quiz containing the question
      3. Try to get it wrong and right in various ways
      Show
      Note: These changes need to be tested on a range of devices, including Chrome, Firefox, IE, and Mobile devices Setup Create a course with a student enrolled in it Create a new Quiz Creating a new question Edit the quiz Start creating a new drag-drop markers question Complete the required fields. Try add a background image. Verify that the preview updates. In the Drop zones section, set a marker shape. Some coordinates should appear, and the shape should appear in the preview. Edit the coordinates The preview shape should update to match. In the Marker section, type a marker name. That marker name should be be available to select as the marker for your drop zone. Select it. The marker name should now be shown on the preview. Edit the marker name The preview should update immediately with the new name. Click on the drop zone in the preview Some handles should appear Drag the handles The shape should change, and the coordinates in the form should update in real time. Add more markers and drop zones. Change the shape of a drop zone The coordinates and the shape in the preview should change to match. Change one of the shape to polygon. Hold down CTRL and drag a marker This should add an extra marker to the polygon. Save the question, and preview it. Drag the handles into the relevant areas and save Confirm that it marked the response correctly Editing an existing question Edit an existing question test that the above manipulations work there too. Try loading a different background image. Verify the form updates correctly. Attempting questions as a student Login as a student Attempt the quiz containing the question Try to get it wrong and right in various ways
    • Affected Branches:
      MOODLE_35_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      wip-MDL-62411-master

      Description

      The drag and drop markers question type currently uses the yui javascript library. This improvement is to update to amd/jquery.

      While upgrading the javascript there is also the opportunity to introduce two new features.

      First there is a more intuitive question editing experience for teachers creating this type of question. The question preview will now automatically show a drop area shape once the teacher selects the shape type, and rather than manipulating the shape by entering coordinates, it is now possible to drag the shape into position and adjust the dimensions of the shape within the preview - with coordinates being updated automatically. Of course teachers can still adjust the drop area shape by entering coordinates if they wish.

      For students this question may now be answered on mobile devices, and is tested working on iOS 11.3 where there have been issues with passive events for other areas of code.

      The branch for review contains two commits. The first introduces three new javascript libraries: autoscroll, dragdrop and svgjs. The first two are very small and should be useful to anyone else wishing to use a dragdrop library that cope with the iOS passive events issue. Svgjs is a lightweight opensource library (https://svgdotjs.github.io/) that again others may wish to use to draw svg shapes on the fly. The second commit is the upgrade of ddmarkers. 

        Attachments

        1. ddmarkers_question.xml
          52 kB
        2. shape_disappear.mp4
          3.90 MB
        3. shape_drag.mp4
          2.15 MB

          Issue Links

            Activity

              People

              • Votes:
                4 Vote for this issue
                Watchers:
                10 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  3/Dec/18

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 5 hours
                  5h