From 395f01595f910c8e9040d0edcc935df20d2b137a Mon Sep 17 00:00:00 2001
From: AasthathecoderX <bhat.aasthaa@gmail.com>
Date: Thu, 9 Apr 2026 17:13:12 +0530
Subject: [PATCH] local-quiz-page

Signed-off-by: AasthathecoderX <bhat.aasthaa@gmail.com>
---
 assets/js/local-quiz-evaluator.js | 100 ++++
 layouts/test/baseof.html          |  14 +
 layouts/test/single.html          | 798 +++++++++++++++++-------------
 3 files changed, 560 insertions(+), 352 deletions(-)
 create mode 100644 assets/js/local-quiz-evaluator.js
diff --git a/assets/js/local-quiz-evaluator.js b/assets/js/local-quiz-evaluator.js
new file mode 100644
index 0000000..1e2604e
--- /dev/null
+++ b/assets/js/local-quiz-evaluator.js
@@ -0,0 +1,100 @@
+/**
+ * Local Quiz Evaluator — Dev Mode Only
+ * A simple client-side quiz evaluator for local development.
+ * This is NOT a replacement for the backend evaluator used in production.
+ */
+
+window.LocalQuizEvaluator = (function () {
+
+  /**
+   * Evaluates a single question against the submitted answer.
+   * @param {Object} question - The question object from front matter
+   * @param {string|string[]} submittedAnswer - The user's selected answer(s)
+   * @returns {{ correct: boolean, marks: number }}
+   */
+  function evaluateQuestion(question, submittedAnswer) {
+    const correctAnswers = Array.isArray(question.answer)
+      ? question.answer.map(String)
+      : [String(question.answer)];
+
+    const submitted = Array.isArray(submittedAnswer)
+      ? submittedAnswer.map(String)
+      : [String(submittedAnswer)];
+
+    const isCorrect =
+      submitted.length === correctAnswers.length &&
+      submitted.every((ans) => correctAnswers.includes(ans));
+
+    return {
+      correct: isCorrect,
+      marks: isCorrect ? (question.marks || 0) : 0,
+    };
+  }
+
+  /**
+   * Evaluates a full quiz submission.
+   * @param {Object[]} questions - Array of question objects
+   * @param {Object} answers - Map of question id → submitted answer
+   * @returns {{ totalMarks: number, obtainedMarks: number, passed: boolean, results: Object[] }}
+   */
+  function evaluateQuiz(questions, answers, passPercentage) {
+    const threshold = passPercentage || 70;
+    let totalMarks = 0;
+    let obtainedMarks = 0;
+    const results = [];
+
+    questions.forEach((question) => {
+      const mark = question.marks || 0;
+      totalMarks += mark;
+
+      const submitted = answers[question.id];
+      if (submitted === undefined || submitted === null) {
+        results.push({
+          id: question.id,
+          correct: false,
+          marks: 0,
+          submittedAnswer: null,
+          correctAnswer: question.answer,
+        });
+        return;
+      }
+
+      const evaluation = evaluateQuestion(question, submitted);
+      obtainedMarks += evaluation.marks;
+      results.push({
+        id: question.id,
+        correct: evaluation.correct,
+        marks: evaluation.marks,
+        submittedAnswer: submitted,
+        correctAnswer: question.answer,
+      });
+    });
+
+    const percentage = totalMarks > 0 ? (obtainedMarks / totalMarks) * 100 : 0;
+
+    return {
+      totalMarks,
+      obtainedMarks,
+      passed: percentage >= threshold,
+      percentage: Math.round(percentage),
+      results,
+    };
+  }
+
+  /**
+   * Selects a random subset of questions from the full bank.
+   * @param {Object[]} allQuestions
+   * @param {number} count
+   * @returns {Object[]}
+   */
+  function selectQuestions(allQuestions, count) {
+    const shuffled = [...allQuestions].sort(() => Math.random() - 0.5);
+    return shuffled.slice(0, count);
+  }
+
+  return {
+    evaluateQuiz,
+    evaluateQuestion,
+    selectQuestions,
+  };
+})();
\ No newline at end of file
diff --git a/layouts/test/baseof.html b/layouts/test/baseof.html
index e21b0b4..a37cda7 100644
--- a/layouts/test/baseof.html
+++ b/layouts/test/baseof.html
@@ -6,6 +6,20 @@
 </head>
 
 <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
+    {{ if hugo.IsServer }}
+<div style="
+  background: #fffbea;
+  border-bottom: 2px solid #f0c040;
+  color: #7a5c00;
+  font-family: monospace;
+  font-size: 13px;
+  padding: 8px 16px;
+  text-align: center;
+  z-index: 9999;
+">
+  ⚠️ <strong>Dev Mode:</strong> Quiz is using the <em>local JS evaluator</em>. Results will not be saved or synced with the backend.
+</div>
+{{ end }}
     <div class="td-main">
         <main class="" role="main">
             {{ block "main" . }}{{ end }}
diff --git a/layouts/test/single.html b/layouts/test/single.html
index 849a158..8a76af1 100644
--- a/layouts/test/single.html
+++ b/layouts/test/single.html
@@ -2,345 +2,446 @@
 {{ $title := .Title }}
 {{ $build := .Site.Params.build | default "development" }}
 
-
-<!-- Quiz Form  only for development build-->
+<!-- Quiz Form only for development build -->
 {{ if eq $build "development" }}
-
 <style>
-    .container {
-        max-width: 780px;
-        margin: 0 auto;
-        min-height: 100vh;
-    }
-
-    .button {
-        cursor: pointer;
-        padding: 0.25rem 1rem;
-    }
-
-    .header {
-        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
-        padding: 2rem 2rem 1.5rem;
-    }
-
-    .header h1 {
-        font-size: 1.75rem;
-        font-weight: 600;
-        color: var(--bs-emphasis-color);
-        margin-bottom: 0.25rem;
-    }
-
-    .header p {
-        color: var(--bs-secondary-color);
-        font-size: 0.95rem;
-    }
-
-    #go-back {
-        position: fixed;
-        top: 160px;
-        left: 25px;
-        z-index: 1010;
-        width: 45px;
-        height: 45px;
-        background-color: white;
-        border-radius: 50%;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--bs-primary);
-        font-size: 1.1rem;
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-        border: 1px solid var(--bs-border-color);
-    }
-
-    #go-back:hover {
-        transform: scale(1.1);
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        color: var(--bs-link-hover-color);
-    }
-
-    .form-container {
-        padding: 2rem;
-    }
-
-    .question {
-        background: var(--bs-white);
-        border: var(--bs-border-width) solid var(--bs-border-color);
-        border-radius: var(--bs-border-radius);
-        padding: 1.5rem 1.75rem;
-        margin-bottom: 1.5rem;
-        transition: border-color 0.2s ease;
-    }
-
-    .question:hover {
-        border-color: var(--bs-gray-400);
-    }
-
-    .question.correct {
-        background-color: var(--bs-success-bg-subtle);
-        border-color: var(--bs-success);
-    }
-
-    .question.incorrect {
-        background-color: var(--bs-danger-bg-subtle);
-        border-color: var(--bs-danger);
-    }
-
-    .question-text {
-        font-size: 1.05rem;
-        font-weight: 500;
-        color: var(--bs-emphasis-color);
-        margin-bottom: 1.25rem;
-        line-height: 1.4;
-    }
-
-    .question-instructions {
-        font-size: 0.85rem;
-        color: var(--bs-gray-500);
-        margin-bottom: 1.25rem;
-        line-height: 1;
-    }
-
-    .option {
-        margin-bottom: 0.75rem;
-    }
-
-    .option:last-child {
-        margin-bottom: 0;
-    }
-
-    .option label {
-        display: flex;
-        align-items: flex-start;
-        cursor: pointer;
-        padding: 0.75rem 1rem;
-        border-radius: var(--bs-border-radius-sm);
-        border: var(--bs-border-width) solid var(--bs-border-color);
-        background: var(--bs-tertiary-bg);
-        transition: all 0.15s ease;
-        font-size: 0.95rem;
-        line-height: 1.4;
-    }
-
-    .option label:hover {
-        border-color: var(--bs-primary);
-        background: var(--bs-light-bg-subtle);
-    }
-
-    .option input[type="checkbox"],
-    .option input[type="radio"] {
-        width: 18px;
-        height: 18px;
-        margin: 2px 12px 0 0;
-        accent-color: var(--bs-primary);
-        flex-shrink: 0;
-    }
-
-    .text-input {
-        width: 100%;
-        padding: 0.875rem 1rem;
-        border: var(--bs-border-width) solid var(--bs-border-color);
-        border-radius: var(--bs-border-radius-sm);
-        font-size: 0.95rem;
-        background: var(--bs-white);
-        transition: border-color 0.2s ease;
-        color: var(--bs-body-color);
-    }
-
-    .text-input:focus {
-        outline: none;
-        border-color: var(--bs-primary);
-        box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
-    }
-
-
-    .loading {
-        display: none;
-        text-align: center;
-        padding: 2rem 1rem;
-    }
-
-    .spinner {
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        border: 2px solid var(--bs-border-color);
-        border-top: 2px solid var(--bs-primary);
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-    .loading p {
-        margin-top: 1rem;
-        color: var(--bs-secondary-color);
-        font-size: 0.9rem;
-    }
-
-    .question-number {
-        color: var(--bs-secondary-color);
-        font-size: 0.85rem;
-        font-weight: 500;
-        margin-bottom: 0.5rem;
-    }
-
-
-
-    @media (max-width: 768px) {
-        #go-back {
-            width: 38px;
-            height: 38px;
-            font-size: 0.9rem;
-            top: 200px;
-            left: 15px;
-        }
-
-        .container {
-            margin: 0;
-        }
-
-        .header {
-            padding: 1.5rem 1rem 1.25rem;
-        }
-
-        .header h1 {
-            font-size: 1.5rem;
-        }
-
-        .form-container {
-            padding: 1.5rem 1rem;
-        }
-
-        .question {
-            padding: 1.25rem 1rem;
-        }
-
-        .question-text {
-            font-size: 1rem;
-        }
-
-        .question-instructions {
-            font-size: 0.8rem;
-        }
-
-        .option label {
-            padding: 0.625rem 0.75rem;
-            font-size: 0.9rem;
-        }
-    }
+  .container {
+      max-width: 780px;
+      margin: 0 auto;
+      min-height: 100vh;
+  }
+
+  .button {
+      cursor: pointer;
+      padding: 0.25rem 1rem;
+  }
+
+  .header {
+      border-bottom: var(--bs-border-width) solid var(--bs-border-color);
+      padding: 2rem 2rem 1.5rem;
+  }
+
+  .header h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      color: var(--bs-emphasis-color);
+      margin-bottom: 0.25rem;
+  }
+
+  .header p {
+      color: var(--bs-secondary-color);
+      font-size: 0.95rem;
+  }
+
+  #go-back {
+      position: fixed;
+      top: 160px;
+      left: 25px;
+      z-index: 1010;
+      width: 45px;
+      height: 45px;
+      background-color: white;
+      border-radius: 50%;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--bs-primary);
+      font-size: 1.1rem;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      border: 1px solid var(--bs-border-color);
+  }
+
+  #go-back:hover {
+      transform: scale(1.1);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      color: var(--bs-link-hover-color);
+  }
+
+  .form-container {
+      padding: 2rem;
+  }
+
+  .question {
+      background: var(--bs-white);
+      border: var(--bs-border-width) solid var(--bs-border-color);
+      border-radius: var(--bs-border-radius);
+      padding: 1.5rem 1.75rem;
+      margin-bottom: 1.5rem;
+      transition: border-color 0.2s ease;
+  }
+
+  .question:hover {
+      border-color: var(--bs-gray-400);
+  }
+
+  .question.correct {
+      background-color: var(--bs-success-bg-subtle);
+      border-color: var(--bs-success);
+  }
+
+  .question.incorrect {
+      background-color: var(--bs-danger-bg-subtle);
+      border-color: var(--bs-danger);
+  }
+
+  .question-text {
+      font-size: 1.05rem;
+      font-weight: 500;
+      color: var(--bs-emphasis-color);
+      margin-bottom: 1.25rem;
+      line-height: 1.4;
+  }
+
+  .question-instructions {
+      font-size: 0.85rem;
+      color: var(--bs-gray-500);
+      margin-bottom: 1.25rem;
+      line-height: 1;
+  }
+
+  .option {
+      margin-bottom: 0.75rem;
+  }
+
+  .option:last-child {
+      margin-bottom: 0;
+  }
+
+  .option label {
+      display: flex;
+      align-items: flex-start;
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      border-radius: var(--bs-border-radius-sm);
+      border: var(--bs-border-width) solid var(--bs-border-color);
+      background: var(--bs-tertiary-bg);
+      transition: all 0.15s ease;
+      font-size: 0.95rem;
+      line-height: 1.4;
+  }
+
+  .option label:hover {
+      border-color: var(--bs-primary);
+      background: var(--bs-light-bg-subtle);
+  }
+
+  .option input[type="checkbox"],
+  .option input[type="radio"] {
+      width: 18px;
+      height: 18px;
+      margin: 2px 12px 0 0;
+      accent-color: var(--bs-primary);
+      flex-shrink: 0;
+  }
+
+  .text-input {
+      width: 100%;
+      padding: 0.875rem 1rem;
+      border: var(--bs-border-width) solid var(--bs-border-color);
+      border-radius: var(--bs-border-radius-sm);
+      font-size: 0.95rem;
+      background: var(--bs-white);
+      transition: border-color 0.2s ease;
+      color: var(--bs-body-color);
+  }
+
+  .text-input:focus {
+      outline: none;
+      border-color: var(--bs-primary);
+      box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
+  }
+
+  .loading {
+      display: none;
+      text-align: center;
+      padding: 2rem 1rem;
+  }
+
+  .spinner {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      border: 2px solid var(--bs-border-color);
+      border-top: 2px solid var(--bs-primary);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+      0% {
+          transform: rotate(0deg);
+      }
+
+      100% {
+          transform: rotate(360deg);
+      }
+  }
+
+  .loading p {
+      margin-top: 1rem;
+      color: var(--bs-secondary-color);
+      font-size: 0.9rem;
+  }
+
+  .question-number {
+      color: var(--bs-secondary-color);
+      font-size: 0.85rem;
+      font-weight: 500;
+      margin-bottom: 0.5rem;
+  }
+
+  @media (max-width: 768px) {
+      #go-back {
+          width: 38px;
+          height: 38px;
+          font-size: 0.9rem;
+          top: 200px;
+          left: 15px;
+      }
+
+      .container {
+          margin: 0;
+      }
+
+      .header {
+          padding: 1.5rem 1rem 1.25rem;
+      }
+
+      .header h1 {
+          font-size: 1.5rem;
+      }
+
+      .form-container {
+          padding: 1.5rem 1rem;
+      }
+
+      .question {
+          padding: 1.25rem 1rem;
+      }
+
+      .question-text {
+          font-size: 1rem;
+      }
+
+      .question-instructions {
+          font-size: 0.8rem;
+      }
+
+      .option label {
+          padding: 0.625rem 0.75rem;
+          font-size: 0.9rem;
+      }
+  }
 </style>
 
-
-
 <div class="container">
-    <div class="header">
-        <div id="go-back">
-            <i class="fas fa-arrow-left"></i>
-        </div>
-        <h1>{{ $title }}</h1>
-        <p id="test-description">{{ .Content | default "Please answer the questions below to complete the test." }}</p>
+  <div class="header">
+    <div id="go-back">
+      <i class="fas fa-arrow-left"></i>
     </div>
+    <h1>{{ $title }}</h1>
+    <p id="test-description">{{ .Content | default "Please answer the questions below to complete the test." }}</p>
+  </div>
+
+  <div class="form-container">
+    <form id="quiz-form" data-quiz-form>
+      <input type="hidden" name="quiz_abs_path" value="{{ .RelPermalink }}">
+
+      {{/* Embed quiz data as JSON for the local dev evaluator */}}
+      {{ if hugo.IsServer }}
+      <script id="quiz-data" type="application/json">
+        {
+          "id": "{{ partial "id.html" . }}",
+          "title": {{ .Title | jsonify }},
+          "questions": {{ .Params.questions | jsonify }},
+          "total_questions": {{ .Params.number_of_questions | default (len .Params.questions) }},
+          "pass_percentage": {{ or .Params.pass_percentage 70 }},
+          "max_attempts": {{ or .Params.max_attempts 0 }},
+          "time_limit": {{ or .Params.time_limit 0 }}
+        }
+      </script>
+      {{ end }}
+
+      {{ range $index, $question := .Params.questions }}
+        <div class="question" data-question-id="{{ $question.id }}" id="q-{{ $question.id }}">
+          <div class="question-number">Question {{ add $index 1 }}</div>
+          <div class="question-text">{{ $question.text }}</div>
+
+          {{ if $question.instructions }}
+            <div class="question-instructions">{{ $question.instructions }}</div>
+          {{ else }}
+            {{ if eq $question.type "multiple-answers" }}
+              <div class="question-instructions">Select all that apply</div>
+            {{ else if eq $question.type "single-answer" }}
+              <div class="question-instructions">Select one answer</div>
+            {{ else if eq $question.type "short-answer" }}
+              <div class="question-instructions">Type your answer below</div>
+            {{ end }}
+          {{ end }}
+
+          {{ if or (eq $question.type "single-answer") (eq $question.type "multiple-answers") }}
+            {{ range $optIndex, $option := $question.options }}
+              <div class="option">
+                <label>
+                  {{ if eq $question.type "multiple-answers" }}
+                    <input type="checkbox" name="selected_option_ids_{{ $question.id }}" value="{{ $option.id }}">
+                  {{ else }}
+                    <input type="radio" name="selected_option_ids_{{ $question.id }}" value="{{ $option.id }}">
+                  {{ end }}
+                  <span>{{ $option.text }}</span>
+                </label>
+              </div>
+            {{ end }}
+          {{ else if eq $question.type "short-answer" }}
+            <input
+              type="text"
+              name="answer_text_{{ $question.id }}"
+              class="text-input"
+              placeholder="Type your answer here"
+            >
+          {{ end }}
+        </div>
+      {{ end }}
+    </form>
+  </div>
+</div>
 
+{{ if hugo.IsServer }}
+{{/* DEV MODE: Inject local JS evaluator — not used in production */}}
+{{ $evaluator := resources.Get "js/local-quiz-evaluator.js" }}
+{{ if $evaluator }}
+<script src="{{ $evaluator.RelPermalink }}"></script>
+{{ end }}
 
+<script>
+  /**
+   * Dev-mode quiz bootstrap.
+   * Reads quiz data embedded in the page and hooks into the UI
+   * to use LocalQuizEvaluator instead of the backend API.
+   */
+  (function () {
+    const dataEl = document.getElementById("quiz-data");
+    if (!dataEl) {
+      console.warn("[Dev Evaluator] No #quiz-data element found. Quiz cannot run locally.");
+      return;
+    }
+
+    let quizData;
+    try {
+      quizData = JSON.parse(dataEl.textContent);
+    } catch (e) {
+      console.error("[Dev Evaluator] Failed to parse quiz data:", e);
+      return;
+    }
+
+    const { questions, total_questions, pass_percentage } = quizData;
+    if (!questions || !questions.length) {
+      console.warn("[Dev Evaluator] No questions found in quiz data.");
+      return;
+    }
+
+    if (typeof LocalQuizEvaluator === "undefined") {
+      console.warn("[Dev Evaluator] LocalQuizEvaluator is not available.");
+      return;
+    }
+
+    const activeQuestions =
+      total_questions && total_questions < questions.length
+        ? LocalQuizEvaluator.selectQuestions(questions, total_questions)
+        : questions;
+
+    window.__devQuizQuestions = activeQuestions;
+
+    document.addEventListener("submit", function (e) {
+      const form = e.target.closest("form[data-quiz-form]");
+      if (!form) return;
+
+      e.preventDefault();
+
+      const answers = {};
+
+      activeQuestions.forEach((q) => {
+        const checkboxInputs = form.querySelectorAll(`[name="selected_option_ids_${q.id}"]`);
+        const textInput = form.querySelector(`[name="answer_text_${q.id}"]`);
+
+        if (checkboxInputs.length) {
+          if (checkboxInputs[0].type === "checkbox") {
+            answers[q.id] = Array.from(checkboxInputs)
+              .filter((i) => i.checked)
+              .map((i) => i.value);
+          } else {
+            const checked = Array.from(checkboxInputs).find((i) => i.checked);
+            answers[q.id] = checked ? checked.value : null;
+          }
+        } else if (textInput) {
+          answers[q.id] = textInput.value || "";
+        }
+      });
+
+      const result = LocalQuizEvaluator.evaluateQuiz(
+        activeQuestions,
+        answers,
+        pass_percentage
+      );
+
+      console.info("[Dev Evaluator] Result:", result);
+
+      form.dispatchEvent(
+        new CustomEvent("quiz:evaluated", {
+          bubbles: true,
+          detail: result,
+        })
+      );
+    });
 
-
-
-    <div class="form-container">
-        <form id="quiz-form">
-            <input type="hidden" name="quiz_abs_path" value="{{ .RelPermalink }}">
-
-            {{ range $index, $question := .Params.questions }}
-            <div class="question" data-question-id="{{ $question.id }}" id="q-{{ $question.id }}">
-                <div class="question-number">Question {{ add $index 1 }}</div>
-                <div class="question-text">{{ $question.text }}</div>
-                {{ if $question.instructions }}
-                <div class="question-instructions">{{ $question.instructions }}</div>
-                {{ else }}
-                {{ if eq $question.type "multiple-answers" }}
-                <div class="question-instructions">Select all that apply</div>
-                {{ else if eq $question.type "single-answer" }}
-                <div class="question-instructions">Select one answer</div>
-                {{ else if eq $question.type "short-answer" }}
-                <div class="question-instructions">Type your answer below</div>
-                {{ end }}
-                {{ end }}
-
-                {{ if or ( eq $question.type "single-answer") ( eq $question.type "multiple-answers" ) }}
-                {{ range $optIndex, $option := $question.options }}
-                <div class="option">
-                    <label>
-                        {{ if eq $question.type "multiple-answers" }}
-                        <input type="checkbox" name="selected_option_ids_{{ $question.id }}" value="{{ $option.id }}">
-                        {{ else }}
-                        <input type="radio" name="selected_option_ids_{{ $question.id }}" value="{{ $option.id }}">
-                        {{ end }}
-                        <span>{{ $option.text }}</span>
-                    </label>
-                </div>
-                {{ end }}
-
-                {{ else if (eq $question.type "short-answer") }}
-                <input type="text" name="answer_text_{{ $question.id }}" class="text-input"
-                    placeholder="Type your answer here">
-                {{ end }}
-            </div>
-            {{ end }}
-
-        </form>
-    </div>
-</div>
+    console.info(
+      "[Dev Evaluator] Local quiz evaluator active. %d questions loaded.",
+      activeQuestions.length
+    );
+  })();
+</script>
+{{ end }}
 
 {{ else }}
 
 <!-- In production build, show a loader while redirecting to the test page -->
 <style>
-    /* HTML: <div class="loader"></div> */
-    .loader {
-        width: 50px;
-        padding: 8px;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        background: var(--bs-primary);
-        --_m:
-            conic-gradient(#0000 10%, #000),
-            linear-gradient(#000 0 0) content-box;
-        -webkit-mask: var(--_m);
-        mask: var(--_m);
-        -webkit-mask-composite: source-out;
-        mask-composite: subtract;
-        animation: l3 1s infinite linear;
-    }
-
-    .loader-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 90vh;
-        text-align: center;
-    }
-
-    @keyframes l3 {
-        to {
-            transform: rotate(1turn)
-        }
-    }
+  .loader {
+      width: 50px;
+      padding: 8px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background: var(--bs-primary);
+      --_m:
+          conic-gradient(#0000 10%, #000),
+          linear-gradient(#000 0 0) content-box;
+      -webkit-mask: var(--_m);
+      mask: var(--_m);
+      -webkit-mask-composite: source-out;
+      mask-composite: subtract;
+      animation: l3 1s infinite linear;
+  }
+
+  .loader-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 90vh;
+      text-align: center;
+  }
+
+  @keyframes l3 {
+      to {
+          transform: rotate(1turn)
+      }
+  }
 </style>
 <div class="loader-container">
-    <div class="loader">
-    </div>
-    <p class="loader-text">Preparing your test...</p>
+  <div class="loader"></div>
+  <p class="loader-text">Preparing your test...</p>
 </div>
 
 {{ end }}
@@ -349,40 +450,33 @@ <h1>{{ $title }}</h1>
 {{ $tesAbsPath := .RelPermalink }}
 
 <script>
-    const testId = {{$test.id}};
-    const testAbsPath = "{{$tesAbsPath}}";
-    const build = {{$build}};
+  const testId = {{ $test.id }};
+  const testAbsPath = "{{ $tesAbsPath }}";
+  const build = "{{ $build }}";
 
+  function HandleGoBack() {
+    window.academyContext?.Router?.back();
+  }
 
-    // Event Listeners
-    function HandleGoBack() {
-        window.academyContext?.Router?.back();
-    }
+  const isProdBuild = build === "production";
 
+  if (!isProdBuild) {
+    const backBtn = document.getElementById("go-back");
 
-    // get the prod build param 
-    const isProdBuild = build === "production"
-
-    if (!isProdBuild) {
-        const backBtn = document.getElementById("go-back")
-
-        if (backBtn?.addEventListener) {
-            backBtn.addEventListener("click", HandleGoBack);
-        }
+    if (backBtn?.addEventListener) {
+      backBtn.addEventListener("click", HandleGoBack);
     }
+  }
 
-
-
-    // Initialize when context is ready
-    window.addEventListener("academyContextReady", () => {
-        if (isProdBuild && window.academyContext?.RegistrationData?.id) {
-            // redirect to test page 
-            const curriculaRoot = window.location.pathname.split("/").slice(0, 5).join("/");
-            window.location.replace(`${curriculaRoot}/test?id=${testId}&registration_id=${window.academyContext?.RegistrationData?.id}&test_abs_path=${testAbsPath}`);
-            return;
-        }
-    });
-
+  window.addEventListener("academyContextReady", () => {
+    if (isProdBuild && window.academyContext?.RegistrationData?.id) {
+      const curriculaRoot = window.location.pathname.split("/").slice(0, 5).join("/");
+      window.location.replace(
+        `${curriculaRoot}/test?id=${testId}&registration_id=${window.academyContext?.RegistrationData?.id}&test_abs_path=${testAbsPath}`
+      );
+      return;
+    }
+  });
 </script>
 
-{{ end }}
+{{ end }}
\ No newline at end of file
