6 سال پیش · e92baa54b4
--- a/help/index.html
+++ b/help/index.html
@@ -1,129 +1,293 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				+  <head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				 
			
 
				-<head>
			
 
				-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>PolitiScales - Help</title>
			
 
				 
			
 
				-	<title>PolitiScales - Help</title>
			
 
				+    <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="/images/favicon.ico" />
			
 
				+    <meta property="og:url" content="https://dbhq.github.io/" />
			
 
				+    <meta property="og:title" content="PolitiScales, DBHQ Edition" />
			
 
				+    <meta property="og:locale" content="en_US" />
			
 
				+    <meta
			
 
				+      property="og: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."
			
 
				+    />
			
 
				+    <meta property="og:image" content="/images/facebook-preview.jpg" />
			
 
				+  </head>
			
 
				 
			
 
				-	<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="/images/favicon.ico">
			
 
				-	<meta property="og:url" content="https://dbhq.github.io/">
			
 
				-	<meta property="og:title" content="PolitiScales, DBHQ Edition">
			
 
				-	<meta property="og:locale" content="en_US">
			
 
				-	<meta property="og: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.">
			
 
				-	<meta property="og:image" content="/images/facebook-preview.jpg">
			
 
				-</head>
			
 
				+  <body>
			
 
				+    <header>
			
 
				+      <div id="header">
			
 
				+        <h1><a href="/">PolitiScales</a></h1>
			
 
				+      </div>
			
 
				+    </header>
			
 
				 
			
 
				-<body>
			
 
				+    <div id="content">
			
 
				+      <div id="mainFrame">
			
 
				+        <h2>Who are we?</h2>
			
 
				 
			
 
				-	<header>
			
 
				-		<div id="header">
			
 
				-			<h1><a href="/">PolitiScales</a></h1>
			
 
				-		</div>
			
 
				-	</header>
			
 
				+        <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>
			
 
				 
			
 
				-	<div id="content">
			
 
				-		<div id="mainFrame">
			
 
				+        <h3>Constructivism vs. Essentialism</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/constructivism.png" alt="Constructivism" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              Why are the people how they are? This axis allows you to situate
			
 
				+              yourself between two opposite poles which answer this question.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              <strong>Constructivists</strong> consider that people build
			
 
				+              themselves from their environment (notably social) and that the
			
 
				+              characteristics that make them who they are, are acquired.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              On the contrary, <strong>essentialists</strong> consider that an
			
 
				+              individual is by nature how he/she is and that his/her
			
 
				+              characteristics which make this person who she/he is, are innate.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/essentialism.png"
			
 
				+              alt="Essentialism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h2>Who are we?</h2>
			
 
				+        <h3>Rehabilitative Justice vs. Punitive Justice</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/justice_soft.png" alt="Rehabilitative justice" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              Those in favor of <strong>rehabilitative justice</strong> consider
			
 
				+              that the role of justice is to put the condemned on the “right
			
 
				+              path” again by making them understand why they should not do what
			
 
				+              they did and why they were condemned and by accompanying them all
			
 
				+              along the process.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              Conversely those in favor of
			
 
				+              <strong>punitive justice</strong> consider that the role of
			
 
				+              justice is dissuasive, both for the condemned (to avoid
			
 
				+              recidivism) and for the rest of the society (by making them
			
 
				+              examples not to follow).
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/justice_hard.png"
			
 
				+              alt="Punitive justice"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<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>Progressive vs. Conservative</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/progressism.png" alt="Progressism" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              The <strong>progressives</strong> try to build social progress,
			
 
				+              make a better society without caring about traditions. They often
			
 
				+              consider the present as better than the past and that it is
			
 
				+              necessary to keep on this path.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              On the contrary the <strong>conservatives</strong> want to keep
			
 
				+              the status quo and even to reinsert some values already considered
			
 
				+              as disappeared or disappearing. Traditions, among those the
			
 
				+              religious heritage, are put forward as a source of wisdom.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/conservatism.png"
			
 
				+              alt="Conservatism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h3>Constructivism vs. Essentialism</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/constructivism.png" alt="Constructivism"></div>
			
 
				-				<div class="descText">
			
 
				-					<p>Why are the people how they are? This axis allows you to situate yourself between two opposite poles which answer this question.</p>
			
 
				-					<p><strong>Constructivists</strong> consider that people build themselves from their environment (notably social) and that the characteristics that make them who they are, are acquired.</p>
			
 
				-					<p>On the contrary, <strong>essentialists</strong> consider that an individual is by nature how he/she is and that his/her characteristics which make this person who she/he is, are innate.</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/essentialism.png" alt="Essentialism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				+        <h3>Internationalism vs. Nationalism</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/internationalism.png" alt="Internationalism" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              <strong>Internationalism</strong> is a set of different ides which
			
 
				+              have for common point to stop making a hierarchy between countries
			
 
				+              and their inhabitants and to promote as much as possible their
			
 
				+              cooperation. Pushed to its maximum the final objective is the
			
 
				+              abolitions of borders.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              On the other hand, <strong>nationalism</strong> is a set of
			
 
				+              heterogeneous ideas which, when applied, favor one country and its
			
 
				+              citizens over foreigners, it also justifies the idea that each
			
 
				+              people has a nation
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/nationalism.png"
			
 
				+              alt="Nationalism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h3>Rehabilitative Justice vs. Punitive Justice</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/justice_soft.png" alt="Rehabilitative justice"></div>
			
 
				-				<div class="descText">
			
 
				-					<p>Those in favor of <strong>rehabilitative justice</strong> consider that the role of justice is to put the condemned on the “right path” again by making them understand why they should not do what they did and why they were condemned and by accompanying them all along the process.</p>
			
 
				-					<p>Conversely those in favor of <strong>punitive justice</strong> consider that the role of justice is dissuasive, both for the condemned (to avoid recidivism) and for the rest of the society (by making them examples not to follow).</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/justice_hard.png" alt="Punitive justice" class="descImgRight"></div>
			
 
				-			</div>
			
 
				+        <h3>Communism vs. Capitalism</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/communism.png" alt="Communism" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              <strong>Communism</strong> is a vast political doctrine. In this
			
 
				+              test a majority for communism simply signifies that you are for a
			
 
				+              public property of the means of production.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              <strong>Capitalism</strong> is as well an ambivalent concept. In
			
 
				+              this test a majority for capitalism simply signifies that you are
			
 
				+              for a private property of the means of production.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/capitalism.png"
			
 
				+              alt="Capitalism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h3>Progressive vs. Conservative</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/progressism.png" alt="Progressism"></div>
			
 
				-				<div class="descText">
			
 
				-					<p>The <strong>progressives</strong> try to build social progress, make a better society without caring about traditions. They often consider the present as better than the past and that it is necessary to keep on this path.</p>
			
 
				-					<p>On the contrary the <strong>conservatives</strong> want to keep the status quo and even to reinsert some values already considered as disappeared or disappearing. Traditions, among those the religious heritage, are put forward as a source of wisdom.</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/conservatism.png" alt="Conservatism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				+        <h3>Regulation vs. Laissez-faire</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/regulation.png" alt="Regulationnism" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              This axis represents the attitude that a government needs to have
			
 
				+              concerning the market economy in which an important part of the
			
 
				+              means of production are private. Liberals and Keynesians are
			
 
				+              opposed to the method that needs to be adopted without putting
			
 
				+              into question capitalism. If you are more capitalist, this axis
			
 
				+              represents your goal in terms of economy. If you are more
			
 
				+              communist, this axis represents the least bad that you can expect
			
 
				+              of the current system.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              <strong>Regulation</strong> or interventionism is an idea in which
			
 
				+              the economical activity should be regulated for the common
			
 
				+              interest. It can be through legislation, planning, subventions, a
			
 
				+              variable taxation...
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              On the contrary, the <strong>laissez-faire</strong> is the ideas
			
 
				+              in which the economical activity should not be regulated because
			
 
				+              it would in itself correspond to the common interest. It can be
			
 
				+              through a weak legislation, few or no subventions, a fixed
			
 
				+              taxation and often weak or even the complete suppression of the
			
 
				+              role of the state in the economy.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/laissezfaire.png"
			
 
				+              alt="Laissez-faire"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h3>Internationalism vs. Nationalism</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/internationalism.png" alt="Internationalism"></div>
			
 
				-				<div class="descText">
			
 
				-					<p><strong>Internationalism</strong> is a set of different ides which have for common point to stop making a hierarchy between countries and their inhabitants and to promote as much as possible their cooperation. Pushed to its maximum the final objective is the abolitions of borders.</p>
			
 
				-					<p>On the other hand, <strong>nationalism</strong> is a set of heterogeneous ideas which, when applied, favor one country and its citizens over foreigners, it also justifies the idea that each people has a nation </p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/nationalism.png" alt="Nationalism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				+        <h3>Ecology vs. Production</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/ecology.png" alt="Ecology" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              <strong>Ecology</strong> in politics privileges the protection of
			
 
				+              the environment by limiting as much as possible the impact of
			
 
				+              human activities on the biodiversity even if it implies to limit
			
 
				+              the these human activities by modifying more or less radically our
			
 
				+              current way of life.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              <strong>Production</strong> privileges human needs notably by
			
 
				+              supporting the increase of the production or the use of methods
			
 
				+              that have an uncertain impact on the environment.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/productivism.png"
			
 
				+              alt="Productivism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				 
			
 
				-			<h3>Communism vs. Capitalism</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/communism.png" alt="Communism"></div>
			
 
				-				<div class="descText">
			
 
				-					<p><strong>Communism</strong> is a vast political doctrine. In this test a majority for communism simply signifies that you are for a public property of the means of production.</p>
			
 
				-					<p><strong>Capitalism</strong> is as well an ambivalent concept. In this test a majority for capitalism simply signifies that you are for a private property of the means of production.</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/capitalism.png" alt="Capitalism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				+        <h3>Revolution vs. Reform</h3>
			
 
				+        <div class="description">
			
 
				+          <div class="descImg">
			
 
				+            <img src="/images/revolution.png" alt="Revolution" />
			
 
				+          </div>
			
 
				+          <div class="descText">
			
 
				+            <p>
			
 
				+              <strong>Revolutionaries</strong> have a tendency to privilege
			
 
				+              direct action, often in the margin of legality, to reach their
			
 
				+              goal: replace the current political organization for totally
			
 
				+              different one.
			
 
				+            </p>
			
 
				+            <p>
			
 
				+              <strong>Reformers</strong> have a tendency to privilege legal
			
 
				+              action to reach their goal: reform the political organization step
			
 
				+              by step. This can be done through the institutions, via elections,
			
 
				+              authorized demonstrations, petitions...
			
 
				+            </p>
			
 
				+          </div>
			
 
				+          <div class="descImg">
			
 
				+            <img
			
 
				+              src="/images/reformism.png"
			
 
				+              alt="Reformism"
			
 
				+              class="descImgRight"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				 
			
 
				-			<h3>Regulation vs. Laissez-faire</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/regulation.png" alt="Regulationnism"></div>
			
 
				-				<div class="descText">
			
 
				-					<p>This axis represents the attitude that a government needs to have concerning the market economy in which an important part of the means of production are private. Liberals and Keynesians are opposed to the method that needs to be adopted without putting into question capitalism. If you are more capitalist, this axis represents your goal in terms of economy. If you are more communist, this axis represents the least bad that you can expect of the current system.</p>
			
 
				-					<p><strong>Regulation</strong> or interventionism is an idea in which the economical activity should be regulated for the common interest. It can be through legislation, planning, subventions, a variable taxation...</p>
			
 
				-					<p>On the contrary, the <strong>laissez-faire</strong> is the ideas in which the economical activity should not be regulated because it would in itself correspond to the common interest. It can be through a weak legislation, few or no subventions, a fixed taxation and often weak or even the complete suppression of the role of the state in the economy.</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/laissezfaire.png" alt="Laissez-faire" class="descImgRight"></div>
			
 
				-			</div>
			
 
				-
			
 
				-			<h3>Ecology vs. Production</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/ecology.png" alt="Ecology"></div>
			
 
				-				<div class="descText">
			
 
				-					<p><strong>Ecology</strong> in politics privileges the protection of the environment by limiting as much as possible the impact of human activities on the biodiversity even if it implies to limit the these human activities by modifying more or less radically our current way of life.</p>
			
 
				-					<p><strong>Production</strong> privileges human needs notably by supporting the increase of the production or the use of methods that have an uncertain impact on the environment.</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/productivism.png" alt="Productivism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				-
			
 
				-			<h3>Revolution vs. Reform</h3>
			
 
				-			<div class="description">
			
 
				-				<div class="descImg"><img src="/images/revolution.png" alt="Revolution"></div>
			
 
				-				<div class="descText">
			
 
				-					<p><strong>Revolutionaries</strong> have a tendency to privilege direct action, often in the margin of legality, to reach their goal: replace the current political organization for totally different one.</p>
			
 
				-					<p><strong>Reformers</strong> have a tendency to privilege legal action to reach their goal: reform the political organization step by step. This can be done through the institutions, via elections, authorized demonstrations, petitions...</p>
			
 
				-				</div>
			
 
				-				<div class="descImg"><img src="/images/reformism.png" alt="Reformism" class="descImgRight"></div>
			
 
				-			</div>
			
 
				-
			
 
				-		</div>
			
 
				-	</div>
			
 
				-
			
 
				-	<div id="footer">
			
 
				-		<p>
			
 
				-			This quiz is a slightly modified version of <a href="https://www.politiscales.net/">PolitiScales</a>, which is based on <a href="https://8values.github.io/">8values</a>.
			
 
				-		</p>
			
 
				-	</div>
			
 
				-
			
 
				-</body>
			
 
				-</html>
			
 
				+    <div id="footer">
			
 
				+      <p>
			
 
				+        This quiz is a slightly modified version of
			
 
				+        <a href="https://www.politiscales.net/">PolitiScales</a>, which is based
			
 
				+        on <a href="https://8values.github.io/">8values</a>.
			
 
				+      </p>
			
 
				+    </div>
			
 
				+  </body>
			
 
				+</html>
			
--- a/index.html
+++ b/index.html
@@ -1,62 +1,101 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				+  <head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				 
			
 
				-<head>
			
 
				-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>PolitiScales, DBHQ Edition</title>
			
 
				 
			
 
				-	<title>PolitiScales, DBHQ Edition</title>
			
 
				+    <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="/images/favicon.ico" />
			
 
				+    <meta property="og:url" content="https://dbhq.github.io/" />
			
 
				+    <meta property="og:title" content="PolitiScales, DBHQ Edition" />
			
 
				+    <meta property="og:locale" content="en_US" />
			
 
				+    <meta
			
 
				+      property="og: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."
			
 
				+    />
			
 
				+    <meta property="og:image" content="/images/facebook-preview.jpg" />
			
 
				+  </head>
			
 
				 
			
 
				-	<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="/images/favicon.ico">
			
 
				-	<meta property="og:url" content="https://dbhq.github.io/">
			
 
				-	<meta property="og:title" content="PolitiScales, DBHQ Edition">
			
 
				-	<meta property="og:locale" content="en_US">
			
 
				-	<meta property="og: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.">
			
 
				-	<meta property="og:image" content="/images/facebook-preview.jpg">
			
 
				-</head>
			
 
				+  <body>
			
 
				+    <header>
			
 
				+      <div id="header">
			
 
				+        <h1><a href="/">PolitiScales</a></h1>
			
 
				+      </div>
			
 
				+    </header>
			
 
				 
			
 
				-<body>
			
 
				+    <div id="content">
			
 
				+      <div id="mainFrame">
			
 
				+        <h2>Instructions</h2>
			
 
				+        <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 />
			
 
				 
			
 
				-	<header>
			
 
				-		<div id="header">
			
 
				-			<h1><a href="/">PolitiScales</a></h1>
			
 
				-		</div>
			
 
				-	</header>
			
 
				+        <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">
			
 
				+          <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">
			
 
				+          <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>
			
 
				 
			
 
				-	<div id="content">
			
 
				-		<div id="mainFrame">
			
 
				+        <div class="navButtons">
			
 
				+          <a class="button" href="/quiz">Start the test</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				 
			
 
				-			<h2>Instructions</h2>
			
 
				-			<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">
			
 
				-				<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">
			
 
				-				<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">
			
 
				-				<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>
			
 
				-
			
 
				-			<div class="navButtons">
			
 
				-				<a class="button" href="/quiz">Start the test</a>
			
 
				-			</div>
			
 
				-
			
 
				-		</div>
			
 
				-	</div>
			
 
				-
			
 
				-	<div id="footer">
			
 
				-		<p>
			
 
				-			This quiz is a slightly modified version of <a href="https://www.politiscales.net/">PolitiScales</a>, which is based on <a href="https://8values.github.io/">8values</a>.
			
 
				-		</p>
			
 
				-	</div>
			
 
				-
			
 
				-</body>
			
 
				-</html>
			
 
				+    <div id="footer">
			
 
				+      <p>
			
 
				+        This quiz is a slightly modified version of
			
 
				+        <a href="https://www.politiscales.net/">PolitiScales</a>, which is based
			
 
				+        on <a href="https://8values.github.io/">8values</a>.
			
 
				+      </p>
			
 
				+    </div>
			
 
				+  </body>
			
 
				+</html>
			
--- a/quiz/index.html
+++ b/quiz/index.html
@@ -1,57 +1,99 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				+  <head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				 
			
 
				-<head>
			
 
				-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>PolitiScales - Quiz</title>
			
 
				 
			
 
				-	<title>PolitiScales - Quiz</title>
			
 
				+    <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="/images/favicon.ico" />
			
 
				+    <meta property="og:url" content="https://dbhq.github.io/" />
			
 
				+    <meta property="og:title" content="PolitiScales, DBHQ Edition" />
			
 
				+    <meta property="og:locale" content="en_US" />
			
 
				+    <meta
			
 
				+      property="og: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."
			
 
				+    />
			
 
				+    <meta property="og:image" content="/images/facebook-preview.jpg" />
			
 
				+  </head>
			
 
				 
			
 
				-	<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="/images/favicon.ico">
			
 
				-	<meta property="og:url" content="https://dbhq.github.io/">
			
 
				-	<meta property="og:title" content="PolitiScales, DBHQ Edition">
			
 
				-	<meta property="og:locale" content="en_US">
			
 
				-	<meta property="og: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.">
			
 
				-	<meta property="og:image" content="/images/facebook-preview.jpg">
			
 
				-</head>
			
 
				+  <body>
			
 
				+    <header>
			
 
				+      <div id="header">
			
 
				+        <h1><a href="/">PolitiScales</a></h1>
			
 
				+      </div>
			
 
				+    </header>
			
 
				 
			
 
				-<body>
			
 
				+    <div id="content">
			
 
				+      <div id="mainFrame">
			
 
				+        <h2 id="question-number">Loading...</h2>
			
 
				+        <div class="questionBox"><p id="question-text"></p></div>
			
 
				+        <div class="navButtons">
			
 
				+          <button
			
 
				+            class="buttonQuestion"
			
 
				+            onclick="next_question(1)"
			
 
				+            style="background-color: #1b5e20;"
			
 
				+          >
			
 
				+            Absolutely agree
			
 
				+          </button>
			
 
				+          <button
			
 
				+            class="buttonQuestion"
			
 
				+            onclick="next_question(2/3)"
			
 
				+            style="background-color: #4caf50;"
			
 
				+          >
			
 
				+            Somewhat agree
			
 
				+          </button>
			
 
				+          <button
			
 
				+            class="buttonQuestion"
			
 
				+            onclick="next_question(0)"
			
 
				+            style="background-color: #bbbbbb;"
			
 
				+          >
			
 
				+            Neutral or hesitant
			
 
				+          </button>
			
 
				+          <button
			
 
				+            class="buttonQuestion"
			
 
				+            onclick="next_question(-2/3)"
			
 
				+            style="background-color: #f44336;"
			
 
				+          >
			
 
				+            Rather disagree
			
 
				+          </button>
			
 
				+          <button
			
 
				+            class="buttonQuestion"
			
 
				+            onclick="next_question(-1)"
			
 
				+            style="background-color: #b71c1c;"
			
 
				+          >
			
 
				+            Absolutely disagree
			
 
				+          </button>
			
 
				+        </div>
			
 
				 
			
 
				-	<header>
			
 
				-		<div id="header">
			
 
				-			<h1><a href="/">PolitiScales</a></h1>
			
 
				-		</div>
			
 
				-	</header>
			
 
				+        <div class="navButtons">
			
 
				+          <button class="button" onclick="prev_question()" id="back_button">
			
 
				+            Return to the previous question
			
 
				+          </button>
			
 
				+          <button
			
 
				+            class="button"
			
 
				+            onclick="location.href='/';"
			
 
				+            id="back_button_off"
			
 
				+          >
			
 
				+            Go back to home page
			
 
				+          </button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				 
			
 
				-	<div id="content">
			
 
				-		<div id="mainFrame">
			
 
				-			<h2 id="question-number">Loading...</h2>
			
 
				-			<div class="questionBox">
			
 
				-				<p id="question-text"></p>
			
 
				-			</div>
			
 
				-			<div class="navButtons">
			
 
				-				<button class="buttonQuestion" onclick="next_question(1)" style="background-color: #1b5e20;">Absolutely agree</button>
			
 
				-				<button class="buttonQuestion" onclick="next_question(2/3)" style="background-color: #4caf50;">Somewhat agree</button>
			
 
				-				<button class="buttonQuestion" onclick="next_question(0)" style="background-color: #bbbbbb;">Neutral or hesitant</button>
			
 
				-				<button class="buttonQuestion" onclick="next_question(-2/3)" style="background-color: #f44336;">Rather disagree</button>
			
 
				-				<button class="buttonQuestion" onclick="next_question(-1)" style="background-color: #b71c1c;">Absolutely disagree</button>
			
 
				-			</div>
			
 
				+    <div id="footer">
			
 
				+      <p>
			
 
				+        This quiz is a slightly modified version of
			
 
				+        <a href="https://www.politiscales.net/">PolitiScales</a>, which is based
			
 
				+        on <a href="https://8values.github.io/">8values</a>.
			
 
				+      </p>
			
 
				+    </div>
			
 
				 
			
 
				-			<div class="navButtons">
			
 
				-				<button class="button" onclick="prev_question()" id="back_button">Return to the previous question</button>
			
 
				-				<button class="button" onclick="location.href='/';" id="back_button_off">Go back to home page</button>
			
 
				-			</div>
			
 
				-		</div>
			
 
				-	</div>
			
 
				-
			
 
				-	<div id="footer">
			
 
				-		<p>
			
 
				-			This quiz is a slightly modified version of <a href="https://www.politiscales.net/">PolitiScales</a>, which is based on <a href="https://8values.github.io/">8values</a>.
			
 
				-		</p>
			
 
				-	</div>
			
 
				-
			
 
				-<script src="/quiz.js"></script>
			
 
				-</body>
			
 
				+    <script src="/quiz.js"></script>
			
 
				+  </body>
			
 
				 </html>
			
--- a/results/index.html
+++ b/results/index.html
@@ -1,402 +1,382 @@
 
				 <!DOCTYPE html>
			
 
				 <html>
			
 
				-
			
 
				-<head>
			
 
				-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			
 
				-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				-
			
 
				-	<title>PolitiScales - Results</title>
			
 
				-
			
 
				-	<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="/images/favicon.ico">
			
 
				-	<meta property="og:url" content="https://dbhq.github.io/">
			
 
				-	<meta property="og:title" content="PolitiScales, DBHQ Edition">
			
 
				-	<meta property="og:locale" content="en_US">
			
 
				-	<meta property="og: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.">
			
 
				-	<meta property="og:image" content="/images/facebook-preview.jpg">
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-
			
 
				-	<header>
			
 
				-		<div id="header">
			
 
				-			<h1><a href="/">PolitiScales</a></h1>
			
 
				-		</div>
			
 
				-	</header>
			
 
				-
			
 
				-	<div id="content">
			
 
				-		<div id="mainFrame">
			
 
				-
			
 
				-			<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>
			
 
				-
			
 
				-			<div class="generatedResultsDecorations">
			
 
				-				<canvas id="generatedResults" width="800" height="1200"></canvas>
			
 
				-			</div>
			
 
				-
			
 
				-			<div id="urlToCopyContainer" class="urlToCopyContainer">
			
 
				-				<div id="urlToCopy" class="urlToCopy"></div>
			
 
				-			</div>
			
 
				-			<div class="navButtons">
			
 
				-				<button class="button buttonLink" onclick="shareLink();" id="buttonLink">
			
 
				-					<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="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
			
 
				-					Copy Link
			
 
				-				</button>
			
 
				-				<button id="download" target="_blank" class="button buttonLink" onclick="download_image();">
			
 
				-					<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="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/></svg>
			
 
				-					Download
			
 
				-				</button>
			
 
				-			</div>
			
 
				-
			
 
				-			<hr/>
			
 
				-
			
 
				-			<div class="flagDecoration">
			
 
				-				<canvas id="generatedFlag" width="512" height="256"></canvas>
			
 
				-				<div id="slogan"></div>
			
 
				-			</div>
			
 
				-
			
 
				-			<div class="columnContainer">
			
 
				-				<div class="columnLeft">
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/constructivism.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Constructivism
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Essentialism
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="cAxisNeg" class="axis-left axisConstructivism">
			
 
				-									<span id="cAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="cAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="cAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="cAxisPos" class="axis-right axisEssentialism">
			
 
				-									<span id="cAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/essentialism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/justice_soft.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Rehabilitative Justice
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Punitive Justice
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="jAxisNeg" class="axis-left axisLiberal">
			
 
				-									<span id="jAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="jAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="jAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="jAxisPos" class="axis-right axisAuthoritarism">
			
 
				-									<span id="jAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/justice_hard.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/progressism.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Progressive
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Conservative
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="sAxisNeg" class="axis-left axisProgressism">
			
 
				-									<span id="sAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="sAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="sAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="sAxisPos" class="axis-right axisConservatism">
			
 
				-									<span id="sAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/conservatism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/internationalism.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Internationalism
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Nationalism
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="bAxisNeg" class="axis-left axisInternationalism">
			
 
				-									<span id="bAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="bAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="bAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="bAxisPos" class="axis-right axisNationalism">
			
 
				-									<span id="bAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/nationalism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-				
			
 
				-				</div>
			
 
				-
			
 
				-				<div class="columnRight">
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/communism.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Communism
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Capitalism
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="pAxisNeg" class="axis-left axisCommunism">
			
 
				-									<span id="pAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="pAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="pAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="pAxisPos" class="axis-right axisCapitalism">
			
 
				-									<span id="pAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/capitalism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/regulation.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Regulation
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Laissez-faire
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="mAxisNeg" class="axis-left axisRegulation">
			
 
				-									<span id="mAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="mAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="mAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="mAxisPos" class="axis-right axisLaissez">
			
 
				-									<span id="mAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/laissezfaire.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/ecology.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Ecology
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Production
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="eAxisNeg" class="axis-left axisEcology">
			
 
				-									<span id="eAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="eAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="eAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="eAxisPos" class="axis-right axisProductivism">
			
 
				-									<span id="eAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/productivism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-					<div class="scale">
			
 
				-						<div class="left">
			
 
				-							<img src="/images/revolution.png">
			
 
				-						</div>
			
 
				-						<div class="axis">
			
 
				-							<div class="label">
			
 
				-								<div class="left-label">
			
 
				-									Revolution
			
 
				-								</div>
			
 
				-								<div class="right-label">
			
 
				-									Reform
			
 
				-								</div>
			
 
				-							</div>
			
 
				-							<div class="axis-bar">
			
 
				-								<div id="tAxisNeg" class="axis-left axisRevo">
			
 
				-									<span id="tAxisNegText"></span>
			
 
				-								</div>
			
 
				-								<div id="tAxisMid" class="axis-center axisNeutral">
			
 
				-									<span id="tAxisMidText"></span>
			
 
				-								</div>
			
 
				-								<div id="tAxisPos" class="axis-right axisRefo">
			
 
				-									<span id="tAxisPosText"></span>
			
 
				-								</div>
			
 
				-							</div>
			
 
				-						</div>
			
 
				-						<div class="right">
			
 
				-							<img src="/images/reformism.png">
			
 
				-						</div>
			
 
				-					</div>
			
 
				-
			
 
				-				</div>
			
 
				-			</div>
			
 
				-			<br/>
			
 
				-			<div id="bonusBox">
			
 
				-				<h3>Additional characteristics</h3>
			
 
				-
			
 
				-				<div id="anarBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/anarchism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Anarchist</h4>
			
 
				-							When the people are being hit with a stick, they are not happier if the stick is called “the stick of the people”. The State is an oppression that must be abolished.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="pragBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/pragmatism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Pragmatist</h4>
			
 
				-							Politics objectively boils down to looking at where the problems are and trying to solve them according to the means available.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="femiBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/feminism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Radical Feminist</h4>
			
 
				-							Gender should disappear to put an end to the patriarchy.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="compBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/complotism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<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>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="vegaBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/veganism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Vegan</h4>
			
 
				-							Human beings must stop at all costs the consumption and exploitation of “sensible” being.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="monaBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/monarchism.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Monarchist</h4>
			
 
				-							Society should be organized around a king.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-
			
 
				-				<div id="reliBonus" class="description">
			
 
				-					<div class="descImg"><img src="/images/religion.png" alt=""></div>
			
 
				-					<div class="descTextMono">
			
 
				-						<p>
			
 
				-							<h4>Missionary</h4>
			
 
				-							For you religion is important, especially yours. It is therefore appropriate to spread it as globally as possible.
			
 
				-						</p>
			
 
				-					</div>
			
 
				-				</div>
			
 
				-			</div>
			
 
				-
			
 
				-			<div class="navButtons">
			
 
				-				<a class="button" href="/quiz">Restart the test</a>
			
 
				-			</div>
			
 
				-		</div>
			
 
				-	</div>
			
 
				-
			
 
				-	<div id="footer">
			
 
				-		<p>
			
 
				-			This quiz is a slightly modified version of <a href="https://www.politiscales.net/">PolitiScales</a>, which is based on <a href="https://8values.github.io/">8values</a>.
			
 
				-		</p>
			
 
				-	</div>
			
 
				-
			
 
				-<script src="/flags.js"></script>
			
 
				-<script src="/results.js"></script>
			
 
				-</body>
			
 
				+  <head>
			
 
				+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+
			
 
				+    <title>PolitiScales - Results</title>
			
 
				+
			
 
				+    <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="/images/favicon.ico" />
			
 
				+    <meta property="og:url" content="https://dbhq.github.io/" />
			
 
				+    <meta property="og:title" content="PolitiScales, DBHQ Edition" />
			
 
				+    <meta property="og:locale" content="en_US" />
			
 
				+    <meta
			
 
				+      property="og: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."
			
 
				+    />
			
 
				+    <meta property="og:image" content="/images/facebook-preview.jpg" />
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <header>
			
 
				+      <div id="header">
			
 
				+        <h1><a href="/">PolitiScales</a></h1>
			
 
				+      </div>
			
 
				+    </header>
			
 
				+
			
 
				+    <div id="content">
			
 
				+      <div id="mainFrame">
			
 
				+        <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>
			
 
				+
			
 
				+        <div class="generatedResultsDecorations">
			
 
				+          <canvas id="generatedResults" width="800" height="1200"></canvas>
			
 
				+        </div>
			
 
				+
			
 
				+        <div id="urlToCopyContainer" class="urlToCopyContainer">
			
 
				+          <div id="urlToCopy" class="urlToCopy"></div>
			
 
				+        </div>
			
 
				+        <div class="navButtons">
			
 
				+          <button
			
 
				+            class="button buttonLink"
			
 
				+            onclick="shareLink();"
			
 
				+            id="buttonLink"
			
 
				+          >
			
 
				+            <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="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
			
 
				+              />
			
 
				+            </svg>
			
 
				+            Copy Link
			
 
				+          </button>
			
 
				+          <button
			
 
				+            id="download"
			
 
				+            target="_blank"
			
 
				+            class="button buttonLink"
			
 
				+            onclick="download_image();"
			
 
				+          >
			
 
				+            <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="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
			
 
				+              />
			
 
				+            </svg>
			
 
				+            Download
			
 
				+          </button>
			
 
				+        </div>
			
 
				+
			
 
				+        <hr />
			
 
				+
			
 
				+        <div class="flagDecoration">
			
 
				+          <canvas id="generatedFlag" width="512" height="256"></canvas>
			
 
				+          <div id="slogan"></div>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="columnContainer">
			
 
				+          <div class="columnLeft">
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/constructivism.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Constructivism</div>
			
 
				+                  <div class="right-label">Essentialism</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="cAxisNeg" class="axis-left axisConstructivism">
			
 
				+                    <span id="cAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="cAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="cAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="cAxisPos" class="axis-right axisEssentialism">
			
 
				+                    <span id="cAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/essentialism.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/justice_soft.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Rehabilitative Justice</div>
			
 
				+                  <div class="right-label">Punitive Justice</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="jAxisNeg" class="axis-left axisLiberal">
			
 
				+                    <span id="jAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="jAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="jAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="jAxisPos" class="axis-right axisAuthoritarism">
			
 
				+                    <span id="jAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/justice_hard.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/progressism.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Progressive</div>
			
 
				+                  <div class="right-label">Conservative</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="sAxisNeg" class="axis-left axisProgressism">
			
 
				+                    <span id="sAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="sAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="sAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="sAxisPos" class="axis-right axisConservatism">
			
 
				+                    <span id="sAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/conservatism.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/internationalism.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Internationalism</div>
			
 
				+                  <div class="right-label">Nationalism</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="bAxisNeg" class="axis-left axisInternationalism">
			
 
				+                    <span id="bAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="bAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="bAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="bAxisPos" class="axis-right axisNationalism">
			
 
				+                    <span id="bAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/nationalism.png" /></div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div class="columnRight">
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/communism.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Communism</div>
			
 
				+                  <div class="right-label">Capitalism</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="pAxisNeg" class="axis-left axisCommunism">
			
 
				+                    <span id="pAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="pAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="pAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="pAxisPos" class="axis-right axisCapitalism">
			
 
				+                    <span id="pAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/capitalism.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/regulation.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Regulation</div>
			
 
				+                  <div class="right-label">Laissez-faire</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="mAxisNeg" class="axis-left axisRegulation">
			
 
				+                    <span id="mAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="mAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="mAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="mAxisPos" class="axis-right axisLaissez">
			
 
				+                    <span id="mAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/laissezfaire.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/ecology.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Ecology</div>
			
 
				+                  <div class="right-label">Production</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="eAxisNeg" class="axis-left axisEcology">
			
 
				+                    <span id="eAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="eAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="eAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="eAxisPos" class="axis-right axisProductivism">
			
 
				+                    <span id="eAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/productivism.png" /></div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div class="scale">
			
 
				+              <div class="left"><img src="/images/revolution.png" /></div>
			
 
				+              <div class="axis">
			
 
				+                <div class="label">
			
 
				+                  <div class="left-label">Revolution</div>
			
 
				+                  <div class="right-label">Reform</div>
			
 
				+                </div>
			
 
				+                <div class="axis-bar">
			
 
				+                  <div id="tAxisNeg" class="axis-left axisRevo">
			
 
				+                    <span id="tAxisNegText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="tAxisMid" class="axis-center axisNeutral">
			
 
				+                    <span id="tAxisMidText"></span>
			
 
				+                  </div>
			
 
				+                  <div id="tAxisPos" class="axis-right axisRefo">
			
 
				+                    <span id="tAxisPosText"></span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div class="right"><img src="/images/reformism.png" /></div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <br />
			
 
				+        <div id="bonusBox">
			
 
				+          <h3>Additional characteristics</h3>
			
 
				+
			
 
				+          <div id="anarBonus" class="description">
			
 
				+            <div class="descImg">
			
 
				+              <img src="/images/anarchism.png" alt="" />
			
 
				+            </div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Anarchist</h4>
			
 
				+              <p>
			
 
				+                When the people are being hit with a stick, they are not happier
			
 
				+                if the stick is called “the stick of the people”. The State is
			
 
				+                an oppression that must be abolished.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="pragBonus" class="description">
			
 
				+            <div class="descImg">
			
 
				+              <img src="/images/pragmatism.png" alt="" />
			
 
				+            </div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Pragmatist</h4>
			
 
				+              <p>
			
 
				+                Politics objectively boils down to looking at where the problems
			
 
				+                are and trying to solve them according to the means available.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="femiBonus" class="description">
			
 
				+            <div class="descImg"><img src="/images/feminism.png" alt="" /></div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Radical Feminist</h4>
			
 
				+              <p>Gender should disappear to put an end to the patriarchy.</p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="compBonus" class="description">
			
 
				+            <div class="descImg">
			
 
				+              <img src="/images/complotism.png" alt="" />
			
 
				+            </div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Conspiracist</h4>
			
 
				+              <p>
			
 
				+                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>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="vegaBonus" class="description">
			
 
				+            <div class="descImg"><img src="/images/veganism.png" alt="" /></div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Vegan</h4>
			
 
				+              <p>
			
 
				+                Human beings must stop at all costs the consumption and
			
 
				+                exploitation of “sensible” being.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="monaBonus" class="description">
			
 
				+            <div class="descImg">
			
 
				+              <img src="/images/monarchism.png" alt="" />
			
 
				+            </div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Monarchist</h4>
			
 
				+              <p>Society should be organized around a king.</p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <div id="reliBonus" class="description">
			
 
				+            <div class="descImg"><img src="/images/religion.png" alt="" /></div>
			
 
				+            <div class="descTextMono">
			
 
				+              <h4>Missionary</h4>
			
 
				+              <p>
			
 
				+                For you religion is important, especially yours. It is therefore
			
 
				+                appropriate to spread it as globally as possible.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="navButtons">
			
 
				+          <a class="button" href="/quiz">Restart the test</a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div id="footer">
			
 
				+      <p>
			
 
				+        This quiz is a slightly modified version of
			
 
				+        <a href="https://www.politiscales.net/">PolitiScales</a>, which is based
			
 
				+        on <a href="https://8values.github.io/">8values</a>.
			
 
				+      </p>
			
 
				+    </div>
			
 
				+
			
 
				+    <script src="/flags.js"></script>
			
 
				+    <script src="/results.js"></script>
			
 
				+  </body>
			
 
				 </html>
			
 
				-