Feat add templates for default problems after problem select (#185)

https://2u-internal.atlassian.net/browse/TNL-10316 is the relevant bug.

Problems have default values when created using the select type page.

src/editors/data/constants/advancedOlxTemplates/index.js

@@ -0,0 +1,12 @@
+import { StrictDict } from '../../../utils';
+import circuitSchematic from './circuitschematic';
+import customGrader from './customgrader';
+import dragAndDrop from './drag_and_drop';
+import formulaResponse from './formularesponse';
+import imageResponse from './imageresponse';
+import jsInputResponse from './jsinput_response';
+import problemWithHint from './problem_with_hint';
+
+export default StrictDict({
+  circuitSchematic, customGrader, dragAndDrop, formulaResponse, imageResponse, jsInputResponse, problemWithHint,
+});

src/editors/data/constants/basicOlxTemplates/dropdown.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+export const dropdown = `<problem>
+<optionresponse>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<optioninput>
+    <option correct="False">an incorrect answer</option>
+    <option correct="True">the correct answer</option>
+    <option correct="False">an incorrect answer</option>
+  </optioninput>
+</optionresponse>
+</problem>`
+
+export default dropdown;

src/editors/data/constants/basicOlxTemplates/index.js

@@ -0,0 +1,10 @@
+import { StrictDict } from '../../../utils';
+import dropdown from './dropdown';
+import multiSelect from './multiSelect';
+import numeric from './numeric';
+import singleSelect from './singleSelect';
+import textInput from './textInput';
+
+export default StrictDict({
+  dropdown, multiSelect, numeric, singleSelect, textInput,
+});

src/editors/data/constants/basicOlxTemplates/multiSelect.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+ const multiSelect= `<problem>
+<choiceresponse>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<checkboxgroup>
+    <choice correct="true">a correct answer</choice>
+    <choice correct="false">an incorrect answer</choice>
+    <choice correct="false">an incorrect answer</choice>
+    <choice correct="true">a correct answer</choice>
+  </checkboxgroup>
+</choiceresponse>
+</problem>`
+export default multiSelect;

src/editors/data/constants/basicOlxTemplates/numeric.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+export const numeric = `<problem>
+<numericalresponse answer="100">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<responseparam type="tolerance" default="5"/>
+  <formulaequationinput/>
+</numericalresponse>
+</problem>`
+
+export default numeric;

src/editors/data/constants/basicOlxTemplates/singleSelect.js

@@ -0,0 +1,14 @@
+/* eslint-disable */
+export const singleSelect = `<problem>
+<multiplechoiceresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <description>You can add an optional tip or note related to the prompt like this.</description>
+    <choicegroup>
+        <choice correct="false">an incorrect answer</choice>
+        <choice correct="true">the correct answer</choice>
+        <choice correct="false">an incorrect answer</choice>
+    </choicegroup>
+</multiplechoiceresponse>
+</problem>`
+export default singleSelect;

src/editors/data/constants/basicOlxTemplates/textInput.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+const textInput =`<problem>
+<stringresponse answer="the correct answer" type="ci">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<additional_answer answer="optional acceptable variant of the correct answer"/>
+  <textline size="20"/>
+</stringresponse>
+</problem>`
+export default textInput;

src/editors/data/constants/problem.js

@@ -4,13 +4,8 @@ import multiSelect from '../images/multiSelect.png';
 import dropdown from '../images/dropdown.png';
 import numericalInput from '../images/numericalInput.png';
 import textInput from '../images/textInput.png';
-import { circuitSchematic } from './olxTemplates/circuitschematic';
-import { customGrader } from './olxTemplates/customgrader';
-import { dragAndDrop } from './olxTemplates/drag_and_drop';
-import { formulaResponse } from './olxTemplates/formularesponse';
-import { imageResponse } from './olxTemplates/imageresponse';
-import { jsInputResponse } from './olxTemplates/jsinput_response';
-import { problemWithHint } from './olxTemplates/problem_with_hint';
+import advancedOlxTemplates from './advancedOlxTemplates';
+import basicOlxTemplates from './basicOlxTemplates';
 
 export const ProblemTypeKeys = StrictDict({
   SINGLESELECT: 'multiplechoiceresponse',
@@ -29,6 +24,8 @@ export const ProblemTypes = StrictDict({
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/multiple_choice.html',
     prev: ProblemTypeKeys.TEXTINPUT,
     next: ProblemTypeKeys.MULTISELECT,
+    template: basicOlxTemplates.singleSelect,
+
   },
   [ProblemTypeKeys.MULTISELECT]: {
     title: 'Multi Select Problem',
@@ -37,6 +34,7 @@ export const ProblemTypes = StrictDict({
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/checkbox.html',
     next: ProblemTypeKeys.DROPDOWN,
     prev: ProblemTypeKeys.SINGLESELECT,
+    template: basicOlxTemplates.multiSelect,
   },
   [ProblemTypeKeys.DROPDOWN]: {
     title: 'Dropdown Problem',
@@ -45,6 +43,7 @@ export const ProblemTypes = StrictDict({
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/dropdown.html',
     next: ProblemTypeKeys.NUMERIC,
     prev: ProblemTypeKeys.MULTISELECT,
+    template: basicOlxTemplates.dropdown,
   },
   [ProblemTypeKeys.NUMERIC]: {
     title: 'Numeric Response Problem',
@@ -53,6 +52,7 @@ export const ProblemTypes = StrictDict({
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/numerical_input.html',
     next: ProblemTypeKeys.TEXTINPUT,
     prev: ProblemTypeKeys.DROPDOWN,
+    template: basicOlxTemplates.numeric,
   },
   [ProblemTypeKeys.TEXTINPUT]: {
     title: 'Text Input Problem',
@@ -61,6 +61,7 @@ export const ProblemTypes = StrictDict({
     helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/text_input.html',
     prev: ProblemTypeKeys.NUMERIC,
     next: ProblemTypeKeys.SINGLESELECT,
+    template: basicOlxTemplates.textInput,
   },
   [ProblemTypeKeys.ADVANCED]: {
     title: 'Advanced Problem',
@@ -90,37 +91,37 @@ export const AdvanceProblems = StrictDict({
   [AdvanceProblemKeys.CIRCUITSCHEMATIC]: {
     title: 'Circuit schematic builder',
     status: 'Not supported',
-    template: circuitSchematic,
+    template: advancedOlxTemplates.circuitSchematic,
   },
   [AdvanceProblemKeys.JSINPUT]: {
     title: 'Custom JavaScript display and grading',
     status: '',
-    template: jsInputResponse,
+    template: advancedOlxTemplates.jsInputResponse,
   },
   [AdvanceProblemKeys.CUSTOMGRADER]: {
     title: 'Custom Python-evaluated input',
     status: 'Provisional',
-    template: customGrader,
+    template: advancedOlxTemplates.customGrader,
   },
   [AdvanceProblemKeys.DRAGANDDROP]: {
     title: 'Drag and drop (deprecated version)',
     status: 'Not supported',
-    template: dragAndDrop,
+    template: advancedOlxTemplates.dragAndDrop,
   },
   [AdvanceProblemKeys.IMAGE]: {
     title: 'Image mapped input',
     status: 'Not supported',
-    template: imageResponse,
+    template: advancedOlxTemplates.imageResponse,
   },
   [AdvanceProblemKeys.FORMULA]: {
     title: 'Math expression input',
     status: '',
-    template: formulaResponse,
+    template: advancedOlxTemplates.formulaResponse,
   },
   [AdvanceProblemKeys.PROBLEMWITHHINT]: {
     title: 'Problem with adaptive hint',
     status: 'Not supported',
-    template: problemWithHint,
+    template: advancedOlxTemplates.problemWithHint,
   },
 });
 

src/editors/data/redux/problem/reducers.js

@@ -144,10 +144,6 @@ const problem = createSlice({
       ...state,
       problemType: null,
     }),
-    setProblemType: (state, { payload: { selected } }) => ({
-      ...state,
-      problemType: selected,
-    }),
   },
 });
 

src/editors/data/services/cms/mockApi.js

@@ -9,7 +9,8 @@ export const fetchBlockById = ({ blockId, studioEndpointUrl }) => {
   let data = {};
   if (blockId === 'html-block-id') {
     data = {
-      data: '<p>Test prompt content</p>',
+      data: `<problem>
+      </problem>`,
       display_name: 'My Text Prompt',
       metadata: {
         display_name: 'Welcome!',