Leadership timeline
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Leadership Journey Timeline</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <style> :root{ --ink:#20293a; --ink-soft:#5b6577; --paper:#f7f5f0; --line:#c9c2b3; --panel:#ffffff; --red:#c0392b; --yellow:#c99a1e; --green:#1e7a4c; } *{box-sizing:border-box;} body{ margin:0; background:var(--paper); font-family:'Inter',system-ui,sans-serif; color:var(--ink); padding:32px 16px 80px; } .wrap{max-width:980px;margin:0 auto;} header{margin-bottom:6px;} h1{ font-family:'Fraunces',serif; font-weight:600; font-size:2.1rem; margin:0 0 4px; outline:none; border-bottom:2px solid transparent; transition:border-color .15s; } h1:hover, h1:focus{border-color:var(--line);} .subtitle{ font-size:.92rem; color:var(--ink-soft); margin:0 0 22px; outline:none; max-width:640px; line-height:1.4; } .toolbar{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; } button{ font-family:'Inter',sans-serif; font-size:.86rem; font-weight:600; border:1px solid var(--ink); background:var(--ink); color:#fff; padding:9px 16px; border-radius:3px; cursor:pointer; letter-spacing:.01em; } button.secondary{background:transparent;color:var(--ink);} button.danger{background:transparent;border-color:var(--red);color:var(--red);} button:hover{opacity:.85;} .chart-card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:20px 20px 8px; position:relative; } svg{display:block;width:100%;height:auto;overflow:visible;} .bead{cursor:grab;touch-action:none;} .bead:active{cursor:grabbing;} .bead-label{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; fill:var(--ink); pointer-events:none; } .bead-date{ font-family:'Inter',sans-serif; font-size:10.5px; fill:var(--ink-soft); pointer-events:none; } .axis-line{stroke:var(--ink);stroke-width:1.5;} .grid-line{stroke:var(--line);stroke-width:1;} .axis-caption{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; fill:var(--ink-soft); letter-spacing:.04em; } .x-year{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; fill:var(--ink); cursor:pointer; } .x-year:hover{fill:var(--ink-soft);} .connector{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round; opacity:.55; } .year-editor{ position:absolute; display:none; width:96px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; text-align:center; color:var(--ink); border:1px solid var(--ink); border-radius:3px; padding:4px 6px; background:#fff; z-index:10; } .hint{ font-size:.78rem; color:var(--ink-soft); margin-top:14px; line-height:1.5; } .legend{ display:flex; gap:18px; margin-top:10px; font-size:.78rem; color:var(--ink-soft); align-items:center; flex-wrap:wrap; } .legend span{display:inline-flex;align-items:center;gap:6px;} .swatch{width:11px;height:11px;border-radius:50%;display:inline-block;} /* modal */ .overlay{ position:fixed;inset:0;background:rgba(32,41,58,.4); display:none;align-items:center;justify-content:center; z-index:50;padding:20px; } .overlay.open{display:flex;} .modal{ background:#fff; width:100%;max-width:420px; border-radius:6px; padding:22px 22px 18px; box-shadow:0 12px 40px rgba(0,0,0,.18); max-height:90vh; overflow-y:auto; } .modal h2{font-family:'Fraunces',serif;font-size:1.15rem;margin:0 0 14px;} .field{margin-bottom:14px;} .field label{ display:block; font-size:.76rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; } .field input[type=text], .field textarea{ width:100%; font-family:'Inter',sans-serif; font-size:.9rem; padding:8px 10px; border:1px solid var(--line); border-radius:3px; resize:vertical; color:var(--ink); } .field textarea{min-height:64px;} .charcount{font-size:.72rem;color:var(--ink-soft);text-align:right;margin-top:2px;} .icon-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .icon-preview{ width:36px;height:36px;border-radius:4px;object-fit:contain; border:1px solid var(--line);background:#fafafa; display:none; } .icon-preview.show{display:block;} .modal-actions{display:flex;justify-content:space-between;margin-top:18px;gap:8px;} </style> </head> <body> <div class="wrap"> <header> <h1 id="chartTitle" contenteditable="true" spellcheck="false">Leadership Journey Timeline</h1> <p class="subtitle" contenteditable="true" spellcheck="false">Plot the highs and lows of your leadership path. Drag each point to where it belongs — energy on the vertical axis, time across the horizontal.</p> </header> <div class="toolbar"> <button id="addBeadBtn">+ Add event</button> <button id="exportBtn" class="secondary">Export as PNG</button> </div> <div class="chart-card"> <svg id="chart" viewBox="0 0 1000 560" preserveAspectRatio="xMidYMid meet"></svg> <input type="text" class="year-editor" id="yearEditor" maxlength="12"> </div> <div class="legend"> <span><span class="swatch" style="background:var(--green)"></span>High energy (top 40%)</span> <span><span class="swatch" style="background:var(--yellow)"></span>Mid (±10% of midpoint)</span> <span><span class="swatch" style="background:var(--red)"></span>Low energy (bottom 40%)</span> </div> <p class="hint">Drag any point up, down, left, or right — color updates as it crosses energy zones. Click a point (without dragging) to name the event, add a reflection, or attach a small icon. Click a year along the bottom axis to change it. Nothing saves automatically — use "Export as PNG" when you're done.</p> </div> <div class="overlay" id="overlay"> <div class="modal"> <h2>Edit event</h2> <div class="field"> <label for="labelInput">Event label (shown on chart)</label> <input type="text" id="labelInput" maxlength="40" placeholder="e.g. Promoted to team lead"> <div class="charcount"><span id="labelCount">0</span>/40</div> </div> <div class="field"> <label for="dateInput">Date or note (optional)</label> <input type="text" id="dateInput" maxlength="24" placeholder="e.g. 4/3/2018"> </div> <div class="field"> <label for="detailInput">Longer reflection (optional, kept with this event)</label> <textarea id="detailInput" maxlength="400" placeholder="What happened, and why did it move the needle?"></textarea> </div> <div class="field"> <label>Icon or small image (optional)</label> <div class="icon-row"> <input type="file" id="iconInput" accept="image/*"> <img id="iconPreview" class="icon-preview" alt="Icon preview"> <button type="button" class="secondary" id="removeIconBtn" style="display:none;">Remove</button> </div> </div> <div class="modal-actions"> <button type="button" class="danger" id="deleteBeadBtn">Delete</button> <button type="button" id="closeModalBtn">Done</button> </div> </div> </div> <script> (function(){ const NS = "http://www.w3.org/2000/svg"; const svg = document.getElementById('chart'); const chartCard = document.querySelector('.chart-card'); const VB_W = 1000, VB_H = 560; const plot = { left: 70, right: 970, top: 40, bottom: 470 }; const LINE_H = 15; let xYears = ['1991', '2000', '2010', '2018', '2026']; let beads = [ { id: newId(), x: 0.12, y: 0.75, label: "Started first team", date: "", detail: "", icon: null }, { id: newId(), x: 0.38, y: 0.30, label: "Promoted to manager", date: "", detail: "", icon: null }, { id: newId(), x: 0.68, y: 0.60, label: "Reorg hit the team mid-quarter", date: "", detail: "", icon: null } ]; let activeBeadId = null; function newId(){ return 'b' + Math.random().toString(36).slice(2, 10); } // ---- Energy zones: red < 40%, yellow 40-60% (±10% of midpoint), green > 60% ---- function energyColor(yFrac){ const energyPct = (1 - yFrac) * 100; if (energyPct < 40) return { zone:'low', hex:'#c0392b' }; if (energyPct <= 60) return { zone:'mid', hex:'#c99a1e' }; return { zone:'high', hex:'#1e7a4c' }; } function plotX(xFrac){ return plot.left + xFrac * (plot.right - plot.left); } function plotY(yFrac){ return plot.top + yFrac * (plot.bottom - plot.top); } function svgEl(tag, attrs){ const el = document.createElementNS(NS, tag); for (const k in attrs) el.setAttribute(k, attrs[k]); return el; } function starPath(cx, cy, outerR, innerR, points){ let d = ''; const step = Math.PI / points; for (let i = 0; i < points * 2; i++){ const r = (i % 2 === 0) ? outerR : innerR; const ang = i * step - Math.PI/2; d += (i === 0 ? 'M' : 'L') + (cx + r*Math.cos(ang)).toFixed(2) + ',' + (cy + r*Math.sin(ang)).toFixed(2) + ' '; } return d + 'Z'; } // ---- Word-wrap a label into lines (max 3 lines at 40 chars) ---- function wrapLabel(text, maxChars){ const words = text.split(/\s+/).filter(Boolean); const lines = []; let cur = ''; for (const w of words){ const trial = cur ? cur + ' ' + w : w; if (trial.length <= maxChars){ cur = trial; } else { if (cur) lines.push(cur); cur = w.length > maxChars ? w.slice(0, maxChars) : w; } } if (cur) lines.push(cur); return lines.slice(0, 3); } // ---- Axes, gridlines, editable year labels ---- function renderAxes(){ const old = svg.querySelector('#axesGroup'); if (old) old.remove(); const g = svgEl('g', { id:'axesGroup' }); for (let i = 0; i <= 4; i++){ const y = plotY(i / 4); g.appendChild(svgEl('line', { class:'grid-line', x1:plot.left, x2:plot.right, y1:y, y2:y })); } g.appendChild(svgEl('line', { class:'axis-line', x1:plot.left, x2:plot.left, y1:plot.top-14, y2:plot.bottom+2 })); g.appendChild(svgEl('path', { class:'axis-line', fill:'none', d:`M ${plot.left-5} ${plot.top-4} L ${plot.left} ${plot.top-16} L ${plot.left+5} ${plot.top-4}` })); g.appendChild(svgEl('line', { class:'axis-line', x1:plot.left, x2:plot.right+6, y1:plot.bottom, y2:plot.bottom })); for (let i = 0; i <= 4; i++){ const x = plotX(i / 4); g.appendChild(svgEl('line', { class:'grid-line', x1:x, x2:x, y1:plot.bottom, y2:plot.bottom+6 })); const yearText = svgEl('text', { class:'x-year', x:x, y:plot.bottom+26, 'text-anchor':'middle', 'data-idx':i }); yearText.textContent = xYears[i]; yearText.addEventListener('click', function(){ openYearEditor(i, yearText); }); g.appendChild(yearText); } const high = svgEl('text', { class:'axis-caption', x:plot.left-8, y:plot.top-18, 'text-anchor':'end' }); high.textContent = 'HIGH'; g.appendChild(high); const low = svgEl('text', { class:'axis-caption', x:plot.left-8, y:plot.bottom+4, 'text-anchor':'end' }); low.textContent = 'LOW'; g.appendChild(low); const vertLabel = svgEl('text', { class:'axis-caption', x:22, y:(plot.top+plot.bottom)/2, 'text-anchor':'middle', transform:`rotate(-90 22 ${(plot.top+plot.bottom)/2})` }); vertLabel.textContent = 'EMOTIONAL ENERGY'; g.appendChild(vertLabel); svg.appendChild(g); } function renderConnector(){ const old = svg.querySelector('#connectorPath'); if (old) old.remove(); const sorted = [...beads].sort((a,b) => a.x - b.x); if (sorted.length < 2) return; let d = ''; sorted.forEach((b, i) => { d += (i === 0 ? 'M' : 'L') + plotX(b.x).toFixed(2) + ',' + plotY(b.y).toFixed(2) + ' '; }); const path = svgEl('path', { id:'connectorPath', class:'connector', d:d.trim() }); const axesGroup = svg.querySelector('#axesGroup'); svg.insertBefore(path, axesGroup ? axesGroup.nextSibling : svg.firstChild); } function renderBeads(){ svg.querySelectorAll('.bead-group').forEach(el => el.remove()); const sorted = [...beads].sort((a,b) => a.x - b.x); sorted.forEach((bead, idx) => { const cx = plotX(bead.x), cy = plotY(bead.y); const info = energyColor(bead.y); const g = svgEl('g', { class:'bead-group', 'data-id':bead.id }); let marker; if (info.zone === 'low'){ marker = svgEl('path', { class:'bead', d: starPath(cx, cy, 12, 5.5, 7), fill: info.hex }); } else if (info.zone === 'high'){ marker = svgEl('path', { class:'bead', d: starPath(cx, cy, 11, 8, 9), fill: info.hex }); } else { marker = svgEl('circle', { class:'bead', cx, cy, r:9, fill: info.hex }); } g.appendChild(marker); const labelAbove = idx % 2 === 0; const labelX = Math.min(Math.max(cx, 85), 915); const lines = bead.label ? wrapLabel(bead.label, 18) : []; const n = lines.length; let firstLineY; if (labelAbove){ firstLineY = cy - 22 - (n - 1) * LINE_H; } else { firstLineY = cy + 30; } if (n > 0){ const text = svgEl('text', { class:'bead-label', x:labelX, y:firstLineY, 'text-anchor':'middle' }); lines.forEach((line, li) => { const tspan = svgEl('tspan', { x:labelX, dy: li === 0 ? 0 : LINE_H }); tspan.textContent = line; text.appendChild(tspan); }); g.appendChild(text); if (bead.date){ const dateY = labelAbove ? firstLineY - LINE_H : firstLineY + n * LINE_H; const dateText = svgEl('text', { class:'bead-date', x:labelX, y:dateY, 'text-anchor':'middle' }); dateText.textContent = bead.date; g.appendChild(dateText); } } if (bead.icon){ const size = 26; const iconY = labelAbove ? cy + 32 : cy - 26; g.appendChild(svgEl('image', { x: cx - size/2, y: iconY - size/2, width:size, height:size, href: bead.icon })); } attachDrag(g, bead); svg.appendChild(g); }); } function renderAll(){ renderAxes(); renderConnector(); renderBeads(); } function clientToSvgFrac(clientX, clientY){ const pt = svg.createSVGPoint(); pt.x = clientX; pt.y = clientY; const loc = pt.matrixTransform(svg.getScreenCTM().inverse()); return { xFrac: Math.max(0, Math.min(1, (loc.x - plot.left) / (plot.right - plot.left))), yFrac: Math.max(0, Math.min(1, (loc.y - plot.top) / (plot.bottom - plot.top))) }; } // ---- Drag with movement threshold + rAF throttle ---- function attachDrag(g, bead){ g.addEventListener('pointerdown', function(e){ e.preventDefault(); const startX = e.clientX, startY = e.clientY; let moved = false; let lastEvt = null; let raf = null; function applyMove(evt){ const { xFrac, yFrac } = clientToSvgFrac(evt.clientX, evt.clientY); bead.x = xFrac; bead.y = yFrac; renderConnector(); renderBeads(); } function onMove(evt){ if (!moved){ if (Math.hypot(evt.clientX - startX, evt.clientY - startY) < 4) return; moved = true; } lastEvt = evt; if (!raf){ raf = requestAnimationFrame(function(){ raf = null; if (lastEvt) applyMove(lastEvt); }); } } function onUp(){ document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); document.removeEventListener('pointercancel', onUp); if (!moved) openModal(bead.id); } document.addEventListener('pointermove', onMove); document.addEventListener('pointerup', onUp); document.addEventListener('pointercancel', onUp); }); } // ---- Year label editor ---- const yearEditor = document.getElementById('yearEditor'); let editingYearIdx = null; function openYearEditor(idx, textEl){ editingYearIdx = idx; const cardRect = chartCard.getBoundingClientRect(); const tRect = textEl.getBoundingClientRect(); yearEditor.style.left = (tRect.left + tRect.width/2 - cardRect.left - 48) + 'px'; yearEditor.style.top = (tRect.top - cardRect.top - 6) + 'px'; yearEditor.value = xYears[idx]; yearEditor.style.display = 'block'; yearEditor.focus(); yearEditor.select(); } function commitYear(){ if (editingYearIdx === null) return; xYears[editingYearIdx] = yearEditor.value.trim(); editingYearIdx = null; yearEditor.style.display = 'none'; renderAxes(); } yearEditor.addEventListener('blur', commitYear); yearEditor.addEventListener('keydown', function(e){ if (e.key === 'Enter') yearEditor.blur(); if (e.key === 'Escape'){ editingYearIdx = null; yearEditor.style.display = 'none'; } }); // ---- Modal ---- const overlay = document.getElementById('overlay'); const labelInput = document.getElementById('labelInput'); const labelCount = document.getElementById('labelCount'); const dateInput = document.getElementById('dateInput'); const detailInput = document.getElementById('detailInput'); const iconInput = document.getElementById('iconInput'); const iconPreview = document.getElementById('iconPreview'); const removeIconBtn = document.getElementById('removeIconBtn'); function findBead(id){ return beads.find(b => b.id === id); } function openModal(id){ activeBeadId = id; const bead = findBead(id); if (!bead) return; labelInput.value = bead.label || ''; labelCount.textContent = labelInput.value.length; dateInput.value = bead.date || ''; detailInput.value = bead.detail || ''; if (bead.icon){ iconPreview.src = bead.icon; iconPreview.classList.add('show'); removeIconBtn.style.display = 'inline-block'; } else { iconPreview.classList.remove('show'); removeIconBtn.style.display = 'none'; } overlay.classList.add('open'); setTimeout(() => labelInput.focus(), 50); } function closeModal(){ overlay.classList.remove('open'); activeBeadId = null; } labelInput.addEventListener('input', function(){ labelCount.textContent = labelInput.value.length; const bead = findBead(activeBeadId); if (bead){ bead.label = labelInput.value; renderBeads(); } }); dateInput.addEventListener('input', function(){ const bead = findBead(activeBeadId); if (bead){ bead.date = dateInput.value; renderBeads(); } }); detailInput.addEventListener('input', function(){ const bead = findBead(activeBeadId); if (bead){ bead.detail = detailInput.value; } }); // Downscale uploaded icons so data URLs stay small function downscaleImage(dataUrl, maxPx, cb){ const img = new Image(); img.onload = function(){ const scale = Math.min(1, maxPx / Math.max(img.width, img.height)); const w = Math.max(1, Math.round(img.width * scale)); const h = Math.max(1, Math.round(img.height * scale)); const c = document.createElement('canvas'); c.width = w; c.height = h; c.getContext('2d').drawImage(img, 0, 0, w, h); cb(c.toDataURL('image/png')); }; img.onerror = function(){ cb(dataUrl); }; img.src = dataUrl; } iconInput.addEventListener('change', function(){ const file = iconInput.files[0]; if (!file) return; const beadId = activeBeadId; const reader = new FileReader(); reader.onload = function(e){ downscaleImage(e.target.result, 128, function(smallUrl){ const bead = findBead(beadId); if (bead){ bead.icon = smallUrl; if (activeBeadId === beadId){ iconPreview.src = smallUrl; iconPreview.classList.add('show'); removeIconBtn.style.display = 'inline-block'; } renderBeads(); } }); }; reader.readAsDataURL(file); iconInput.value = ''; }); removeIconBtn.addEventListener('click', function(){ const bead = findBead(activeBeadId); if (bead){ bead.icon = null; iconPreview.classList.remove('show'); removeIconBtn.style.display = 'none'; renderBeads(); } }); document.getElementById('deleteBeadBtn').addEventListener('click', function(){ beads = beads.filter(b => b.id !== activeBeadId); closeModal(); renderAll(); }); document.getElementById('closeModalBtn').addEventListener('click', closeModal); overlay.addEventListener('click', function(e){ if (e.target === overlay) closeModal(); }); document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal(); }); // New beads land at the end of the string, past the current rightmost point. // When space runs out, they tuck into the remaining gap rather than piling up. function nextBeadPosition(){ if (beads.length === 0) return { x: 0.06, y: 0.5 }; let last = beads[0]; for (const b of beads){ if (b.x > last.x) last = b; } const room = 1 - last.x; const x = room < 0.005 ? 1 : Math.min(last.x + 0.14, last.x + room * 0.6); return { x, y: last.y }; } document.getElementById('addBeadBtn').addEventListener('click', function(){ const pos = nextBeadPosition(); const newBead = { id: newId(), x: pos.x, y: pos.y, label: 'New event', date: '', detail: '', icon: null }; beads.push(newBead); renderAll(); openModal(newBead.id); }); // ---- PNG export: embedded styles + title band ---- const EXPORT_FONTS = "Arial, Helvetica, sans-serif"; const EXPORT_CSS = ` .axis-line{stroke:#20293a;stroke-width:1.5;fill:none;} .grid-line{stroke:#c9c2b3;stroke-width:1;} .connector{fill:none;stroke:#20293a;stroke-width:1.6;stroke-linejoin:round;opacity:.55;} .bead-label{font-family:${EXPORT_FONTS};font-size:12.5px;font-weight:600;fill:#20293a;} .bead-date{font-family:${EXPORT_FONTS};font-size:10.5px;fill:#5b6577;} .axis-caption{font-family:${EXPORT_FONTS};font-size:11px;font-weight:600;fill:#5b6577;letter-spacing:.04em;} .x-year{font-family:${EXPORT_FONTS};font-size:13px;font-weight:600;fill:#20293a;} `; document.getElementById('exportBtn').addEventListener('click', function(){ const clone = svg.cloneNode(true); clone.setAttribute('xmlns', NS); clone.setAttribute('width', VB_W); clone.setAttribute('height', VB_H); const styleEl = document.createElementNS(NS, 'style'); styleEl.textContent = EXPORT_CSS; clone.insertBefore(styleEl, clone.firstChild); const bg = svgEl('rect', { x:0, y:0, width:VB_W, height:VB_H, fill:'#ffffff' }); clone.insertBefore(bg, styleEl.nextSibling); const svgStr = new XMLSerializer().serializeToString(clone); const url = URL.createObjectURL(new Blob([svgStr], { type:'image/svg+xml;charset=utf-8' })); const img = new Image(); img.onload = function(){ const scale = 2; const TITLE_BAND = 72; const canvas = document.createElement('canvas'); canvas.width = VB_W * scale; canvas.height = (VB_H + TITLE_BAND) * scale; const ctx = canvas.getContext('2d'); ctx.scale(scale, scale); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, VB_W, VB_H + TITLE_BAND); const title = (document.getElementById('chartTitle').textContent || '').trim(); if (title){ ctx.fillStyle = '#20293a'; ctx.font = '600 30px Georgia, "Times New Roman", serif'; ctx.textAlign = 'center'; ctx.fillText(title, VB_W / 2, 48); } ctx.drawImage(img, 0, TITLE_BAND, VB_W, VB_H); URL.revokeObjectURL(url); canvas.toBlob(function(blob){ const link = document.createElement('a'); link.download = 'leadership-journey-timeline.png'; link.href = URL.createObjectURL(blob); link.click(); }, 'image/png'); }; img.onerror = function(){ URL.revokeObjectURL(url); alert('Export failed to render. If you added an icon image, try removing it and exporting again.'); }; img.src = url; }); renderAll(); })(); </script> </body> </html>Dial Spectrum scale for Rise and Storyline without custom slider logic
Need a real confidence scale in Rise or Storyline without building a custom slider from scratch? Use a dial that outputs as one HTML file you can drop into your course. Problem: yes-or-no questions flatten nuance. If two people both click Yes, one might be at 80 percent confidence and the other at 20 percent. If you try to fix that inside Storyline, you are into slider variables, motion paths, value mapping, and conditional feedback layers. Rise does not even give you a native scale block. Solution: Dial Spectrum is a generator that builds a continuous or stepped scale with configurable labels and feedback, then exports a single HTML file you can embed. - Set the scale range and step size. Example, 0 to 100 in 5-point steps, or 1 to 7 with whole steps. - Label anchors and optional midpoints. Example, Not at all confident, Neutral, Very confident. - Map value ranges to tailored feedback. Example, 0 to 30 triggers one message, 31 to 70 a second, 71 to 100 a third. - Match your brand colors. - Keyboard accessible. The dial can receive focus and be adjusted by keyboard. - Built to sit inside iframes and web objects without layout drift. Where it fits: - Confidence self-checks before a practice scenario. - Pre and post attitude snapshots around a module. - Opinion gauging when more than two positions are valid. - Reflection prompts tied to ranges. Example, If 0 to 40, ask them to pick one resource to revisit. How to embed: - Rise 360: Host the exported HTML on your web space, then insert it with the Embed block using the public URL. If your LMS blocks external content, wrap it in a one-slide Storyline file as a Web Object and use the Storyline block in Rise. - Storyline: Insert as a Web Object, either pointing to the hosted URL or to the local HTML file. Storyline will package it with your publish. - Captivate, Canvas, Moodle: Insert as a Web Object or iframe. Host the HTML and point the iframe to it. Most LMS pages that accept custom HTML will take it. Notes: - You are not collecting scores by default. Use it to surface thinking and route feedback. If you need to record values, capture it with your platform’s form, survey, or xAPI layer around the dial. - If you see scrollbars, increase the iframe height in your host block. The exported file is fixed-frame friendly, so once the container is tall enough the dial will hold position. Demo Dial Spectrum Dial Spectrum GeneratorSwatch Library
With Swatch Library you can create a palette per brand or project, and every swatch is one click to copy, in hex or RGB. Use it free right inside a Rise course or online. Type or paste a code, bulk-paste a whole list at once or, in Chrome/Edge, use the eyedropper to pick colours from anywhere on your screen, a client's website, a brand PDF, a Storyline slide. You can drop a logo or brand asset onto the tool and it will pull the dominant colours out and build a palette from them. Everything happens in the browser, nothing is uploaded anywhere. Beyond that there is a WCAG 2.2 contrast checker built in, set a foreground and background colour, get the ratio, and see pass/fail for AA and AAA body text, large text and non-text elements like icons and focus indicators. That is useful enough on its own, but the thing I am most pleased with is the contrast grid. Each palette has a Grid button that opens a matrix of every colour pair in that palette, painted with the actual pair so you can see at a glance which combinations work for text and which do not. One click on any cell opens the full checker for that pair. If you have ever wondered whether your brand colours are actually safe to use together, this answers it quickly. There is also a colour vision preview. A Vision button on each palette shows it as it appears to people with protanopia, deuteranopia and tritanopia, plus a greyscale row for print. It automatically flags any pairs that become hard to tell apart, named with their perceptual distance score. Each swatch has a tints and shades button that opens a nine-step ramp from light to dark, and you can click any step to copy it or add it to the palette. Useful for hover states and backgrounds. You can drag swatches to reorder or move them between palettes, filter palettes once your library grows, and use Export/Import to back everything up or share a brand palette file with your team so everyone's working from the same set. There's a built-in guide for the full tour. It can be used directly in the linked Rise course, or used online via the link. All free, no downloads, no signup, no nonsense! Swatch Library - Rise Swatch Library - OnlineFrom Tolerating Rise to Being Obsessed With It — A Code Block Story
Okay, I owe Rise 360 an apology. A public one. Right here. For a long time, I was that person. The one muttering under their breath about how Rise was "too rigid" and "not flexible enough" and "why can't I just make it do the thing." I used it because I had to. I tolerated it the way you tolerate a coworker who microwaves fish in the break room. 🐟 And then… Code Blocks happened. 🤔 Suddenly I could drop custom HTML, CSS, and JavaScript directly into Rise and build whatever I wanted. Interactive tabs. Scenario cards with reveal animations. A full permissions comparison table with filter toggles. A side-by-side AI Avatar video wrapper with bullet points that sync to the video as it plays — like, ACTUALLY sync, using JavaScript timeupdate listeners. Rise went from "I guess this works" to "wait, I can do THAT?" faster than I'd like to admit. My latest project is a 9-lesson Rise 360 course for Learning Experience Designers on Team Folders. The whole thing is built with Code Blocks and Articulate AI Avatars — branded with a full custom color system, video intros on every lesson, and enough JavaScript to make past-me very confused and present-me very smug. A few things I never thought I'd say about Rise: I built a custom play button overlay because Rise iframes block autoplay — and it looks amazing I embedded video directly into HTML as base64 so it's fully self-contained — one file, no dependencies I applied an entire brand palette via CSS custom properties and it just… worked I actually looked forward to opening Rise every morning. I know. I'm as surprised as you are. 😵 If you've ever felt like Rise had a ceiling — I'm here to tell you the ceiling is a Code Block and you can build whatever you want on top of it. What's the most "wait, Rise can DO that?!" thing you've ever built? Drop it below. I need to know I'm not alone. 👇 Rise 360: Managing Shared Content and FoldersThe Discount Decoder
A short, interactive course for school-age learners on percentage change, discounts, tax, and the traps that catch almost everyone. Every price tag, every sale sign, every tax-inclusive receipt is doing the same maths under the hood, but percentages trip people up in exactly the same places, over and over. This course doesn't try to explain percentages. It hands the numbers to the learner and lets them play, break things, and discover the pattern for themselves. Fully accessible — keyboard nav, swipe, ARIA states, reduced-motion opt-out, mute toggle for the narration. The Discount Decoder For those interested, here's how it was built - The short answer; it's a single self-contained HTML file dropped into a Rise code block. The longer answer is that 'single HTML file' hides quite a lot of learning-design decisions I've refined across a dozen or so of these builds. Here are the ones I think are most portable. The whole thing is one file No frameworks. No build step. No CDN. One index.html, two background JPGs, nine short MP3s. Drop the folder into a Rise code block and it works. Vanilla HTML/CSS/JS is boringly reliable! Each screen is a "scene," and only one is on at a time Every section is a <section class="scene"> stacked absolutely on top of the others. A single class, .on controls which one is visible. Navigating means fading out the old scene and fading in the new one, with the new one entering from a slightly different starting position depending on whether you're going forward or backward. This is the same pattern you'd find in a native iOS or Android app: a stack of screens, one active. Learners find it intuitive because they've been using apps built this way for a decade or more. The nav rail is deliberately simple A row of small pill segments, one per section, with a persistent Next arrow and a persistent Previous arrow. Learners can jump anywhere by clicking a segment, arrow-key their way through, or swipe on mobile. The Next arrow pulses in a warm gradient the whole time it's active, because I noticed in testing that it wasn't obvious there was a way forward unless you were shown. The rail counts up: 01 / 10, 02 / 10. That number matters more than you'd think, it turns "how much of this am I in for?" into something the learner can see at a glance, without a progress bar dominating the screen. Content-driven interactivity, in small doses Every section has one main interactive idea. Not four. Not seven. One. The temptation is to pile more into each screen. Resist it. Learners can only pay attention to one thing at a time, and a single interactive done well outperforms three done half-heartedly every time. Learners drive the pace, not a timer Nothing in this course auto-advances. Not the step reveals. Not the chain animation. Not the "we've spent long enough here" fade to the next section. Every reveal, every animation, every transition is driven by a click, tap, keyboard press or swipe from the learner. This matters more for maths than for example policy training. Someone reading a data-protection policy can skim; someone learning the multiplier trick genuinely needs a moment to think. If your content moves without them, you've lost the room. What I'd tell someone starting out Copy the pattern before you copy the code. The pattern is: scenes, rail, one-idea-per-section, learner-paced reveals, tolerant feedback, in-context reward, accessible controls. That pattern works for policy training, safety courses, product onboarding, and, as this build hopefully shows, maths. Interactive doesn't mean "click to reveal." Click-to-reveal is the low bar. Aim for: change a number and see what happens. Commit to an answer before the explanation. Type your own working. Make a mistake and get specific feedback on why it was tempting. Small courses are better than big ones. This lesson is 10 sections and ~ 8 minutes. Nobody has been dragged through it against their will. That's a good bar. Happy to answer specific questions in the thread. If enough of you want a follow-up on any particular piece shout out!Creating a Mini Game in Rise 360: The Case of the Vanishing Keynote
Creating a Mini Game Mystery in Rise 360: Clues, Flip Cards, and a Surprisingly Suspicious Tech Host I wanted to create a quick, interactive team activity that felt more like a game than a traditional eLearning interaction. The goal was simple: build a 10-minute virtual mystery experience for a small group of learners using Rise 360. The result was The Case of the Vanishing Keynote, a mini detective challenge where learners review suspects, examine evidence, take notes, and make a final accusation. The premise is delightfully dramatic: minutes before a big virtual celebration, the keynote presentation disappears from the shared folder. Four people had access. Everyone has a motive. One person knows a little too much. Naturally, chaos ensues. The Activity The game is designed for about 20 participants and takes roughly 10 minutes to complete. Learners move through the experience in a short, guided flow: Welcome to the mystery Meet the suspects Examine the evidence Discuss the clues Make an accusation Document a final guess in the Detective Notebook The suspects include Jordan the Project Lead, Mia the Designer, Sam the Tech Host, and Riley the Presenter. Each character has a motive, an alibi, and one suspicious detail. Because every good mystery deserves a little flair, each suspect appears on a flip card with a funny 3D-style character image on the front and their case details on the back. The vibe is somewhere between “corporate team-building activity” and “Pixar accidentally wandered into a project kickoff meeting.” Why Rise 360? Rise 360 was a great fit because the activity needed to feel polished, easy to access, and lightweight. I wanted learners to be able to jump in quickly without needing a complicated setup. To make the experience more game-like, I used a custom HTML embed instead of relying only on standard Rise blocks. This allowed for: Flip cards A guided screen-by-screen flow Continue buttons A progress bar A note-taking area A final guess section A participant version with no answer reveal A facilitator version with the full solution Basically, Rise handled the clean learning shell, and the custom code handled the mystery mischief. The Road Bumps Of course, no good mystery is complete without a few unexpected plot twists. Ours just happened to involve HTML, iframe sizing, and one overly eager answer reveal. Road Bump #1: The Case of the Disappearing Card Text At one point, the discussion screen looked great in theory, but some of the text was nearly impossible to read because it was showing as white text on a light background. Very mysterious. Very unhelpful. The fix was to simplify the styling, force stronger contrast, and make sure key text areas were using readable dark text. Lesson learned: dramatic visuals are fun, but learners should not need night-vision goggles to read the instructions. Road Bump #2: The Answer Revealed Itself Too Soon Originally, the final screen revealed the culprit immediately. This was technically functional, but educationally rude. The whole point of a mystery is the suspense. So we adjusted the flow so learners first make their accusation, then land on a final review screen, and only the facilitator version reveals the correct answer. The participant version now lets learners document their guess without spoiling the solution. The facilitator can control the big reveal, which is much better for a live group activity. Road Bump #3: Sam Kept Showing Up Everywhere In one version, no matter which suspect the learner selected, Sam the Tech Host appeared in the final review. This was funny for about five seconds because Sam is, in fact, the suspicious one. But if a learner guessed Riley, they should see Riley. If they guessed Mia, they should see Mia. Sam cannot be allowed to photobomb every accusation. The fix was to make the final review image dynamic so it matches the learner’s selected suspect. Road Bump #4: Rise 360 and the “Folder in a Folder” Situation When packaging the activity, the first ZIP file had an extra folder level. Rise did not love that. The fix was simple but important: the index.html file needed to sit at the root of the ZIP package, with the images folder beside it. Once the structure was cleaned up, the activity was much easier to host and embed. Road Bump #5: The Notebook That Would Not Forget We added a Detective Notebook so learners could take notes and record their final guess. Great idea. Then we discovered that restarting the activity did not fully clear the final guess. The notes cleared. The activity restarted. But the guess was still hanging around like a suspect who refuses to leave the interrogation room. The fix was to reset the notebook fields, selected suspect, saved local data, and displayed guess state all at once. The Detective Notebook One of my favorite additions was the note-taking tool. Learners can jot down evidence, track their thinking, and record their final accusation. This made the activity feel less like a simple quiz and more like an actual investigation. It also helped support discussion because learners had something concrete to reference when explaining their choice. The notebook also gives participants a way to download or copy their notes, which is a nice touch if the activity is used as part of a larger workshop or team-building event. Two Versions: Facilitator and Participant We ended up creating two versions of the same game: Facilitator Version This version includes the full answer reveal and explanation. It is useful for the person leading the session or for reviewing the activity after the group has made their guesses. Participant Version This version does not reveal the answer. Learners can review suspects, examine clues, take notes, and submit their final guess, but the solution stays hidden. This keeps the facilitator in control of the reveal. That split made the experience much more flexible for a live session. What I’d Do Next If I continue building this out, I’d love to add: A countdown timer Team scoring More branching clues A printable detective worksheet Alternate mystery scenarios A “red herring” clue or two, because apparently I enjoy making people suspicious of fictional coworkers Final Thoughts This was a fun reminder that eLearning interactions do not always need to be long or complicated to be engaging. Sometimes a small, focused activity with a clear goal, a little humor, and a few interactive elements can create a memorable learner experience. Also, never underestimate the power of a suspicious tech host with backup-folder access. Case closed. The Case of the Vanishing Keynote FG The Case of the Vanishing Keynote PGMy Custom Rise Block Component Library
Hi everyone! I wanted to share a custom library of Rise-compatible interactive components I’ve been building and experimenting with for eLearning projects. The library includes custom-designed blocks and interactions intended to help make Rise courses more engaging, flexible, and visually dynamic beyond the default block set. You can explore the library here: https://cognitoblox.netlify.app/ This is an ongoing project, and I’d genuinely love feedback from the community: Which components do you find most useful? What kinds of interactions would you like to see added? Any ideas for improving usability or accessibility? Happy to connect with fellow developers who are experimenting with custom Rise code blocks as well! Thanks for checking it outThe AI Shift
The tools have changed. Your judgement hasn't. In this Rise course learn the best practices of how to work alongside AI to move faster, create sharper content, and stay the most valuable thing in the room. The L&D professionals pulling ahead right now aren't the ones who know the most about AI. They're the ones who know how to work with it. AI is already in your workflow, whether you've invited it or not. This course shows you how to use it deliberately, critically, and well. The AI Shift
