// this is an example of what the data will look like when a user imports your component window.dataSpQGN = {}; dataSpQGN['passingPercent'] = 80; dataSpQGN['passedMessage'] = 'You know your politicians'; dataSpQGN['failedMessage'] = 'Surprising huh?'; dataSpQGN['quiz_result'] = {"userInput":{"correctCount":null,"total":null},"aggregateValues":{"correctCount":null,"total":3},"userInputMeta":{"created":null,"modified":null}}; dataSpQGN['questions'] = [{},{},{}]; dataSpQGN['questions'][0]['maskedImageUrl'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/11b01e9c18c0b80d.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/11b01e9c18c0b80d-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/105/11b01e9c18c0b80d.webp 600w","width":600,"height":250}; dataSpQGN['questions'][1]['maskedImageUrl'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/fe6fd59fc05ded34.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/fe6fd59fc05ded34-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/105/fe6fd59fc05ded34.webp 600w","width":600,"height":250}; dataSpQGN['questions'][2]['maskedImageUrl'] = {"src":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/0e56a85ebbb18b7f.webp","srcset":"https://d1pymbn96bwdg3.cloudfront.net/uploads/105/0e56a85ebbb18b7f-480w.webp 480w, https://d1pymbn96bwdg3.cloudfront.net/uploads/105/0e56a85ebbb18b7f.webp 600w","width":600,"height":250}; dataSpQGN['questions'][0]['prompt'] = 'Who said it?'; dataSpQGN['questions'][1]['prompt'] = 'Who said it?'; dataSpQGN['questions'][2]['prompt'] = 'Who said it?'; dataSpQGN['questions'][0]['options'] = [["Obama"],["Biden"],["Trump"]]; dataSpQGN['questions'][1]['options'] = [["Obama"],["Biden"],["Trump"]]; dataSpQGN['questions'][2]['options'] = [["Obama"],["Biden"],["Trump"]]; dataSpQGN['questions'][0]['answer'] = 'Biden'; dataSpQGN['questions'][1]['answer'] = 'Obama'; dataSpQGN['questions'][2]['answer'] = 'Trump';

'; } function getOptionValue(opt) { return Array.isArray(opt) ? String(opt[0] ?? "") : String(opt ?? ""); } function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function normalizeStoreDataSpQGN(value) { const userInput = value && value.userInput && typeof value.userInput === "object" ? value.userInput : {}; const aggregateValues = value && value.aggregateValues && typeof value.aggregateValues === "object" ? value.aggregateValues : {}; const userInputMeta = value && value.userInputMeta && typeof value.userInputMeta === "object" ? value.userInputMeta : {}; return { userInput: { correctCount: typeof userInput.correctCount === "number" ? userInput.correctCount : null, total: typeof userInput.total === "number" ? userInput.total : null }, aggregateValues: { correctCount: typeof aggregateValues.correctCount === "number" ? aggregateValues.correctCount : 0, total: typeof aggregateValues.total === "number" ? aggregateValues.total : 0 }, userInputMeta: { created: typeof userInputMeta.created === "string" ? userInputMeta.created : null, modified: typeof userInputMeta.modified === "string" ? userInputMeta.modified : null } }; } function getStoreDataFromResponseSpQGN(response) { return response && response.storeData ? response.storeData : response; } function getSubmittedSelectionIndexesSpQGN() { const selectionIndexes = []; for (let qi = 0; qi < total; qi++) { if (!state.submitted[qi]) break; const q = questions[qi]; const options = Array.isArray(q.options) ? q.options : []; const selectedValue = state.selectedValue[qi]; const selectedIndex = options.findIndex(option => { return getOptionValue(option) === selectedValue; }); if (selectedIndex < 0) break; selectionIndexes.push(selectedIndex + 1); } return selectionIndexes; } function getQuizSelectionsFragmentSpQGN() { if (config.renderContext !== "list-display") return ""; if (state.showFinalPage) return ""; const selectionIndexes = getSubmittedSelectionIndexesSpQGN(); if (!selectionIndexes.length) return ""; return "quiz_selections=" + selectionIndexes.join(","); } function getListDisplayCardFragmentAttributeSpQGN() { const fragment = getQuizSelectionsFragmentSpQGN(); if (!fragment) return ""; return ' data-click-bridge-fragment="' + escapeHtml(fragment) + '"'; } function updateListDisplayCardFragmentSpQGN(card) { if (!card) return; const fragment = getQuizSelectionsFragmentSpQGN(); if (fragment) { card.setAttribute("data-click-bridge-fragment", fragment); } else { card.removeAttribute("data-click-bridge-fragment"); } } function getFragmentSelectionsSpQGN() { if (config.renderContext !== "post-display") return []; const fragment = String(config.fragment || "").replace(/^#/, ""); const match = fragment.match(/(?:^|&)quiz_selections=([^&]*)/); if (!match) return []; let selectionText; try { selectionText = decodeURIComponent(match[1]); } catch (error) { selectionText = match[1]; } if (!selectionText.trim()) return []; return selectionText.split(",").map(value => { return Number.parseInt(value.trim(), 10); }); } function getStoredUserResultSpQGN() { return storeDataSpQGN && storeDataSpQGN.userInput ? storeDataSpQGN.userInput : null; } function normalizeStoredResultSpQGN(result) { if (!result) return null; const correctCount = Number(result.correctCount); const storedTotal = Number(result.total); if (!Number.isFinite(correctCount) || !Number.isFinite(storedTotal) || storedTotal <= 0) { return null; } return { correctCount, total: storedTotal }; } function getResultPercentSpQGN(result) { if (!result || !result.total) return 0; return Math.round(Number(result.correctCount || 0) / Number(result.total) * 100); } function getAggregatePercentSpQGN() { const aggregateValues = storeDataSpQGN && storeDataSpQGN.aggregateValues; if (!aggregateValues) return null; const aggregateCorrect = Number(aggregateValues.correctCount); const aggregateTotal = Number(aggregateValues.total); if (!Number.isFinite(aggregateCorrect) || !Number.isFinite(aggregateTotal) || aggregateTotal <= 0) { return null; } return Math.round(aggregateCorrect / aggregateTotal * 100); } function updateAverageScoreInPlaceSpQGN() { const averagePercent = getAggregatePercentSpQGN(); const isAverageLoading = state.isSavingResult && !state.hasSavedResult && !state.isRetake; const averageScore = root.querySelector(".dataSpQGN-averageScore"); if (!averageScore) return; const strong = averageScore.querySelector("strong"); if (isAverageLoading) { averageScore.hidden = false; if (strong) { strong.textContent = "Loading"; } return; } if (averagePercent == null) { averageScore.hidden = true; if (strong) { strong.textContent = ""; } return; } averageScore.hidden = false; if (strong) { strong.textContent = averagePercent + "%"; } } function shouldShowCreateQuizCtaSpQGN() { return !state.createQuizCtaDismissed && config.renderContext === "post-display" && state.showFinalPage && state.hasSavedResult && !state.isRetake && !state.isSavingResult && typeof window.fgAddComponentToPost === "function"; } function getCreateQuizCtaHtmlSpQGN() { if (!shouldShowCreateQuizCtaSpQGN()) { return ""; } return `

Make your own

`; } function updateCreateQuizCtaInPlaceSpQGN() { const slot = root.querySelector(".dataSpQGN-createQuizCtaSlot"); if (!slot) return; slot.innerHTML = getCreateQuizCtaHtmlSpQGN(); } function applyStoredResultSpQGN() { if (!shouldUseStoredResultSpQGN()) { state.savedResult = null; state.hasSavedResult = false; state.showFinalPage = false; state.isRetake = true; state.loadedStoredResult = false; state.correctCount = 0; state.showConfetti = false; state.confettiHtml = ""; return false; } const storedResult = normalizeStoredResultSpQGN(getStoredUserResultSpQGN()); if (!storedResult) return false; state.savedResult = storedResult; state.hasSavedResult = true; state.showFinalPage = true; state.isRetake = false; state.loadedStoredResult = true; state.correctCount = storedResult.correctCount; const percent = getResultPercentSpQGN(storedResult); const passingPercent = Number(data.passingPercent ?? 0); const passed = percent >= passingPercent; state.showConfetti = passed; state.confettiHtml = passed ? confettiMarkupSpQGN() : ""; return true; } function applyFragmentSelectionsSpQGN() { if (config.renderContext !== "post-display") { return false; } if (state.hasSavedResult) return false; const fragmentSelections = getFragmentSelectionsSpQGN(); if (!fragmentSelections.length) { return false; } let appliedCount = 0; let correctCount = 0; for (let qi = 0; qi < total && qi < fragmentSelections.length; qi++) { const q = questions[qi]; const options = Array.isArray(q.options) ? q.options : []; const oneBasedOptionIndex = fragmentSelections[qi]; if (!Number.isInteger(oneBasedOptionIndex) || oneBasedOptionIndex < 1 || oneBasedOptionIndex > options.length) { break; } const selectedValue = getOptionValue(options[oneBasedOptionIndex - 1]); const correct = selectedValue === String(q.answer ?? ""); state.selectedValue[qi] = selectedValue; state.submitted[qi] = true; state.isCorrect[qi] = correct; if (correct) { correctCount++; } appliedCount++; } if (!appliedCount) return false; state.correctCount = correctCount; state.loadedStoredResult = false; state.isRetake = false; const nextUnansweredIndex = state.submitted.findIndex(submitted => !submitted); if (nextUnansweredIndex >= 0) { state.currentIndex = nextUnansweredIndex; state.showFinalPage = false; state.completedFromFragment = false; state.showConfetti = false; state.confettiHtml = ""; return true; } state.showFinalPage = true; state.completedFromFragment = true; const result = { correctCount: state.correctCount, total }; const percent = getResultPercentSpQGN(result); const passingPercent = Number(data.passingPercent ?? 0); const passed = percent >= passingPercent; state.showConfetti = passed; state.confettiHtml = passed ? confettiMarkupSpQGN() : ""; if (isLoggedInSpQGN() && !state.hasSavedResult) { saveQuizResultSpQGN(); } return true; } function initializeStoreDataSpQGN() { storeDataSpQGN = normalizeStoreDataSpQGN(storeDataSpQGN); data[storeKeySpQGN] = storeDataSpQGN; const appliedStoredResult = applyStoredResultSpQGN(); if (!appliedStoredResult) { applyFragmentSelectionsSpQGN(); } render(); if (!shouldUseStoredResultSpQGN()) { state.hasLoadedStoreData = true; return; } if (state.completedFromFragment) { state.hasLoadedStoreData = true; return; } if (normalizeStoredResultSpQGN(getStoredUserResultSpQGN())) { state.hasLoadedStoreData = true; return; } if (typeof window.fgStoreData !== "function") { state.hasLoadedStoreData = true; return; } let loadResultSpQGN; try { loadResultSpQGN = window.fgStoreData("load", "dataSpQGN", storeKeySpQGN); } catch (error) { state.hasLoadedStoreData = true; return; } if (!loadResultSpQGN || typeof loadResultSpQGN.then !== "function") { state.hasLoadedStoreData = true; return; } loadResultSpQGN.then(response => { const nextStoreData = getStoreDataFromResponseSpQGN(response); if (!nextStoreData) { state.hasLoadedStoreData = true; return; } storeDataSpQGN = normalizeStoreDataSpQGN(nextStoreData); data[storeKeySpQGN] = storeDataSpQGN; state.hasLoadedStoreData = true; if (applyStoredResultSpQGN()) { render(); } }).catch(() => { state.hasLoadedStoreData = true; }); } function saveQuizResultSpQGN() { if (state.hasSavedResult || state.isRetake || state.isSavingResult) { return; } if (typeof window.fgStoreData !== "function") { return; } const payload = { correctCount: state.correctCount, total }; state.isSavingResult = true; let saveResultSpQGN; try { saveResultSpQGN = window.fgStoreData("save", "dataSpQGN", storeKeySpQGN, { userInput: payload }); } catch (error) { state.isSavingResult = false; return; } if (!saveResultSpQGN || typeof saveResultSpQGN.then !== "function") { state.isSavingResult = false; return; } saveResultSpQGN.then(response => { const nextStoreData = getStoreDataFromResponseSpQGN(response); if (nextStoreData) { storeDataSpQGN = normalizeStoreDataSpQGN(nextStoreData); data[storeKeySpQGN] = storeDataSpQGN; } state.hasSavedResult = true; state.savedResult = payload; }).catch(error => { console.error("[dataSpQGN] result save failed", error); }).finally(() => { state.isSavingResult = false; if (state.showFinalPage && !state.isRetake) { updateAverageScoreInPlaceSpQGN(); updateCreateQuizCtaInPlaceSpQGN(); } }); } function clearAdvanceTimer() { if (state.advanceTimerId) { clearTimeout(state.advanceTimerId); state.advanceTimerId = null; } state.advanceEndsAt = null; } function resetQuizForRetakeSpQGN() { clearAdvanceTimer(); state.currentIndex = 0; state.showFinalPage = false; state.isRetake = true; state.submitted = new Array(total).fill(false); state.selectedValue = new Array(total).fill(null); state.isCorrect = new Array(total).fill(null); state.correctCount = 0; state.showConfetti = false; state.confettiHtml = ""; state.loadedStoredResult = false; state.completedFromFragment = false; render(); } function goTo(index) { clearAdvanceTimer(); state.showFinalPage = false; state.currentIndex = clamp(index, 0, Math.max(0, total - 1)); state.showConfetti = false; render(); } function confettiMarkupSpQGN() { return Array.from({ length: 72 }).map((_, i) => { return ``; }).join(""); } function goToFinalPage() { clearAdvanceTimer(); state.showFinalPage = true; const result = { correctCount: state.correctCount, total }; const percent = getResultPercentSpQGN(result); const passingPercent = Number(data.passingPercent ?? 0); const passed = percent >= passingPercent; state.showConfetti = passed; state.confettiHtml = passed ? confettiMarkupSpQGN() : ""; state.loadedStoredResult = false; state.completedFromFragment = false; if (!state.hasSavedResult && !state.isRetake) { saveQuizResultSpQGN(); } render(); } function scheduleAutoAdvance() { clearAdvanceTimer(); state.advanceEndsAt = Date.now() + 3000; state.advanceTimerId = setTimeout(() => { state.advanceTimerId = null; state.advanceEndsAt = null; if (state.currentIndex < total - 1) { goTo(state.currentIndex + 1); } else { goToFinalPage(); } }, 3000); } function renderHeader() { if (!data.name && !data.description) { return ""; } return `

${data.name ? `

${escapeHtml(data.name)}

` : ""} ${data.description ? `

${escapeHtml(data.description)}

` : ""}

`; } function progressMarkup() { return ` Next in 3s `; } function getResultHtml(qi) { const q = questions[qi]; return `

${state.isCorrect[qi] ? "✅ Correct. " + escapeHtml(q.correctText || "") : "❌ Wrong. " + escapeHtml(q.wrongText || "")} Answer: ${escapeHtml(String(q.answer ?? ""))}

`; } function nextIconSvg() { return ` `; } function passIconSvg() { return ``; } function failIconSvg() { return ``; } function getSubmittedActionsHtml(qi) { const hasBack = qi > 0; const nextTarget = qi < total - 1 ? qi + 1 : "final"; return ` ${hasBack ? `` : ""} ${state.advanceEndsAt != null ? progressMarkup() : ""} `; } function updateQuestionImageInPlace(qi) { const q = questions[qi]; const card = root.querySelector(`[data-qi="${qi}"]`); if (!card) return; const imageData = q.revealImageUrl || q.maskedImageUrl; const imageProps = getImageProps(imageData); if (!imageProps) return; let media = card.querySelector(".dataSpQGN-media"); if (!media) { media = document.createElement("div"); media.className = "dataSpQGN-media"; const options = card.querySelector(".dataSpQGN-options"); if (options) { card.insertBefore(media, options); } } let img = media.querySelector("img"); if (!img) { img = document.createElement("img"); img.alt = `Question ${qi + 1}`; media.appendChild(img); } if (img.getAttribute("src") !== imageProps.src) { img.setAttribute("src", imageProps.src); } if (imageProps.srcset) { if (img.getAttribute("srcset") !== imageProps.srcset) { img.setAttribute("srcset", imageProps.srcset); } } else { img.removeAttribute("srcset"); } } function updateOptionClassesInPlace(qi) { const card = root.querySelector(`[data-qi="${qi}"]`); if (!card) return; const selected = state.selectedValue[qi]; card.querySelectorAll(".dataSpQGN-opt").forEach(label => { const input = label.querySelector('input[type="radio"]'); if (!input) return; label.classList.add("dataSpQGN-opt--disabled"); if (input.value === selected) { label.classList.add("dataSpQGN-opt--selected"); } else { label.classList.remove("dataSpQGN-opt--selected"); } input.disabled = true; }); } function applySubmittedQuestionUpdate(qi) { const card = root.querySelector(`[data-qi="${qi}"]`); if (!card) return; updateListDisplayCardFragmentSpQGN(card); updateQuestionImageInPlace(qi); updateOptionClassesInPlace(qi); const actions = card.querySelector(".dataSpQGN-actions"); if (actions) { actions.innerHTML = getSubmittedActionsHtml(qi); } const resultSlot = card.querySelector(".dataSpQGN-resultSlot"); if (resultSlot) { resultSlot.innerHTML = getResultHtml(qi); } } function shouldUseStoredResultSpQGN() { return config.renderContext === "list-display" || config.renderContext === "post-display"; } function renderQuestion(q, qi) { const isCurrent = qi === state.currentIndex; if (!isCurrent || state.showFinalPage) { return ""; } const submitted = state.submitted[qi]; const selected = state.selectedValue[qi]; const imageData = submitted ? q.revealImageUrl || q.maskedImageUrl : q.maskedImageUrl; const opts = (q.options || []).map(opt => { const value = getOptionValue(opt); return ` ${escapeHtml(value)} `; }).join(""); const resultHtml = submitted ? getResultHtml(qi) : ""; const canSubmit = !submitted && selected != null; const hasBack = qi > 0; return `

${qi + 1}/${total}

${escapeHtml(q.prompt || `Question ${qi + 1}`)}

${imageData ? `

${buildImageHtml(imageData, `Question ${qi + 1}`)}

` : ""}

${opts}

${submitted ? getSubmittedActionsHtml(qi) : ` ${hasBack ? `` : ""} `}

${resultHtml}

`; } function getFinalResultSpQGN() { if (state.hasSavedResult && !state.isRetake && state.savedResult) { return state.savedResult; } return { correctCount: state.correctCount, total }; } function renderFinalPage() { if (!state.showFinalPage) { return ""; } const result = getFinalResultSpQGN(); const percent = getResultPercentSpQGN(result); const passingPercent = Number(data.passingPercent ?? 0); const passed = percent >= passingPercent; const message = passed ? data.passedMessage : data.failedMessage; const averagePercent = getAggregatePercentSpQGN(); const isAverageLoading = state.isSavingResult && !state.hasSavedResult && !state.isRetake; return `

${state.showConfetti && passed ? `

${state.confettiHtml}

` : ""}

${passed ? passIconSvg() : failIconSvg()} ${passed ? "Passed" : "Failed"}

Final score: ${escapeHtml(result.correctCount)} / ${escapeHtml(result.total)}
Percent: ${escapeHtml(percent)}%
Passing score: ${escapeHtml(passingPercent)}%
Average score: ${isAverageLoading ? "Loading" : averagePercent == null ? "" : escapeHtml(averagePercent) + "%"}

${message ? `

${escapeHtml(message)}

` : ""}

${total > 0 ? `` : ""} ${total > 0 && !state.loadedStoredResult ? `` : ""}

${getCreateQuizCtaHtmlSpQGN()}

`; } function render() { root.innerHTML = ` ${renderHeader()} ${questions.map((q, qi) => renderQuestion(q, qi)).join("")} ${renderFinalPage()} `; } function wireRootEventsSpQGN() { root.addEventListener("pointerdown", event => { if (config.renderContext !== "list-display") { return; } const card = event.target.closest(".dataSpQGN-card[data-qi]"); if (!card || !root.contains(card)) { return; } const interactiveTarget = event.target.closest("button, input, label, a, select, textarea"); if (interactiveTarget) { card.removeAttribute("data-click-bridge-fragment"); return; } updateListDisplayCardFragmentSpQGN(card); }, true); root.addEventListener("change", event => { const input = event.target.closest('input[type="radio"]'); if (!input || !root.contains(input)) { return; } const card = input.closest("[data-qi]"); if (!card) { console.warn("[dataSpQGN] radio change without question card", { value: input.value }); return; } const qi = Number(card.dataset.qi); if (qi !== state.currentIndex) { console.warn("[dataSpQGN] ignored radio change: question is not current", { qi, currentIndex: state.currentIndex }); return; } if (state.submitted[qi]) { console.warn("[dataSpQGN] ignored radio change: question already submitted", { qi }); return; } state.selectedValue[qi] = input.value; card.querySelectorAll(".dataSpQGN-opt").forEach(label => { const labelInput = label.querySelector('input[type="radio"]'); label.classList.toggle("dataSpQGN-opt--selected", labelInput === input); }); const submit = card.querySelector(".dataSpQGN-submit"); if (submit) { submit.disabled = false; } else { console.warn("[dataSpQGN] submit button not found after radio change", { qi }); } }); root.addEventListener("click", event => { const button = event.target.closest("button"); if (button && root.contains(button)) { event.preventDefault(); event.stopPropagation(); if (button.classList.contains("SpQGN-quiz-create-cta-close")) { state.createQuizCtaDismissed = true; const cta = button.closest(".SpQGN-quiz-create-cta"); if (cta) { cta.remove(); } return; } if (button.classList.contains("SpQGN-quiz-create-cta-start")) { if (typeof window.fgAddComponentToPost === "function") { window.fgAddComponentToPost(window.dataSpQGN_config); } return; } if (button.classList.contains("dataSpQGN-submit")) { const qi = Number(button.getAttribute("data-qi")); if (button.disabled) { console.warn("[dataSpQGN] submit ignored: button is disabled", { qi }); return; } if (qi !== state.currentIndex) { console.warn("[dataSpQGN] submit ignored: question is not current", { qi, currentIndex: state.currentIndex }); return; } if (state.submitted[qi]) { console.warn("[dataSpQGN] submit ignored: question already submitted", { qi }); return; } if (shouldRequireSignupSpQGN()) { if (typeof window.fgRequireSignup === "function") { window.fgRequireSignup(); } return; } const selected = state.selectedValue[qi]; if (selected == null) { console.warn("[dataSpQGN] submit ignored: no selected value", { qi }); alert("Pick an option first."); return; } const q = questions[qi]; const answerStr = String(q.answer ?? ""); const correct = selected === answerStr; state.submitted[qi] = true; state.isCorrect[qi] = correct; if (correct) { state.correctCount++; } scheduleAutoAdvance(); applySubmittedQuestionUpdate(qi); return; } if (button.classList.contains("dataSpQGN-next")) { const to = button.getAttribute("data-to"); if (to === "final") { goToFinalPage(); } else { goTo(Number(to)); } return; } if (button.classList.contains("dataSpQGN-back")) { const to = Number(button.getAttribute("data-to")); goTo(to); return; } if (button.classList.contains("dataSpQGN-retake")) { resetQuizForRetakeSpQGN(); return; } return; } const option = event.target.closest(".dataSpQGN-opt"); if (option && root.contains(option)) { event.stopPropagation(); return; } if (config.renderContext !== "list-display") { return; } const card = event.target.closest(".dataSpQGN-card[data-qi]"); if (!card || !root.contains(card)) { return; } /* * The fragment was prepared during pointerdown. * Intentionally allow this card click to bubble * so the platform opens the full post. */ }); } wireRootEventsSpQGN(); initializeStoreDataSpQGN(); })();

Quiz

Share