feat(quests): improve 3d island styling
fix(test): fix context image not appearing on test screen
This commit is contained in:
@ -32,7 +32,10 @@ import type {
|
||||
SubmitAnswer,
|
||||
} from "../../../types/session";
|
||||
import { useAuthToken } from "../../../hooks/useAuthToken";
|
||||
import { renderQuestionText } from "../../../components/RenderQuestionText";
|
||||
import {
|
||||
MathErrorBoundary,
|
||||
renderQuestionText,
|
||||
} from "../../../components/RenderQuestionText";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@ -1205,6 +1208,19 @@ export const Test = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// Add this above renderQuestionTextWithHighlights
|
||||
const SafeBlockMath = ({ latex }: { latex: string }) => (
|
||||
<MathErrorBoundary raw={`$$${latex}$$`}>
|
||||
<BlockMath>{latex}</BlockMath>
|
||||
</MathErrorBoundary>
|
||||
);
|
||||
|
||||
const SafeInlineMath = ({ latex }: { latex: string }) => (
|
||||
<MathErrorBoundary raw={`$${latex}$`}>
|
||||
<InlineMath>{latex}</InlineMath>
|
||||
</MathErrorBoundary>
|
||||
);
|
||||
|
||||
const renderQuestionTextWithHighlights = (
|
||||
text: string,
|
||||
highlights: HighlightRange[],
|
||||
@ -1259,7 +1275,7 @@ export const Test = () => {
|
||||
const hasOverlap = merged.some(
|
||||
(h) => h.end > pos && h.start < pos + len,
|
||||
);
|
||||
const node = <BlockMath key={index}>{inner}</BlockMath>;
|
||||
const node = <SafeBlockMath key={index} latex={inner} />;
|
||||
pos += len;
|
||||
if (!hasOverlap) return node;
|
||||
return (
|
||||
@ -1274,7 +1290,7 @@ export const Test = () => {
|
||||
const hasOverlap = merged.some(
|
||||
(h) => h.end > pos && h.start < pos + len,
|
||||
);
|
||||
const node = <InlineMath key={index}>{inner}</InlineMath>;
|
||||
const node = <SafeInlineMath key={index} latex={inner} />;
|
||||
pos += len;
|
||||
if (!hasOverlap) return node;
|
||||
return (
|
||||
@ -1684,15 +1700,16 @@ export const Test = () => {
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{currentQuestion?.context_image_url !== "NULL" && (
|
||||
<div className="t-card p-6">
|
||||
<img
|
||||
src={currentQuestion?.context_image_url}
|
||||
alt="Context"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{currentQuestion?.context_image_url &&
|
||||
currentQuestion.context_image_url !== "NULL" && (
|
||||
<div className="t-card p-6">
|
||||
<img
|
||||
src="https://placehold.co/600x400"
|
||||
alt="Question context"
|
||||
className="w-full h-auto rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="t-card t-card-purple p-6">
|
||||
<p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
|
||||
{currentQuestion?.text &&
|
||||
@ -1735,15 +1752,26 @@ export const Test = () => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentQuestion?.context && (
|
||||
<div className="t-card p-6">
|
||||
<HighlightableRichText
|
||||
fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
|
||||
text={currentQuestion.context}
|
||||
className="font-semibold text-gray-700 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{currentQuestion?.context_image_url &&
|
||||
currentQuestion.context_image_url !== "NULL" && (
|
||||
<div className="t-card p-6">
|
||||
<img
|
||||
src="https://placehold.co/600x400"
|
||||
alt="Question context"
|
||||
className="w-full h-auto rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{currentQuestion?.context &&
|
||||
currentQuestion.context !== "NULL" && (
|
||||
<div className="t-card p-6">
|
||||
<HighlightableRichText
|
||||
fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
|
||||
text={currentQuestion.context}
|
||||
className="font-semibold text-gray-700 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user