[]
EdWeek Interactive Quiz — Template
EdWeek Quiz Module — Template
For Brightspot: copy everything between the dashed comment lines into an HTML module. All styles are scoped to .ew-quiz and won’t affect the rest of the page.
Note on the ️ Edit button: Visible to all users in this static file. Remove it or restrict it via Brightspot permissions before publishing.
Education Week · Interactive Quiz
Handling Difficult Parent Conversations
How ready are you when a tough talk walks through your door?
️
Cover art — optional Art director: add image URL to coverImage.src in quiz data, or leave blank to hide this area.
From proactive outreach to a heated conference — how well do you navigate difficult conversations with parents? Take this 6-question quiz to find out.
Here’s how you did — question by question
Think your colleagues can beat your score? Share this quiz!
️ Quiz Editor
Changes update the quiz instantly. Hit “⬇️ Save & Download File” to save your edits as a new HTML file.
️ Remove or hide the Edit button before publishing.
q.active !== false); EW.cur = 0; EW.picks = new Array(EW.questions.length).fill(null); document.getElementById(‘ewStart’).style.display = ‘none’; document.getElementById(‘ewResults’).style.display = ‘none’; document.getElementById(‘ewProgress’).style.display = ‘flex’; document.getElementById(‘ewQuestionArea’).style.display = ‘block’; renderQuestion(0); } const CARD_BG = [‘#f7f8fc’,’#e8f5f5′,’#eaf1f6′,’#feebdf’,’#fff6d6′,’#f5f0ff’]; function renderQuestion(idx) { const q = EW.questions[idx]; const total = EW.questions.length; document.getElementById(‘ewCard’).style.background = CARD_BG[idx % CARD_BG.length]; document.getElementById(‘ewQLabel’).textContent = ‘Question ‘ + (idx + 1) + ‘ of ‘ + total; document.getElementById(‘ewQText’).textContent = q.q; const wrap = document.getElementById(‘ewAnswers’); const letters = [‘A’,’B’,’C’]; wrap.innerHTML = ”; q.answers.forEach((ans, i) => { const btn = document.createElement(‘button’); btn.className = ‘ew-quiz__answer-btn’; btn.innerHTML = ” + letters[i] + ” + ” + ans + ”; btn.onclick = () => selectAnswer(i); wrap.appendChild(btn); }); const fb = document.getElementById(‘ewFeedback’); fb.className = ‘ew-quiz__feedback’; fb.style.display = ‘none’; document.getElementById(‘ewNextBtn’).style.display = ‘none’; const pct = (idx / total) * 100; document.getElementById(‘ewBarFill’).style.width = pct + ‘%’; document.getElementById(‘ewProgressLabel’).textContent = (idx + 1) + ‘ of ‘ + total; document.getElementById(‘ewEmojiTrack’).textContent = getEmoji(idx); } function selectAnswer(chosen) { const q = EW.questions[EW.cur]; EW.picks[EW.cur] = chosen; const isRight = chosen === q.correct; document.querySelectorAll(‘#ewAnswers .ew-quiz__answer-btn’).forEach((btn, i) => { btn.disabled = true; if (i === q.correct) btn.classList.add(‘is-correct’); else if (i === chosen) btn.classList.add(‘is-wrong’); }); const fb = document.getElementById(‘ewFeedback’); document.getElementById(‘ewFeedbackIcon’).textContent = isRight ? ‘👍’ : ‘❌’; document.getElementById(‘ewFeedbackMsg’).textContent = isRight ? pick(CORRECT_MSG) : pick(WRONG_MSG); fb.className = ‘ew-quiz__feedback ‘ + (isRight ? ‘is-correct’ : ‘is-wrong’); fb.style.display = ‘flex’; const nxt = document.getElementById(‘ewNextBtn’); nxt.style.display = ‘block’; nxt.textContent = (EW.cur === EW.questions.length – 1) ? ‘See My Results 🎓’ : ‘Next Question →’; } function ewNext() { if (EW.cur p === EW.questions[i].correct).length; const frac = numRight / total; let emoji = ‘🎓’, msg = ‘Well done!’; for (const [threshold, [e, m]] of EW_QUIZ.scoreMessages) { if (frac >= threshold) { emoji = e; msg = m; break; } } document.getElementById(‘ewResultEmoji’).textContent = emoji; document.getElementById(‘ewScoreNum’).textContent = numRight + ‘ / ‘ + total; document.getElementById(‘ewScoreLabel’).textContent = msg; const list = document.getElementById(‘ewResultList’); list.innerHTML = ”; EW.questions.forEach((q, i) => { const gotIt = EW.picks[i] === q.correct; const div = document.createElement(‘div’); div.className = ‘ew-quiz__result-item ‘ + (gotIt ? ‘got-right’ : ‘got-wrong’); div.innerHTML = ” + (i+1) + ‘. ‘ + q.q + ‘]]>’ + ‘
‘ + ” + (gotIt ? ” : ”) + ” + ‘Correct answer: ‘ + q.answers[q.correct] + ” + ‘
‘ + ‘
‘ + q.explanation + ‘
‘; list.appendChild(div); }); const srcList = document.getElementById(‘ewSourceList’); srcList.innerHTML = ”; EW_QUIZ.sources.forEach(s => { const div = document.createElement(‘div’); div.className = ‘ew-quiz__source-item’; const a = document.createElement(‘a’); a.href = s.url; a.target = ‘_blank’; a.rel = ‘noopener’; a.textContent = ‘“’ + s.title + ‘,”’; div.appendChild(a); if (s.venue) { div.appendChild(document.createTextNode(‘ ‘ + s.venue)); } srcList.appendChild(div); }); document.getElementById(‘ewQuizRoot’).scrollIntoView({ behavior: ‘smooth’, block: ‘start’ }); } function ewRestart() { document.getElementById(‘ewResults’).style.display = ‘none’; document.getElementById(‘ewStart’).style.display = ‘block’; initCoverArt(); } function ewCopyLink() { navigator.clipboard.writeText(location.href) .then(() => alert(‘Link copied! ‘)) .catch(() => prompt(‘Copy this link:’, location.href)); } function ewShareX() { const t = encodeURIComponent(‘I just took the “‘ + EW_QUIZ.title + ‘” quiz on @educationweek — how will you score?’); window.open(‘https://x.com/intent/tweet?text=’ + t + ‘&url=’ + encodeURIComponent(location.href), ‘_blank’); } function ewShareFB() { window.open(‘https://www.facebook.com/sharer/sharer.php?u=’ + encodeURIComponent(location.href), ‘_blank’); } /* —- Editor —- */ let editorOpen = false; function ewToggleEditor() { editorOpen = !editorOpen; const panel = document.getElementById(‘ewEditor’); editorOpen ? (panel.classList.add(‘is-open’), buildEditor()) : panel.classList.remove(‘is-open’); } function buildEditor() { const wrap = document.getElementById(‘ewEdContent’); let html = ”; /* Cover art */ html += ‘
️ Cover Art
‘; html += ‘Image URL (leave blank to hide cover area)’; html += ”; html += ‘Alt text’; html += ”; /* Quiz info */ html += ‘
Quiz Info
‘; html += ‘Title’; html += ‘Subtitle’; html += ‘Start Screen Description’ + esc(EW_QUIZ.startDesc) + ”; /* Questions */ html += ‘
Questions (uncheck to keep as alternate without deleting)
‘; EW_QUIZ.questions.forEach((q, qi) => { const isTF = q.answers.length === 2; const isActive = q.active !== false; const src = (q.source && typeof q.source === ‘object’) ? q.source : { title: String(q.source || ”), url: ”, quote: ” }; html += ”; /* end q-block */ }); html += ‘
‘; html += ‘‘; html += ‘‘; html += ‘‘; html += ‘
‘; wrap.innerHTML = html; } function ewToggleActive(qi) { const isChecked = document.getElementById(‘ewEdActive’ + qi).checked; const block = document.getElementById(‘ewEdBlock’ + qi); isChecked ? block.classList.remove(‘ew-ed-inactive’) : block.classList.add(‘ew-ed-inactive’); } function ewToggleAnswerCount(qi) { const type = document.getElementById(‘ewEdType’ + qi).value; const cWrap = document.getElementById(‘ewEdAWrap’ + qi + ‘_2’); type === ‘tf’ ? cWrap.classList.add(‘ew-ed-answer-hidden’) : cWrap.classList.remove(‘ew-ed-answer-hidden’); } function esc(str) { return String(str || ”).replace(/&/g,’&’).replace(/”/g,'”‘).replace(//g,’>’); } function ewSaveEdits() { EW_QUIZ.coverImage.src = document.getElementById(‘ewEdCoverSrc’).value.trim(); EW_QUIZ.coverImage.alt = document.getElementById(‘ewEdCoverAlt’).value; EW_QUIZ.title = document.getElementById(‘ewEdTitle’).value; EW_QUIZ.subtitle = document.getElementById(‘ewEdSubtitle’).value; EW_QUIZ.startDesc = document.getElementById(‘ewEdDesc’).value; EW_QUIZ.questions.forEach((q, qi) => { q.q = document.getElementById(‘ewEdQ’ + qi).value; q.active = document.getElementById(‘ewEdActive’ + qi).checked; /* Collect answers + correct flag, then auto-sort alphabetically */ const type = document.getElementById(‘ewEdType’ + qi).value; const count = type === ‘tf’ ? 2 : 3; const checkedEl = document.querySelector(‘input[name=”ewEdCorr’ + qi + ‘”]:checked’); const checkedIdx = checkedEl ? parseInt(checkedEl.value) : 0; const pairs = []; for (let ai = 0; ai a.text.localeCompare(b.text)); q.answers = pairs.map(p => p.text); q.correct = pairs.findIndex(p => p.wasCorrect); q.explanation = document.getElementById(‘ewEdExp’ + qi).value; /* Structured source */ q.source = { title: document.getElementById(‘ewEdSrcTitle’ + qi).value, url: document.getElementById(‘ewEdSrcUrl’ + qi).value, quote: document.getElementById(‘ewEdSrcQuote’ + qi).value }; }); /* Refresh header + cover */ document.getElementById(‘ewTitle’).textContent = EW_QUIZ.title; document.getElementById(‘ewSubtitle’).textContent = EW_QUIZ.subtitle; document.getElementById(‘ewStartDesc’).textContent = EW_QUIZ.startDesc; initCoverArt(); /* Return to start */ document.getElementById(‘ewStart’).style.display = ‘block’; document.getElementById(‘ewQuestionArea’).style.display = ‘none’; document.getElementById(‘ewResults’).style.display = ‘none’; document.getElementById(‘ewProgress’).style.display = ‘none’; const activeCount = EW_QUIZ.questions.filter(q => q.active !== false).length; alert(‘ Quiz updated! ‘ + activeCount + ‘ of ‘ + EW_QUIZ.questions.length + ‘ questions active. Click “Start Quiz” to preview.’); } function ewDownloadHTML() { ewSaveEdits(); const json = JSON.stringify(EW_QUIZ, null, 2); document.getElementById(‘ewEditor’).classList.remove(‘is-open’); editorOpen = false; const src = ‘n’ + document.documentElement.outerHTML; const updated = src.replace( /const EW_QUIZ = {[sS]*?}; // end EW_QUIZ/, ‘const EW_QUIZ = ‘ + json + ‘; // end EW_QUIZ’ ); const a = document.createElement(‘a’); a.href = URL.createObjectURL(new Blob([updated], { type: ‘text/html’ })); a.download = document.title.replace(/[^a-z0-9]+/gi, ‘-‘).toLowerCase() + ‘.html’; a.click(); URL.revokeObjectURL(a.href); } function ewExportJSON() { const json = JSON.stringify(EW_QUIZ, null, 2); navigator.clipboard.writeText(json) .then(() => alert(‘ JSON copied! Paste it to replace the EW_QUIZ variable in your HTML file.’)) .catch(() => prompt(‘Copy this JSON and paste it to replace EW_QUIZ in your HTML file:’, json)); } /* —- Init —- */ (function init() { initCoverArt(); document.getElementById(‘ewTitle’).textContent = EW_QUIZ.title; document.getElementById(‘ewSubtitle’).textContent = EW_QUIZ.subtitle; document.getElementById(‘ewStartDesc’).textContent = EW_QUIZ.startDesc; /* Hide reporter-only elements when served over HTTP (i.e. in Brightspot). They remain visible when the file is opened locally for editing. */ if (location.protocol !== ‘file:’) { const banner = document.querySelector(‘.demo-banner’); const editBtn = document.querySelector(‘.ew-quiz__edit-btn’); if (banner) banner.style.display = ‘none’; if (editBtn) editBtn.style.display = ‘none’; } })();