A New Problem Editor Experience (Palm)#
In the latest Open edX release, Palm, the Problem Editor has been enhanced to provide a smoother editing experience for Studio authors.
What has changed?#
In Studio, selecting Problem from the component selection widget:
brings you to a full page where you can select which problem type you can use:
The right side of the page visually shows an example of what the problem type looks like, as well as a link to documentation.
Selecting a problem type brings you to a full-page editing screen, where you can easily input the question, an explanation of the answer, the answer choices, scores & attempts, and hints.
The problem renders in the LMS as usual:
For authors who prefer to customize problems using OLX, the new editing experience retains this function by clicking on “Switch to Advanced Editor” (nested under “Advanced Settings” on the right sidebar). It’s worth noting that once a problem has been converted to OLX via the Advanced Editor, it’s not possible to revert to the Visual Editor.
For a description of all the visual editor capabilities, plus more on raw OLX editing, see the end of this article.
How can I get the new editor experience?#
The editor experience is available as of the Open edX Palm release. Upgrading your local installation to Palm will guarantee that your system is up-to-date with the latest features, including this editor.
Once you’ve upgraded to Palm, you’ll need a system administrator to perform the following steps:
Enable the Course Authoring MFE feature flag
Add the
new_core_editors.use_new_problem_editor
waffleflag to the CMS Django AdminSet the value of the waffleflag to “Yes” for everyone
Visual Editor Features: What’s New#
Select Problem Type#
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. Selecting the problem type:
Then, advanced problem type can be selected:
Visual 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:
Raw OLX Editor#
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)
Note: the Raw Text Editor still works for HTML editing