-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (117 loc) · 6.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Who is Winning</title>
<link rel="icon" type="image/x-icon" href="full-logo.png">
<link href="styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<script src="https://d3js.org/d3.v5.min.js"></script> <!-- Add D3.js library -->
<script src="main.js" defer></script>
</head>
<body>
<h1><img src="crop-logo.png" alt="Who is winning logo" width="60" height="50"> Who's Winning?</h1>
<p>"USA this", "China that" - the news is covered with journalists comparing countries, but do you know which countries are actually winning? What does ‘winning’ even mean?</p>
<p>The truth is, there isn’t a straightforward answer to which country is ‘winning’ because there are all sorts of metrics you can compare them by: how much money they make, how happy their population is etc. That’s why we’ve developed this tool, which allows you to see the top 10 countries that are winning for a specific metric.</p>
<p>But we’re gonna make you work for it! To stop you from saying “well, everyone knows that” when you get the answers, you’ll have to play a quiz first to test your knowledge. First, select the metrics you want to look at. </p>
<div class="variable-dropdown">
<label for="yVariableSelect">Select Metric:</label>
<select id="yVariableSelect" onchange="updateChart()">
<option value="trade_balance" selected>Trade Balance (% of GDP)</option>
<option value="government_revenue">Government Revenue (% of GDP)</option>
<option value="GDP_per_capita">GDP per Capita (USD)</option>
<option value="military_expenditure">Military Expenditure (USD)</option>
<option value="tourist_arrivals" >International Tourist Arrivals</option>
<option value="dog_ownership">Dog Ownership</option>
<option value="cat_ownership">Cat Ownership</option>
<option value="box_office_numbers" >Global Box Office (in USD)</option>
<option value="happiness">Happiness Score</option>
<option value="life_expectancy">Life Expectancy at Birth</option>
<option value="mean_years_of_schooling" >Mean Years of Schooling</option>
<option value="forest_area">Forest Area (Sq. km)</option>
<option value="renewables">Renewables (% of Electricity)</option>
<!-- Add more options as needed -->
</select>
</div>
<p>Not sure what a metric means? We've included some nifty definitions <a href='data-source/index.html'>here.</a></p>
<p>Now the test! For your selected metric, which 5 countries do you think make it to the top 10 out of all the countries in the world? We’ll tell you which ones you got right/wrong, and you can keep guessing until you’re satisfied with your answers. Once you’re tired of playing, click ‘Skip to the results’ to find out the right answers.</p>
<div class="quiz-container">
<h3>Quiz: Select 5 countries you think will be in the top 10</h3>
<div class="guess-container">
<div class="guess">
Guess 1: <select class="quiz-select">
<option value="">Select a country</option>
<!-- Sample options, replace with actual data -->
<option value="country1">Country 1</option>
<option value="country2">Country 2</option>
<option value="country3">Country 3</option>
</select>
</div>
<div class="guess">
Guess 2: <select class="quiz-select">
<option value="">Select a country</option>
<!-- Sample options, replace with actual data -->
<option value="country1">Country 1</option>
<option value="country2">Country 2</option>
<option value="country3">Country 3</option>
</select>
</div>
<div class="guess">
Guess 3: <select class="quiz-select">
<option value="">Select a country</option>
<!-- Sample options, replace with actual data -->
<option value="country1">Country 1</option>
<option value="country2">Country 2</option>
<option value="country3">Country 3</option>
</select>
</div>
<div class="guess">
Guess 4: <select class="quiz-select">
<option value="">Select a country</option>
<!-- Sample options, replace with actual data -->
<option value="country1">Country 1</option>
<option value="country2">Country 2</option>
<option value="country3">Country 3</option>
</select>
</div>
<div class="guess">
Guess 5: <select class="quiz-select">
<option value="">Select a country</option>
<!-- Sample options, replace with actual data -->
<option value="country1">Country 1</option>
<option value="country2">Country 2</option>
<option value="country3">Country 3</option>
</select>
</div>
</div>
<div>
<div class="button-container">
<button class="button-1" onclick="checkQuiz()">Check Quiz</button>
<button class="button-2" onclick="skipToResults()">Skip to Results</button>
</div>
<p id="quiz-result"></p>
</div>
</div>
<div id="chart-container-wrapper">
<div id="chart-header-container">
<div id="chart-header"></div>
<div id="chart-subheader"></div>
</div>
<div id="chart-container"></div>
</div>
<h3 id="map-header">Want to know more about your indicator? Move the cursor over your country of choice</h3>
<div id="map-container"></div>
<div class="tooltip" style="opacity:0;"></div>
</div>
<script src="map.js"></script>
<script src="main.js" defer></script>
<button id="refreshButton" class="button-1" onclick="refreshPage()">Again! Again!</button>
<div id="navbar" class="navbar">
<!-- JavaScript will populate this div -->
</div>
<script src="navigation.js"></script>
</body>
</html>