Pre and post survey?

Hi Holly,

Yes, you can run a simple pre and post survey inside Rise with a Code Snippet. The block below saves pre answers to the learner’s browser, then compares them against the post answers. It also supports a portable pre code for cross device comparison.

How to use

1. Add a Code Snippet in Lesson 1. Paste the code. Set data-mode to pre. Keep data-key as a unique ID for this course.
2. Add a second Code Snippet in the final lesson. Paste the same code. Change data-mode to post. Keep data-key identical.
3. Learners complete the pre. The block saves answers locally. At the end, they complete the post and see a side by side comparison.
4. If learners switch devices, they can click Copy pre code in the first block. Then click Paste pre code in the post block to compare.

Notes • This is for reflection and quick insight. It does not report to an LMS.
• You can change the questions inside the questions array.
• Use the same data-key in both blocks.

Paste this into both Code Snippet blocks

var htmlCode = `

:root{ --bg:#0b0f14; --panel:#111a24; --ink:#e6f0ff; --muted:#9fb0c6; --accent:#4fd1ff; --good:#20c997; --bad:#ef476f; --warn:#f7b500; --line:#223145; --focus:#a6e2ff; --radius:14px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; } .survey-wrap{ font-family:var(--font); color:var(--ink); background: radial-gradient(1200px 600px at 10% -10%, #142234 0%, #0e1622 40%, var(--bg) 70%); border-radius: var(--radius); padding: clamp(14px, 4vw, 28px); width: 100%; box-sizing: border-box; } .survey{ max-width: 920px; margin: 0 auto; background: linear-gradient(180deg, #0f1a27, #0c1520); border: 1px solid var(--line); border-radius: 12px; padding: clamp(12px, 3.5vw, 22px); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); } .header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom: .6rem; } .title{ font-size: clamp(18px, 4.2vw, 26px); font-weight: 800; letter-spacing:.2px; } .subtitle{ color: var(--muted); font-size: clamp(13px, 3.2vw, 15px); } .badge{ display:inline-flex; align-items:center; gap:.4rem; background: #0a2a3a; color:#bfefff; padding:.35rem .6rem; border:1px solid #1e3f54; border-radius: 999px; font-weight:700; font-size: 12px; letter-spacing:.3px; } .grid{ display:grid; gap:14px; grid-template-columns: 1fr; } .card{ background: #0c1722; border:1px solid var(--line); border-radius: 10px; padding: .9rem; } .q-label{ font-weight:700; margin-bottom:.35rem; display:block; } .help{ color: var(--muted); font-size: 13px; margin-top:.2rem; } .likert{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.35rem; } .likert input{ position:absolute; opacity:0; pointer-events:none; } .pill{ display:inline-flex; align-items:center; justify-content:center; min-width: 40px; height: 36px; padding: 0 .6rem; border-radius: 9px; background:#0a2130; border:1px solid #21405a; color:#cfe7ff; cursor:pointer; user-select:none; transition: transform .06s ease, background .15s ease, border-color .15s ease; font-weight:700; font-size: 14px; } .pill:hover{ transform: translateY(-1px); } .likert input:focus + .pill{ outline:2px solid var(--focus); outline-offset:2px; } .likert input:checked + .pill{ background:#0f3550; border-color:#3f77a6; color:#eaf6ff; } .options{ display:grid; gap:.5rem; margin-top:.35rem; } .opt{ display:flex; align-items:center; gap:.55rem; background:#0a2130; border:1px solid #21405a; border-radius:10px; padding:.55rem .7rem; } .opt input[type="radio"], .opt input[type="checkbox"]{ width:18px; height:18px; accent-color:#4fd1ff; } textarea, input[type="text"]{ width:100%; box-sizing:border-box; background:#071725; color:var(--ink); border:1px solid #1e3b56; border-radius:10px; padding:.65rem .75rem; font-size:15px; } textarea{ min-height: 96px; resize: vertical; } textarea:focus, input[type="text"]:focus{ outline:2px solid var(--focus); outline-offset:1px; } .row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; } .actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; } .btn{ appearance:none; border:none; background: linear-gradient(180deg, #69d8ff, #36b8ff); color:#052335; font-weight:800; padding:.7rem .95rem; border-radius:10px; cursor:pointer; box-shadow: 0 6px 16px rgba(86,210,255,.25), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; font-size: 15px; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(86,210,255,.18); } .btn.secondary{ background: #0f2536; color:#d4ecff; border:1px solid #23435c; box-shadow:none; font-weight:700; } .notice{ background:#0a2436; border:1px solid #1d3b52; color:#cfe7ff; padding:.6rem .75rem; border-radius:10px; font-size:14px; } .compare{ display:grid; grid-template-columns: 1fr; gap:.6rem; margin-top:.8rem; } .cmp-row{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.5rem; align-items:start; background:#081a26; border:1px solid #173047; border-radius:10px; padding:.55rem; } .cmp-head{ font-weight:800; font-size:14px; color:#cfe7ff; } .tag{ display:inline-block; border-radius:999px; padding:.15rem .5rem; font-weight:800; font-size:12px; } .up{ background:rgba(32,201,151,.14); color:#7be2c3; border:1px solid rgba(32,201,151,.35); } .down{ background:rgba(239,71,111,.14); color:#ffb0c1; border:1px solid rgba(239,71,111,.35); } .same{ background:rgba(247,181,0,.12); color:#ffe28a; border:1px solid rgba(247,181,0,.35); } .copybox{ display:grid; grid-template-columns: 1fr auto; gap:.5rem; align-items:center; margin-top:.5rem; } .code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background:#06121b; color:#bfe4ff; border:1px dashed #1d3952; border-radius:8px; padding:.5rem .6rem; font-size:13px; word-break: break-all; } MeDia (min-width: 720px){ .grid.two{ grid-template-columns: 1fr 1fr; } } MeDia (prefers-reduced-motion: reduce){ .btn{ transition: none; } .pill:hover{ transform:none; } } MeDia (forced-colors: active){ .btn{ border:1px solid CanvasText; } .pill{ border:1px solid CanvasText; } .opt{ border:1px solid CanvasText; } }

Capability self check

Complete once at the start, again at the end. Same questions, quick comparison.

Mode, pre

<div id="formHost" class="grid"></div> <div class="actions"> <button class="btn" id="submitBtn" type="button">Submit</button> <button class="btn secondary" id="resetBtn" type="button">Reset</button> <button class="btn secondary" id="copyPreBtn" type="button" title="Copy a portable code of your pre answers">Copy pre code</button> <button class="btn secondary" id="pastePreBtn" type="button" title="Paste a pre code to compare across devices">Paste pre code</button> </div> <div id="messages" class="notice" role="status" aria-live="polite" style="display:none;"></div> <div id="compareHost" class="compare" aria-live="polite" aria-atomic="true" style="display:none;"> <div class="cmp-row cmp-head"> <div>Question</div> <div>Pre</div> <div>Post and change</div> </div> </div>

`;