Real Data or a Prettier Chart?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Real Data or a Prettier Chart?</title>
<style>html,body{margin:0;padding:0;background:#FAFAFD;overflow-x:hidden}</style>

/* Buttons */
  #rc .btn { font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; padding: 13px 22px; border-radius: 999px; border: 1.5px solid var(--blue); background: var(--blue); color: #fff; transition: opacity .15s, background .15s; }
  #rc .btn:hover { opacity: .9; }
  #rc .btn[disabled] { opacity: .35; cursor: not-allowed; }
  #rc .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 400; }
  #rc .btn.ghost:hover { border-color: var(--ink-soft); }
  #rc .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  #rc .row.split { justify-content: space-between; }

/* Intro */
  #rc .intro { display: flex; flex-direction: column; gap: 20px; }
  #rc h1 { font-size: clamp(38px, 7vw, 58px); line-height: 1.03; }
  #rc h1 span { color: var(--blue); }
  #rc .sub-lede { font-size: 22px; font-weight: 400; max-width: 60ch; color: var(--ink); }
  #rc .lede-lines { display: flex; flex-direction: column; gap: 6px; font-size: 20px; font-weight: 400; color: var(--ink); max-width: 62ch; }
  #rc .lede { font-size: 20px; max-width: 62ch; color: var(--ink-soft); }
  #rc .stat { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; padding: 20px 22px; background: var(--blue-tint); border-radius: 14px; }
  #rc .stat-num { font-size: 52px; font-weight: 600; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; }
  #rc .stat-num small { font-size: 22px; color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
  #rc .stat-src { grid-column: 1 / -1; font-size: 16px; color: var(--ink-soft); }
  #rc .start { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; }
  #rc label.vlabel { font-weight: 600; }
  #rc .hint { font-size: 16px; color: var(--ink-soft); }
  #rc input.vname, #rc textarea.notes { font: inherit; font-size: 18px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); width: 100%; }
  #rc input.vname { max-width: 440px; }
  #rc textarea.notes { min-height: 84px; resize: vertical; }
  #rc input.vname:focus, #rc textarea.notes:focus { border-color: var(--blue); outline: none; }

/* Progress */
  #rc .progress { display: flex; flex-direction: column; gap: 10px; }
  #rc .progress-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 16px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  #rc .progress-meta strong { color: var(--ink); font-weight: 600; }
  #rc .segs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  #rc .segs button { height: 10px; border: 0; padding: 0; border-radius: 4px; background: var(--line); cursor: pointer; }
  #rc .segs button[data-a="2"] { background: var(--yes); }
  #rc .segs button[data-a="1"] { background: var(--partly); }
  #rc .segs button[data-a="0"] { background: var(--no); }
  #rc .segs button.current { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Question */
  #rc .q { background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
  #rc .q h2 { font-size: clamp(26px, 4.4vw, 32px); line-height: 1.15; }
  #rc .q .why { color: var(--ink-soft); }
  #rc .sound { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #rc .sound div { padding: 14px 16px; border-radius: 10px; font-size: 16px; }
  #rc .sound strong { display: block; font-weight: 600; margin-bottom: 4px; }
  #rc .sound .real { background: var(--blue-tint); }
  #rc .sound .dodge { background: #F3F2F7; }
  #rc .ask { border-left: 4px solid var(--purple); padding: 4px 0 4px 14px; }
  #rc .ask strong { display: block; font-size: 16px; font-weight: 600; color: var(--purple); letter-spacing: .04em; text-transform: uppercase; }
  #rc .ask p { font-size: 19px; font-weight: 400; }
  #rc .answers { display: flex; flex-wrap: wrap; gap: 8px; }
  #rc .answers button { font: inherit; font-size: 17px; cursor: pointer; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
  #rc .answers button:hover { border-color: var(--ink-soft); }
  #rc .answers button[aria-pressed="true"][data-v="2"] { background: var(--yes); border-color: var(--yes); color: #fff; }
  #rc .answers button[aria-pressed="true"][data-v="1"] { background: var(--partly-tint); border-color: var(--partly); color: #5A3B00; }
  #rc .answers button[aria-pressed="true"][data-v="0"] { background: var(--no-tint); border-color: var(--no); color: #7A0F18; }
  #rc details.ours summary { cursor: pointer; font-size: 16px; font-weight: 600; color: var(--purple); list-style: none; display: inline-flex; gap: 8px; }
  #rc details.ours summary::-webkit-details-marker { display: none; }
  #rc details.ours summary::before { content: "+"; width: 14px; }
  #rc details.ours[open] summary::before { content: "\2013"; }
  #rc .ours-body { margin-top: 10px; padding: 14px 16px; background: var(--purple-tint); border-radius: 10px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
  #rc .pill { display: inline-block; font-size: 16px; font-weight: 600; padding: 2px 12px; border-radius: 999px; width: fit-content; }
  #rc .pill.yes { background: var(--yes); color: #fff; }
  #rc .pill.mostly { background: var(--blue-tint); color: var(--blue); border: 1.5px solid var(--blue); }
  #rc .pill.partly { background: var(--partly-tint); color: #5A3B00; border: 1.5px solid var(--partly); }

/* Result */
  #rc .result { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
  #rc .result h2 { color: #fff; font-size: clamp(28px, 5vw, 38px); }
  #rc .result .score { color: #D9D8F0; font-variant-numeric: tabular-nums; }
  #rc .result .verdict { font-size: 19px; color: #F0EFFA; max-width: 60ch; }
  #rc .report { display: flex; flex-direction: column; gap: 10px; }
  #rc .report h3 { font-size: 22px; }
  #rc .rep-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
  #rc .rep-item .n { font-weight: 600; font-variant-numeric: tabular-nums; }
  #rc .rep-item .t { font-weight: 400; }
  #rc .rep-item .sub { grid-column: 2 / -1; font-size: 16px; color: var(--ink-soft); }
  #rc .tag { font-size: 16px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  #rc .tag.v2 { background: var(--yes); color: #fff; }
  #rc .tag.v1 { background: var(--partly-tint); color: #5A3B00; }
  #rc .tag.v0 { background: var(--no-tint); color: #7A0F18; }
  #rc .status { font-size: 16px; color: var(--ink-soft); min-height: 1.5em; }

/* Next steps */
  #rc .next { display: flex; flex-direction: column; gap: 16px; }
  #rc .next h2 { font-size: 28px; }
  #rc .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #rc .cta { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; text-decoration: none; color: var(--ink); border: 1.5px solid var(--line); background: var(--card); }
  #rc .cta:hover { border-color: var(--blue); }
  #rc .cta.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
  #rc .cta h3 { font-size: 22px; color: inherit; }
  #rc .cta p { font-size: 17px; }
  #rc .cta .go { font-weight: 600; margin-top: auto; }
  #rc .foot { font-size: 16px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 620px) {
    #rc .sound, #rc .cards { grid-template-columns: 1fr; }
    #rc .q { padding: 20px; }
  }
  @media (prefers-reduced-motion: reduce) { #rc * { transition: none !important; } }
  /* Paths + mapped options */
  #rc .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #rc .path { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
  #rc .path:hover { border-color: var(--blue); }
  #rc .path .when { font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); }
  #rc .path h3 { font-size: 23px; }
  #rc .path p { font-size: 17px; color: var(--ink-soft); }
  #rc .path .go { font-weight: 600; color: var(--blue); margin-top: auto; }
  #rc .opts { display: flex; flex-direction: column; gap: 8px; }
  #rc .opts button { font: inherit; font-size: 17px; text-align: left; cursor: pointer; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
  #rc .opts button::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--line); }
  #rc .opts button:hover { border-color: var(--ink-soft); }
  #rc .opts button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); }
  #rc .opts button[aria-pressed="true"]::before { border-color: var(--blue); background: radial-gradient(var(--blue) 45%, transparent 50%); }
  #rc .include { display: flex; gap: 10px; align-items: center; font-weight: 400; cursor: pointer; }
  #rc .include input { width: 20px; height: 20px; accent-color: var(--blue); }
  #rc .demo-cta { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 16px; background: var(--blue); color: #fff; }
  #rc .demo-cta h2 { color: #fff; font-size: 28px; }
  #rc .demo-cta p { font-size: 18px; color: #E4E2FF; max-width: 60ch; }
  #rc .demo-cta a.btn { background: #fff; color: var(--blue); border-color: #fff; text-decoration: none; width: fit-content; }
  @media (max-width: 620px) { #rc .paths { grid-template-columns: 1fr; } }
  #rc .grid-wrap { overflow-x: auto; }
  #rc table.grid { width: 100%; border-collapse: collapse; font-size: 17px; }
  #rc table.grid th { font-size: 16px; font-weight: 600; text-align: center; padding: 10px 6px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
  #rc table.grid th:first-child { text-align: left; }
  #rc table.grid th.c0 { color: var(--yes); } #rc table.grid th.c1 { color: var(--partly); } #rc table.grid th.c2 { color: var(--no); }
  #rc table.grid td { padding: 14px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
  #rc table.grid td.mark { text-align: center; width: 84px; font-size: 22px; font-weight: 700; line-height: 1.2; }
  #rc table.grid td.mark.c0 { color: var(--yes); } #rc table.grid td.mark.c1 { color: var(--partly); } #rc table.grid td.mark.c2 { color: var(--no); }
  #rc table.grid .gq { font-weight: 600; }
  #rc table.grid .gs { font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
  @media (max-width: 620px) { #rc table.grid td.mark { width: 56px; } #rc table.grid th { font-size: 16px; padding: 8px 2px; } }
</style>
</head><body>

<section id="rc-intro" class="intro">
      <p class="eyebrow">A check for consultants choosing a measurement partner</p>
      <h1>Real behavior-change data, or a <span>prettier chart?</span></h1>
      <p class="sub-lede">For training and consulting firms, measuring impact is now table stakes. RedThread Research counts more than 300 learning tech vendors claiming they can help you do it. So how do you choose the right measurement partner?</p>
      <div class="stat">
        <div class="stat-num">83%</div>
        <p>of learning tech vendors now list analytics and measurement as a core feature. In 2023 it was a third of them.</p>
        <p class="stat-src">Source: RedThread Research, State of L&amp;D 2026 (June 2026), 461 vendors.</p>
      </div>
      <div class="lede-lines">
        <p>Your clients now expect you to show impact.</p>
        <p>Rightly or wrongly, whichever tool you use will shape how they see you.</p>
        <p>Here are seven questions to help you choose the right one.</p>
      </div>
      <div class="start">
        <label class="vlabel" for="rc-vendor">Which vendor are you looking at?</label>
        <input class="vname" id="rc-vendor" type="text" placeholder="Vendor name (optional)" autocomplete="off">
        <p class="hint">About five minutes. Nothing you enter is saved or sent anywhere.</p>
      </div>
      <div class="paths">
        <button class="path" type="button" id="rc-go-prep">
          <span class="when">Before the demo</span>
          <h3>Prepare for a demo</h3>
          <p>Walk through the seven questions, pick the ones you'll ask, and leave with a prep sheet.</p>
          <span class="go">Build my prep sheet &rarr;</span>
        </button>
        <button class="path" type="button" id="rc-go-review">
          <span class="when">After the demo</span>
          <h3>Review a demo you've seen</h3>
          <p>Answer seven questions about what they showed you, and get a report with the gaps to follow up on.</p>
          <span class="go">Review my demo &rarr;</span>
        </button>
      </div>
    </section>

<section id="rc-flow" hidden>
      <div class="progress" style="margin-bottom:18px">
        <div class="progress-meta"><span><strong id="rc-count">Question 1 of 7</strong> &middot; <span id="rc-group"></span></span><span id="rc-mode"></span></div>
        <div class="segs" id="rc-segs"></div>
      </div>
      <article class="q" id="rc-q"></article>
      <div class="row split" style="margin-top:18px">
        <button class="btn ghost" id="rc-back" type="button">Back</button>
        <button class="btn" id="rc-next" type="button">Next question</button>
      </div>
    </section>

<section id="rc-done" class="done" hidden>
      <div class="result" id="rc-result" aria-live="polite">
        <p class="score" id="rc-score"></p>
        <h2 id="rc-verdict-title"></h2>
        <p class="verdict" id="rc-verdict"></p>
      </div>
      <div class="report">
        <h3 id="rc-report-title">Your report</h3>
        <div id="rc-report"></div>
        <div class="row" style="margin-top:8px">
          <button class="btn" id="rc-download" type="button">Download PDF</button>
          <button class="btn ghost" id="rc-copy" type="button">Copy as text</button>
          <button class="btn ghost" id="rc-edit" type="button">Change my answers</button>
          <button class="btn ghost" id="rc-switch" type="button"></button>
          <button class="btn ghost" id="rc-restart" type="button">Start over</button>
        </div>
        <p class="status" id="rc-status" role="status"></p>
      </div>
      <div class="demo-cta">
        <h2>See how Actionable answers these</h2>
        <p>We built this check, so we ran it on ourselves too. Here's where we're strong, and where we're not there yet.</p>
        <button class="btn" type="button" id="rc-go-ours">See our answers &rarr;</button>
      </div>
    </section>

<section id="rc-ours" class="done" hidden>
      <div class="intro">
        <p class="eyebrow">Our answers</p>
        <h2 style="font-size:clamp(30px,5vw,42px)">How Actionable answers the seven questions</h2>
        <p class="lede">Five strong, one mostly, one partly. Here's the detail.</p>
      </div>
      <div id="rc-ours-list" class="report"></div>
      <div class="cards">
        <a class="cta primary" href="https://pages.actionable.co/evolution-of-impact" target="_blank" rel="noopener">
          <h3>See how Impact Consultants work</h3>
          <p>The stages and benefits of enhancing your program impact, plus details on our upcoming cohort.</p>
          <span class="go">Take a look &rarr;</span>
        </a>
        <a class="cta" href="https://resources.actionable.co/meetings/ct-calendar/impact-enhancement-session" target="_blank" rel="noopener">
          <h3>Book a call</h3>
          <p>30 minutes on how Actionable could support your programs and the proof your clients are asking for.</p>
          <span class="go">Book a time &rarr;</span>
        </a>
      </div>
      <div class="row"><button class="btn ghost" type="button" id="rc-ours-back">Back to my report</button></div>
    </section>

<div class="foot">
      <p>Built by Actionable. Market figure from RedThread Research, State of L&amp;D 2026. Actionable figures: Annual Insights Report 2025 and Make Learning Stick (June 2026).</p>
    </div>

</div>
</div>

function paintSegs() {
    Array.prototype.forEach.call(segs.children, function (b, i) {
      var state = mode === "prep" ? (i < cur || (i === cur && false) ? (include[i] ? "2" : "") : "") : (answers[i] === null ? "" : String(SCORE[answers[i]]));
      if (state) b.setAttribute("data-a", state); else b.removeAttribute("data-a");
      b.classList.toggle("current", i === cur);
    });
  }

$("rc-go-ours").addEventListener("click", function () {
    $("rc-ours-list").innerHTML = gridHTML(Q.map(function (item, i) {
      return { q: (i + 1) + ". " + esc(item.prep), col: item.ours === "yes" ? 0 : 1,
        sub: (item.ours === "mostly" ? "Mostly. " : item.ours === "partly" ? "Partly. " : "") + esc(item.oursText) };
    }));
    show("rc-ours");
  });
  $("rc-ours-back").addEventListener("click", function () { show("rc-done"); });
  function ping(name) { try { parent.postMessage({ aiEvent: name }, "*"); } catch (e) {} }
  function start(m) { mode = m; ping(m === "prep" ? "PrepStarted" : "ReviewStarted"); cur = 0; show("rc-flow"); renderQ(); }
  $("rc-go-prep").addEventListener("click", function () { start("prep"); });
  $("rc-go-review").addEventListener("click", function () { if (mode !== "review") answers = Q.map(function () { return null; }); start("review"); });
  $("rc-back").addEventListener("click", function () { if (cur === 0) show("rc-intro"); else { cur--; renderQ(); } });
  $("rc-next").addEventListener("click", function () {
    if (mode === "review" && answers[cur] === null) return;
    if (cur < Q.length - 1) { cur++; renderQ(); } else renderDone();
  });
  $("rc-edit").addEventListener("click", function () { cur = 0; show("rc-flow"); renderQ(); });
  $("rc-switch").addEventListener("click", function () {
    if (mode === "prep") { answers = Q.map(function () { return null; }); notes = Q.map(function () { return ""; }); start("review"); }
    else { reset(); $("rc-vendor").value = ""; start("prep"); }
  });
  $("rc-restart").addEventListener("click", function () { reset(); $("rc-vendor").value = ""; show("rc-intro"); $("rc-vendor").focus(); });
  function fileBase() { return (mode === "prep" ? "demo-prep" : "demo-review") + (vendor() ? "-" + vendor().toLowerCase().replace(/[^a-z0-9]+/g, "-") : ""); }
  function htmlFallback() {
    var blob = new Blob([reportHTML()], { type: "text/html" });
    var a = document.createElement("a");
    a.href = URL.createObjectURL(blob); a.download = fileBase() + ".html";
    document.body.appendChild(a); a.click(); a.remove();
    $("rc-status").textContent = "Downloaded as a web page. Open it in your browser to print or save as PDF.";
  }
  $("rc-download").addEventListener("click", function () {
    ping(mode === "prep" ? "PrepSheetDownload" : "ReviewReportDownload");
    try {
      if (typeof html2pdf !== "function") { htmlFallback(); return; }
      var doc = new DOMParser().parseFromString(reportHTML(), "text/html");
      var el = document.createElement("div");
      el.setAttribute("style", "font-family:Arial,sans-serif;font-size:16px;line-height:1.5;color:#17153A;width:720px;padding:8px;background:#fff");
      el.innerHTML = doc.body.innerHTML;
      $("rc-status").textContent = "Building your PDF...";
      html2pdf().set({
        margin: [12, 12, 14, 12],
        filename: fileBase() + ".pdf",
        image: { type: "jpeg", quality: 0.95 },
        html2canvas: { scale: 2, backgroundColor: "#ffffff" },
        jsPDF: { unit: "mm", format: "letter", orientation: "portrait" },
        pagebreak: { mode: ["css", "legacy"], avoid: ["tr", "div.keep"] }
      }).from(el).save().then(function () {
        $("rc-status").textContent = "PDF downloaded.";
      }, function () { htmlFallback(); });
    } catch (e) {
      try { htmlFallback(); } catch (e2) { $("rc-status").textContent = "Download didn't work here. Use Copy as text instead."; }
    }
  });
  $("rc-copy").addEventListener("click", function () {
    ping("ReportCopied");
    var t = reportText();
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(t).then(function () { $("rc-status").textContent = "Copied. Paste it into an email or your notes."; },
        function () { $("rc-status").textContent = "Copy was blocked here. Use Download instead."; });
    } else { $("rc-status").textContent = "Copy isn't available here. Use Download instead."; }
  });
})();
</script>