Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: parser changes (#356)

Browse Source
This commit is contained in:
Raymond Zhou
2023-06-27 12:50:07 -04:00
committed by GitHub
parent 714c946f0f
commit 86b67022ba
8 changed files with 253 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx
View File

@@ -18,7 +18,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
getLocale: jest.fn(),
}));
jest.mock('./AnswerOption', () => function () {
jest.mock('./AnswerOption', () => function mockAnswerOption() {
return <div>MockAnswerOption</div>;
});

10
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
View File

@@ -4,7 +4,7 @@ exports[`AnswersContainer render snapshot: numeric problems: answer range/answer
<div
className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
>
<Component
<mockAnswerOption
answer={
Object {
"correct": true,
@@ -108,7 +108,7 @@ exports[`AnswersContainer render snapshot: numeric problems: answer range/answer
<div
className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
>
<Component
<mockAnswerOption
answer={
Object {
"correct": true,
@@ -122,7 +122,7 @@ exports[`AnswersContainer render snapshot: numeric problems: answer range/answer
hasSingleAnswer={false}
key="A"
/>
<Component
<mockAnswerOption
answer={
Object {
"correct": true,
@@ -200,7 +200,7 @@ exports[`AnswersContainer render snapshot: renders correctly with answers 1`] =
<div
className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
>
<Component
<mockAnswerOption
answer={
Object {
"correct": true,
@@ -211,7 +211,7 @@ exports[`AnswersContainer render snapshot: renders correctly with answers 1`] =
hasSingleAnswer={false}
key="a"
/>
<Component
<mockAnswerOption
answer={
Object {
"correct": true,

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx
View File

@@ -16,7 +16,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
}));
// eslint-disable-next-line react/prop-types
jest.mock('../../SettingsOption', () => function ({ children, summary }) {
jest.mock('../../SettingsOption', () => function mockSettingsOption({ children, summary }) {
return <div className="SettingsOption" data-testid="Settings-Option">{summary}{children}</div>;
});

27
src/editors/containers/ProblemEditor/data/OLXParser.js
View File

@@ -28,18 +28,6 @@ export const nonQuestionKeys = [
'textline',
];
export const richTextFormats = [
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'div',
'p',
'pre',
];
export const responseKeys = [
'multiplechoiceresponse',
'numericalresponse',
@@ -480,12 +468,13 @@ export class OLXParser {
}
questionArray.push(tag);
} else if (responseKeys.includes(tagName)) {
/* <label> and <description> tags often are both valid olx as siblings or children of response type tags.
They, however, do belong in the question, so we append them to the question.
*/
/* Tags that are not used for other parts of the question such as <solution> or <choicegroup>
should be included in the question. These include but are not limited to tags like <label>,
<description> and <table> as they often are both valid olx as siblings or children of response
type tags. */
tag[tagName].forEach(subTag => {
const subTagName = Object.keys(subTag)[0];
if (subTagName === 'label' || subTagName === 'description' || richTextFormats.includes(subTagName)) {
if (!nonQuestionKeys.includes(subTagName)) {
questionArray.push(subTag);
}
});
@@ -544,6 +533,12 @@ export class OLXParser {
solutionArray.push(tag);
}
});
} else {
solutionBody.solution.forEach(tag => {
if (_.get(Object.values(tag)[0][0], '#text', null) !== 'Explanation') {
solutionArray.push(tag);
}
});
}
const solutionString = this.richTextBuilder.build(solutionArray);
return solutionString;

16
src/editors/containers/ProblemEditor/data/OLXParser.test.js
View File

@@ -21,6 +21,8 @@ import {
htmlEntityTestOLX,
numberParseTestOLX,
solutionExplanationTest,
solutionExplanationWithoutDivTest,
tablesInRichTextTest,
} from './mockData/olxTestData';
import { ProblemTypeKeys } from '../../../data/constants/problem';
@@ -294,6 +296,14 @@ describe('OLXParser', () => {
expect(question.trim()).toBe(labelDescriptionQuestionOLX.question);
});
});
describe('given olx with table tags', () => {
const olxparser = new OLXParser(tablesInRichTextTest.rawOLX);
const problemType = olxparser.getProblemType();
const question = olxparser.parseQuestions(problemType);
it('should append the table to the question', () => {
expect(question.trim()).toBe(tablesInRichTextTest.question);
});
});
});
describe('getSolutionExplanation()', () => {
describe('for checkbox questions', () => {
@@ -311,5 +321,11 @@ describe('OLXParser', () => {
const explanation = olxparser.getSolutionExplanation(problemType);
expect(explanation).toBe(solutionExplanationTest.solutionExplanation);
});
it('should parse solution fields without div', () => {
const olxparser = new OLXParser(solutionExplanationWithoutDivTest.rawOLX);
const problemType = olxparser.getProblemType();
const explanation = olxparser.getSolutionExplanation(problemType);
expect(explanation).toBe(solutionExplanationWithoutDivTest.solutionExplanation);
});
});
});

216
src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
View File

@@ -539,7 +539,9 @@ export const textInputWithFeedbackAndHintsOLX = {
},
},
},
question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input 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>',
question: `<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input 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>`,
buildOLX: `<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 with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
@@ -769,7 +771,9 @@ export const labelDescriptionQuestionOLX = {
</problem>`,
question: `<p style="text-align: center;"><img height="274" width="" src="/static/boiling_eggs_water_system.png" alt="boiling eggs: water system"></img></p>
<label>Taking the system as just the <b>water</b>, as indicated by the red dashed line, what would be the correct expression for the first law of thermodynamics applied to this system?</label><em>Watch out, boiling water is hot</em>`,
<label>Taking the system as just the <b>water</b>, as indicated by the red dashed line, what would be the correct expression for the first law of thermodynamics applied to this system?</label>
<em>Watch out, boiling water is hot</em>`,
};
export const htmlEntityTestOLX = {
@@ -804,7 +808,8 @@ export const htmlEntityTestOLX = {
},
],
},
question: `<p>What is the content of the register x2 after executing the following three lines of instructions?</p><p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>`,
question: `<p>What is the content of the register x2 after executing the following three lines of instructions?</p>
<p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>`,
solutionExplanation: `<p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions&#160;&#160;&#160;&#160;comment<br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = 0x1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x2 = x1 &lt;&lt; 4 = 0x10<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = x2 - x1 = 0x10 - 0x01 = 0xf</strong></span></p>`,
};
@@ -880,3 +885,208 @@ export const solutionExplanationTest = {
solutionExplanation: `\n
This loop will iterate <code class="lang-matlab">99</code> times, but the length of <code class="lang-matlab">q</code> will not be <code class="lang-matlab">99</code> due to indexing with the value <code class="lang-matlab">2*i -1</code>. On the last iteration, <code class="lang-matlab">i = 99</code>, so <code class="lang-matlab">2*i - 1 = 2*78 - 1 = 197</code>. This will be the last position filled in <code class="lang-matlab">q</code>, so the answer is <code class="lang-matlab">197</code>.\n `,
};
export const solutionExplanationWithoutDivTest = {
rawOLX: `<problem display_name="For loop" markdown="null" max_attempts="3" showanswer="answered" weight="0.0">
<multiplechoiceresponse>
<p>Considering a list z=[8,12,2,9,7] and the following for loop:</p>
<b>
<p>for i in z: </p>
<p> y=i+1 </p>
<p> print(y)</p>
</b>
<label>What would be the result of running this code?</label>
<description>Select the correct answer </description>
<choicegroup type="MultipleChoice">
<choice correct="false">8 </choice>
<choice correct="false">[9,13,3,10,8] </choice>
<choice correct="true">9<br>
13</br>
3
<br>10</br>
8 </choice>
</choicegroup>
<solution>
<p/>
<img src="https://courses.edx.org/asset-v1:MITx+CTL.SC0x+1T2023+type@asset+block@Screenshot_2022-12-19_205625.png"/>
<p>How would you adjust your code to get the other results? We encourage you to try different for loops and share them in the discussion forum.</p>
</solution>
</multiplechoiceresponse>
</problem>`,
solutionExplanation: `
<p></p>
<img src="https://courses.edx.org/asset-v1:MITx+CTL.SC0x+1T2023+type@asset+block@Screenshot_2022-12-19_205625.png"></img>
<p>How would you adjust your code to get the other results? We encourage you to try different for loops and share them in the discussion forum.</p>
`,
};
export const tablesInRichTextTest = {
rawOLX: `<problem>
<choiceresponse>
<p>
The table shows the number of protein-coding genes, chromosomes, and bases in a range of eukaryotic species.
</p>
<table class="chart" summary="A list of eukaryotic organisms and their genome contents." label="Four columns. The first column lists the species, the second column lists the number of protein-coding genes, the third column lists the number of chromosomes, and the fourth column lists the genome size in bases." width="100%">
<caption>Eukaryotic Genomes Comparison</caption>
<tbody>
<tr>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Species</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Protein-coding genes</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Chromosomes</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Bases</b>
</th>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Yeast (<i>S. cerevisiae</i>)</td>
<td style="text-align: center; border: 1px solid black;">~5,800</td>
<td style="text-align: center; border: 1px solid black;">16</td>
<td style="text-align: center; border: 1px solid black;">~12 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Arabidopsis (<i>A. thaliana</i>)</td>
<td style="text-align: center; border: 1px solid black;">~27,000</td>
<td style="text-align: center; border: 1px solid black;">5</td>
<td style="text-align: center; border: 1px solid black;">~115 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Rice (<i>O. sativa</i>)</td>
<td style="text-align: center; border: 1px solid black;">~41,000</td>
<td style="text-align: center; border: 1px solid black;">12</td>
<td style="text-align: center; border: 1px solid black;">~390 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Worm (<i>C. elegans</i>)</td>
<td style="text-align: center; border: 1px solid black;">~19,000</td>
<td style="text-align: center; border: 1px solid black;">6</td>
<td style="text-align: center; border: 1px solid black;">~100 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Fly (<i>D. melanogaster</i>)</td>
<td style="text-align: center; border: 1px solid black;">~14,000</td>
<td style="text-align: center; border: 1px solid black;">4</td>
<td style="text-align: center; border: 1px solid black;">~165 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Mouse (<i>M. musculus</i>)</td>
<td style="text-align: center; border: 1px solid black;">~23,000</td>
<td style="text-align: center; border: 1px solid black;">20</td>
<td style="text-align: center; border: 1px solid black;">~3 Gb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Human (<i>H. sapiens</i>)</td>
<td style="text-align: center; border: 1px solid black;">~21,000</td>
<td style="text-align: center; border: 1px solid black;">23</td>
<td style="text-align: center; border: 1px solid black;">~3 Gb</td>
</tr>
</tbody>
</table>
<p>
In which of the following observations does the C-value paradox apply? Select all that apply.
</p>
<checkboxgroup>
<choice correct="false">
<div>
Rice has a larger genome and more genes than <i>Arabidopsis</i>.
</div>
</choice>
<choice correct="true">
<div>
Humans have a larger genome but fewer genes than <i>Arabidopsis</i>.
</div>
</choice>
<choice correct="true">
<div>
Worms have a smaller genome but more genes than flies.
</div>
</choice>
</checkboxgroup>
<solution>
<div class="detailed-solution">
<p>
Explanation
</p>
<p>
Explanation
</p>
<p dir="ltr" id="docs-internal-guid-8b7482ab-7fff-27bd-79c5-a433e43a95ea">
The C-value paradox states that there is no relation between size of genome and number of genes. In the comparison between rice and <i>Arabidopsis</i>, the size of the rice genome is both larger and contains a greater number of genes than <i>Arabidopsis</i>, so the C-value paradox does not apply here. In the remaining options, the larger genomes have fewer genes.
</p>
</div>
</solution>
</choiceresponse>
</problem>`,
question: `<p>
The table shows the number of protein-coding genes, chromosomes, and bases in a range of eukaryotic species.
</p>
<table class="chart" summary="A list of eukaryotic organisms and their genome contents." label="Four columns. The first column lists the species, the second column lists the number of protein-coding genes, the third column lists the number of chromosomes, and the fourth column lists the genome size in bases." width="100%">
<caption>Eukaryotic Genomes Comparison</caption>
<tbody>
<tr>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Species</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Protein-coding genes</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Chromosomes</b>
</th>
<th scope="col" style="text-align: center; border: 1px solid black;">
<b>Bases</b>
</th>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Yeast (<i>S. cerevisiae</i>)</td>
<td style="text-align: center; border: 1px solid black;">~5,800</td>
<td style="text-align: center; border: 1px solid black;">16</td>
<td style="text-align: center; border: 1px solid black;">~12 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Arabidopsis (<i>A. thaliana</i>)</td>
<td style="text-align: center; border: 1px solid black;">~27,000</td>
<td style="text-align: center; border: 1px solid black;">5</td>
<td style="text-align: center; border: 1px solid black;">~115 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Rice (<i>O. sativa</i>)</td>
<td style="text-align: center; border: 1px solid black;">~41,000</td>
<td style="text-align: center; border: 1px solid black;">12</td>
<td style="text-align: center; border: 1px solid black;">~390 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Worm (<i>C. elegans</i>)</td>
<td style="text-align: center; border: 1px solid black;">~19,000</td>
<td style="text-align: center; border: 1px solid black;">6</td>
<td style="text-align: center; border: 1px solid black;">~100 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Fly (<i>D. melanogaster</i>)</td>
<td style="text-align: center; border: 1px solid black;">~14,000</td>
<td style="text-align: center; border: 1px solid black;">4</td>
<td style="text-align: center; border: 1px solid black;">~165 Mb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Mouse (<i>M. musculus</i>)</td>
<td style="text-align: center; border: 1px solid black;">~23,000</td>
<td style="text-align: center; border: 1px solid black;">20</td>
<td style="text-align: center; border: 1px solid black;">~3 Gb</td>
</tr>
<tr>
<td style="text-align: center; border: 1px solid black;">Human (<i>H. sapiens</i>)</td>
<td style="text-align: center; border: 1px solid black;">~21,000</td>
<td style="text-align: center; border: 1px solid black;">23</td>
<td style="text-align: center; border: 1px solid black;">~3 Gb</td>
</tr>
</tbody>
</table>
<p>
In which of the following observations does the C-value paradox apply? Select all that apply.
</p>`,
};

2
src/editors/sharedComponents/ErrorBoundary/index.test.jsx
View File

@@ -11,7 +11,7 @@ jest.mock('@edx/frontend-platform/logging', () => ({
}));
// stubbing this to avoid needing to inject a stubbed intl into an internal component
jest.mock('./ErrorPage', () => function () {
jest.mock('./ErrorPage', () => function mockErrorPage() {
return <p>Error Page</p>;
});

10
src/editors/sharedComponents/SelectionModal/index.test.jsx
View File

@@ -79,22 +79,22 @@ const mockUploadErrorAlertFn = jest.fn();
jest.mock('../BaseModal', () => 'BaseModal');
jest.mock('./SearchSort', () => 'SearchSort');
jest.mock('./Gallery', () => function (componentProps) {
jest.mock('./Gallery', () => function mockGallery(componentProps) {
mockGalleryFn(componentProps);
return (<div>Gallery</div>);
});
jest.mock('../FileInput', () => function (componentProps) {
jest.mock('../FileInput', () => function mockFileInput(componentProps) {
mockFileInputFn(componentProps);
return (<div>FileInput</div>);
});
jest.mock('../ErrorAlerts/ErrorAlert', () => function () {
jest.mock('../ErrorAlerts/ErrorAlert', () => function mockErrorAlert() {
return <div>ErrorAlert</div>;
});
jest.mock('../ErrorAlerts/FetchErrorAlert', () => function (componentProps) {
jest.mock('../ErrorAlerts/FetchErrorAlert', () => function mockFetchErrorAlert(componentProps) {
mockFetchErrorAlertFn(componentProps);
return (<div>FetchErrorAlert</div>);
});
jest.mock('../ErrorAlerts/UploadErrorAlert', () => function (componentProps) {
jest.mock('../ErrorAlerts/UploadErrorAlert', () => function mockUploadErrorAlert(componentProps) {
mockUploadErrorAlertFn(componentProps);
return (<div>UploadErrorAlert</div>);
});