mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
import { TemplateOptions, Matching as MatchingType } from './types';
|
|
import QuestionContainer from './QuestionContainer';
|
|
import Title from './Title';
|
|
import textType from './TextType';
|
|
import GlobalFeedback from './GlobalFeedback';
|
|
import { ParagraphStyle, SelectStyle } from '../constants';
|
|
import { state } from '.';
|
|
|
|
type MatchingOptions = TemplateOptions & MatchingType;
|
|
|
|
interface MatchAnswerOptions extends TemplateOptions {
|
|
choices: MatchingType['matchPairs'];
|
|
}
|
|
|
|
export default function Matching({
|
|
title,
|
|
stem,
|
|
matchPairs,
|
|
globalFeedback
|
|
}: MatchingOptions): string {
|
|
return `${QuestionContainer({
|
|
children: [
|
|
Title({
|
|
type: 'Appariement',
|
|
title: title
|
|
}),
|
|
`<p style="${ParagraphStyle(state.theme)}">${textType({
|
|
text: stem
|
|
})}</p>`,
|
|
MatchAnswers({ choices: matchPairs }),
|
|
GlobalFeedback({ feedback: globalFeedback })
|
|
]
|
|
})}`;
|
|
}
|
|
|
|
function MatchAnswers({ choices }: MatchAnswerOptions): string {
|
|
const Layout = `
|
|
display: grid;
|
|
grid-template-columns: fit-content(50%) fit-content(50%);
|
|
grid-gap: 0.25rem;
|
|
align-items: center;
|
|
`;
|
|
|
|
const Dropdown = `
|
|
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
|
|
background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23${
|
|
state.theme === 'light' ? '000' : 'ccc'
|
|
}%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
|
|
background-size: 0.6em;
|
|
background-position: calc(100% - 0.5em) center;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.25rem;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
width: auto;
|
|
vertical-align: baseline;
|
|
`;
|
|
|
|
const OptionTable = `
|
|
padding-right: 1rem;
|
|
`;
|
|
|
|
const uniqueMatchOptions = Array.from(new Set(choices.map(({ subanswer }) => subanswer)));
|
|
|
|
const result = choices
|
|
.map(({ subquestion }) => {
|
|
return `
|
|
<div style="${OptionTable} ${ParagraphStyle(state.theme)}">
|
|
${textType({ text: subquestion })}
|
|
</div>
|
|
<div>
|
|
<select class="gift-select" style="${SelectStyle(state.theme)} ${Dropdown}">
|
|
<option value="" disabled selected hidden>Choisir...</option>
|
|
${uniqueMatchOptions.map((subanswer) => `<option>${subanswer}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
`;
|
|
})
|
|
.join('');
|
|
|
|
return `
|
|
<div style="${Layout}">
|
|
${result}
|
|
</div>
|
|
`;
|
|
}
|