This commit is contained in:
Abram Kash 2018-11-13 18:52:28 -05:00
parent a1aeaaf9a0
commit 9360572f0e
6 changed files with 25 additions and 15 deletions

View File

@ -9,6 +9,7 @@
<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
<link rel="shortcut icon" href="/favicon.png">
<meta property="og:url" content="https://dbhq.github.io/">
<meta property="og:title" content="PolitiScales, DBHQ Edition">
<meta property="og:locale" content="en_US">
@ -28,7 +29,10 @@
<div id="mainFrame">
<h2>Who are we?</h2>
<p class="simpleText">PolitiScale is a political test using 8 ideological values to help you know approximately where you belong to in the political field, or simply to share your profile with your friends. this internet website is an initiative of “Radicalisé·e·s sur Internet” which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
<p class="simpleText">
PolitiScale is a political test using 8 ideological values to help you know approximately where you belong to in the political field, or simply to share your profile with your friends. this internet website is an initiative of “Radicalisé·e·s sur Internet” which is freely inspired by <a href="https://8values.github.io/">8values</a>.
</p>
<h3>Constructivism vs. Essentialism</h3>
<div class="description">

BIN
images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View File

@ -9,6 +9,7 @@
<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
<link rel="shortcut icon" href="/favicon.png">
<meta property="og:url" content="https://dbhq.github.io/">
<meta property="og:title" content="PolitiScales, DBHQ Edition">
<meta property="og:locale" content="en_US">
@ -28,18 +29,18 @@
<div id="mainFrame">
<h2>Instructions</h2>
<p class="simpleText ltr">Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.</p>
<p class="simpleText">Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.</p>
<br/>
<p class="simpleText ltr">
<p class="simpleText">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
The questions assume that your are a citizen of a multi-party political system and a market economy.
</p>
<p class="simpleText ltr">
<p class="simpleText">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
You can always avoid answering a question. But if you do not understand the meaning of one of them, try to invert its meaning for a better understanding of what is implied.
</p>
<p class="simpleText ltr">
<p class="simpleText">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
This test tries to represent the wider set of ideas as possible and contains some phrases that can be shocking, notably concerning racism and homosexuality.
</p>

View File

@ -9,6 +9,7 @@
<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
<link rel="shortcut icon" href="/favicon.png">
<meta property="og:url" content="https://dbhq.github.io/">
<meta property="og:title" content="PolitiScales, DBHQ Edition">
<meta property="og:locale" content="en_US">

View File

@ -9,6 +9,7 @@
<meta name="description" content="Welcome to the PolitiScale, the online political test. You will be confronted to a series of affirmations and for each of them you will have to click on the button which corresponds the most to your opinion.">
<link rel="stylesheet" href="/style.css" type="text/css" media="screen">
<link rel="shortcut icon" href="/favicon.png">
<meta property="og:url" content="https://dbhq.github.io/">
<meta property="og:title" content="PolitiScales, DBHQ Edition">
<meta property="og:locale" content="en_US">
@ -29,7 +30,9 @@
<h2>Results</h2>
<p class="simpleText">The result of your PolitiScale is decomposed in 8 axes. Each axis indicates your positioning compared with two opposed ideologies. Some particular characteristics, displayed at the end of the page can also complete your result. For further information on the different axis <a href="/help">Look at the help page</a>.</p>
<p class="simpleText">
The result of your PolitiScale is decomposed in 8 axes. Each axis indicates your positioning compared with two opposed ideologies. Some particular characteristics, displayed at the end of the page can also complete your result. For further information on the different axis <a href="/help">Look at the help page</a>.
</p>
<div class="generatedResultsDecorations">
<canvas id="generatedResults" width="800" height="1200"></canvas>
@ -343,7 +346,7 @@
<div class="descImg"><img src="/images/complotism.png" alt=""></div>
<div class="descTextMono">
<p>
<h4>Conspiratorial</h4>
<h4>Conspiracist</h4>
The biggest problems of our society are the work of a small group of people. It is then essential to find them, inform the people of their objective and neutralize them.
</p>
</div>

View File

@ -55,16 +55,20 @@ a {
text-decoration: underline;
}
h2 {
h2,
h3,
h4 {
max-width: 640px;
margin: 0 auto;
font-weight: 600;
}
h3 {
max-width: 640px;
margin: 0 auto;
font-size: calc(16px + 1vmin);
font-weight: 500;
}
h4 {
margin: 0 auto 0.5em;
}
.simpleText {
@ -124,9 +128,6 @@ h3 {
.descTextMono {
align-self: center;
}
.descTextMono h4 {
margin: 0 0 0.5em;
}
.descTextMono p {
margin: 0;
}
@ -243,7 +244,7 @@ h3 {
color: #500076;
}
.button svg {
fill: #fff;
fill: white;
vertical-align: text-bottom;
}
.button:hover svg {