Embed

<div id="pfas-quiz"></div>

<style>
  /* ===== PFAS Quiz (Durable Embed) ===== */
  #pfas-quiz { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 720px; margin: 0 auto; }
  .qz-card { border: 1px solid rgba(0,0,0,.12); border-radius: 16px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.06); background: #fff; }
  .qz-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .qz-title { font-size: 22px; line-height: 1.2; margin: 0 0 6px; }
  .qz-sub { margin: 0 0 14px; opacity: .78; }
  .qz-progress { font-size: 13px; opacity: .75; }
  .qz-bar { height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; margin: 10px 0 18px; }
  .qz-bar > div { height: 100%; width: 0%; background: rgba(0,0,0,.8); border-radius: 999px; transition: width .25s ease; }

  .qz-q { font-size: 18px; margin: 0 0 12px; }
  .qz-options { display: grid; gap: 10px; margin: 10px 0 18px; }
  .qz-opt { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px 12px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
  .qz-opt:hover { background: rgba(0,0,0,.03); }
  .qz-opt input { margin-top: 3px; }

  .qz-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
  .qz-btn { border: 1px solid rgba(0,0,0,.18); background: #111; color: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
  .qz-btn[disabled] { opacity: .45; cursor: not-allowed; }
  .qz-btn.secondary { background: #fff; color: #111; }
  .qz-note { font-size: 12px; opacity: .7; margin-top: 10px; }

  .qz-score { font-size: 34px; font-weight: 800; margin: 6px 0 6px; }
  .qz-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: 13px; margin: 6px 0 12px; }
  .qz-email { display: grid; gap: 8px; margin: 10px 0 14px; }
  .qz-email input { border: 1px solid rgba(0,0,0,.18); border-radius: 12px; padding: 12px; font-size: 15px; width: 100%; }
  .qz-error { color: #b00020; font-size: 13px; margin-top: 6px; }

  .qz-results { margin-top: 14px; }
  .qz-item { border-top: 1px solid rgba(0,0,0,.1); padding: 12px 0; }
  .qz-item:first-child { border-top: none; }
  .qz-small { font-size: 13px; opacity: .8; margin: 4px 0 0; }
  .qz-correct { font-weight: 700; }
</style>

<script>
(function(){
  const mount = document.getElementById("pfas-quiz");
  if (!mount) return;

  // OPTIONAL: If you want to send/store emails somewhere, paste a webhook URL here.
  // Example: Make.com webhook / Zapier catch hook / your backend endpoint.
  const WEBHOOK_URL = "https://hook.eu1.make.com/fa40o3pclf4tdndbelymc1t93tlaicew"; // <- paste your webhook URL between quotes to enable sending

  const quiz = {
    title: "How Widespread Are PFAS in Everyday Products?",
    subtitle: "10 questions · ~1 minute. Get your score and detailed breakdown at the end.",
    questions: [
      {
        q: "What are PFAS most commonly used for in products?",
        options: [
          "Adding fragrance",
          "Improving color",
          "Making products resistant to water, oil, or stains",
          "Reducing production costs"
        ],
        correct: 2,
        why: "PFAS have been widely used for water/oil/stain resistance and surface performance."
      },
      {
        q: "Why are PFAS often called “forever chemicals”?",
        options: [
          "They are patented materials",
          "They are extremely expensive",
          "They do not easily break down in the environment",
          "They are only used once"
        ],
        correct: 2,
        why: "Many PFAS are highly persistent, meaning they degrade very slowly."
      },
      {
        q: "Which set best describes where PFAS may be found?",
        options: [
          "Only industrial sites",
          "Only medical equipment",
          "Only outdoor products",
          "A wide range of everyday consumer product categories"
        ],
        correct: 3,
        why: "PFAS have been investigated across many consumer categories (textiles, cookware, packaging, cosmetics, etc.)."
      },
      {
        q: "Which of the following product categories may contain PFAS?",
        options: [
          "Non-stick cookware",
          "Food packaging",
          "Water-resistant textiles",
          "All of the above"
        ],
        correct: 3,
        why: "These are common categories where PFAS have historically been used or detected."
      },
      {
        q: "PFAS are most associated with products designed to be:",
        options: [
          "Decorative",
          "Resistant to heat, water, or grease",
          "Made from natural fibers only",
          "Fragile and lightweight"
        ],
        correct: 1,
        why: "PFAS performance often relates to repelling water/oils/grease and resisting heat/chemical degradation."
      },
      {
        q: "Which statement about regulation is most accurate?",
        options: [
          "PFAS are fully banned worldwide",
          "PFAS are unregulated everywhere",
          "Regulations vary by country and are increasing",
          "Only food products are regulated"
        ],
        correct: 2,
        why: "Rules differ by jurisdiction, and many places are tightening restrictions over time."
      },
      {
        q: "Which household item is frequently discussed in PFAS research and public guidance?",
        options: [
          "Glass containers",
          "Non-stick pans",
          "Cotton towels",
          "Wooden furniture"
        ],
        correct: 1,
        why: "Non-stick coatings have been a major area of PFAS-related attention historically."
      },
      {
        q: "PFAS are difficult to remove from the environment primarily because:",
        options: [
          "They dissolve instantly",
          "They evaporate quickly",
          "They are chemically stable",
          "They are invisible"
        ],
        correct: 2,
        why: "Chemical stability contributes to persistence and challenges in remediation."
      },
      {
        q: "Which property makes PFAS attractive for certain manufacturing uses?",
        options: [
          "Bright coloration",
          "Resistance to degradation",
          "Low melting point",
          "Natural biodegradability"
        ],
        correct: 1,
        why: "Durability and resistance are key reasons PFAS were used historically."
      },
      {
        q: "Which statement best reflects the overall concern around PFAS in consumer contexts?",
        options: [
          "They are limited to rare specialty products",
          "They are short-lived chemicals",
          "They are widespread and persistent",
          "They only exist naturally"
        ],
        correct: 2,
        why: "The concern is largely about prevalence plus persistence in the environment."
      }
    ]
  };

  const state = {
    step: 0,                  // 0 = intro, 1..10 questions, 11 = score gate, 12 = detailed results
    answers: Array(quiz.questions.length).fill(null),
    score: 0,
    email: ""
  };

  function pct(n){ return Math.round((n/quiz.questions.length)*100); }

  function render(){
    mount.innerHTML = "";
    const card = document.createElement("div");
    card.className = "qz-card";
    mount.appendChild(card);

    // INTRO
    if (state.step === 0) {
      card.innerHTML = `
        <h2 class="qz-title">${quiz.title}</h2>
        <p class="qz-sub">${quiz.subtitle}</p>
        <div class="qz-actions">
          <button class="qz-btn" id="qz-start">Start the quiz</button>
        </div>
        <p class="qz-note">Educational quiz only. No medical claims.</p>
      `;
      card.querySelector("#qz-start").onclick = () => { state.step = 1; render(); };
      return;
    }

    // QUESTIONS 1..10
    if (state.step >= 1 && state.step <= quiz.questions.length) {
      const idx = state.step - 1;
      const q = quiz.questions[idx];

      const answered = state.answers[idx] !== null;
      const progress = pct(idx); // completed prior questions

      card.innerHTML = `
        <div class="qz-row">
          <div class="qz-progress">Question ${state.step} of ${quiz.questions.length}</div>
          <div class="qz-progress">${progress}% complete</div>
        </div>
        <div class="qz-bar"><div style="width:${progress}%"></div></div>

        <h3 class="qz-q">${q.q}</h3>
        <div class="qz-options" id="qz-options"></div>

        <div class="qz-actions">
          <button class="qz-btn secondary" id="qz-back"${state.step === 1 ? " disabled" : ""}>Back</button>
          <button class="qz-btn" id="qz-next" ${answered ? "" : "disabled"}>Next</button>
        </div>
      `;

      const optionsWrap = card.querySelector("#qz-options");
      q.options.forEach((text, optIdx) => {
        const opt = document.createElement("label");
        opt.className = "qz-opt";
        const checked = state.answers[idx] === optIdx ? "checked" : "";
        opt.innerHTML = `
          <input type="radio" name="q${idx}" value="${optIdx}" ${checked} />
          <div>${text}</div>
        `;
        opt.onclick = () => {
          state.answers[idx] = optIdx;
          card.querySelector("#qz-next").disabled = false;
        };
        optionsWrap.appendChild(opt);
      });

      card.querySelector("#qz-back").onclick = () => {
        if (state.step > 1) state.step -= 1;
        else state.step = 0;
        render();
      };

      card.querySelector("#qz-next").onclick = () => {
        if (state.step < quiz.questions.length) state.step += 1;
        else state.step = 11; // score gate
        render();
      };

      return;
    }

    // SCORE + EMAIL GATE
    if (state.step === 11) {
      // compute score
      let s = 0;
      quiz.questions.forEach((q, i) => {
        if (state.answers[i] === q.correct) s += 1;
      });
      state.score = s;

      let band = "";
      if (s <= 3) band = "Starter";
      else if (s <= 7) band = "Informed";
      else band = "Highly aware";

      card.innerHTML = `
        <div class="qz-row">
          <div class="qz-progress">Completed</div>
          <div class="qz-progress">Score summary</div>
        </div>
        <div class="qz-bar"><div style="width:100%"></div></div>

        <h2 class="qz-title">Your Score</h2>
        <div class="qz-score">${state.score} / ${quiz.questions.length}</div>
        <div class="qz-badge">${band}</div>

        <p class="qz-sub" style="margin-top:10px;">
          Enter your email to receive your <strong>detailed results</strong> (which questions you got right/wrong and brief explanations).
        </p>

        <div class="qz-email">
          <input id="qz-email" type="email" placeholder="Email address" autocomplete="email" />
          <button class="qz-btn" id="qz-get-results">Get my detailed results</button>
          <div class="qz-error" id="qz-error" style="display:none;"></div>
        </div>

        <div class="qz-actions">
          <button class="qz-btn secondary" id="qz-review">Review answers</button>
        </div>

        <p class="qz-note">We’ll only use your email to send the detailed quiz results (if webhook is connected).</p>
      `;

      card.querySelector("#qz-review").onclick = () => { state.step = 1; render(); };

      const emailInput = card.querySelector("#qz-email");
      const errorEl = card.querySelector("#qz-error");

      function validEmail(v){
        return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(String(v).trim());
      }

      card.querySelector("#qz-get-results").onclick = async () => {
        const email = String(emailInput.value || "").trim();
        if (!validEmail(email)) {
          errorEl.style.display = "block";
          errorEl.textContent = "Please enter a valid email address.";
          return;
        }
        errorEl.style.display = "none";
        state.email = email;

        // If you paste a webhook URL, we POST the results there (optional).
        if (WEBHOOK_URL) {
          try {
            await fetch(WEBHOOK_URL, {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                email: state.email,
                score: state.score,
                total: quiz.questions.length,
                answers: state.answers,
                timestamp: new Date().toISOString()
              })
            });
          } catch (e) {
            // Even if webhook fails, still show the results on-screen.
            console.warn("Webhook error:", e);
          }
        }

        state.step = 12;
        render();
      };

      return;
    }

    // DETAILED RESULTS (POST EMAIL)
    if (state.step === 12) {
      const total = quiz.questions.length;
      const s = state.score;

      let summary = "";
      if (s <= 3) summary = "You’re at the start of the learning curve — PFAS is broader than most people expect.";
      else if (s <= 7) summary = "Solid awareness. A few misconceptions are common, and you’re close to a full picture.";
      else summary = "Strong awareness. You understand the big themes: prevalence, persistence, and why it matters.";

      const header = document.createElement("div");
      header.innerHTML = `
        <h2 class="qz-title">Detailed Results</h2>
        <p class="qz-sub">${summary}</p>
        <div class="qz-badge">Score: <strong>${s}/${total}</strong> · Email: <strong>${escapeHtml(state.email)}</strong></div>
        <div class="qz-actions" style="margin-top:10px;">
          <button class="qz-btn secondary" id="qz-restart">Restart</button>
        </div>
      `;
      card.appendChild(header);

      const list = document.createElement("div");
      list.className = "qz-results";
      quiz.questions.forEach((q, i) => {
        const user = state.answers[i];
        const ok = user === q.correct;
        const item = document.createElement("div");
        item.className = "qz-item";
        item.innerHTML = `
          <div><strong>Q${i+1}.</strong> ${escapeHtml(q.q)}</div>
          <div class="qz-small">
            Your answer: <span class="${ok ? "qz-correct" : ""}">${escapeHtml(q.options[user] ?? "—")}</span>
            ${ok ? " ✓" : " ✕"}
          </div>
          ${ok ? "" : `<div class="qz-small">Correct answer: <span class="qz-correct">${escapeHtml(q.options[q.correct])}</span></div>`}
          <div class="qz-small">${escapeHtml(q.why)}</div>
        `;
        list.appendChild(item);
      });
      card.appendChild(list);

      card.querySelector("#qz-restart").onclick = () => {
        state.step = 0;
        state.answers = Array(total).fill(null);
        state.score = 0;
        state.email = "";
        render();
      };
      return;
    }
  }

  function escapeHtml(str){
    return String(str).replace(/[&<>"']/g, s => ({
      "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;"
    }[s]));
  }

  render();
})();
</script>


Rocker Duck

RockerDuck designs premium, Italian-made wristbands that elevate the look and feel of modern wearables. Our signature EcoBand is crafted from Viridis leather — a sustainable, vegan alternative used by top fashion houses — combining luxury aesthetics, all-day comfort, and exceptional durability. Each band is handmade in the same Italian ateliers that produce straps for high-end timepieces, bringing true craftsmanship to the world of fitness and smart-tracking devices.
We create elegant, water-resistant, and performance-driven straps for people who value style, quality, and sustainability. RockerDuck transforms your Whoop device into a refined accessory that matches your lifestyle.