[FC-0047] - CAPA problem offline mode

Owned by Vladyslav Zadorozhnii
Last updated: Jun 17, 2024 by Glib Glugovskiy
6 min read

Table of CAPA problem actions:

Action

Description

Screenshot

Action

Description

Screenshot

Submit

  1. Submission request is sent. Result is new rendered template with feedback for user.

  2. Event problem_check is sent

URL: /event

event_type: "problem_check", event:"input_0250aa37496941b5800b26aba03f2b4e_2_1%5B%5D=choice_0", courserun_key: "course-v1:edX+DemoX+2024", page: "http://preview.localhost:18000/courses/course-v1:edX+DemoX+2024/courseware/d8a6192ade314473a78242dfeedfbf5b/edx_introduction/4?activate_block_id=block-v1%3AedX%2BDemoX%2B2024%2Btype%40vertical%2Bblock%40db5f39d64a5145df99df4e227c6e925a"

Response: success

  1. When submission request is handled then problem_graded event is sent

URL: /event

event_type: "problem_graded" event: ["input_0250aa37496941b5800b26aba03f2b4e_2_1%5B%5D=choice_0","\n\n\n\n<h3 class=\"hd hd-3 problem-header\" id=\"0250aa37496941b5800b26aba03f2b4e-problem-title\" aria-describedby=\"block-v1:edX+DemoX+2024+type@problem+block@0250aa37496941b5800b26aba03f2b4e-problem-progress\" tabindex=\"-1\">\n Multi-select\n</h3>\n\n<div class=\"problem-progress\" id=\"block-v1:edX+DemoX+2024+type@problem+block@0250aa37496941b5800b26aba03f2b4e-problem-progress\"></div>\n\n<div class=\"problem\">\n <div><div class=\"wrapper-problem-response\" tabindex=\"-1\" aria-label=\"Question 1\" role=\"group\"><div>QUESTION MULTI</div><div class=\"choicegroup capa_inputtype\" id=\"inputtype_0250aa37496941b5800b26aba03f2b4e_2_1\">\n <fieldset aria-describedby=\"status_0250aa37496941b5800b26aba03f2b4e_2_1\">\n \n <div class=\"field\">\n <input type=\"checkbox\" name=\"input_0250aa37496941b5800b26aba03f2b4e_2_1[]\" id=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_0\" class=\"field-input input-checkbox submitted\" value=\"choice_0\" checked=\"true\"/><label id=\"0250aa37496941b5800b26aba03f2b4e_2_1-choice_0-label\" for=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_0\" class=\"response-label field-label label-inline choicegroup_correct\" aria-describedby=\"status_0250aa37496941b5800b26aba03f2b4e_2_1\">\n <div>\n <div>MY Q</div>\n </div>\n </label>\n </div>\n \n <div class=\"field\">\n <input type=\"checkbox\" name=\"input_0250aa37496941b5800b26aba03f2b4e_2_1[]\" id=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_1\" class=\"field-input input-checkbox\" value=\"choice_1\"/><label id=\"0250aa37496941b5800b26aba03f2b4e_2_1-choice_1-label\" for=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_1\" class=\"response-label field-label label-inline\" aria-describedby=\"status_0250aa37496941b5800b26aba03f2b4e_2_1\">\n <div>\n <div>Q2</div>\n </div>\n </label>\n </div>\n \n <div class=\"field\">\n <input type=\"checkbox\" name=\"input_0250aa37496941b5800b26aba03f2b4e_2_1[]\" id=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_2\" class=\"field-input input-checkbox\" value=\"choice_2\"/><label id=\"0250aa37496941b5800b26aba03f2b4e_2_1-choice_2-label\" for=\"input_0250aa37496941b5800b26aba03f2b4e_2_1_choice_2\" class=\"response-label field-label label-inline\" aria-describedby=\"status_0250aa37496941b5800b26aba03f2b4e_2_1\">\n <div>\n <div>Q something</div>\n </div>\n </label>\n </div>\n <span id=\"answer_0250aa37496941b5800b26aba03f2b4e_2_1\"/>\n </fieldset>\n <div class=\"indicator-container\">\n \n\n<span class=\"status correct\" id=\"status_0250aa37496941b5800b26aba03f2b4e_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 </div>\n <span class=\"message\" aria-describedby=\"0250aa37496941b5800b26aba03f2b4e_2_1-legend\" tabindex=\"-1\"><div class=\"feedback-hint-correct\"><div class=\"explanation-title\">Answer</div><span class=\"hint-label\">Correct: </span><div class=\"feedback-hint-multi\"><div class=\"hint-text\"><div>selected</div></div></div></div></span>\n</div><div class=\"solution-span\">\n <span id=\"solution_0250aa37496941b5800b26aba03f2b4e_solution_1\"/>\n</div></div>\n</div>\n <div class=\"action\">\n <input type=\"hidden\" name=\"problem_id\" value=\"Multi-select\" />\n <div class=\"problem-hint\">\n \n\n\n<div class=\"notification problem-hint notification-hint\n is-hidden\"\n tabindex=\"-1\">\n <span class=\"icon fa fa-question\" aria-hidden=\"true\"></span>\n <span class=\"notification-message\" aria-describedby=\"0250aa37496941b5800b26aba03f2b4e-problem-title\">\n </span>\n <div class=\"notification-btn-wrapper\">\n <button type=\"button\" class=\"btn btn-default btn-small notification-btn hint-button\">\n Next Hint\n </button>\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 <div class=\"problem-action-buttons-wrapper\">\n <span class=\"problem-action-button-wrapper\">\n <button type=\"button\" class=\"hint-button problem-action-btn btn-link btn-small\" data-value=\"Hint\" >Hint</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_0250aa37496941b5800b26aba03f2b4e\" >\n <span class=\"submit-label\">Submit</span>\n </button>\n\n <div class=\"submission-feedback \" id=\"submission_feedback_0250aa37496941b5800b26aba03f2b4e\">\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=\"0250aa37496941b5800b26aba03f2b4e-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=\"0250aa37496941b5800b26aba03f2b4e-problem-title\">Correct (3/3 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=\"0250aa37496941b5800b26aba03f2b4e-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=\"0250aa37496941b5800b26aba03f2b4e-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"] courserun_key: "course-v1:edX+DemoX+2024" page: "http://preview.localhost:18000/courses/course-v1:edX+DemoX+2024/courseware/d8a6192ade314473a78242dfeedfbf5b/edx_introduction/4?activate_block_id=block-v1%3AedX%2BDemoX%2B2024%2Btype%40vertical%2Bblock%40db5f39d64a5145df99df4e227c6e925a"

Response: success

 

Example of the problem check request from dev server:

Cookies required to pass auth:

{ "Request Cookies": { "csrftoken": "jhncoH9I8NUCoaf27RcvcQVAVl3zuWt5", "openedx-language-preference": "en", "sessionid": "1|pbfhsbsg2ro90s59gqi9ojldm6kcl99q|DH6vAbOxAqUf|ImRhMjY2OTFmN2E3ZWE3N2EwZDE3NDE1ZmFjNzU1NDhhNDQ3NmJjMzA2OTg3ZDYzNmJjYjYzNWVmMjk1ODkxMTMi:1sJ8vM:LghaAMVH6YE3Rg275_yYIhxZWIKEvwGBvtoc_3rHqDY" } }

 

image-20240503-141934.png

 

Hint

  1. hint_button request is sent

  2. no events here

 

image-20240503-142739.png

 

Reset

  1. Reset request is sent and refreshed XBlock is obtained

  2. Event problem_reset is sent

URL: /event

Response: success

 

 

 

Show answer

  1. Show answer request is sent. Answers and explanation are obtained as HTML fragments

  2. Event problem_show is sent

URL: /event

Response: success

 

 

problem_get

is used for MatLab

 

problem_save

is used for Matlab