feat: move explanation to main body of editor (#287)

src/editors/containers/ProblemEditor/data/OLXParser.js

@@ -350,7 +350,20 @@ export class OLXParser {
   getSolutionExplanation(problemType) {
     if (!_.has(this.problem, `${problemType}.solution`)) { return null; }
 
-    const solution = _.get(this.problem, `${problemType}.solution`);
+    let solution = _.get(this.problem, `${problemType}.solution`);
+    const wrapper = Object.keys(solution)[0];
+    if (Object.keys(solution).length === 1 && wrapper === 'div') {
+      const parsedSolution = {};
+      Object.entries(solution.div).forEach(([key, value]) => {
+        if (key !== '@_class') {
+          if (key === 'p') {
+            value.shift();
+          }
+          parsedSolution[key] = value;
+        }
+      });
+      solution = parsedSolution;
+    }
     const solutionString = this.builder.build(solution);
     return solutionString;
   }

src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js

@@ -56,10 +56,16 @@ class ReactStateOLXParser {
   addSolution() {
     const { solution } = this.editorObject;
     if (!solution || solution.length <= 0) { return {}; }
+    const solutionTitle = { '#text': 'Explanation' };
     const parsedSolution = this.parser.parse(solution);
+    const paragraphs = parsedSolution.p;
+    const withWrapper = _.isArray(paragraphs) ? [solutionTitle, ...paragraphs] : [solutionTitle, paragraphs];
     const solutionObject = {
       solution: {
-        ...parsedSolution,
+        div: {
+          '@_class': 'detailed-solution',
+          p: withWrapper,
+        },
       },
     };
     return solutionObject;

src/editors/containers/ProblemEditor/data/mockData/editorTestData.js

@@ -1,13 +1,12 @@
 export const checkboxesWithFeedbackAndHints = {
-  solution: `<div class="detailed-solution">
-    <p>Explanation</p>
+  solution: `
     <p>
         You can form a voltage divider that evenly divides the input
         voltage with two identically valued resistors, with the sampled
         voltage taken in between the two.
     </p>
     <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
-  </div>`,
+  `,
   question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback 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><em>You can add an optional tip or note related to the prompt like this.</em>',
   answers: {
     A: '<p>a correct answer</p>',
@@ -52,7 +51,7 @@ export const dropdownWithFeedbackAndHints = {
 };
 
 export const multipleChoiceWithFeedbackAndHints = {
-  solution: '',
+  solution: '<p>You can add a solution</p>',
   question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback 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><em>You can add an optional tip or note related to the prompt like this.</em>',
   answers: {
     A: '<p>an incorrect answer</p>',

src/editors/containers/ProblemEditor/data/mockData/olxTestData.js

@@ -45,15 +45,13 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({
       value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
     },
   ],
-  solutionExplanation: `<div class="detailed-solution">
-  <p>Explanation</p>
+  solutionExplanation: `
   <p>
       You can form a voltage divider that evenly divides the input
       voltage with two identically valued resistors, with the sampled
       voltage taken in between the two.
   </p>
-  <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
-</div>`,
+  <p><img src="/static/images/voltage_divider.png" alt=""></img></p>`,
   data: {
     answers: [
       {
@@ -251,6 +249,9 @@ export const multipleChoiceWithFeedbackAndHintsOLX = {
     <choice correct="false"><p>an incorrect answer</p><choicehint><p>You can specify optional feedback for none, a subset, or all of the answers.</></choicehint>
 </choice>
   </choicegroup>
+  <solution>
+    <p>You can add a solution</p>
+  </solution>
 </multiplechoiceresponse>
 <demandhint>
   <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
@@ -266,6 +267,7 @@ export const multipleChoiceWithFeedbackAndHintsOLX = {
     value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
   },
   ],
+  solutionExplanation: '<p>You can add a solution</p>',
   data: {
     answers: [
       {
@@ -302,6 +304,12 @@ export const multipleChoiceWithFeedbackAndHintsOLX = {
 <p>an incorrect answer </p>       <choicehint><p>You can specify optional feedback for none, a subset, or all of the answers.</p></choicehint>
       </choice>
     </choicegroup>
+    <solution>
+    <div class="detailed-solution">
+  <p>Explanation</p>
+  <p>You can add a solution</p>
+</div>
+</solution>
   </multiplechoiceresponse>
   <demandhint>
     <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>