+
{showAnswerSection}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
index 46d2c884b..72c743950 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
@@ -3,33 +3,8 @@
exports[`ShowAnswerCard snapshot snapshot: show answer setting card 1`] = `
-
)}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
index 693eadd2f..1d97f34e1 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -9,6 +9,35 @@
}
}
+.tinyMceWidget {
+ .tox-tinymce {
+ border-radius: 0.375rem;
+ }
+
+ .tox {
+ .tox-toolbar__primary {
+ background: none;
+ }
+ }
+
+ .tox-statusbar {
+ border-top: none;
+ }
+
+ .tox-toolbar__group:not(:last-of-type) {
+ // TODO: Find a way to override the border without !important
+ border-right: none !important;
+
+ &:after {
+ content: '';
+ position: relative;
+ left: 5px;
+ border: 1px solid #eae6e5;
+ height: 24px;
+ }
+ }
+}
+
// overrides paragon in order to make checked radio and checkboxes green
$checked-color: '%230D7D4D';
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.js b/src/editors/containers/ProblemEditor/data/OLXParser.js
index 0693c79f6..94756a475 100644
--- a/src/editors/containers/ProblemEditor/data/OLXParser.js
+++ b/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;
}
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
index 93c2a3567..ea63ed5c7 100644
--- a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
+++ b/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;
diff --git a/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js b/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
index 38ab4f4c6..0f9ed33e1 100644
--- a/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
+++ b/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
@@ -1,13 +1,12 @@
export const checkboxesWithFeedbackAndHints = {
- solution: `
+
+
-
-
-
-
-
-
-
`,
+ `,
question: 'Explanation
+ solution: `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.
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.
You can add an optional tip or note related to the prompt like this.', answers: { A: 'a correct answer
', @@ -52,7 +51,7 @@ export const dropdownWithFeedbackAndHints = { }; export const multipleChoiceWithFeedbackAndHints = { - solution: '', + solution: 'You can add a solution
', question: '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.
You can add an optional tip or note related to the prompt like this.', answers: { A: 'an incorrect answer
', diff --git a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js index ea07668ad..3cbd61a92 100644 --- a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js +++ b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js @@ -45,15 +45,13 @@ export const getCheckboxesOLXWithFeedbackAndHintsOLX = () => ({ value: 'If you add more than one hint, a different hint appears each time learners select the hint button.
', }, ], - solutionExplanation: `
-
`,
+ Explanation
+ solutionExplanation: `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.
-
an incorrect answer
You can specify optional feedback for none, a subset, or all of the answers.
You can add a solution
+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.
If you add more than one hint, a different hint appears each time learners select the hint button.
', }, ], + solutionExplanation: 'You can add a solution
', data: { answers: [ { @@ -302,6 +304,12 @@ export const multipleChoiceWithFeedbackAndHintsOLX = {an incorrect answer
You can specify optional feedback for none, a subset, or all of the answers.
+
+Explanation
+You can add a solution
+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.