/** Shared deterministic markup/CSS for Quiz measurement and final emission. */
import type { QuizQuestionListQuestion, QuizQuestionListVisual } from '../ir';
import { renderQuizMathText } from '../../quiz/math-text';
import { escapeHtml } from './format';
export interface QuizQuestionListLabels {
singleChoice: string;
multipleChoice: string;
shortAnswer: string;
answerPlaceholder: string;
}
export interface QuizQuestionListContent {
title: string;
questions: QuizQuestionListQuestion[];
}
function mathText(value: string, allowDisplayMode = false): string {
return renderQuizMathText(value)
.map((segment) => {
if (segment.type === 'text') return escapeHtml(segment.value);
const className =
allowDisplayMode && segment.displayMode
? 'quiz-list-math quiz-list-math-display'
: 'quiz-list-math';
return `${segment.html}`;
})
.join('');
}
function typeLabel(question: QuizQuestionListQuestion, labels: QuizQuestionListLabels): string {
if (question.type === 'single') return labels.singleChoice;
if (question.type === 'multiple') return labels.multipleChoice;
return labels.shortAnswer;
}
function renderChoiceOptions(question: QuizQuestionListQuestion): string {
return (question.options ?? [])
.map(
(option) =>
`${escapeHtml(option.value)}${mathText(option.label)}
`,
)
.join('\n');
}
function renderQuestion(
question: QuizQuestionListQuestion,
index: number,
labels: QuizQuestionListLabels,
): string {
const body =
question.type === 'short_answer'
? `${escapeHtml(labels.answerPlaceholder)}
`
: `${renderChoiceOptions(question)}
`;
return [
``,
` `,
` ${body}`,
``,
].join('\n');
}
/** Markup used verbatim by the app-side measurement surface and emitted clip. */
export function renderQuizQuestionListSurface(
content: QuizQuestionListContent | QuizQuestionListVisual,
labels: QuizQuestionListLabels,
direction: 'ltr' | 'rtl',
contentId?: string,
): string {
return [
``,
` `,
`
`,
`
`,
content.questions.map((question, index) => renderQuestion(question, index, labels)).join('\n'),
` `,
`