Quiz

dist/engrid.js

@@ -17,7 +17,7 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Thursday, December 4, 2025 @ 19:15:20 ET
+ *  Date: Monday, December 15, 2025 @ 15:51:05 ET
  *  By: fernando
  *  ENGrid styles: v0.23.0
  *  ENGrid scripts: v0.23.2
@@ -27066,6 +27066,173 @@ class Bridger {
     return window.userData[property];
   }
 
+}
+;// CONCATENATED MODULE: ./src/scripts/quiz.ts
+
+
+class Quiz {
+  constructor() {
+    _defineProperty(this, "logger", new logger_EngridLogger("Quiz", "#FFFFFF", "#4d9068", "🛠️"));
+
+    _defineProperty(this, "sessionItemKey", `quiz-results-${engrid_ENGrid.getPageID()}`);
+
+    if (!this.shouldRun()) return;
+    this.checkForFormSkip();
+    this.handleQuizResults();
+    this.setBgImage();
+    this.addEventListeners();
+  }
+
+  shouldRun() {
+    return engrid_ENGrid.getBodyData("subtheme") === "quiz";
+  }
+
+  setBgImage() {
+    const imageUrl = document.querySelector(".body-banner .en__component--imageblock  img")?.getAttribute("src");
+    const mobileImageUrl = document.querySelector(".body-banner .en__component--imageblock:last-child img")?.getAttribute("src");
+
+    if (imageUrl) {
+      document.body.style.setProperty("--quiz-bg-image", `url(${imageUrl})`);
+      document.body.style.setProperty("--quiz-mobile-bg-image", `url(${mobileImageUrl})`);
+    }
+  }
+
+  addEventListeners() {
+    // Handle check my answer button click
+    const checkAnswerBtn = document.querySelector(".button-quiz-answer");
+    checkAnswerBtn?.addEventListener("click", () => this.checkAnswer()); // Clicking any answer hides the error message
+
+    [...document.querySelectorAll(".en__component--svblock .en__field__input--radio, .en__component--svblock .en__field__input--imageSelectField")].forEach(el => {
+      el.addEventListener("change", () => {
+        this.toggleError(false); // If the button exists, we only check the answer on button click
+
+        if (checkAnswerBtn) return;
+        this.checkAnswer();
+      });
+    }); // Skip button
+
+    const skipBtn = document.querySelector(".button-next-page");
+    skipBtn?.addEventListener("click", () => this.redirectToNextPage());
+  }
+
+  checkAnswer() {
+    const selectedAnswer = document.querySelector(".en__component--svblock input:checked");
+    const correctAnswer = document.querySelector('.en__component--svblock input[value="1"]');
+
+    if (!selectedAnswer) {
+      this.toggleError(true);
+      return;
+    } // Disable inputs after selection
+
+
+    document.querySelectorAll(".en__component--svblock .en__field__input--radio, .en__component--svblock .en__field__input--imageSelectField").forEach(el => {
+      el.setAttribute("disabled", "true");
+    });
+    const isCorrect = selectedAnswer === correctAnswer;
+    engrid_ENGrid.setBodyData("quiz-answer", isCorrect ? "correct" : "incorrect");
+    const results = JSON.parse(sessionStorage.getItem(this.sessionItemKey) || "{}");
+    results[engrid_ENGrid.getPageNumber()] = isCorrect ? 1 : 0;
+    sessionStorage.setItem(this.sessionItemKey, JSON.stringify(results));
+    correctAnswer?.closest(".en__field__item")?.classList.add("quiz-correct-answer");
+
+    if (!isCorrect) {
+      selectedAnswer.closest(".en__field__item")?.classList.add("quiz-incorrect-answer");
+    }
+
+    this.scrollToFeedback();
+  }
+
+  toggleError(show) {
+    const errorMessage = document.querySelector(".quiz-error");
+
+    if (errorMessage) {
+      errorMessage.style.display = show ? "block" : "none";
+    }
+  }
+
+  checkForFormSkip() {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    if (urlParams.get("skip_form") === "true") {
+      sessionStorage.setItem("quiz-skip-form", "true");
+    }
+
+    const isFormPage = document.querySelector(".quiz-signup-form");
+    if (!isFormPage) return;
+
+    if (sessionStorage.getItem("quiz-skip-form") === "true" || window.pageJson.supporterId !== undefined) {
+      sessionStorage.removeItem("quiz-skip-form");
+      this.redirectToNextPage();
+    } else {
+      engrid_ENGrid.setBodyData("show-form", "true");
+    }
+  }
+
+  redirectToNextPage() {
+    const nextPage = `/${engrid_ENGrid.getPageNumber() + 1}`;
+    window.location.href = window.location.href.split("?")[0].replace(/\/\d\/?$/, nextPage);
+  }
+
+  handleQuizResults() {
+    const isResultsPage = document.querySelector(".quiz-results");
+    if (!isResultsPage) return;
+    const results = JSON.parse(sessionStorage.getItem(this.sessionItemKey) || "{}");
+    const totalQuestions = Object.keys(results).length;
+    const score = Object.values(results).reduce((a, b) => Number(a) + Number(b), 0) || 0;
+    const scorePercent = totalQuestions ? Math.round(score / totalQuestions * 100) : 0;
+    let scoreRange;
+
+    if (scorePercent >= 75) {
+      scoreRange = "75-100";
+    } else if (scorePercent >= 50) {
+      scoreRange = "50-75";
+    } else if (scorePercent >= 25) {
+      scoreRange = "25-50";
+    } else {
+      scoreRange = "0-25";
+    }
+
+    if (window.quizResultsPage) {
+      try {
+        const resultsUrl = new URL(window.quizResultsPage);
+        resultsUrl.searchParams.set("hasQuizResults", "true");
+        resultsUrl.searchParams.set("quizTime", String(Date.now()));
+        resultsUrl.searchParams.set("totalQuestions", String(totalQuestions));
+        resultsUrl.searchParams.set("totalCorrect", String(score));
+        window.location.href = resultsUrl.toString();
+        return;
+      } catch (e) {
+        this.logger.log("Error parsing quizResultsPage URL", e);
+      }
+    }
+
+    engrid_ENGrid.setBodyData("quiz-score", scoreRange);
+    const enBlocks = document.querySelectorAll(".en__component--copyblock, .en__component--codeblock");
+    enBlocks.forEach(block => {
+      block.innerHTML = block.innerHTML.replace("{{score}}", String(score)).replace("{{total}}", String(totalQuestions));
+    });
+  }
+
+  scrollToFeedback() {
+    const submitBtn = document.querySelector(".en__submit");
+    if (!submitBtn) return;
+    const submitRect = submitBtn.getBoundingClientRect();
+
+    if (submitRect.top >= 0 && submitRect.bottom <= window.innerHeight) {
+      return;
+    }
+
+    const svBlockNext = document.querySelector(".en__component--svblock"); // scroll to midway between the bottom of the svBlock and the top of the submit button
+
+    const svBlockRect = svBlockNext?.getBoundingClientRect();
+    if (!svBlockRect) return;
+    const scrollTo = svBlockRect.bottom + (submitRect.top - svBlockRect.bottom) / 3 - window.innerHeight / 2;
+    window.scrollTo({
+      top: scrollTo,
+      behavior: "smooth"
+    });
+  }
+
 }
 ;// CONCATENATED MODULE: ./src/index.ts
  // Uses ENGrid via NPM
@@ -27087,6 +27254,7 @@ class Bridger {
 
 
 
+
 const options = {
   AutoYear: true,
   applePay: false,
@@ -27256,6 +27424,7 @@ const options = {
       unsubscribeAllRadio.closest(".en__field")?.classList.add("hide");
     }
 
+    new Quiz();
     new Bridger();
   },
   onResize: () => console.log("Starter Theme Window Resized"),

src/index.ts

@@ -24,6 +24,8 @@ import MultistepForm from "./scripts/multistep-form";
 import { AddDAF } from "./scripts/add-daf";
 import { Bridger } from "./scripts/Bridger";
 
+import { Quiz } from "./scripts/quiz";
+
 const options: Options = {
   AutoYear: true,
   applePay: false,
@@ -218,6 +220,7 @@ const options: Options = {
       // Hide the unsubscribe all radio button
       unsubscribeAllRadio.closest(".en__field")?.classList.add("hide");
     }
+    new Quiz();
     new Bridger();
   },
   onResize: () => console.log("Starter Theme Window Resized"),

src/sass/page-template-styles.scss

@@ -10,4 +10,7 @@
   &[data-engrid-page-type="p2pcheckout"] {
     @import "./themes/wwf-p2p-donation";
   }
+  &[data-engrid-subtheme="quiz"] {
+    @import "./themes/quiz";
+  }
 }