[2U] New Visual Problem Editor

Created by Brad Brown
Last updated: Jun 07, 2023 by Sarina Canelake
3 min read

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.

 

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. 

 

 

 

 

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)

*the Raw Text Editor still works for HTML editing

To enable the new Problem Editor experience on your Open edX instance:

  • 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