WELCOME QUIZ TESTER!

🧩 Prompt #1 — “Your Quiz Setup Info”

(Copy the entire prompt underneath this video into ChatGPT and fill in your details before running it.)

↓ Watch This Video For FULL Details and Walk-though ↓

Hey ChatGPT! 👋  
I’m building my quiz using **The Ultimate Quiz Course** by Jack Long, and I need your help preparing all my setup info before we build the actual quiz code.

Here’s everything you’ll need from me 👇  

---

🎯 **Niche / Audience:**  
Parents of teenagers who feel disconnected

💡 **Quiz Title:**  
Stressed Parents: Why Is Your Teenager ACTUALLY Driving You Crazy?

🎨 **Brand Colour (Hex Code):**  
#FF6200

---

### ⚙️ Question 1 — Your IDENTITY Question
(✨ This is the ONLY question that determines which result people get.)

🧭 **Question 1 Title:**  
“Which of the following feels most like your current parenting style?”

💬 **Answer 1 (Label + Redirect URL):**  
Label: I’m the calm diffuser who keeps the peace (even if I swallow my feelings).
Redirect URL (for Result A): https://www.jacklongdigital.com/quiz-2-0-waitlist

💬 **Answer 2 (Label + Redirect URL):**  
Label: I’m the fixer/coach who jumps in with plans, tips, and solutions.
Redirect URL (for Result B): https://www.jacklongdigital.com/quiz-2-0-waitlist

💬 **Answer 3 (Label + Redirect URL):**  
Label: I’m the laid-back one who picks my battles and hopes it passes.
Redirect URL (for Result C): https://www.jacklongdigital.com/quiz-2-0-waitlist

💬 **Answer 4 (Label + Redirect URL):**  
Label: I’m the boundary-setter: clear rules, clear consequences, consistency.
Redirect URL (for Result D): https://www.jacklongdigital.com/quiz-2-0-waitlist

---

✅ **Summary Check Before We Build:**
- [ ] I’ve written my full quiz title  
- [ ] I’ve entered my brand colour (Hex code)  
- [ ] I’ve written my Question 1 title  
- [ ] I’ve entered all 4 answers with redirect URLs  

---

💬 **About the Next Step**
When I paste the next prompt (“Prompt #2 – Build My Quiz”), you will:
1️⃣ Take this setup info  
2️⃣ Fill in all placeholders inside my quiz theme code (Minimalist or Modernist)  
3️⃣ Automatically write the 6 remaining questions using Jack Long’s “7 Quizzical Questions” method  
4️⃣ Generate one clean, Kajabi-ready code block I can copy and paste.

---

🎯 **Now I’m ready!**  
Please confirm you’ve understood everything above.  
Then I’ll paste in **either my Minimalist or Modernist Theme Prompt** next — and you can take it from there. 🚀

QUIZ QUESTIONS WRITTEN FOR YOU:

🧠 Prompt #2 — “Build My Quiz Prompt”

Copy this into ChatGPT after you’ve run Prompt #1.
Then paste your chosen theme code (Minimalist or Modernist) with placeholders.
ChatGPT will fill everything and return a single, ready-to-paste code block.

You are “THE QUIZ BUILDER ENGINE” for Jack Long’s **The Ultimate Quiz Course 2.0**.

Your tasks (in order):
1) Read the student’s inputs from **Prompt #1 (Setup Info)** that were provided earlier in this chat:
   - Niche/Audience, Quiz Title, Brand Colour (HEX)
   - Q1 Title + 4 Answer Labels
   - 4 Redirect URLs (A, B, C, D) — these map to Result A/B/C/D
2) I will now paste a **QUIZ THEME CODE with placeholders** (Minimalist or Modernist).  
   You must:
   - Replace **all placeholders** with the student’s data.
   - **Generate Question 2–7** using Jack’s 7-Question method (below) for this niche.
   - Keep the exact functionality and DOM structure of the theme intact.
   - Set the brand colour (buttons + progress) using the provided HEX.
   - Output **ONE** complete code block only (HTML + CSS + JS), Kajabi-ready. No commentary.

### Writing Rules for Q2–Q7 (use this order + style)
- **Q1 is already provided by the student and determines the result. Do NOT alter that logic.**
- For the remaining six:
  - **Q2 – Identify something they’ve tried** (ui:"cards", 4 options)
  - **Q3 – Identify their journey / current approach** (ui:"cards", 4 options)
  - **Q4 – Identify money/relationship/health/time “budget”** (ui:"list", 4 options, fun metaphor acceptable)
  - **Q5 – Identify internal thoughts / feelings** (ui:"list", 4 options)
  - **Q6 – Identify frustrations / problems** (ui:"cards", 4 options)
  - **Q7 – Identify values / promise / goals / ideal future** (ui:"grid", 4 options)
- **Exactly 4 options** per question.
- Keep options concise, conversational, niche-relevant. No jargon.
- Don’t reveal logic like “this determines your result.” Never mention buckets.
- Maintain the 2×2 “cards” layout where the theme uses it (the theme’s CSS handles this automatically).

### Placeholder mapping (replace these in the theme code)
- [[QUIZ_TITLE]] → From Prompt #1
- [[BRAND_COLOUR_HEX]] → From Prompt #1 (use for progress + buttons)
- [[Q1_TITLE]] → From Prompt #1
- [[Q1_A1_LABEL]] … [[Q1_A4_LABEL]] → From Prompt #1
- [[RESULT_URL_A]] … [[RESULT_URL_D]] → From Prompt #1
- [[AUTOGENERATED_QUESTIONS]] → Replace with six full question objects (Q2..Q7) in the theme’s JSON structure

### Output
- Return **one single** final code block (HTML+CSS+JS).  
- Do not include commentary, markdown fences, or explanations.

Acknowledge with: “Ready for your theme code with placeholders.” Then I’ll paste it.

🟣 Minimalist Theme — with placeholders

Vibe: Calm, warm, friendly, “low-friction.”

Best for: B2C (parenting, wellness, fitness, mindset), and softer B2B (life coaches, creatives, therapists, healers).

Design: Soft cards, rounded edges, gentle hover lift, airy spacing.

Why pick it: You want approachability and trust first; you’re guiding reflective, psychological answers.

Branding tip: Pastels or mid-tone brand colours look great; keep contrast comfortable.

🟠 Modernist Theme — with placeholders

Vibe: Bold, confident, “operator energy.”

Best for: B2B (consultants, agencies, course creators, SaaS, e-com operators), performance-minded coaches.

Design: Clean panels, crisp borders, decisive hover states, stronger progress bar.

Why pick it: You’re signalling authority, speed, and structure to a more skeptical/pro buyer.

Branding tip: Strong accent colours (like my brand orange) pop; keep headings tight and directive.

<!-- JL QUIZ v2 (Minimalist Theme – PLACEHOLDER TEMPLATE) -->

<div id="jl-quiz"></div>
<style>
  /* ====== THEME ====== */
  :root{
    --jl-bg:#fbfbf8;                 /* card bg */
    --jl-card: [[BRAND_COLOUR_HEX]]; /* option bg */
    --jl-ink:#28303d;                /* text */
    --jl-muted:#76746e;              /* secondary text */
    --jl-accent:[[BRAND_COLOUR_HEX]];/* progress/selection */
    --jl-primary:[[BRAND_COLOUR_HEX]];/* buttons */
    --jl-primary-text:#fff;
    --jl-radius:18px;
    --jl-shadow:0 10px 24px rgba(0,0,0,.06);
  }

  #jl-quiz, #jl-quiz * {
    box-sizing:border-box;
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  }

  #jl-quiz{
    max-width:820px;
    margin:0 auto;
    background:#fff;
    border-radius:24px;
    padding:28px;
    box-shadow:var(--jl-shadow);
  }

  /* QUIZ TITLE (above progress bar) */
  .jl-quiz-title{
    font-size:18px;
    line-height:1.2;
    color:var(--jl-ink);
    font-weight:700;
    margin:4px 0 8px;
    text-align:left;
  }

  /* PROGRESS BAR */
  .jl-top{ display:flex; align-items:center; gap:14px; color:var(--jl-muted); font-size:14px; margin-bottom:18px; }
  .jl-bar{ flex:1; height:8px; background:#e7e6df; border-radius:999px; overflow:hidden; }
  .jl-bar > span{ display:block; height:100%; width:0; background:var(--jl-accent); transition:width .35s ease; }
  .jl-step-label{ font-size:12px; color:var(--jl-muted); min-width:64px; text-align:right; }

  .jl-title{ font-size:26px; line-height:1.25; color:var(--jl-ink); text-align:center; margin:6px 0 18px; }

  /* ====== LAYOUTS ====== */
  .jl-opts{ display:grid; gap:14px; }
  .jl--list{ grid-template-columns:1fr; }

  /* 2×2 layout for card-style questions */
  .jl--cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  @media (max-width:700px){
    .jl--cards{ grid-template-columns:1fr; }
  }

  .jl--grid{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:700px){ .jl--grid{ grid-template-columns:1fr 1fr; } }

  /* ====== OPTIONS ====== */
  .jl-opt{
    background:var(--jl-card);
    border:2px solid transparent;
    border-radius:var(--jl-radius);
    padding:16px;
    text-align:center;
    color:var(--jl-ink);
    cursor:pointer;
    transition:transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    min-height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  .jl-opt:hover{ transform:translateY(-2px); box-shadow:var(--jl-shadow); }
  .jl-opt[aria-checked="true"]{ border-color:var(--jl-accent); background:#f4f3ed; }

  /* Increase option label size ONLY for Minimalist */
  .jl-label{ font-size:20px; line-height:1.35; }

  /* LIST tweaks (inherit 20px) */
  .jl--list .jl-opt {
    min-height:64px;
    padding:14px 20px;
    font-size:20px;   /* ensure list options also read larger */
    font-weight:500;
    border-radius:14px;
  }

  .jl--list .jl-opt:hover {
    transform:none;
    background-color:#f2f1ec;
  }

  .jl-footer{ display:none !important; }

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
</style>

<script>
(function(){
/* =============================== */
/*           CONFIGURE             */
/* =============================== */

const config = {
  /* QUIZ TITLE (filled by Prompt #2) */
  quizTitle: "[[QUIZ_TITLE]]",

  /* Redirect (based ONLY on Q1) happens after the final question */
  resultRedirect: { enabled: true, includeAnswersInUrl: true },

  texts: { back:"Back", next:"Next", finish:"See my result" },

  // ---- 7 QUESTIONS (Q1 provided; Q2–Q7 GENERATED by Prompt #2) ----
  questions: [
    // Q1 — IDENTIFY who they are (determines result)
    {
      id: "q1",
      title: "[[Q1_TITLE]]",
      ui: "list",
      multiple: false,
      type: "",
      options: [
        { label:"[[Q1_A1_LABEL]]", value:"a1", bucket:"BucketA", redirect:"[[RESULT_URL_A]]" },
        { label:"[[Q1_A2_LABEL]]", value:"a2", bucket:"BucketB", redirect:"[[RESULT_URL_B]]" },
        { label:"[[Q1_A3_LABEL]]", value:"a3", bucket:"BucketC", redirect:"[[RESULT_URL_C]]" },
        { label:"[[Q1_A4_LABEL]]", value:"a4", bucket:"BucketD", redirect:"[[RESULT_URL_D]]" }
      ]
    },

    /* Prompt #2 must replace this token with SIX complete question objects (Q2..Q7)
       following Jack's 7-Question method and the theme's structure:
       - Q2 (ui:"cards"), Q3 (ui:"cards"), Q4 (ui:"list"),
         Q5 (ui:"list"), Q6 (ui:"cards"), Q7 (ui:"grid")
       - Exactly 4 options per question, concise & niche-relevant. */
    [[AUTOGENERATED_QUESTIONS]]
  ],

  /* Optional tiny results copy if instant redirect is false (we keep defaults here) */
  resultsCopy: {
    BucketA: { title:"Result A", blurb:"" },
    BucketB: { title:"Result B", blurb:"" },
    BucketC: { title:"Result C", blurb:"" },
    BucketD: { title:"Result D", blurb:"" }
  },

  /* KEEP: redirect instantly after final question (Minimalist) */
  instantRedirect: true,
  resultsCTA: { label:"Continue", openInNewTab:false }
};

/* =============================== */
/*          ENGINE/RENDER          */
/* =============================== */

const root = document.getElementById('jl-quiz');
if(!root) return;

let step = 0;
const answers = {};
let resultBucket = null;
let resultRedirectURL = null;

function updateResultFromQ1(){
  const q1 = config.questions[0];
  const picked = answers[q1.id]?.[0];
  const opt = q1.options.find(o => o.value === picked);
  if(opt){
    resultBucket = opt.bucket || null;
    resultRedirectURL = opt.redirect || null;
  } else {
    resultBucket = null; resultRedirectURL = null;
  }
}

function percent(){ return Math.round((step / config.questions.length) * 100); }

function render(){
  root.innerHTML = "";

  if(step < config.questions.length){
    const q = config.questions[step];

    // QUIZ TITLE
    const quizH = document.createElement('div');
    quizH.className = 'jl-quiz-title';
    quizH.textContent = config.quizTitle || "";
    root.appendChild(quizH);

    // PROGRESS
    const top = document.createElement('div');
    top.className = 'jl-top';
    top.innerHTML = `
      <div class="sr-only">${step+1} / ${config.questions.length}</div>
      <div class="jl-bar"><span style="width:${percent()}%"></span></div>
      <div class="jl-step-label">Q${step+1} of ${config.questions.length}</div>
    `;
    root.appendChild(top);

    // QUESTION TITLE
    const h = document.createElement('div');
    h.className = 'jl-title';
    h.textContent = q.title;
    root.appendChild(h);

    // OPTIONS
    const opts = document.createElement('div');
    const layout = q.ui === 'grid' ? 'jl--grid' : (q.ui === 'cards' ? 'jl--cards' : 'jl--list');
    opts.className = `jl-opts ${layout}`;
    root.appendChild(opts);

    const currentVals = new Set(answers[q.id] || []);
    q.options.forEach((o,i)=>{
      const opt = document.createElement('button');
      opt.type = "button";
      opt.className = 'jl-opt';
      opt.setAttribute('role', q.multiple ? 'checkbox' : 'radio');
      opt.setAttribute('aria-checked', currentVals.has(o.value) ? 'true' : 'false');
      opt.innerHTML = `<span class="jl-label">${o.label}</span><span class="sr-only"> option ${i+1}</span>`;

      opt.addEventListener('click', ()=>{
        if(q.multiple){
          if(currentVals.has(o.value)) currentVals.delete(o.value); else currentVals.add(o.value);
          answers[q.id] = Array.from(currentVals);
          opt.setAttribute('aria-checked', currentVals.has(o.value) ? 'true' : 'false');
        } else {
          answers[q.id] = [o.value];
          [...opts.children].forEach(c=>c.setAttribute('aria-checked','false'));
          opt.setAttribute('aria-checked','true');
          if(q.id === 'q1'){ updateResultFromQ1(); }
          setTimeout(()=>{ step++; render(); }, 160);
        }
      });

      opts.appendChild(opt);
    });

  } else {
    updateResultFromQ1();
    let dest = resultRedirectURL || "#";
    if(config.resultRedirect.enabled && config.resultRedirect.includeAnswersInUrl){
      const params = new URLSearchParams();
      if(resultBucket) params.set("bucket", resultBucket);
      config.questions.forEach(q=>{
        const val = (answers[q.id]||[]).join(",");
        if(q.id !== "q1") params.set(q.id, val);
      });
      dest += (dest.includes("?") ? "&" : "?") + params.toString();
    }
    if(config.instantRedirect){ window.location.assign(dest); return; }
  }
}

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

<!-- JL QUIZ v2 (Modernist Theme – PLACEHOLDER TEMPLATE) -->

<div id="jl-quiz-v2" data-quiz="ultimate-quiz-method">
  <!-- Title / intro -->
  <div class="jlq-wrap">
    <header class="jlq-header">
      <h1>[[QUIZ_TITLE]]</h1>
      <!-- sub copy intentionally hidden -->
      <p class="jlq-sub" style="display:none;"></p>
    </header>

    <!-- Progress -->
    <div class="jlq-progress" aria-hidden="true">
      <div class="jlq-progress-track">
        <div class="jlq-progress-bar" style="width: 14.3%;"></div>
      </div>
      <span class="jlq-progress-label">Q1 of 7</span>
    </div>

    <!-- Question panel -->
    <section class="jlq-card" id="jlq-question"></section>

    <!-- Footer (optional; hidden when auto-advance is on) -->
    <footer class="jlq-footer" id="jlq-footer" hidden>
      <button type="button" class="jlq-btn jlq-prev" id="jlq-prev" aria-label="Previous question">Back</button>
      <button type="button" class="jlq-btn jlq-next" id="jlq-next" aria-label="Next question">Next</button>
    </footer>

    <noscript>
      <p>Please enable JavaScript to take this quiz. Or visit
        <a href="https://jacklongdigital.com/blog" target="_blank" rel="noopener">our blog</a>.
      </p>
    </noscript>
  </div>
</div>

<style>
  :root {
    /* Modernist theme */
    --jlq-bg: #fbfbf8;
    --jlq-panel: #ecebe4;
    --jlq-text: #28303d;
    --jlq-muted: #8d8c86;
    --jlq-accent: [[BRAND_COLOUR_HEX]]; /* ← filled by Prompt #2 */

    --jlq-radius: 16px;
    --jlq-shadow: 0 6px 24px rgba(0,0,0,0.08);
  }
  #jl-quiz-v2 { background: var(--jlq-bg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--jlq-text); }
  .jlq-wrap { max-width: 720px; margin: 0 auto; padding: 20px; }
  .jlq-header { text-align: left; margin: 8px 0 16px; }
  .jlq-header h1 { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.2; margin: 0 0 8px; }
  .jlq-sub { color: var(--jlq-muted); margin: 0; font-size: 14px; }

  .jlq-progress { display: flex; align-items: center; gap: 8px; margin: 16px 0 12px; }
  .jlq-progress-track { flex: 1; background: #e5e4de; height: 10px; border-radius: 999px; overflow: hidden; }
  .jlq-progress-bar { height: 100%; background: var(--jlq-accent); transition: width .25s ease; }
  .jlq-progress-label { font-size: 12px; color: var(--jlq-muted); min-width: 64px; text-align: right; }

  .jlq-card { background: var(--jlq-panel); border-radius: var(--jlq-radius); box-shadow: var(--jlq-shadow); padding: clamp(16px, 3vw, 24px); }
  .jlq-qtitle { font-size: clamp(18px, 2.6vw, 22px); margin: 0 0 12px; }
  .jlq-qdesc { margin: 0 0 14px; color: var(--jlq-muted); font-size: 14px; }

  .jlq-options { display: grid; gap: 10px; margin-top: 10px; }
  .jlq-option { display: flex; align-items: flex-start; gap: 12px; background: #fff; border-radius: 12px; border: 1px solid #e7e6e0; padding: 14px 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .02s ease; }
  .jlq-option:hover { border-color: var(--jlq-accent); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
  .jlq-option:active { transform: scale(.998); }
  .jlq-option input { margin-top: 3px; }
  .jlq-option label { cursor: pointer; display: block; }
  .jlq-opt-title { font-weight: 600; }
  .jlq-opt-desc { color: var(--jlq-muted); font-size: 13px; margin-top: 2px; }

  .jlq-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
  .jlq-btn { appearance: none; border: 0; background: var(--jlq-accent); color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 600; cursor: pointer; }
  .jlq-prev { background: #d7d6d0; color: #333; }
  .jlq-btn:disabled { opacity: .6; cursor: not-allowed; }

  /* Mobile tweaks */
  @media (max-width: 480px) {
    .jlq-option { padding: 12px; }
  }

  /* Accessibility focus */
  .jlq-option:focus-within { outline: 2px solid var(--jlq-accent); outline-offset: 2px; }
</style>

<script>
(function(){
  // -------------------------
  // CONFIG (placeholders filled by Prompt #2)
  // -------------------------
  const JLQ_CONFIG = {
    theme: {
      bg: "#fbfbf8", panel: "#ecebe4", text: "#28303d", muted: "#8d8c86", accent: "[[BRAND_COLOUR_HEX]]"
    },
    meta: {
      title: "[[QUIZ_TITLE]]",
      // Redirect happens AFTER the final question
      redirectAfterFinal: true,
      // Hide footer buttons to auto-advance; set false to show Back/Next
      hideFooterButtons: true
    },
    questions: [
      // Q1 — determining (NO helper line, no "result label" shown)
      {
        id: "q1",
        type: "single",
        title: "[[Q1_TITLE]]",
        help: "",
        determining: true,
        options: [
          {
            key: "a1",
            /* DO NOT show result title on Q1 (we display desc as the main line) */
            title: "Result A",
            desc: "[[Q1_A1_LABEL]]",
            result: { title: "Result A", url: "[[RESULT_URL_A]]" }
          },
          {
            key: "a2",
            title: "Result B",
            desc: "[[Q1_A2_LABEL]]",
            result: { title: "Result B", url: "[[RESULT_URL_B]]" }
          },
          {
            key: "a3",
            title: "Result C",
            desc: "[[Q1_A3_LABEL]]",
            result: { title: "Result C", url: "[[RESULT_URL_C]]" }
          },
          {
            key: "a4",
            title: "Result D",
            desc: "[[Q1_A4_LABEL]]",
            result: { title: "Result D", url: "[[RESULT_URL_D]]" }
          }
        ]
      },

      /* Prompt #2 must replace this token with SIX complete question objects (Q2..Q7)
         following Jack's 7-Question method and the theme's structure:
         - Q2 (type:"single")
         - Q3 (single)
         - Q4 (single)
         - Q5 (single)
         - Q6 (single)
         - Q7 (single)
         Use 4 options each. Keep copy concise & niche-relevant. */
      [[AUTOGENERATED_QUESTIONS]]
    ]
  };

  // -------------------------
  // RENDER / ENGINE
  // -------------------------
  const $qPanel = document.getElementById("jlq-question");
  const $footer = document.getElementById("jlq-footer");
  const $next = document.getElementById("jlq-next");
  const $prev = document.getElementById("jlq-prev");
  const $bar = document.querySelector(".jlq-progress-bar");
  const $label = document.querySelector(".jlq-progress-label");

  if (!JLQ_CONFIG.meta.hideFooterButtons) $footer.hidden = false;

  let stepIndex = 0;
  const answers = {};
  let resultURL = ""; // from Q1 selection

  const TOTAL = JLQ_CONFIG.questions.length;

  function pct(i){ return Math.max(14.3, Math.min(100, ((i+1)/TOTAL)*100)); }

  function updateProgress(){
    if ($bar) $bar.style.width = pct(stepIndex) + "%";
    if ($label) $label.textContent = `Q${stepIndex+1} of ${TOTAL}`;
  }

  function renderQuestion(i){
    const q = JLQ_CONFIG.questions[i];
    if(!q) return;

    const html = `
      <h2 class="jlq-qtitle">${escapeHtml(q.title)}</h2>
      ${q.help ? `<p class="jlq-qdesc">${escapeHtml(q.help)}</p>` : ""}
      <div class="jlq-options" role="radiogroup" aria-label="${escapeAttr(q.title)}">
        ${q.options.map((opt)=>{
          const id = `${q.id}_${opt.key}`;
          const main = (q.id === "q1") ? (opt.desc || opt.title) : opt.title;
          const sub  = (q.id === "q1") ? "" : (opt.desc ? `<div class="jlq-opt-desc">${escapeHtml(opt.desc)}</div>` : "");
          return `
            <div class="jlq-option" tabindex="0">
              <input type="radio" name="${q.id}" id="${id}" value="${escapeAttr(opt.key)}" ${answers[q.id]===opt.key ? 'checked' : ''} />
              <label for="${id}">
                <div class="jlq-opt-title">${escapeHtml(main)}</div>
                ${sub}
              </label>
            </div>
          `;
        }).join("")}
      </div>
    `;
    $qPanel.innerHTML = html;

    // interactions
    $qPanel.querySelectorAll(".jlq-option").forEach((el)=>{
      const input = el.querySelector("input[type=radio]");
      function select(){
        input.checked = true;
        answers[q.id] = input.value;

        // If Q1, store result URL (no redirect here)
        if(q.determining){
          const opt = q.options.find(o=>o.key===input.value);
          resultURL = (opt && opt.result && opt.result.url) ? opt.result.url : "";
        }

        if (JLQ_CONFIG.meta.hideFooterButtons){
          nextOrFinish();
        } else {
          manageFooter();
        }
      }
      el.addEventListener("click", select);
      el.addEventListener("keydown", (e)=>{
        if (e.key === "Enter" || e.key === " "){
          e.preventDefault();
          select();
        }
      });
    });

    updateProgress();
    manageFooter();
  }

  function manageFooter(){
    if (JLQ_CONFIG.meta.hideFooterButtons){
      $footer.hidden = true;
      return;
    }
    $prev.disabled = stepIndex === 0;
    const q = JLQ_CONFIG.questions[stepIndex];
    $next.disabled = !answers[q.id];
  }

  function nextOrFinish(){
    const last = (stepIndex >= TOTAL-1);
    if (last) return finish();
    stepIndex++;
    renderQuestion(stepIndex);
  }

  function finish(){
    // Build destination from stored Q1 URL
    let dest = resultURL || "";
    // Append answers as params (excluding q1 key itself)
    const params = new URLSearchParams();
    Object.entries(answers).forEach(([qid,val])=>{
      if(qid !== "q1") params.set(qid, val);
    });
    if(dest){
      dest += (dest.includes("?") ? "&" : "?") + params.toString();
      window.location.assign(dest);
    } else {
      // graceful fallback if no URL set
      const hash = "#result?" + params.toString();
      window.location.assign(hash);
    }
  }

  // Footer buttons (when visible)
  if($next) $next.addEventListener("click", ()=>{
    if (stepIndex >= TOTAL-1) finish();
    else { stepIndex++; renderQuestion(stepIndex); }
  });
  if($prev) $prev.addEventListener("click", ()=>{
    stepIndex = Math.max(0, stepIndex-1);
    renderQuestion(stepIndex);
  });

  // Utils
  function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m=>({ '&':'&','<':'<','>':'>','"':'"', "'":''' }[m])); }
  function escapeAttr(s){ return escapeHtml(s).replace(/"/g, '"'); }

  // INIT
  renderQuestion(stepIndex);
})();
</script>

Stressed Parents: Why Is Your Teenager ACTUALLY Driving You Crazy?

WELCOME QUIZ TESTER!

🧩 Prompt #1 — “Your Quiz Setup Info”

🧠 Prompt #2 — “Build My Quiz Prompt”

🟣 Minimalist Theme — with placeholders

🟠 Modernist Theme — with placeholders

Join Our Free Trial