Skip to content

Commit cb42e9a

Browse files
author
Wondem-prog
committed
TabRemovedAndMore
1 parent a8aef26 commit cb42e9a

3 files changed

Lines changed: 77 additions & 57 deletions

File tree

‎app.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ const pages = {
77
research: document.getElementById("page-research"),
88
data: document.getElementById("page-data"),
99
test: document.getElementById("page-test"),
10-
methods: document.getElementById("page-methods"),
1110
ethics: document.getElementById("page-ethics"),
1211
about: document.getElementById("page-about"),
1312
};
1413

1514
const navButtons = document.querySelectorAll(".nav__link");
15+
const navDropdownItems = document.querySelectorAll(".nav__dropdown-item");
1616
const mobileToggle = document.querySelector(".nav__mobile-toggle");
1717
const navMenu = document.querySelector(".nav");
1818

@@ -31,6 +31,11 @@ navButtons.forEach((btn) => {
3131
btn.addEventListener("click", () => setRoute(btn.dataset.route));
3232
});
3333

34+
// Add click handlers for dropdown items
35+
navDropdownItems.forEach((item) => {
36+
item.addEventListener("click", () => setRoute(item.dataset.route));
37+
});
38+
3439
// Mobile menu toggle
3540
if (mobileToggle && navMenu) {
3641
mobileToggle.addEventListener("click", () => {

‎index.html‎

Lines changed: 24 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,21 @@
3636
</div>
3737

3838
<nav class="nav">
39-
<button class="nav__link" data-route="learn" aria-current="page">Home</button>
40-
<button class="nav__link" data-route="concept">Concept</button>
41-
<button class="nav__link" data-route="research">Research</button>
39+
<div class="nav__dropdown">
40+
<button class="nav__link" data-route="learn" aria-current="page">Home</button>
41+
<div class="nav__dropdown-menu">
42+
<button class="nav__dropdown-item" data-route="concept">Basics</button>
43+
<button class="nav__dropdown-item" data-route="data">Visualize</button>
44+
<button class="nav__dropdown-item" data-route="test">Test</button>
45+
<button class="nav__dropdown-item" data-route="research">Research</button>
46+
<button class="nav__dropdown-item" data-route="ethics">Ethics</button>
47+
<button class="nav__dropdown-item" data-route="about">About</button>
48+
</div>
49+
</div>
50+
<button class="nav__link" data-route="concept">Basics</button>
4251
<button class="nav__link" data-route="data">Visualize</button>
4352
<button class="nav__link" data-route="test">Test</button>
44-
<button class="nav__link" data-route="methods">Methods</button>
53+
<button class="nav__link" data-route="research">Research</button>
4554
<button class="nav__link" data-route="ethics">Ethics</button>
4655
<button class="nav__link" data-route="about">About</button>
4756
</nav>
@@ -81,15 +90,14 @@
8190
"></div>
8291

8392
<!-- Content -->
84-
<div style="position: relative; z-index: 1; max-width: 1040px; margin: 0 auto;">
93+
<div style="position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; text-align: center;">
8594

8695
<h1 id="learn-title" style="
8796
margin: 0 0 40px 0;
8897
font-size: 48px;
8998
font-weight: 800;
9099
color: #fff;
91100
line-height: 1.2;
92-
max-width: 800px;
93101
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
94102
">What is Zero-Sum Thinking?</h1>
95103

@@ -98,6 +106,7 @@
98106
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
99107
gap: 32px;
100108
max-width: 900px;
109+
margin: 0 auto;
101110
">
102111
<!-- Core Concept Card -->
103112
<div style="
@@ -157,6 +166,15 @@
157166
</p>
158167
</div>
159168
</div>
169+
170+
<h2 style="
171+
margin: 40px 0 0 0;
172+
font-size: 48px;
173+
font-weight: 800;
174+
color: #fff;
175+
line-height: 1.2;
176+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
177+
">An Interactive Explainer, Data Dashboard, and Self-assessment</h2>
160178
</div>
161179
</div>
162180

@@ -951,56 +969,6 @@ <h4 style="margin: 0; font-size: 13px; font-weight: 600;">Normalization to 0–1
951969
</div>
952970
</section>
953971

954-
<!-- METHODS & TRANSPARENCY -->
955-
<section id="page-methods" class="page" aria-labelledby="methods-title">
956-
<h1 id="methods-title">Methods & Transparency</h1>
957-
958-
<div class="card">
959-
<h2>Purpose of This Page</h2>
960-
<p>This page explains how the research measures zero-sum thinking and how the results presented on this website are produced. It is intended to support transparency, informed interpretation, and responsible use of the findings.</p>
961-
962-
<h2>Research Design</h2>
963-
<p>The study "Zero-Sum Thinking and the Roots of U.S. Political Differences" uses a large-scale survey-based research design to examine how beliefs about gains and losses shape political attitudes in the United States.</p>
964-
965-
<h2>Survey Data</h2>
966-
<p>The analysis is based on a nationally large survey sample comprising more than 20,000 respondents. The survey was designed to capture beliefs, attitudes, and background characteristics across a wide range of social, economic, and political topics.</p>
967-
<p>In the original study, standard survey weighting procedures are applied to improve representativeness relative to the U.S. adult population.</p>
968-
969-
<h2>Measurement of Zero-Sum Thinking</h2>
970-
<p>Zero-sum thinking is measured using multiple survey questions that ask respondents to indicate their level of agreement with statements about gains and losses across different contexts. These questions are framed in general terms and do not require respondents to endorse specific political parties or policies.</p>
971-
<p>The survey items cover several domains, including:</p>
972-
<ul>
973-
<li>relations between social or ethnic groups,</li>
974-
<li>economic outcomes across income groups,</li>
975-
<li>international trade,</li>
976-
<li>competition between citizens and non-citizens.</li>
977-
</ul>
978-
979-
<h2>Index Construction</h2>
980-
<p>Responses to the zero-sum survey items are combined into a composite zero-sum thinking index. The index is constructed using standard survey research practices:</p>
981-
<ul>
982-
<li>responses are coded in a consistent direction,</li>
983-
<li>multiple items are aggregated to capture overall orientation,</li>
984-
<li>the resulting index is normalized for interpretability.</li>
985-
</ul>
986-
<p>Higher scores indicate a stronger tendency to view one group's gains as coming at the expense of others, while lower scores indicate greater openness to the possibility of shared gains.</p>
987-
988-
<h2>Analytical Methods</h2>
989-
<p>The study relies on descriptive analysis and regression-based methods to examine:</p>
990-
<ul>
991-
<li>how zero-sum thinking varies across demographic, social, and political groups,</li>
992-
<li>how it is associated with attitudes toward redistribution, immigration, trade, and other policy areas,</li>
993-
<li>how it relates to political polarization beyond standard explanations based on partisanship or material interests.</li>
994-
</ul>
995-
996-
<h2>Interpretation and Limits</h2>
997-
<p>The findings are descriptive and associational, not causal. The study does not claim that zero-sum thinking directly causes specific political outcomes.</p>
998-
999-
<h2>Transparency and Replicability</h2>
1000-
<p>The original publication provides detailed documentation of survey questions, index construction, and analytical procedures in its appendices and supplementary materials. These materials allow other researchers to evaluate, replicate, or extend the analysis.</p>
1001-
</div>
1002-
</section>
1003-
1004972
<!-- VISUALIZATION (Story 3) -->
1005973
<section id="page-data" class="page" aria-labelledby="viz-title">
1006974
<h1 id="viz-title">Visualization: Explore Zero-Sum Thinking Patterns</h1>

‎styles/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,53 @@ code, pre, kbd, samp {
134134
gap: 6px;
135135
}
136136

137+
/* Dropdown container */
138+
.nav__dropdown {
139+
position: relative;
140+
display: inline-block;
141+
}
142+
143+
/* Dropdown menu */
144+
.nav__dropdown-menu {
145+
display: none;
146+
position: absolute;
147+
top: 100%;
148+
left: 0;
149+
background: #ffffff;
150+
border: 1px solid var(--border);
151+
border-radius: 8px;
152+
box-shadow: var(--shadow-lg);
153+
padding: 8px;
154+
min-width: 180px;
155+
margin-top: 4px;
156+
z-index: 1000;
157+
}
158+
159+
.nav__dropdown:hover .nav__dropdown-menu {
160+
display: block;
161+
}
162+
163+
.nav__dropdown-item {
164+
display: block;
165+
width: 100%;
166+
border: none;
167+
background: transparent;
168+
padding: 10px 16px;
169+
font-size: 14px;
170+
font-weight: 500;
171+
color: var(--text-light);
172+
cursor: pointer;
173+
transition: all 0.2s ease;
174+
border-radius: 6px;
175+
letter-spacing: 0.1px;
176+
text-align: left;
177+
}
178+
179+
.nav__dropdown-item:hover {
180+
background: rgba(165, 28, 48, 0.08);
181+
color: #a51c30;
182+
}
183+
137184
.nav__link {
138185
position: relative;
139186
border: none;

0 commit comments

Comments
 (0)