@@ -281,6 +281,207 @@ <h2 style="margin-bottom: 16px; color: var(--text); font-size: 20px;">Research R
281281 < section id ="page-explore " class ="page " aria-labelledby ="explore-title ">
282282 < h1 id ="explore-title "> Explore: Interactive Demonstrations</ h1 >
283283
284+ <!-- Learning Path Guide -->
285+ < div style ="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 40px; overflow-x: auto; ">
286+ < div style ="display: flex; gap: 0; align-items: center; min-width: min-content; padding: 0 8px; ">
287+ <!-- Step 1: Understand -->
288+ < div style ="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 140px; ">
289+ < div style ="width: 48px; height: 48px; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b7280; font-weight: 600; font-size: 18px; ">
290+ ✓
291+ </ div >
292+ < div style ="text-align: center; font-size: 13px; font-weight: 600; color: #374151; "> Understand</ div >
293+ < div style ="text-align: center; font-size: 12px; color: #9ca3af; "> Concepts</ div >
294+ </ div >
295+
296+ <!-- Arrow -->
297+ < div style ="flex: 0 0 auto; color: #d1d5db; font-size: 24px; margin: 0 8px; "> →</ div >
298+
299+ <!-- Step 2: Learn (Current) -->
300+ < div style ="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 140px; ">
301+ < div style ="width: 48px; height: 48px; background: linear-gradient(135deg, #a51c30 0%, #8b1626 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 18px; box-shadow: 0 4px 12px rgba(165, 28, 48, 0.3); ">
302+ 2
303+ </ div >
304+ < div style ="text-align: center; font-size: 13px; font-weight: 600; color: #a51c30; "> Learn</ div >
305+ < div style ="text-align: center; font-size: 12px; color: #9ca3af; "> YOU ARE HERE</ div >
306+ </ div >
307+
308+ <!-- Arrow -->
309+ < div style ="flex: 0 0 auto; color: #d1d5db; font-size: 24px; margin: 0 8px; "> →</ div >
310+
311+ <!-- Step 3: Test -->
312+ < div style ="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 140px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; " onmouseover ="this.style.opacity='1' " onmouseout ="this.style.opacity='0.7'; " onclick ="setRoute('test') ">
313+ < div style ="width: 48px; height: 48px; background: #f3f4f6; border: 2px solid #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b7280; font-weight: 600; font-size: 18px; ">
314+ 3
315+ </ div >
316+ < div style ="text-align: center; font-size: 13px; font-weight: 600; color: #374151; "> Test</ div >
317+ < div style ="text-align: center; font-size: 12px; color: #9ca3af; "> Self-Assess</ div >
318+ </ div >
319+
320+ <!-- Arrow -->
321+ < div style ="flex: 0 0 auto; color: #d1d5db; font-size: 24px; margin: 0 8px; "> →</ div >
322+
323+ <!-- Step 4: Visualize -->
324+ < div style ="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 140px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; " onmouseover ="this.style.opacity='1' " onmouseout ="this.style.opacity='0.7'; " onclick ="setRoute('data') ">
325+ < div style ="width: 48px; height: 48px; background: #f3f4f6; border: 2px solid #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b7280; font-weight: 600; font-size: 18px; ">
326+ 4
327+ </ div >
328+ < div style ="text-align: center; font-size: 13px; font-weight: 600; color: #374151; "> Visualize</ div >
329+ < div style ="text-align: center; font-size: 12px; color: #9ca3af; "> Data Patterns</ div >
330+ </ div >
331+ </ div >
332+
333+ <!-- Progress Info -->
334+ < div style ="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; ">
335+ < div >
336+ < div style ="font-size: 12px; font-weight: 600; color: #a51c30; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; "> Current Step</ div >
337+ < p style ="margin: 0; color: #374151; font-size: 14px; "> Interactive game and visual examples to build intuition about zero-sum thinking.</ p >
338+ </ div >
339+ < div >
340+ < div style ="font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; "> Next Steps</ div >
341+ < p style ="margin: 0; color: #6b7280; font-size: 14px; "> Take the test to assess your own zero-sum thinking score, then explore demographic patterns in the data.</ p >
342+ </ div >
343+ </ div >
344+ </ div >
345+
346+ <!-- Introduction Cards -->
347+ < div style ="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; ">
348+ <!-- Simple Example Card -->
349+ < div class ="card ">
350+ < h2 style ="margin-top: 0; margin-bottom: 16px; color: var(--text); "> A Simple Example: The Pie/Pizza</ h2 >
351+ < div style ="margin-bottom: 16px; line-height: 1.8; ">
352+ < p style ="margin-bottom: 14px; color: var(--text-light); ">
353+ Imagine a pie shared by two groups.
354+ </ p >
355+
356+ <!-- Visual Diagrams -->
357+ < div style ="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; ">
358+ <!-- Zero-Sum -->
359+ < div style ="text-align: center; ">
360+ < svg width ="100% " height ="140 " viewBox ="0 0 140 140 " style ="max-width: 100%; ">
361+ <!-- Zero-sum pie (fixed size) -->
362+ < circle cx ="70 " cy ="70 " r ="50 " fill ="#fce7e7 " stroke ="#ddd " stroke-width ="1 "/>
363+ <!-- Red slice (40%) -->
364+ < path d ="M 70 70 L 70 20 A 50 50 0 0 1 110.36 39.64 Z " fill ="#ef4444 "/>
365+ <!-- Blue slice (60%) -->
366+ < path d ="M 70 70 L 110.36 39.64 A 50 50 0 0 1 70 120 Z " fill ="#3b82f6 "/>
367+ <!-- Labels -->
368+ < text x ="75 " y ="35 " font-size ="12 " font-weight ="600 " fill ="white "> 40%</ text >
369+ < text x ="80 " y ="95 " font-size ="12 " font-weight ="600 " fill ="white "> 60%</ text >
370+ </ svg >
371+ < p style ="margin: 8px 0 0 0; font-size: 12px; color: var(--text-light); "> Fixed pie size</ p >
372+ </ div >
373+
374+ <!-- Positive-Sum -->
375+ < div style ="text-align: center; ">
376+ < svg width ="100% " height ="140 " viewBox ="0 0 140 140 " style ="max-width: 100%; ">
377+ <!-- Positive-sum pie (grows) -->
378+ < circle cx ="70 " cy ="70 " r ="60 " fill ="#e0f9f4 " stroke ="#ddd " stroke-width ="1 "/>
379+ <!-- Red slice (40%) -->
380+ < path d ="M 70 70 L 70 10 A 60 60 0 0 1 120.96 36.36 Z " fill ="#ef4444 "/>
381+ <!-- Blue slice (60%) -->
382+ < path d ="M 70 70 L 120.96 36.36 A 60 60 0 0 1 70 130 Z " fill ="#10b981 "/>
383+ <!-- Labels -->
384+ < text x ="75 " y ="30 " font-size ="12 " font-weight ="600 " fill ="white "> 40%</ text >
385+ < text x ="80 " y ="110 " font-size ="12 " font-weight ="600 " fill ="white "> 60%</ text >
386+ <!-- Growth indicator -->
387+ < path d ="M 130 30 L 145 15 " stroke ="#10b981 " stroke-width ="2 " fill ="none " stroke-linecap ="round "/>
388+ < path d ="M 140 20 L 145 15 L 135 18 " stroke ="#10b981 " stroke-width ="2 " fill ="#10b981 "/>
389+ </ svg >
390+ < p style ="margin: 8px 0 0 0; font-size: 12px; color: var(--text-light); "> Pie can grow</ p >
391+ </ div >
392+ </ div >
393+
394+ < div style ="background: #f8f9fa; padding: 16px; border-radius: 8px; margin-bottom: 14px; ">
395+ < p style ="margin: 0 0 8px 0; color: var(--text); font-weight: 600; "> 🔴 In zero-sum thinking:</ p >
396+ < p style ="margin: 0; color: var(--text-light); font-size: 14px; "> The size of the pie never changes. If one group gets a larger slice, the other group must get a smaller one.</ p >
397+ </ div >
398+ < div style ="background: #f0f8ff; padding: 16px; border-radius: 8px; ">
399+ < p style ="margin: 0 0 8px 0; color: var(--text); font-weight: 600; "> 🟢 In shared-gains (positive-sum) thinking:</ p >
400+ < p style ="margin: 0; color: var(--text-light); font-size: 14px; "> The pie itself can grow. Both groups can end up with larger slices, even if the shares are not equal.</ p >
401+ </ div >
402+ < p style ="margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; color: var(--muted); font-size: 14px; ">
403+ This example shows why zero-sum thinking focuses on competition over fixed resources, while other perspectives allow for cooperation, growth, or mutual benefit.
404+ </ p >
405+ </ div >
406+ </ div >
407+
408+ <!-- Common Examples Card -->
409+ < div class ="card ">
410+ < h2 style ="margin-top: 0; margin-bottom: 16px; color: var(--text); "> Common Examples in Debate</ h2 >
411+ < p style ="margin-top: 0; margin-bottom: 16px; color: var(--text-light); ">
412+ Zero-sum thinking often appears in debates about:
413+ </ p >
414+
415+ <!-- Example Grid with Icons -->
416+ < div style ="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; ">
417+ <!-- Jobs -->
418+ < div style ="background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%); border: 1px solid #fcd34d; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
419+ < div style ="font-size: 20px; flex-shrink: 0; "> 💼</ div >
420+ < div >
421+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Jobs</ p >
422+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> One group gets more jobs → others lose out</ p >
423+ </ div >
424+ </ div >
425+
426+ <!-- Trade -->
427+ < div style ="background: linear-gradient(135deg, #dbeafe 0%, #f0f9ff 100%); border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
428+ < div style ="font-size: 20px; flex-shrink: 0; "> 🌐</ div >
429+ < div >
430+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Trade</ p >
431+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> One country gains → another is harmed</ p >
432+ </ div >
433+ </ div >
434+
435+ <!-- Immigration -->
436+ < div style ="background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%); border: 1px solid #e9d5ff; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
437+ < div style ="font-size: 20px; flex-shrink: 0; "> 🚀</ div >
438+ < div >
439+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Immigration</ p >
440+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> Immigrant gains reduce citizen opportunities</ p >
441+ </ div >
442+ </ div >
443+
444+ <!-- Wealth -->
445+ < div style ="background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%); border: 1px solid #fecaca; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
446+ < div style ="font-size: 20px; flex-shrink: 0; "> 💰</ div >
447+ < div >
448+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Income & Wealth</ p >
449+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> Some get richer → others must get poorer</ p >
450+ </ div >
451+ </ div >
452+
453+ <!-- Education -->
454+ < div style ="background: linear-gradient(135deg, #c7d2fe 0%, #e0e7ff 100%); border: 1px solid #a5b4fc; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
455+ < div style ="font-size: 20px; flex-shrink: 0; "> 📚</ div >
456+ < div >
457+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Education</ p >
458+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> Quality resources for some → less for others</ p >
459+ </ div >
460+ </ div >
461+
462+ <!-- Climate -->
463+ < div style ="background: linear-gradient(135deg, #ccfbf1 0%, #d1fae5 100%); border: 1px solid #99f6e4; border-radius: 8px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; ">
464+ < div style ="font-size: 20px; flex-shrink: 0; "> 🌍</ div >
465+ < div >
466+ < p style ="margin: 0 0 4px 0; font-weight: 600; font-size: 13px; color: var(--text); "> Climate Action</ p >
467+ < p style ="margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; "> Environment vs economic development tradeoff</ p >
468+ </ div >
469+ </ div >
470+ </ div >
471+
472+ <!-- Key Insight Box -->
473+ < div style ="background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%); border-left: 4px solid #f59e0b; border-radius: 8px; padding: 14px; margin-bottom: 12px; ">
474+ < p style ="margin: 0; font-size: 13px; color: #78350f; ">
475+ < strong style ="color: #a16207; "> 💡 Key Insight:</ strong > Each of these debates involves real tradeoffs, but zero-sum thinking can make people overlook creative solutions that could benefit multiple groups simultaneously.
476+ </ p >
477+ </ div >
478+
479+ < p style ="margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb; color: var(--muted); font-size: 14px; ">
480+ These beliefs shape how people interpret social and economic change, even when the actual outcomes may be more complex.
481+ </ p >
482+ </ div >
483+ </ div >
484+
284485 < div class ="card ">
285486 < h2 > Mini game (2-minute intuition demo)</ h2 >
286487 < p class ="muted ">
@@ -401,6 +602,50 @@ <h2>Mini game (2-minute intuition demo)</h2>
401602 < div id ="conclusion-text " style ="font-size: 14px; color: var(--text); line-height: 1.6; "> </ div >
402603 </ div >
403604
605+ <!-- Reflection Questions -->
606+ < div style ="background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%); border: 1px solid #fcd34d; border-radius: 12px; padding: 24px; margin-bottom: 24px; ">
607+ < div style ="display: flex; align-items: center; gap: 12px; margin-bottom: 16px; ">
608+ < div style ="font-size: 24px; "> 💭</ div >
609+ < h3 style ="margin: 0; font-size: 16px; font-weight: 700; color: #92400e; "> Reflection Questions</ h3 >
610+ </ div >
611+
612+ < div style ="margin-bottom: 16px; ">
613+ < div style ="background: white; border-radius: 8px; padding: 12px; margin-bottom: 12px; ">
614+ < p style ="margin: 0; font-size: 14px; color: #78350f; line-height: 1.6; ">
615+ < strong > ❓ What was your initial strategy?</ strong > < br />
616+ < span style ="color: #92400e; "> Did you tend to compete or collaborate? Why?</ span >
617+ </ p >
618+ </ div >
619+
620+ < div style ="background: white; border-radius: 8px; padding: 12px; margin-bottom: 12px; ">
621+ < p style ="margin: 0; font-size: 14px; color: #78350f; line-height: 1.6; ">
622+ < strong > ❓ Did the outcome match your expectations?</ strong > < br />
623+ < span style ="color: #92400e; "> What surprised you about how the game unfolded?</ span >
624+ </ p >
625+ </ div >
626+
627+ < div style ="background: white; border-radius: 8px; padding: 12px; margin-bottom: 12px; ">
628+ < p style ="margin: 0; font-size: 14px; color: #78350f; line-height: 1.6; ">
629+ < strong > ❓ How does this relate to real-world decisions?</ strong > < br />
630+ < span style ="color: #92400e; "> Think about policy debates you've encountered recently—can you see zero-sum thinking at play?</ span >
631+ </ p >
632+ </ div >
633+
634+ < div style ="background: white; border-radius: 8px; padding: 12px; ">
635+ < p style ="margin: 0; font-size: 14px; color: #78350f; line-height: 1.6; ">
636+ < strong > ❓ Could a different mindset have changed the result?</ strong > < br />
637+ < span style ="color: #92400e; "> What would happen if both players focused on shared gains instead?</ span >
638+ </ p >
639+ </ div >
640+ </ div >
641+
642+ < div style ="margin-top: 16px; padding-top: 16px; border-top: 1px solid #fcd34d; ">
643+ < p style ="margin: 0; font-size: 13px; color: #92400e; font-weight: 600; ">
644+ 💡 Tip: These questions don't have "right" answers. The goal is to understand how your mindset shapes your choices and their consequences.
645+ </ p >
646+ </ div >
647+ </ div >
648+
404649 < button class ="btn " id ="play-again-btn " type ="button " style ="width: 100%; padding: 16px; "> Play Again</ button >
405650 </ div >
406651 </ div >
0 commit comments