fix(quiz): render LaTeX/KaTeX pada opsi, pembahasan, & preview guru

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

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>
 

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>