Page Comparison

...

Library content with offline mode.
The components from Library behave the same way as the components inherit from capa problem (Checkboxes, Multiple Choice, Numerical Input, Text Input etc.)
Implementation for text problem and video problem already exist.
Staff Graded Assignment actions table.

Action

Description

Screenshot

Upload assignment

Click to the 'Upload your assignment' button and upload file (picture, audio, video, pdf):

Event: upload_assignment is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@edx_sga+block@6e0fd8e8cb3b41bfbe8dc10cba835f0c/handler/upload_assignment
Request Method: POST
Payload:
------WebKitFormBoundaryeJ0dBLCR091snpxM Content-Disposition: form-data; name="assignment"; filename="smile_742751.png" Content-Type: image/png ------WebKitFormBoundaryeJ0dBLCR091snpxM--

Response:

Code Block

{
    "display_name": "Staff Graded Assignment",
    "uploaded": {
        "filename": "smile_742751.png"
    },
    "annotated": null,
    "graded": null,
    "max_score": 100,
    "upload_allowed": true,
    "solution": "<p>Put your question or theme here</p>",
    "base_asset_url": "/asset-v1:f+f+f+type@asset+block@"
}

Screenshot 2024-05-16 at 11.57.59.png

Grade Submissions

Press GRADE SUBMISSIONS button (it works only for the staff or course instructor)
Event: get_staff_grading_data is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@edx_sga+block@6e0fd8e8cb3b41bfbe8dc10cba835f0c/handler/get_staff_grading_data
Request Method: GET
Preview:

Code Block

0: {module_id: 64, student_id: "d7f90c9b193a3e02ddb7bd53ebcf2339",…}
annotated: ""
approved: false
comment: ""
filename: "smile_742751.png"
finalized: false
fullname: ""
may_grade: true
module_id: 64
needs_approval: false
score: null
student_id: "d7f90c9b193a3e02ddb7bd53ebcf2339"
submission_id: "f99d6ea6-1b3f-4c7b-9ec0-d5dfc64f3f11"
timestamp: "2024-05-16T09:05:13.228339"
username: "kyrylo"
display_name: "Staff Graded Assignment"
max_score: 100

Response: Screenshot 2024-05-16 at 12.18.12.png

Code Block

{
    "assignments": [
        {
            "module_id": 64,
            "student_id": "d7f90c9b193a3e02ddb7bd53ebcf2339",
            "submission_id": "f99d6ea6-1b3f-4c7b-9ec0-d5dfc64f3f11",
            "username": "kyrylo",
            "fullname": "",
            "filename": "smile_742751.png",
            "timestamp": "2024-05-16T09:05:13.228339",
            "score": null,
            "approved": false,
            "needs_approval": false,
            "may_grade": true,
            "annotated": "",
            "comment": "",
            "finalized": false
        }
    ],
    "max_score": 100,
    "display_name": "Staff Graded Assignment"
}

Screenshot 2024-05-16 at 12.18.12.png

Screenshot 2024-05-16 at 12.18.48.png

Submit file

Submit uploaded file:
Event: finalize_uploaded_assignment is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@edx_sga+block@6e0fd8e8cb3b41bfbe8dc10cba835f0c/handler/finalize_uploaded_assignment
Request Method: POST
Payload: None
Response:

Code Block

{
    "display_name": "Staff Graded Assignment",
    "uploaded": {
        "filename": "smile_742751.png"
    },
    "annotated": null,
    "graded": null,
    "max_score": 100,
    "upload_allowed": false,
    "solution": "<p>Put your question or theme here</p>",
    "base_asset_url": "/asset-v1:f+f+f+type@asset+block@"
}

Screenshot 2024-05-16 at 12.22.11.png

Enter Grade

Enter Grade in staff modal window and submit:
Event: enter_grade is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@edx_sga+block@6e0fd8e8cb3b41bfbe8dc10cba835f0c/handler/enter_grade
Request Method: POST
Payload:

Code Block
module_id=65&submission_id=ed9dbcb2-8a3f-4463-b026-ab28f21c13fb&grade=88&comment=Grate+job!

Response:

Code Block

{
    "assignments": [
        {
            "module_id": 65,
            "student_id": "d7f90c9b193a3e02ddb7bd53ebcf2339",
            "submission_id": "ed9dbcb2-8a3f-4463-b026-ab28f21c13fb",
            "username": "kyrylo",
            "fullname": "",
            "filename": "smile_742751.png",
            "timestamp": "2024-05-16T09:28:19.683966",
            "score": 88,
            "approved": true,
            "needs_approval": false,
            "may_grade": true,
            "annotated": "",
            "comment": "Grate job!",
            "finalized": true
        }
    ],
    "max_score": 100,
    "display_name": "Staff Graded Assignment"
}

Screenshot 2024-05-16 at 12.32.01.png

Screenshot 2024-05-16 at 12.32.38.png

Upload annotated file

Upload annotated file (for staff or instructor)
Event: staff_upload_annotated is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@edx_sga+block@6e0fd8e8cb3b41bfbe8dc10cba835f0c/handler/staff_upload_annotated?module_id=65
Request Method: POST
Payload: (Form Data)

Code Block
------WebKitFormBoundaryySobLAprYkZiMA9Q Content-Disposition: form-data; name="annotated"; filename="sad_725099.png" Content-Type: image/png ------WebKitFormBoundaryySobLAprYkZiMA9Q--

Response:

Code Block

{
    "assignments": [
        {
            "module_id": 65,
            "student_id": "d7f90c9b193a3e02ddb7bd53ebcf2339",
            "submission_id": "ed9dbcb2-8a3f-4463-b026-ab28f21c13fb",
            "username": "kyrylo",
            "fullname": "",
            "filename": "smile_742751.png",
            "timestamp": "2024-05-16T09:28:19.683966",
            "score": 88,
            "approved": true,
            "needs_approval": false,
            "may_grade": true,
            "annotated": "sad_725099.png",
            "comment": "Grate job!",
            "finalized": true
        }
    ],
    "max_score": 100,
    "display_name": "Staff Graded Assignment"
}

Screenshot 2024-05-16 at 12.40.45.png

Annotatable problem table.
Requests and responses to the server almost completely correspond to those described in the capa problem article. The only difference is in the Payload of the the request problem_check.

Action

Description

Screenshot

Submit

Submit answer and annotation:

Event: problem_check is sent.
Request URL:
http://local.edly.io:8000/courses/course-v1:f+f+f/xblock/block-v1:f+f+f+type@problem+block@273825134dcc433abbb012fa5e660d4d/handler/xmodule_handler/problem_check
Request Method: POST
Payload: (Form Data)

Code Block

input_273825134dcc433abbb012fa5e660d4d_2_1_comment=Lorem+ipsum+dolor+sit+amet%2C+consectetur+adipiscing+elit.+Ut+sodales+laoreet+est%2C+egestas+gravida+felis+egestas+nec.+Aenean+at+volutpat+erat.+Cras+commodo+viverra+nibh+in+aliquam.&input_273825134dcc433abbb012fa5e660d4d_2_1=%7B%22options%22%3A%5B1%5D%2C%22comment%22%3A%22Lorem+ipsum+dolor+sit+amet%2C+consectetur+adipiscing+elit.+Ut+sodales+laoreet+est%2C+egestas+gravida+felis+egestas+nec.+Aenean+at+volutpat+erat.+Cras+commodo+viverra+nibh+in+aliquam.%22%7D

Response:

Code Block

{
    "success": "correct",
    "contents": "\n\n\n\n<h3 class=\"hd hd-3 problem-header\" id=\"273825134dcc433abbb012fa5e660d4d-problem-title\" aria-describedby=\"block-v1:f+f+f+type@problem+block@273825134dcc433abbb012fa5e660d4d-problem-progress\" tabindex=\"-1\">\n  Blank Problem\n</h3>\n\n<div class=\"problem-progress\" id=\"block-v1:f+f+f+type@problem+block@273825134dcc433abbb012fa5e660d4d-problem-progress\"></div>\n\n<div class=\"problem\">\n  <div>\n    <div class=\"wrapper-problem-response\" tabindex=\"-1\" aria-label=\"Question 1\" role=\"group\"><div class=\"annotation-input\">\n<div class=\"script_placeholder\" data-src=\"/static/js/capa/annotationinput.js\"/>\n\n<div class=\"annotation-header\">\n    Annotation Exercise\n\n        <a class=\"annotation-return\" href=\"javascript:void(0)\">Return to Annotation</a><br/>\n</div>\n<div class=\"annotation-body\">\n\n    <div class=\"block block-highlight\">PLACEHOLDER: Text of annotation</div>\n    <div class=\"block block-comment\">PLACEHOLDER: Text of question</div>\n\n    <div class=\"block\">PLACEHOLDER: Type your response below:</div>\n    <textarea class=\"comment\" id=\"input_273825134dcc433abbb012fa5e660d4d_2_1_comment\" name=\"input_273825134dcc433abbb012fa5e660d4d_2_1_comment\" aria-describedby=\"answer_273825134dcc433abbb012fa5e660d4d_2_1\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales laoreet est, egestas gravida felis egestas nec. Aenean at volutpat erat. Cras commodo viverra nibh in aliquam.</textarea>\n\n    <div class=\"block\" id=\"label_273825134dcc433abbb012fa5e660d4d_2_1\">PLACEHOLDER: In your response to this question, which tag below do you choose?</div>\n    <ul class=\"tags\">\n        <li>\n\n            <span class=\"tag             \" data-id=\"0\">\n                PLACEHOLDER: Incorrect answer (to make this option a correct or partially correct answer, change choice=\"incorrect\" to choice=\"correct\" or choice=\"partially-correct\")\n            </span>\n        </li>\n        <li>\n                <span class=\"tag-status correct\" aria-describedby=\"input_273825134dcc433abbb012fa5e660d4d_2_1_comment\">\n                    \n\n<span class=\"status correct\" data-tooltip=\"This answer is correct.\">\n  <span class=\"sr\">correct</span><span class=\"status-icon\" aria-hidden=\"true\"/>\n</span>\n\n                </span>\n\n            <span class=\"tag                 selected             \" data-id=\"1\">\n                PLACEHOLDER: Correct answer (to make this option an incorrect or partially correct answer, change choice=\"correct\" to choice=\"incorrect\" or choice=\"partially-correct\")\n            </span>\n        </li>\n        <li>\n\n            <span class=\"tag             \" data-id=\"2\">\n                PLACEHOLDER: Partially correct answer (to make this option a correct or partially correct answer, change choice=\"partially-correct\" to choice=\"correct\" or choice=\"incorrect\")\n            \n            </span>\n        </li>\n    </ul>\n\n        <input type=\"hidden\" class=\"value\" name=\"input_273825134dcc433abbb012fa5e660d4d_2_1\" id=\"input_273825134dcc433abbb012fa5e660d4d_2_1\" value=\"{&quot;options&quot;:[1],&quot;comment&quot;:&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales laoreet est, egestas gravida felis egestas nec. Aenean at volutpat erat. Cras commodo viverra nibh in aliquam.&quot;}\"/>\n\n    \n\n<span class=\"status correct\" id=\"status_273825134dcc433abbb012fa5e660d4d_2_1\" data-tooltip=\"This answer is correct.\">\n  <span class=\"sr\">correct</span><span class=\"status-icon\" aria-hidden=\"true\"/>\n</span>\n\n\n    <p id=\"answer_273825134dcc433abbb012fa5e660d4d_2_1\" class=\"answer answer-annotation\"/>\n</div>\n</div></div>\n    <div class=\"solution-span\">\n <span id=\"solution_273825134dcc433abbb012fa5e660d4d_solution_1\"/>\n</div></div>\n  <div class=\"action\">\n    <input type=\"hidden\" name=\"problem_id\" value=\"Blank Problem\" />\n\n    <div class=\"problem-action-buttons-wrapper\">\n      <span class=\"problem-action-button-wrapper\">\n          <button type=\"button\" class=\"show problem-action-btn btn-link btn-small\" aria-describedby=\"273825134dcc433abbb012fa5e660d4d-problem-title\"><span class=\"show-label\">Show answer</span></button>\n      </span>\n    </div>\n    <div class=\"submit-attempt-container\">\n      <button type=\"button\" class=\"submit btn-brand\" data-submitting=\"Submitting\" data-value=\"Submit\" data-should-enable-submit-button=\"True\" aria-describedby=\"submission_feedback_273825134dcc433abbb012fa5e660d4d\" >\n          <span class=\"submit-label\">Submit</span>\n      </button>\n\n      <div class=\"submission-feedback \" id=\"submission_feedback_273825134dcc433abbb012fa5e660d4d\">\n        <span class=\"sr\">Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button.</span>\n      </div>\n    </div>\n  </div>\n    \n\n\n<div class=\"notification warning notification-gentle-alert\n      is-hidden\"\n     tabindex=\"-1\">\n    <span class=\"icon fa fa-exclamation-circle\" aria-hidden=\"true\"></span>\n    <span class=\"notification-message\" aria-describedby=\"273825134dcc433abbb012fa5e660d4d-problem-title\">\n    </span>\n    <div class=\"notification-btn-wrapper\">\n        <button type=\"button\" class=\"btn btn-default btn-small notification-btn review-btn sr\">Review</button>\n    </div>\n</div>\n\n            \n\n\n<div class=\"notification success notification-submit\n      \"\n     tabindex=\"-1\">\n    <span class=\"icon fa fa-check\" aria-hidden=\"true\"></span>\n    <span class=\"notification-message\" aria-describedby=\"273825134dcc433abbb012fa5e660d4d-problem-title\">Correct (2/2 points)\n    </span>\n    <div class=\"notification-btn-wrapper\">\n        <button type=\"button\" class=\"btn btn-default btn-small notification-btn review-btn sr\">Review</button>\n    </div>\n</div>\n\n    \n\n\n<div class=\"notification warning notification-save\n      is-hidden\"\n     tabindex=\"-1\">\n    <span class=\"icon fa fa-save\" aria-hidden=\"true\"></span>\n    <span class=\"notification-message\" aria-describedby=\"273825134dcc433abbb012fa5e660d4d-problem-title\">None\n    </span>\n    <div class=\"notification-btn-wrapper\">\n        <button type=\"button\" class=\"btn btn-default btn-small notification-btn review-btn sr\">Review</button>\n    </div>\n</div>\n\n    \n    \n\n\n<div class=\"notification general notification-show-answer\n      is-hidden\"\n     tabindex=\"-1\">\n    <span class=\"icon fa fa-info-circle\" aria-hidden=\"true\"></span>\n    <span class=\"notification-message\" aria-describedby=\"273825134dcc433abbb012fa5e660d4d-problem-title\">Answers are displayed within the problem\n    </span>\n    <div class=\"notification-btn-wrapper\">\n        <button type=\"button\" class=\"btn btn-default btn-small notification-btn review-btn sr\">Review</button>\n    </div>\n</div>\n\n</div>\n\n<script>\n    function emit_event(message) {\n        parent.postMessage(message, '*');\n    }\n</script>\n",
    "progress_changed": true,
    "current_score": 2,
    "total_possible": 2,
    "attempts_used": 1
}

Screenshot 2024-05-16 at 14.56.34.png Image Added

Versions Compared

Old Version 6

New Version 7

Key