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

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • 3.6
    • 3.5
    • Questions
    • MOODLE_35_STABLE
    • MOODLE_36_STABLE
    • wip-MDL-62411-master
    • 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

      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. 

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

            timhunt Tim Hunt
            jb23347 John Beedell
            John Beedell John Beedell
            Andrew Lyons Andrew Lyons
            Anna Carissa Sadia Anna Carissa Sadia
            Votes:
            4 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 - 5 hours
                5h

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