The new visual problem editor is now available. We have gone through a six-week long beta testing period and have resolved all blocking issues.
Objective - Update the CAPA problem editor in the course authoring experience with a more interactive WYSIWYG editor. In doing so, we aim to improve the problem authoring experience for partners by offering a more intuitive and easy to use UI. Additionally, we are retiring the need for markdown when creating problems.
On click of the “problem” button under the “Add New Component” section in Studio, the user is brought to a new page where they can select one of several problem types (select problem type page below).
Each problem type, when selected on the select problem type page, reveals a preview on the right hand side of the page.
Advanced Problem Types Selector: A user can select an advanced problem type and be taken to the raw editor.
Problem types are changed using the “Type” setting to the right of the editor
Multi-select questions were previously called checkbox questions
Single select questions were previously called multiple choice questions
Hints and feedback can still be used with the same problem types as before, but these configurable settings now exist as editable widgets for greater ease of use
Content previously written in markdown will now present/render in the visual editor, and will be preserved safely
Questions are entered in the provided question field with TinyMCE tools for improved styling
Editing tools include a button to label the question for screen readers for improved accessibility
Course authors can specify correct answers using checkboxes and radio buttons instead of manually specifying these using markdown
Adding and deleting answer choices, answer-specific feedback, group feedback, and hints can all be edited visually using buttons and text fields in the UI
Problem settings, which previously lived on a separate screen, have been included in the main editing experience and can be configured side by side and in-context with the problem authoring experience
Settings with a pre-set default value now include links to the advanced settings page where the default value can be configured
Below the question field is an explanation field in which an explanation for the correct answer can be provided. The TinyMCE toolbar is included here as well.There is a tolerance setting widget and an answer range option on Numerical Input Problems
When selecting “advanced problem types” within the “select problem type” page, user is sent to raw editor
Inside the visual editor, there is a “show advanced settings” button which shows additional settings and a link to get to the advanced editor. That link takes you to the advanced editor
A course author will be taken to the advanced editor page if the parser cannot render the problem options in the visual editor experience
Raw OLX Editing Capacity: the Code Editor is inside the raw editor. The block’s OLX can be edited there.
It uses xml syntax highlighting (not HTML)
*the Raw Text Editor still works for HTML editing
Upgrade to the Palm release, enable the Course Authoring MFE feature flag
Add the new_core_editors.use_new_problem_editor waffleflag to the CMS Django
Admin
Set the value of the waffleflag to “Yes” for everyone