added ecology vs industry

Author: sparkz9502

ideologies.js

@@ -6,7 +6,8 @@ ideologies = [
             "b": 50,
             "c": 50,
             "d": 50,
-			"e": 50
+			"e": 50,
+			"f": 50
         }
     }
 ];

index.html

@@ -25,7 +25,7 @@ <h2>What is LeftValues?</h2>
     There are <b><u><span id="numOfQuestions"></span></u></b> questions in the test.</p>
 
 <h2>What are the values?</h2>
-    <p>There are currently five axes, each of which has two opposing values. They are:</p>
+    <p>There are currently six axes, each of which has two opposing values. They are:</p>
     <p class="value-description"><b style="color:#890000;">Revolution</b> <b>vs.</b> <b style="color:#FC5959;">Reform</b><br/>
         Those with a higher revolution score tend to support a radical and rapid overthrow of the capitalist system through a mass uprising. Those with a higher reform score tend to favor inducing gradual changes within capitalist structures, such as liberal democracy, with the eventual goal of reaching socialism.</p>
 	<p class="value-description"><b style="color:#88232B;">Scientific</b> <b>vs.</b> <b style="color:#7F0037;">Utopian</b><br/>
@@ -36,6 +36,8 @@ <h2>What are the values?</h2>
         Those with a higher international score tend to support forming an international socialist movement, often with the eventual goal of abolishing nations. Those with a higher national score tend to prioritize building socialism within existing borders and reject the goal of a world socialist republic.</p>
 	<p class="value-description"><b style="color:#963B33;">Party</b> <b>vs.</b> <b style="color:#7F333B;">Union</b><br/>
         Those with a higher party score tend to support using political parties as the basis of a socialist movement. Those with a higher union score tend to support using trade unions and other forms of mass organization as a basis of a socialist movement.</p>
+	<p class="value-description"><b style="color:#804E00;">Industry</b> <b>vs.</b> <b style="color:#586808;">Ecology</b><br/>
+        Those with a higher industry score tend to prioritize industrial development and self-sustainability over ecological goals. Those with a higher ecological score tend to support an environmentally oriented economy with strict ecological protections.</p>
 <h2>What's the "Closest Match" mean at the bottom of the results?</h2>
     <p>Similar to 8values, this quiz will attempt to match you with a specific leftist ideology. Some of the more minor ideologies may not be present. This is work in progress, so suggestions are welcome.</p>
 <h2>I don't like my scores!</h2>

questions.js

@@ -7,7 +7,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -17,7 +18,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         },
 	},
 	{
@@ -27,7 +29,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -37,7 +40,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -47,7 +51,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -57,7 +62,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -67,7 +73,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
 	},
 	{
@@ -77,7 +84,8 @@ questions = [
             "b": 0,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	//scientific vs utopian
@@ -88,7 +96,8 @@ questions = [
             "b": 10,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -98,7 +107,8 @@ questions = [
             "b": 5,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -108,7 +118,8 @@ questions = [
             "b": -10,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -118,7 +129,8 @@ questions = [
             "b": 5,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -128,7 +140,8 @@ questions = [
             "b": 10,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -138,7 +151,8 @@ questions = [
             "b": 5,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -148,7 +162,8 @@ questions = [
             "b": -10,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     },
 	{
@@ -158,7 +173,8 @@ questions = [
             "b": -10,
             "c": 0,
             "d": 0,
-			"e": 0
+			"e": 0,
+			"f": 0
         }
     }
 ];

quiz.html

@@ -48,10 +48,10 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
 
 <!-- JavaScript for the test itself -->
 <script>
-    var max_a, max_b, max_c, max_d; // Max possible scores
-    max_a = max_b = max_c = max_d = 0;
+    var max_a, max_b, max_c, max_d, max_e, max_f; // Max possible scores
+    max_a = max_b = max_c = max_d = max_e = max_f = 0;
     var a, b, c, d; // User's scores
-    a = b = c = d = 0;
+    a = b = c = d = e = f = 0;
     var qn = 0; // Question number
     var prev_answer = null;
     init_question();
@@ -60,6 +60,8 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
         max_b += Math.abs(questions[i].effect.b)
         max_c += Math.abs(questions[i].effect.c)
         max_d += Math.abs(questions[i].effect.d)
+		max_e += Math.abs(questions[i].effect.e)
+		max_f += Math.abs(questions[i].effect.f)
     }
     function init_question() {
         document.getElementById("question-text").innerHTML = questions[qn].question;
@@ -79,6 +81,8 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
         b += mult*questions[qn].effect.b
         c += mult*questions[qn].effect.c
         d += mult*questions[qn].effect.d
+		e += mult*questions[qn].effect.e
+		f += mult*questions[qn].effect.f
         qn++;
         prev_answer = mult;
         if (qn < questions.length) {
@@ -96,6 +100,8 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
         b -= prev_answer * questions[qn].effect.b;
         c -= prev_answer * questions[qn].effect.c;
         d -= prev_answer * questions[qn].effect.d;
+		e -= prev_answer * questions[qn].effect.e;
+		f -= prev_answer * questions[qn].effect.f;
         prev_answer = null;
         init_question();
 
@@ -109,6 +115,8 @@ <h2 style="text-align:center;" id="question-number">Loading...</h2>
             + `&b=${calc_score(b,max_b)}`
             + `&c=${calc_score(c,max_c)}`
             + `&d=${calc_score(d,max_d)}`
+			+ `&e=${calc_score(e,max_e)}`
+			+ `&f=${calc_score(f,max_f)}`
     }
 </script>
 </body>

results.html

@@ -51,10 +51,17 @@ <h2><span class="weight-300" id="e-label"></span></h2>
     <div class="bar union" id="bar-union"><div class="text-wrapper" id="union"></div></div>
     <img id="img-union" src="value_images/union.png" height="128pt"/>
 </div>
+<h2><span class="weight-300" id="f-label"></span></h2>
+<div class="axis">
+    <img id="img-industry" src="value_images/industry.png" height="128pt"/>
+    <div class="bar industry" id="bar-industry"><div class="text-wrapper" id="industry"></div></div>
+    <div class="bar ecology" id="bar-ecology"><div class="text-wrapper" id="ecology"></div></div>
+    <img id="img-ecology" src="value_images/ecology.png" height="128pt"/>
+</div>
 <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
 <p>You can send these results by copying and pasting the URL at the top of the page or using the image below.</p>
 <hr/>
-<canvas id="banner" width=800 height=800 style="font-family:Montserrat"></canvas>
+<canvas id="banner" width=800 height=900 style="font-family:Montserrat"></canvas>
 <button class="button" onclick="location.href='index.html';" style="background-color: #2196f3;">Back</button> <br>
 <!-- Website visit statistics - no personal information is collected! -->
 <script type="text/javascript">
@@ -99,6 +106,7 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
     cArray = ["Extremely Pro-Centralization","Pro-Centralization","Moderately Pro-Centralization","Balanced","Moderately Pro-Decentralization","Pro-Decentralization","Extremely Pro-Decentralization"]
     dArray = ["Extremely Internationalist","Internationalist","Moderately Internationalist","Neutral","Moderately Nationalist","Nationalist","Extremely Nationalist"]
 	eArray = ["Extremely Pro-Party","Pro-Party","Moderately Pro-Party","Indifferent","Moderately Pro-Union","Pro-Union","Extremely Pro-Union"]
+	fArray = ["Extremely Industrial","Industrial","Moderately Industrial","Indifferent","Moderately Ecological","Ecological","Extremely Ecological"]
 
     function setLabel(val,ary) {
         if (val > 100) { return "" } else
@@ -117,11 +125,13 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
     central   = getQueryVariable("c")
     international  = getQueryVariable("d")
 	party  = getQueryVariable("e")
+	industry  = getQueryVariable("f")
     reform    = (100 - revolution).toFixed(1)
     utopian     = (100 - scientific   ).toFixed(1)
     decentral = (100 - central ).toFixed(1)
     national = (100 - international).toFixed(1)
 	union = (100 - party).toFixed(1)
+	ecology = (100 - industry).toFixed(1)
 
     setBarValue("revolution", revolution)
     setBarValue("reform", reform)
@@ -133,12 +143,15 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
     setBarValue("international", international)
 	setBarValue("party", party)
     setBarValue("union", union)
+	setBarValue("industry", industry)
+    setBarValue("ecology", ecology)
 
     document.getElementById("a-label").innerHTML = setLabel(revolution, aArray)
     document.getElementById("b-label").innerHTML = setLabel(scientific, bArray)
     document.getElementById("c-label").innerHTML = setLabel(central, cArray)
     document.getElementById("d-label").innerHTML = setLabel(international, dArray)
 	document.getElementById("e-label").innerHTML = setLabel(party, eArray)
+	document.getElementById("f-label").innerHTML = setLabel(industry, fArray)
 
     ideology = ""
     ideodist = Infinity
@@ -149,6 +162,7 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
         dist += Math.pow(Math.abs(ideologies[i].stats.b - scientific), 1.73856063)
         dist += Math.pow(Math.abs(ideologies[i].stats.d - international), 1.73856063)
 		dist += Math.pow(Math.abs(ideologies[i].stats.e - party), 1.73856063)
+		dist += Math.pow(Math.abs(ideologies[i].stats.f - industry), 1.73856063)
         if (dist < ideodist) {
             ideology = ideologies[i].name
             ideodist = dist
@@ -190,13 +204,18 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
         ctx.drawImage(img, 20, 650, 100, 100)
         img = document.getElementById("img-union")
         ctx.drawImage(img, 680, 650, 100, 100)
+		img = document.getElementById("img-industry")
+        ctx.drawImage(img, 20, 770, 100, 100)
+        img = document.getElementById("img-ecology")
+        ctx.drawImage(img, 680, 770, 100, 100)
 
         ctx.fillStyle="#222222"
         ctx.fillRect(120, 180, 560, 80)
         ctx.fillRect(120, 300, 560, 80)
         ctx.fillRect(120, 420, 560, 80)
         ctx.fillRect(120, 540, 560, 80)
 		ctx.fillRect(120, 660, 560, 80)
+		ctx.fillRect(120, 780, 560, 80)
         ctx.fillStyle="#890000"
         ctx.fillRect(120, 184, 5.6*revolution-2, 72)
         ctx.fillStyle="#FC5959"
@@ -217,6 +236,10 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
         ctx.fillRect(120, 664, 5.6*party-2, 72)
         ctx.fillStyle="#7F333B"
         ctx.fillRect(682-5.6*union, 664, 5.6*union-2, 72)
+		ctx.fillStyle="#804E00"
+        ctx.fillRect(120, 784, 5.6*industry-2, 72)
+        ctx.fillStyle="#586808"
+        ctx.fillRect(682-5.6*ecology, 784, 5.6*ecology-2, 72)
         ctx.fillStyle="#222222"
         ctx.font="700 80px Montserrat"
         ctx.textAlign="left"
@@ -230,12 +253,14 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
         if (central   > 30) {ctx.fillText(central + "%", 130, 477.5)}
         if (international > 30) {ctx.fillText(international + "%", 130, 597.5)}
 		if (party > 30) {ctx.fillText(party + "%", 130, 717.5)}
+		if (industry > 30) {ctx.fillText(industry + "%", 130, 837.5)}
         ctx.textAlign="right"
         if (reform    > 30) {ctx.fillText(reform + "%", 670, 237.5)}
         if (utopian     > 30) {ctx.fillText(utopian + "%", 670, 357.5)}
         if (decentral > 30) {ctx.fillText(decentral + "%", 670, 477.5)}
         if (national  > 30) {ctx.fillText(national + "%", 670, 597.5)}
 		if (union  > 30) {ctx.fillText(union + "%", 670, 717.5)}
+		if (ecology  > 30) {ctx.fillText(ecology + "%", 670, 837.5)}
 
         ctx.font="300 30px Montserrat"
         ctx.fillText("leftvalues.github.io", 780, 60)
@@ -245,6 +270,7 @@ <h2>Closest Match: <span class="weight-300" id="ideology-label"></span></h2>
         ctx.fillText("" + document.getElementById("c-label").innerHTML, 400, 415)
         ctx.fillText("" + document.getElementById("d-label").innerHTML, 400, 535)
 		ctx.fillText("" + document.getElementById("e-label").innerHTML, 400, 655)
+		ctx.fillText("" + document.getElementById("f-label").innerHTML, 400, 775)
     }
     </script>
 </body>

style.css

@@ -189,6 +189,16 @@ div.union {
     text-align: right;
     border-left-style: solid;
 }
+div.industry {
+    background-color: #804E00;
+    text-align: left;
+    border-right-style: solid;
+}
+div.ecology {
+    background-color: #586808;
+    text-align: right;
+    border-left-style: solid;
+}
 span.weight-300 {
     font-weight: 300;
 }