gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix template, update snapshots numerical answers (formatted stem, multiple answers with feedback)

Browse source
This commit is contained in:
C. Fuhrman 2025-01-26 13:26:17 -05:00
parent e51551ec9b
commit c55baed45c
3 changed files with 73 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx
View file

@ -32,7 +32,7 @@ const moodleMock: TemplateOptions & NumericalQuestion =
const imageMock: TemplateOptions & NumericalQuestion = const imageMock: TemplateOptions & NumericalQuestion =
parse(` parse(`
::Sample Numerical Title with Image::[markdown]Sample Stem with Image ![](https\\://example.com/cat.jpg){#=42#Correct!=43#Incorrect! ![](https\\://example.com/cat.jpg)####Sample Global Feedback with Image} ::Sample Numerical Title with Image::[markdown]Sample Stem with Image ![](https\\://example.com/cat.jpg){#=42#Correct!=43#Incorrect!=44#Also Incorrect! ![](https\\://example.com/cat.jpg)####Sample Global Feedback with Image}
`)[0] as NumericalQuestion; `)[0] as NumericalQuestion;

71
client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap
View file

@ -38,9 +38,19 @@ exports[`Numerical snapshot test with html 1`] = `
">Numérique</span> ">Numérique</span>
</span> </span>
</div> </div>
<p style="
<div style="
display: flex;
">
<span>
<p style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p> " class="present-question-stem">
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow>\\frac{zzz}{yyy}</math></span><span aria-hidden="true" class="katex-html"><span class="base"><span style="height:1.988em;vertical-align:-0.8804em;" class="strut"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span style="height:1.1076em;" class="vlist"><span style="top:-2.314em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span style="margin-right:0.03588em;" class="mord mathnormal">yyy</span></span></span><span style="top:-3.23em;"><span style="height:3em;" class="pstrut"></span><span style="border-bottom-width:0.04em;" class="frac-line"></span></span><span style="top:-3.677em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span style="margin-right:0.04398em;" class="mord mathnormal">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span style="height:0.8804em;" class="vlist"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span>
</p>
</span>
</div>
<div> <div>
<span style=" <span style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
@ -58,7 +68,7 @@ exports[`Numerical snapshot test with html 1`] = `
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
width: 90%; width: 90%;
" placeholder="42, 43"> " placeholder="42 (Correct), 43 (Incorrect!)">
</div> </div>
<div style=" <div style="
position: relative; position: relative;
@ -113,9 +123,20 @@ exports[`Numerical snapshot test with image 1`] = `
">Numérique</span> ">Numérique</span>
</span> </span>
</div> </div>
<p style="
<div style="
display: flex;
">
<span>
<p style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
">Sample Stem with Image</p> " class="present-question-stem">
Sample Stem with Image <img alt="" src="https://example.com/cat.jpg">
</p>
</span>
</div>
<div> <div>
<span style=" <span style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
@ -133,7 +154,10 @@ exports[`Numerical snapshot test with image 1`] = `
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
width: 90%; width: 90%;
" placeholder="42, 43, 44"> " placeholder="42 (Correct!
), 43 (Incorrect!
), 44 (Also Incorrect! <img alt="" src="https://example.com/cat.jpg">
)">
</div> </div>
<div style=" <div style="
position: relative; position: relative;
@ -145,7 +169,8 @@ exports[`Numerical snapshot test with image 1`] = `
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%); box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
"> ">
<p>Sample Global Feedback with Image</p> <p>Sample Global Feedback with Image
</p>
</div></section> </div></section>
</DocumentFragment> </DocumentFragment>
`; `;
@ -188,9 +213,19 @@ exports[`Numerical snapshot test with moodle 1`] = `
"&gt;Numérique&lt;/span&gt; "&gt;Numérique&lt;/span&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p style="
&lt;div style="
display: flex;
"&gt;
&lt;span&gt;
&lt;p style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
"&gt;Sample Stem&lt;/p&gt; " class="present-question-stem"&gt;
Sample Stem
&lt;/p&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;span style=" &lt;span style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
@ -208,7 +243,7 @@ exports[`Numerical snapshot test with moodle 1`] = `
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
width: 90%; width: 90%;
" placeholder="42, 43"&gt; " placeholder="42 (Correct!), 43 (Incorrect!)"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div style=" &lt;div style="
position: relative; position: relative;
@ -263,9 +298,19 @@ exports[`Numerical snapshot test with plain text 1`] = `
"&gt;Numérique&lt;/span&gt; "&gt;Numérique&lt;/span&gt;
&lt;/span&gt; &lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;p style="
&lt;div style="
display: flex;
"&gt;
&lt;span&gt;
&lt;p style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
"&gt;Sample Stem&lt;/p&gt; " class="present-question-stem"&gt;
Sample Stem
&lt;/p&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;span style=" &lt;span style="
color: hsl(0, 0%, 0%); color: hsl(0, 0%, 0%);
@ -283,7 +328,7 @@ exports[`Numerical snapshot test with plain text 1`] = `
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
width: 90%; width: 90%;
" placeholder="42, 43"&gt; " placeholder="42 (Correct!), 43 (Incorrect!)"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div style=" &lt;div style="
position: relative; position: relative;

22
client/src/components/GiftTemplate/templates/NumericalTemplate.ts
View file

@ -4,9 +4,10 @@ import Title from './TitleTemplate';
import GlobalFeedback from './GlobalFeedbackTemplate'; import GlobalFeedback from './GlobalFeedbackTemplate';
import { ParagraphStyle, InputStyle } from '../constants'; import { ParagraphStyle, InputStyle } from '../constants';
import { state } from '.'; import { state } from '.';
import { NumericalAnswer, NumericalQuestion } from 'gift-pegjs'; import { MultipleNumericalAnswer, NumericalAnswer, NumericalQuestion, TextFormat } from 'gift-pegjs';
import { isHighLowNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards'; import { isHighLowNumericalAnswer, isMultipleNumericalAnswer, isRangeNumericalAnswer, isSimpleNumericalAnswer } from 'gift-pegjs/typeGuards';
import StemTemplate from './StemTemplate'; import StemTemplate from './StemTemplate';
import { FormattedTextTemplate } from './TextTypeTemplate';
type NumericalOptions = TemplateOptions & NumericalQuestion; type NumericalOptions = TemplateOptions & NumericalQuestion;
type NumericalAnswerOptions = TemplateOptions & Pick<NumericalQuestion, 'choices'>; type NumericalAnswerOptions = TemplateOptions & Pick<NumericalQuestion, 'choices'>;
@ -31,8 +32,12 @@ export default function NumericalTemplate({
} }
function NumericalAnswers({ choices }: NumericalAnswerOptions): string { function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
const placeholder = choices.length > 1 const placeholder = isMultipleNumericalAnswer(choices[0])
? choices.map(choice => {Answer(choice)}).join(', ') ? choices.map(choice => {
console.log(JSON.stringify(choice));
const c = choice as MultipleNumericalAnswer;
return Answer(c.answer, c.formattedFeedback)
}).join(', ')
: Answer(choices[0]); : Answer(choices[0]);
return ` return `
@ -46,14 +51,15 @@ function NumericalAnswers({ choices }: NumericalAnswerOptions): string {
`; `;
} }
function Answer(choice: NumericalAnswer): string { function Answer(choice: NumericalAnswer, formattedFeedback?: TextFormat): string {
const formattedFeedbackString = formattedFeedback ? ` (${FormattedTextTemplate(formattedFeedback)})` : '';
switch (true) { switch (true) {
case isSimpleNumericalAnswer(choice): case isSimpleNumericalAnswer(choice):
return `${choice.number}`; return `${choice.number}${formattedFeedbackString}`;
case isRangeNumericalAnswer(choice): case isRangeNumericalAnswer(choice):
return `${choice.number} &plusmn; ${choice.range}`; return `${choice.number} &plusmn; ${choice.range}${formattedFeedbackString}`;
case isHighLowNumericalAnswer(choice): case isHighLowNumericalAnswer(choice):
return `${choice.numberLow}..${choice.numberHigh}`; return `${choice.numberLow}..${choice.numberHigh}${formattedFeedbackString}`;
default: default:
return ``; return ``;
} }