CHOOSE YOUR QUIZ THEME

(Copy the entire prompt theme below depending on your preferred choice)

↓ Read the FULL Details Below Before Choosing ↓

🟣 Minimalist Theme

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

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)
      [[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, function(m){
      return {
        "&" : "&",
        "<" : "<",
        ">" : ">",
        '"' : """,
        "'" : "'"
      }[m];
    });
  }
  function escapeAttr(s){
    return escapeHtml(s);
  }

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

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

CHOOSE YOUR QUIZ THEME

🟣 Minimalist Theme

🟠 Modernist Theme

Join Our Free Trial