From db4d15ba509ec4def87dcf2290d040e19c5dc364 Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Sun, 23 Aug 2026 13:15:54 +0700
Subject: [PATCH] fix(quiz): render LaTeX/KaTeX pada opsi, pembahasan, &
 preview guru
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QuizTab: ganti use:renderMath (jalan sekali pas mount) dengan $effect
  yang jalan ulang autoRenderMath tiap konten kuis berubah — cover opsi
  MCQ aktif, review live, dan review hasil-load async (setelah refresh).
- QuizPreviewReadonly (content editor guru): tambah $effect autoRenderMath
  agar LaTeX di soal/opsi/penjelasan ke-render di pratinjau kunci jawaban.

autoRenderMath idempoten sehingga aman dijalankan berulang tanpa dobel render.
---
 .../lib/components/QuizPreviewReadonly.svelte | 15 +++++++++++++-
 .../src/routes/lesson/[slug]/QuizTab.svelte   | 20 +++++++++++++++----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/QuizPreviewReadonly.svelte b/frontend/src/lib/components/QuizPreviewReadonly.svelte
index 6881ccd..d2c1fa0 100644
--- a/frontend/src/lib/components/QuizPreviewReadonly.svelte
+++ b/frontend/src/lib/components/QuizPreviewReadonly.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { tick } from 'svelte';
+	import { autoRenderMath } from '$lib/actions/renderMath';
+
 	interface QuizOption {
 		id: string;
 		text: string;
@@ -21,9 +24,19 @@
 	}
 
 	let { quizData }: Props = $props();
+
+	let rootEl = $state<HTMLElement | null>(null);
+	// Render LaTeX (KaTeX) pada preview soal kuis di content editor guru.
+	// autoRenderMath idempoten; track quizData agar re-run saat data berubah.
+	$effect(() => {
+		void quizData;
+		if (rootEl) {
+			tick().then(() => rootEl && autoRenderMath(rootEl));
+		}
+	});
 </script>
 
-<div class="quiz-preview-readonly">
+<div class="quiz-preview-readonly" bind:this={rootEl}>
 	<h3 class="quiz-preview-title">Preview Kunci Jawaban</h3>
 	<p class="quiz-preview-note">Tampilan ini hanya untuk pratinjau — tidak mengirim attempt ke server.</p>
 
diff --git a/frontend/src/routes/lesson/[slug]/QuizTab.svelte b/frontend/src/routes/lesson/[slug]/QuizTab.svelte
index 3a05283..a3eb811 100644
--- a/frontend/src/routes/lesson/[slug]/QuizTab.svelte
+++ b/frontend/src/routes/lesson/[slug]/QuizTab.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { authLoggedIn, authToken } from '$stores/auth';
 	import { get } from 'svelte/store';
-	import { onMount } from 'svelte';
-	import { renderMath } from '$lib/actions/renderMath';
+	import { onMount, tick } from 'svelte';
+	import { autoRenderMath } from '$lib/actions/renderMath';
 	import { shouldShowQuizReview } from '$services/quiz-integrity';
 	import type { LessonManager } from './lesson.svelte';
 	import type { QuizQuestion, QuizAnswer } from '$types/quiz';
@@ -75,6 +75,18 @@
 		}
 	});
 
+	// Re-render LaTeX math (KaTeX) whenever quiz content changes — covers active
+	// quiz options, live review, and async-loaded stored review. autoRenderMath is
+	// idempotent: already-rendered KaTeX spans leave no raw delimiters to re-process.
+	let quizEl = $state<HTMLElement | null>(null);
+	$effect(() => {
+		// Track content-bearing reactive values so the effect re-runs on data changes.
+		void [result, questions, currentQuestion, currentAnswer, reviewQuestions, storedAttempt];
+		if (quizEl) {
+			tick().then(() => quizEl && autoRenderMath(quizEl));
+		}
+	});
+
 	function handleExit() {
 		if (!mgr.isQuizMode) return;
 
@@ -91,9 +103,9 @@
 	}
 </script>
 
-<div class="quiz-container">
+<div class="quiz-container" bind:this={quizEl}>
 	{#if result || quizAlreadyCompleted}
-		<div class="summary-view" use:renderMath>
+		<div class="summary-view">
 			<div class="summary-header">
 				<div class="summary-icon">🏁</div>
 				<h2>Kuis Selesai!</h2>