feat(quests): improve 3d island styling

fix(test): fix context image not appearing on test screen
This commit is contained in:
shafin-r
2026-03-12 01:09:07 +06:00
parent f00aad2bbd
commit 121cc2bf71
5 changed files with 1220 additions and 180 deletions

View File

@ -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>