Skip to content

Commit 95297a8

Browse files
Junyu0707Junyu0707
authored
Merge pull request #63 from code4policy/Wondem_Ethics_Tab_Merged
Wondem ethics tab merged
2 parents a8aef26 + 08b8763 commit 95297a8

3 files changed

Lines changed: 79 additions & 101 deletions

File tree

‎app.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ 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"),
11-
ethics: document.getElementById("page-ethics"),
1210
about: document.getElementById("page-about"),
1311
};
1412

1513
const navButtons = document.querySelectorAll(".nav__link");
14+
const navDropdownItems = document.querySelectorAll(".nav__dropdown-item");
1615
const mobileToggle = document.querySelector(".nav__mobile-toggle");
1716
const navMenu = document.querySelector(".nav");
1817

@@ -31,6 +30,11 @@ navButtons.forEach((btn) => {
3130
btn.addEventListener("click", () => setRoute(btn.dataset.route));
3231
});
3332

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

‎index.html‎

Lines changed: 26 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,20 @@
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="about">About</button>
47+
</div>
48+
</div>
49+
<button class="nav__link" data-route="concept">Basics</button>
4250
<button class="nav__link" data-route="data">Visualize</button>
4351
<button class="nav__link" data-route="test">Test</button>
44-
<button class="nav__link" data-route="methods">Methods</button>
45-
<button class="nav__link" data-route="ethics">Ethics</button>
52+
<button class="nav__link" data-route="research">Research</button>
4653
<button class="nav__link" data-route="about">About</button>
4754
</nav>
4855

@@ -81,15 +88,14 @@
8188
"></div>
8289

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

8693
<h1 id="learn-title" style="
8794
margin: 0 0 40px 0;
8895
font-size: 48px;
8996
font-weight: 800;
9097
color: #fff;
9198
line-height: 1.2;
92-
max-width: 800px;
9399
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
94100
">What is Zero-Sum Thinking?</h1>
95101

@@ -98,6 +104,7 @@
98104
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
99105
gap: 32px;
100106
max-width: 900px;
107+
margin: 0 auto;
101108
">
102109
<!-- Core Concept Card -->
103110
<div style="
@@ -157,6 +164,15 @@
157164
</p>
158165
</div>
159166
</div>
167+
168+
<h2 style="
169+
margin: 40px 0 0 0;
170+
font-size: 48px;
171+
font-weight: 800;
172+
color: #fff;
173+
line-height: 1.2;
174+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
175+
">An Interactive Explainer, Data Dashboard, and Self-assessment</h2>
160176
</div>
161177
</div>
162178

@@ -951,56 +967,6 @@ <h4 style="margin: 0; font-size: 13px; font-weight: 600;">Normalization to 0–1
951967
</div>
952968
</section>
953969

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-
1004970
<!-- VISUALIZATION (Story 3) -->
1005971
<section id="page-data" class="page" aria-labelledby="viz-title">
1006972
<h1 id="viz-title">Visualization: Explore Zero-Sum Thinking Patterns</h1>
@@ -1254,48 +1220,6 @@ <h3 style="margin-top: 0; font-size: 14px;">County Statistics</h3>
12541220
</div>
12551221
</div>
12561222

1257-
<!-- ETHICS, PRIVACY & DISCLAIMER -->
1258-
<section id="page-ethics" class="page" aria-labelledby="ethics-title">
1259-
<h1 id="ethics-title">Ethics, Privacy & Disclaimer</h1>
1260-
1261-
<div class="card">
1262-
<h2>Ethical Use of Research</h2>
1263-
<p>This website presents academic research for educational and informational purposes. The goal is to improve public understanding of how beliefs about gains and losses relate to political attitudes, not to persuade users toward particular views or policies.</p>
1264-
1265-
<h2>Privacy Protection</h2>
1266-
<p>This website is designed to respect user privacy.</p>
1267-
<ul>
1268-
<li>No personal identifying information is collected.</li>
1269-
<li>Responses to the self-assessment test are not stored or transmitted.</li>
1270-
<li>Test results are calculated locally and displayed only to the user.</li>
1271-
</ul>
1272-
1273-
<h2>Responsible Interpretation</h2>
1274-
<p>The concepts and results presented on this website should be interpreted with care.</p>
1275-
<ul>
1276-
<li>The zero-sum thinking index reflects general tendencies, not fixed traits.</li>
1277-
<li>Higher or lower scores do not indicate that a view is right or wrong.</li>
1278-
<li>Group-level patterns do not imply that all individuals in a group think the same way.</li>
1279-
<li>Associations shown in charts do not demonstrate causal relationships.</li>
1280-
</ul>
1281-
1282-
<h2>Limitations</h2>
1283-
<p>This website summarizes findings from a specific study conducted in a particular context. As with all research, results are subject to limitations related to survey design, measurement, and interpretation.</p>
1284-
1285-
<h2>Disclaimer</h2>
1286-
<p>This website is an independent educational presentation of published academic research. It does not represent the views of the original authors, their institutions, or any funding bodies.</p>
1287-
<p>Nothing on this site should be interpreted as professional, legal, or policy advice.</p>
1288-
1289-
<h2>How to Cite This Website</h2>
1290-
<p>When citing this website, please reference:</p>
1291-
<p>When referencing material from this site, please cite:</p>
1292-
<ol>
1293-
<li>The original academic publication: Chinoy, S., Nunn, N., Sequeira, S., & Stantcheva, S. (2025). Zero-sum thinking and the roots of U.S. political differences (NBER Working Paper No. 31688). National Bureau of Economic Research. https://doi.org/10.3386/w31688</li>
1294-
<li>This website: Website Team. (2026). Zero-sum thinking and U.S. political differences: An interactive educational summary. Programming and Data for Policy Makers course project. https://your-site-url</li>
1295-
</ol>
1296-
</div>
1297-
</section>
1298-
12991223
<!-- ABOUT -->
13001224
<section id="page-about" class="page" aria-labelledby="about-title">
13011225
<div class="card">
@@ -1339,6 +1263,9 @@ <h3 style="margin: 0 0 8px 0; font-size: 18px;">Wondem Goshu</h3>
13391263
<p style="margin: 8px 0 0 0; font-size: 13px;">MC-MPA, Mason Fellow, HKS</p>
13401264
</div>
13411265
</div>
1266+
1267+
<h2>Disclaimer</h2>
1268+
<p>This website is an independent educational presentation of published academic research. It does not represent the views of the original authors, their institutions, or any funding bodies.</p>
13421269
</div>
13431270
</section>
13441271
</main>

‎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)