big things have small beginnings

flags.js

@@ -0,0 +1,2432 @@
+flagShapes = [
+  /*
+	****************************************************************************
+	3C, REVO, JREH
+	****************************************************************************
+	*/
+  // Révo, Int++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 6, 0, 1 / 6],
+      [2, 0, 1 / 6, 1, 1 / 6, 1, 2 / 6, 0, 2 / 6],
+      [1, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [2, 0, 3 / 6, 1, 3 / 6, 1, 4 / 6, 0, 4 / 6],
+      [1, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6],
+      [2, 0, 5 / 6, 1, 5 / 6, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.66
+      }
+    ]
+  },
+  // Révo, Int+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 5, 0, 1 / 5],
+      [2, 0, 1 / 5, 1, 1 / 5, 1, 2 / 5, 0, 2 / 5],
+      [1, 0, 2 / 5, 1, 2 / 5, 1, 3 / 5, 0, 3 / 5],
+      [2, 0, 3 / 5, 1, 3 / 5, 1, 4 / 5, 0, 4 / 5],
+      [1, 0, 4 / 5, 1, 4 / 5, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.66,
+        vmax: -0.33
+      }
+    ]
+  },
+  // Révo
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 4, 0, 1 / 4],
+      [2, 0, 1 / 4, 1, 1 / 4, 1, 2 / 4, 0, 2 / 4],
+      [1, 0, 2 / 4, 1, 2 / 4, 1, 3 / 4, 0, 3 / 4],
+      [2, 0, 3 / 4, 1, 3 / 4, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.33,
+        vmax: 0.33
+      }
+    ]
+  },
+  // Révo, Nat+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 3, 0, 1 / 3],
+      [2, 0, 1 / 3, 1, 1 / 3, 1, 2 / 3, 0, 2 / 3],
+      [1, 0, 2 / 3, 1, 2 / 3, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.33,
+        vmax: 0.66
+      }
+    ]
+  },
+  // Révo, Nat++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 2, 0, 1 / 2],
+      [2, 0, 1 / 2, 1, 1 / 2, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.66,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	3C, REFO, JPUN
+	****************************************************************************
+	*/
+  // Réfo, Int++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 8, 0, 1 / 8],
+      [2, 0, 1 / 8, 1, 1 / 8, 1, 2 / 8, 0, 2 / 8],
+      [1, 0, 2 / 8, 1, 2 / 8, 1, 3 / 8, 0, 3 / 8],
+      [2, 0, 3 / 8, 1, 3 / 8, 1, 4 / 8, 0, 4 / 8],
+      [1, 0, 4 / 8, 1, 4 / 8, 1, 5 / 8, 0, 5 / 8],
+      [2, 0, 5 / 8, 1, 5 / 8, 1, 6 / 8, 0, 6 / 8],
+      [1, 0, 6 / 8, 1, 6 / 8, 1, 7 / 8, 0, 7 / 8],
+      [2, 0, 7 / 8, 1, 7 / 8, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.5
+      }
+    ]
+  },
+  // Réfo, Int+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 6, 0, 1 / 6],
+      [2, 0, 1 / 6, 1, 1 / 6, 1, 2 / 6, 0, 2 / 6],
+      [1, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [2, 0, 3 / 6, 1, 3 / 6, 1, 4 / 6, 0, 4 / 6],
+      [1, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6],
+      [2, 0, 5 / 6, 1, 5 / 6, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.5,
+        vmax: 0.0
+      }
+    ]
+  },
+  // Réfo, Nat+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 4, 0, 1 / 4],
+      [2, 0, 1 / 4, 1, 1 / 4, 1, 2 / 4, 0, 2 / 4],
+      [1, 0, 2 / 4, 1, 2 / 4, 1, 3 / 4, 0, 3 / 4],
+      [2, 0, 3 / 4, 1, 3 / 4, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.0,
+        vmax: 0.5
+      }
+    ]
+  },
+  // Réfo, Nat++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 2, 0, 1 / 2],
+      [2, 0, 1 / 2, 1, 1 / 2, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.5,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	3C, REVO, JPUN
+	****************************************************************************
+	*/
+  // JPun, Int++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 8, 0, 1 / 8],
+      [2, 0, 1 / 8, 1, 1 / 8, 1, 2 / 8, 0, 2 / 8],
+      [1, 0, 2 / 8, 1, 2 / 8, 1, 3 / 8, 0, 3 / 8],
+      [2, 0, 3 / 8, 1, 3 / 8, 1, 4 / 8, 0, 4 / 8],
+      [1, 0, 4 / 8, 1, 4 / 8, 1, 5 / 8, 0, 5 / 8],
+      [2, 0, 5 / 8, 1, 5 / 8, 1, 6 / 8, 0, 6 / 8],
+      [1, 0, 6 / 8, 1, 6 / 8, 1, 7 / 8, 0, 7 / 8],
+      [2, 0, 7 / 8, 1, 7 / 8, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1]
+    ],
+    symbol: [1 / 6, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.6
+      }
+    ]
+  },
+  // JPun, Int+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 6, 0, 1 / 6],
+      [2, 0, 1 / 6, 1, 1 / 6, 1, 2 / 6, 0, 2 / 6],
+      [1, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [2, 0, 3 / 6, 1, 3 / 6, 1, 4 / 6, 0, 4 / 6],
+      [1, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6],
+      [2, 0, 5 / 6, 1, 5 / 6, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1]
+    ],
+    symbol: [1 / 6, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.6,
+        vmax: -0.2
+      }
+    ]
+  },
+  // JPun
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 4, 0, 1 / 4],
+      [2, 0, 1 / 4, 1, 1 / 4, 1, 2 / 4, 0, 2 / 4],
+      [1, 0, 2 / 4, 1, 2 / 4, 1, 3 / 4, 0, 3 / 4],
+      [2, 0, 3 / 4, 1, 3 / 4, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1]
+    ],
+    symbol: [1 / 6, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.2,
+        vmax: 0.2
+      }
+    ]
+  },
+  // JPun, Nat+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 2, 0, 1 / 2],
+      [2, 0, 1 / 2, 1, 1 / 2, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1]
+    ],
+    symbol: [1 / 6, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.2,
+        vmax: 0.6
+      }
+    ]
+  },
+  // JPun, Nat++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1],
+      [2, 2 / 3, 0, 1, 0, 1, 1, 2 / 3, 1],
+      [0, 1 / 3, 0, 2 / 3, 0, 2 / 3, 1, 1 / 3, 1]
+    ],
+    symbol: [1 / 2, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.6,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	3C, REFO, JREH
+	****************************************************************************
+	*/
+  // JReh, Int++
+  {
+    numColors: 3,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 4 / 16, 0, 6 / 16, 0, 6 / 16, 1, 4 / 16, 1],
+      [1, 0, 3 / 8, 0, 5 / 8, 1, 5 / 8, 1, 3 / 8],
+      [2, 4.4 / 16, 0, 5.6 / 16, 0, 5.6 / 16, 1, 4.4 / 16, 1],
+      [2, 0, 3.4 / 8, 0, 4.6 / 8, 1, 4.6 / 8, 1, 3.4 / 8]
+    ],
+    symbol: [2 / 16, 1.5 / 8, 0.8],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.6
+      }
+    ]
+  },
+  // JReh, Int+
+  {
+    numColors: 3,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 7 / 16, 0, 9 / 16, 0, 9 / 16, 1, 7 / 16, 1],
+      [1, 0, 3 / 8, 0, 5 / 8, 1, 5 / 8, 1, 3 / 8],
+      [2, 7.4 / 16, 0, 8.6 / 16, 0, 8.6 / 16, 1, 7.4 / 16, 1],
+      [2, 0, 3.4 / 8, 0, 4.6 / 8, 1, 4.6 / 8, 1, 3.4 / 8]
+    ],
+    symbol: [3.5 / 16, 1.5 / 8, 0.8],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.6,
+        vmax: -0.2
+      }
+    ]
+  },
+  // JReh
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 3 / 12, 0, 3 / 12],
+      [2, 0, 3 / 12, 1, 3 / 12, 1, 4 / 12, 0, 4 / 12],
+      [0, 0, 4 / 12, 1, 4 / 12, 1, 8 / 12, 0, 8 / 12],
+      [2, 0, 8 / 12, 1, 8 / 12, 1, 9 / 12, 0, 9 / 12],
+      [1, 0, 9 / 12, 1, 9 / 12, 1, 1, 0, 1]
+    ],
+    symbol: [1 / 2, 1 / 2, 0.9],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.2,
+        vmax: 0.2
+      }
+    ]
+  },
+  // JReh, Nat+
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 6, 0, 1 / 6],
+      [2, 0, 1 / 6, 1, 1 / 6, 1, 2 / 6, 0, 2 / 6],
+      [0, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [0, 0, 3 / 6, 1, 3 / 6, 1, 4 / 6, 0, 4 / 6],
+      [2, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6],
+      [1, 0, 5 / 6, 1, 5 / 6, 1, 1, 0, 1]
+    ],
+    symbol: [1 / 2, 1 / 2, 0.9],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.2,
+        vmax: 0.6
+      }
+    ]
+  },
+  // JReh, Nat++
+  {
+    numColors: 3,
+    shapes: [
+      [1, 0, 0, 0, 1 / 3, 1, 1 / 3, 1, 0],
+      [2, 0, 2 / 3, 0, 1, 1, 1, 1, 2 / 3],
+      [0, 0, 1 / 3, 0, 2 / 3, 1, 2 / 3, 1, 1 / 3]
+    ],
+    symbol: [1 / 2, 1 / 2, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.6,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	2C, REFO, JREH
+	****************************************************************************
+	*/
+  // 2C, Réfo, JReh, Int++
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0, 0, 1, 0, 1, 1 / 9, 0, 1 / 9],
+      [1, 0, 2 / 9, 1, 2 / 9, 1, 3 / 9, 0, 3 / 9],
+      [1, 0, 4 / 9, 1, 4 / 9, 1, 5 / 9, 0, 5 / 9],
+      [1, 0, 6 / 9, 1, 6 / 9, 1, 7 / 9, 0, 7 / 9],
+      [1, 0, 8 / 9, 1, 8 / 9, 1, 9 / 9, 0, 9 / 9],
+      [0, "circleSymbol", 0.5, 0.5, 0.25]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.666
+      }
+    ]
+  },
+  // 2C, Réfo, JReh, Int+
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0, 0, 1, 0, 1, 1 / 7, 0, 1 / 7],
+      [1, 0, 2 / 7, 1, 2 / 7, 1, 3 / 7, 0, 3 / 7],
+      [1, 0, 4 / 7, 1, 4 / 7, 1, 5 / 7, 0, 5 / 7],
+      [1, 0, 6 / 7, 1, 6 / 7, 1, 1, 0, 1],
+      [0, "circleSymbol", 0.5, 0.5, 0.25]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.666,
+        vmax: -0.333
+      }
+    ]
+  },
+  // 2C, Réfo, JReh, Int
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0, 0.75, 1, 0.75, 1, 0.8, 0, 0.8],
+      [1, 0, 0.25, 1, 0.25, 1, 0.2, 0, 0.2]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.333,
+        vmax: 0.0
+      }
+    ]
+  },
+  // 2C, Réfo, JReh, Nat
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [0, 0, 4 / 5, 1, 4 / 5, 1, 1 / 5, 0, 1 / 5]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.0,
+        vmax: 0.333
+      }
+    ]
+  },
+  // 2C, Réfo, JReh, Nat+
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 3, 0, 1 / 3],
+      [0, 0, 1 / 3, 1, 1 / 3, 1, 2 / 3, 0, 2 / 3],
+      [1, 0, 2 / 3, 1, 2 / 3, 1, 1, 0, 1]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.333,
+        vmax: 0.666
+      }
+    ]
+  },
+  // 2C, Réfo, JReh, Nat++
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 2, 0, 1 / 2],
+      [0, 0, 1 / 2, 1, 1 / 2, 1, 1, 0, 1]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.666,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	2C, REVO, JREH
+	****************************************************************************
+	*/
+  // 2C, Révo, JReh, Int++
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 9, 0, 1 / 9],
+      [0, 0, 1 / 9, 1, 1 / 9, 1, 2 / 9, 0, 2 / 9],
+      [1, 0, 2 / 9, 1, 2 / 9, 1, 3 / 9, 0, 3 / 9],
+      [0, 0, 3 / 9, 1, 3 / 9, 1, 4 / 9, 0, 4 / 9],
+      [1, 0, 4 / 9, 1, 4 / 9, 1, 5 / 9, 0, 5 / 9],
+      [0, 0, 5 / 9, 1, 5 / 9, 1, 6 / 9, 0, 6 / 9],
+      [1, 0, 6 / 9, 1, 6 / 9, 1, 7 / 9, 0, 7 / 9],
+      [0, 0, 7 / 9, 1, 7 / 9, 1, 8 / 9, 0, 8 / 9],
+      [1, 0, 8 / 9, 1, 8 / 9, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.66
+      }
+    ]
+  },
+  // 2C, Révo, JReh, Int+
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 7, 0, 1 / 7],
+      [0, 0, 1 / 7, 1, 1 / 7, 1, 2 / 7, 0, 2 / 7],
+      [1, 0, 2 / 7, 1, 2 / 7, 1, 3 / 7, 0, 3 / 7],
+      [0, 0, 3 / 7, 1, 3 / 7, 1, 4 / 7, 0, 4 / 7],
+      [1, 0, 4 / 7, 1, 4 / 7, 1, 5 / 7, 0, 5 / 7],
+      [0, 0, 5 / 7, 1, 5 / 7, 1, 6 / 7, 0, 6 / 7],
+      [1, 0, 6 / 7, 1, 6 / 7, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.66,
+        vmax: -0.33
+      }
+    ]
+  },
+  // 2C, Révo, JReh, Int
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 5, 0, 1 / 5],
+      [0, 0, 1 / 5, 1, 1 / 5, 1, 2 / 5, 0, 2 / 5],
+      [1, 0, 2 / 5, 1, 2 / 5, 1, 3 / 5, 0, 3 / 5],
+      [0, 0, 3 / 5, 1, 3 / 5, 1, 4 / 5, 0, 4 / 5],
+      [1, 0, 4 / 5, 1, 4 / 5, 1, 1, 0, 1],
+      [0, 0, 0, 0.5, 0.5, 0, 1]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: -0.33,
+        vmax: 0.0
+      }
+    ]
+  },
+  // 2C, Révo, JReh, Nat
+  {
+    numColors: 2,
+    shapes: [[1, 0, 0, 1, 0, 1, 1, 0, 1], [0, 0, 1, 0, 0.5, 1, 0, 1, 0.5]],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.0,
+        vmax: 0.333
+      }
+    ]
+  },
+  // 2C, Révo, JReh, Nat+
+  {
+    numColors: 2,
+    shapes: [[1, 0, 0, 1, 0, 1, 1, 0, 1], [0, 0, 0, 1, 0.5, 0, 1]],
+    symbol: [0.33, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.333,
+        vmax: 0.666
+      }
+    ]
+  },
+  // 2C, Révo, JReh, Nat++
+  {
+    numColors: 2,
+    shapes: [[1, 0, 0, 1, 0, 1, 1, 0, 1], [0, 0, 1, 1, 1, 1, 0]],
+    symbol: [0.125, 0.25, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "b",
+        vmin: 0.666,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	2C, REVO, JPUN
+	****************************************************************************
+	*/
+  // 2C, Révo, JPun, Int++
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 8, 0, 1 / 8],
+      [0, 0, 1 / 8, 1, 1 / 8, 1, 2 / 8, 0, 2 / 8],
+      [1, 0, 2 / 8, 1, 2 / 8, 1, 3 / 8, 0, 3 / 8],
+      [0, 0, 3 / 8, 1, 3 / 8, 1, 4 / 8, 0, 4 / 8],
+      [1, 0, 4 / 8, 1, 4 / 8, 1, 5 / 8, 0, 5 / 8],
+      [0, 0, 5 / 8, 1, 5 / 8, 1, 6 / 8, 0, 6 / 8],
+      [1, 0, 6 / 8, 1, 6 / 8, 1, 7 / 8, 0, 7 / 8],
+      [0, 0, 7 / 8, 1, 7 / 8, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.666
+      }
+    ]
+  },
+  // 2C, Révo, JPun, Int+
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1],
+      [0, 0, 0 / 6, 1, 0 / 6, 1, 1 / 6, 0, 1 / 6],
+      [0, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [0, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6]
+    ],
+    symbol: [1 / 6, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.666,
+        vmax: -0.333
+      }
+    ]
+  },
+  // 2C, Révo, JPun, Int
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1],
+      [0, 0, 0 / 5, 1, 0 / 5, 1, 1 / 5, 0, 1 / 5],
+      [0, 0, 2 / 5, 1, 2 / 5, 1, 3 / 5, 0, 3 / 5],
+      [0, 0, 4 / 5, 1, 4 / 5, 1, 5 / 5, 0, 5 / 5]
+    ],
+    symbol: [1 / 6, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.333,
+        vmax: 0.0
+      }
+    ]
+  },
+  // 2C, Révo, JPun, Nat
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0, 0, 1 / 3, 0, 1 / 3, 1, 0, 1],
+      [1, 2 / 3, 0, 1, 0, 1, 1, 2 / 3, 1]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.0,
+        vmax: 0.333
+      }
+    ]
+  },
+  // 2C, Révo, JPun, Nat+
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [0, 0, 0.2, 0, 0, 0.1, 0, 1, 0.8, 1, 1, 0.9, 1],
+      [0, 0, 0.8, 0, 1, 0.1, 1, 1, 0.2, 1, 0, 0.9, 0]
+    ],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.333,
+        vmax: 0.666
+      }
+    ]
+  },
+  // 2C, Révo, JPun, Nat++
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [
+        0,
+        0,
+        0,
+        0.37,
+        0,
+        0.43,
+        1 / 16,
+        0.37,
+        2 / 16,
+        0.43,
+        3 / 16,
+        0.37,
+        4 / 16,
+        0.43,
+        5 / 16,
+        0.37,
+        6 / 16,
+        0.43,
+        7 / 16,
+        0.37,
+        8 / 16,
+        0.43,
+        9 / 16,
+        0.37,
+        10 / 16,
+        0.43,
+        11 / 16,
+        0.37,
+        12 / 16,
+        0.43,
+        13 / 16,
+        0.37,
+        14 / 16,
+        0.43,
+        15 / 16,
+        0.37,
+        1,
+        0.43,
+        1,
+        0,
+        1
+      ]
+    ],
+    symbol: [0.2, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.666,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	2C, REFO, JPUN
+	****************************************************************************
+	*/
+  // 2C, Réfo, JPun, Int++
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1 / 8, 0, 1 / 8],
+      [0, 0, 1 / 8, 1, 1 / 8, 1, 2 / 8, 0, 2 / 8],
+      [1, 0, 2 / 8, 1, 2 / 8, 1, 3 / 8, 0, 3 / 8],
+      [0, 0, 3 / 8, 1, 3 / 8, 1, 4 / 8, 0, 4 / 8],
+      [1, 0, 4 / 8, 1, 4 / 8, 1, 5 / 8, 0, 5 / 8],
+      [0, 0, 5 / 8, 1, 5 / 8, 1, 6 / 8, 0, 6 / 8],
+      [1, 0, 6 / 8, 1, 6 / 8, 1, 7 / 8, 0, 7 / 8],
+      [0, 0, 7 / 8, 1, 7 / 8, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -1.0,
+        vmax: -0.666
+      }
+    ]
+  },
+  // 2C, Réfo, JPun, Int+
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1 / 6, 0, 1 / 6],
+      [1, 0, 1 / 6, 1, 1 / 6, 1, 2 / 6, 0, 2 / 6],
+      [0, 0, 2 / 6, 1, 2 / 6, 1, 3 / 6, 0, 3 / 6],
+      [1, 0, 3 / 6, 1, 3 / 6, 1, 4 / 6, 0, 4 / 6],
+      [0, 0, 4 / 6, 1, 4 / 6, 1, 5 / 6, 0, 5 / 6],
+      [1, 0, 5 / 6, 1, 5 / 6, 1, 1, 0, 1],
+      [0, 0, 0, 1 / 3, 0, 1 / 3, 1 / 2, 0, 1 / 2]
+    ],
+    symbol: [1 / 6, 1 / 4, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.666,
+        vmax: -0.333
+      }
+    ]
+  },
+  // 2C, Réfo, JPun, Int
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0.45, 0, 0.45, 1, 0.55, 1, 0.55, 0],
+      [1, 0, 0.4, 1, 0.4, 1, 0.6, 0, 0.6]
+    ],
+    symbol: [0.215, 0.2, 0.8],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: -0.333,
+        vmax: 0.0
+      }
+    ]
+  },
+  // 2C, Réfo, JPun, Nat
+  {
+    numColors: 2,
+    shapes: [
+      [0, 0, 0, 1, 0, 1, 1, 0, 1],
+      [1, 0, 2 / 5, 1, 2 / 5, 1, 3 / 5, 0, 3 / 5],
+      [1, 0.25, 0, 0.35, 0, 0.35, 1, 0.25, 1],
+      [1, "circle", 0.3, 0.5, 0.25]
+    ],
+    symbol: [0.3, 0.5, 0.9],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.0,
+        vmax: 0.333
+      }
+    ]
+  },
+  // 2C, Réfo, JPun, Nat+
+  {
+    numColors: 2,
+    shapes: [
+      [1, 0, 0, 1, 0, 1, 1, 0, 1],
+      [0, 0, 1 / 5, 1, 1 / 5, 1, 4 / 5, 0, 4 / 5],
+      [1, "circle", 0.5, 0.5, 0.25]
+    ],
+    symbol: [0.5, 0.5, 0.9],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.333,
+        vmax: 0.666
+      }
+    ]
+  },
+  // 2C, Réfo, JPun, Nat++
+  {
+    numColors: 2,
+    shapes: [[1, 0, 0, 1, 0, 1, 1, 0, 1], [0, "circle", 0.5, 0.5, 0.35]],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "j",
+        vmin: 0.0,
+        vmax: 1.0
+      },
+      {
+        name: "b",
+        vmin: 0.666,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	1C, REVO
+	****************************************************************************
+	*/
+  {
+    numColors: 1,
+    shapes: [[0, 0, 0, 1, 0, 1, 1, 0, 1]],
+    symbol: [0.125, 0.25, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: -1.0,
+        vmax: 0.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	1C, REFO
+	****************************************************************************
+	*/
+  {
+    numColors: 1,
+    shapes: [[0, 0, 0, 1, 0, 1, 1, 0, 1]],
+    symbol: [0.5, 0.5, 1.0],
+    cond: [
+      {
+        name: "t",
+        vmin: 0.0,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	****************************************************************************
+	0C
+	****************************************************************************
+	*/
+  {
+    numColors: 0,
+    shapes: [[0, 0, 0, 1, 0, 1, 1, 0, 1]],
+    symbol: [0.5, 0.5, 1.0],
+    cond: []
+  }
+];
+
+flagColors = [
+  //Anarchisme
+  {
+    bgColor: "#000000",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "anar",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Monarichisme
+  {
+    bgColor: "#ffffff",
+    fgColor: "#fa9e08",
+    cond: [
+      {
+        name: "mona",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  /*
+	//Nationalisme
+	{
+		bgColor: "#a45e22",
+		fgColor: "#ffffff",
+		cond:
+		[
+			{
+				name: "b1",
+				vmin: 0.4,
+				vmax: 1.0,
+			}
+		]
+	},
+	*/
+  //Conservatism
+  {
+    bgColor: "#062b85",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "s1",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Communiste
+  {
+    bgColor: "#d71224",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "p0",
+        vmin: 0.6,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Socialiste
+  {
+    bgColor: "#c92375",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "m0",
+        vmin: 0.4,
+        vmax: 1.0
+      },
+      {
+        name: "p0",
+        vmin: 0.0,
+        vmax: 0.59999
+      }
+    ]
+  },
+  {
+    bgColor: "#c92375",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "m0",
+        vmin: 0.4,
+        vmax: 1.0
+      },
+      {
+        name: "p1",
+        vmin: 0.0,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Liberal
+  {
+    bgColor: "#fcce0a",
+    fgColor: "#1b67ac",
+    cond: [
+      {
+        name: "m1",
+        vmin: 0.4,
+        vmax: 1.0
+      },
+      {
+        name: "p1",
+        vmin: 0.1,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Ecologie
+  {
+    bgColor: "#069839",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "e0",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Egalité (constructivisme)
+  {
+    bgColor: "#6a1094",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "c0",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Progressisme
+  {
+    bgColor: "#f86d07",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "s0",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  },
+  //Productivisme
+  {
+    bgColor: "#2fa2d3",
+    fgColor: "#ffffff",
+    cond: [
+      {
+        name: "e1",
+        vmin: 0.4,
+        vmax: 1.0
+      }
+    ]
+  }
+];
+
+flagSymbols = [
+  //Féminisme
+  {
+    data: {
+      parent_type: "curve",
+      transforms: [
+        {
+          child_type: "none",
+          x: 2,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 2,
+          y: 0,
+          main: true,
+          parent_tx: 10,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: -2,
+          child_ty: 0,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 1
+        },
+        {
+          child_type: "dot",
+          x: 2,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 3,
+          child_ty: 17,
+          child_sx: 0.55,
+          child_sy: 0.55,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "femi",
+      vmin: 0.95,
+      vmax: 1.0
+    }
+  },
+  //Communisme
+  {
+    data: {
+      parent_type: "curve",
+      transforms: [
+        {
+          child_type: "none",
+          x: 0,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 0,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: -17,
+          child_ty: -14,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 0,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 6,
+          child_sx: 0.55,
+          child_sy: 0.55,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "p0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Internationalisme
+  {
+    data: {
+      parent_type: "curve",
+      transforms: [
+        {
+          child_type: "none",
+          x: 3,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 3,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: -13,
+          child_ty: -20,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 3,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 2,
+          child_ty: 0,
+          child_sx: 0.55,
+          child_sy: 0.55,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "b0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Productivisme
+  {
+    data: {
+      parent_type: "curve",
+      transforms: [
+        {
+          child_type: "none",
+          x: 1,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 1,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: -17,
+          child_ty: -20,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 1
+        },
+        {
+          child_type: "dot",
+          x: 1,
+          y: 0,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 4,
+          child_ty: 2,
+          child_sx: 0.55,
+          child_sy: 0.55,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "e1",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Régulationnisme
+  {
+    data: {
+      parent_type: "line",
+      transforms: [
+        {
+          child_type: "none",
+          x: 0,
+          y: 2,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 45,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 0,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 0,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 0,
+          y: 2,
+          main: true,
+          parent_tx: 0,
+          parent_ty: -18,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: -45,
+          child_tx: 0,
+          child_ty: 18,
+          child_sx: 0.6,
+          child_sy: 0.6,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 0,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 5,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "m0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Conservatisme
+  {
+    data: {
+      parent_type: "line",
+      transforms: [
+        {
+          child_type: "none",
+          x: 0,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: -45,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 0,
+          y: 1,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 0,
+          y: 1,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 0,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: -18,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: -45,
+          child_tx: 0,
+          child_ty: 18,
+          child_sx: 0.6,
+          child_sy: 0.6,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 0,
+          y: 1,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "s1",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Punitif
+  {
+    data: {
+      parent_type: "line",
+      transforms: [
+        {
+          child_type: "none",
+          x: 1,
+          y: 2,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: -45,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 1,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 1,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 1,
+          y: 2,
+          main: true,
+          parent_tx: 0,
+          parent_ty: -18,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: -45,
+          child_tx: 0,
+          child_ty: 18,
+          child_sx: 0.6,
+          child_sy: 0.6,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 1,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "j1",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Ecologie
+  {
+    data: {
+      parent_type: "line",
+      transforms: [
+        {
+          child_type: "none",
+          x: 3,
+          y: 2,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 2,
+          y: 2,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 2,
+          y: 2,
+          main: false,
+          parent_tx: -6,
+          parent_ty: 0,
+          parent_sx: 0.95,
+          parent_sy: 0.95,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: -1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "dot",
+          x: 2,
+          y: 2,
+          main: true,
+          parent_tx: 5,
+          parent_ty: -15,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 90,
+          child_tx: -10,
+          child_ty: 15,
+          child_sx: 0.6,
+          child_sy: 0.6,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 3,
+          y: 2,
+          main: false,
+          parent_tx: -20,
+          parent_ty: -20,
+          parent_sx: 0.6,
+          parent_sy: 0.6,
+          parent_r: 45,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "e0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Essentialisme
+  {
+    data: {
+      parent_type: "dot",
+      transforms: [
+        {
+          child_type: "none",
+          x: 0,
+          y: 3,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 0,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 0,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 0,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "c1",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Révolution
+  {
+    data: {
+      parent_type: "dot",
+      transforms: [
+        {
+          child_type: "none",
+          x: 1,
+          y: 3,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 1,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 1,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 1,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "t0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  },
+  //Monarchie
+  {
+    data: {
+      parent_type: "dot",
+      transforms: [
+        {
+          child_type: "none",
+          x: 2,
+          y: 3,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "curve",
+          x: 2,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 2,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "tri",
+          x: 2,
+          y: 3,
+          main: false,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "mona",
+      vmin: 0.9,
+      vmax: 1.0
+    }
+  },
+  //Constructivisme
+  {
+    data: {
+      parent_type: "tri",
+      transforms: [
+        {
+          child_type: "none",
+          x: 1,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 0,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: 0
+        },
+        {
+          child_type: "line",
+          x: 1,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: 5,
+          child_sx: 1,
+          child_sy: 1,
+          child_r: -45
+        },
+        {
+          child_type: "dot",
+          x: 1,
+          y: 1,
+          main: true,
+          parent_tx: 0,
+          parent_ty: 0,
+          parent_sx: 1,
+          parent_sy: 1,
+          parent_r: 0,
+          child_tx: 0,
+          child_ty: -18,
+          child_sx: 0.65,
+          child_sy: 0.65,
+          child_r: 0
+        }
+      ]
+    },
+    cond: {
+      name: "c0",
+      vmin: 0.7,
+      vmax: 1.0
+    }
+  }
+];

help/index.html

@@ -0,0 +1,129 @@
+<!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 - 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="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@PolitiScales" />
+	<meta name="twitter:creator" content="@PolitiScales" />
+	<meta property="og:url" content="https://politiscales.net/en_US/" />
+	<meta property="og:title" content="PolitiScales" />
+	<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="https://politiscales.net/images/facebook-preview.png" />
+</head>
+
+<body>
+
+	<header>
+		<div id="header">
+			<h1><a href="/">PolitiScales</a></h1>
+		</div>
+	</header>
+
+	<div id="content">
+		<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>
+
+			<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>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>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>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>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>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>PolitiScale is an initiative of <a href="https://www.radicalisees-sur-internet.fr">“Radicalisé·e·s sur Internet”</a> which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
+
+		<p>Interested by translating PolitiScales? Please visit our <a href="https://crowdin.com/project/politiscales">Crowdin project</a>.</p>
+	</div>
+
+</body>

index.html

@@ -0,0 +1,56 @@
+<!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 - Index</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="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@PolitiScales" />
+	<meta name="twitter:creator" content="@PolitiScales" />
+	<meta property="og:url" content="https://politiscales.net/en_US/" />
+	<meta property="og:title" content="PolitiScales" />
+	<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="https://politiscales.net/images/facebook-preview.png" />
+</head>
+
+<body>
+
+	<header>
+		<div id="header">
+			<h1><a href="/">PolitiScales</a></h1>
+		</div>
+	</header>
+
+	<div id="content">
+		<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>
+			<br/>
+
+			<p class="simpleText ltr"><i class="fa fa-bell" aria-hidden="true"></i> The questions assume that your are a citizen of a multi-parti political system and a market economy.</p>
+			<p class="simpleText ltr"><i class="fa fa-bell" aria-hidden="true"></i> 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"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 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>PolitiScale is an initiative of <a href="https://www.radicalisees-sur-internet.fr">“Radicalisé·e·s sur Internet”</a> which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
+
+		<p>Interested by translating PolitiScales? Please visit our <a href="https://crowdin.com/project/politiscales">Crowdin project</a>.</p>
+	</div>
+
+</body>

quiz.js

@@ -0,0 +1,2058 @@
+questions = [
+  /* ESSENTIALISME ************************************************ */
+  {
+    question: "“One is not born, but rather becomes, a woman.”",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Differences of treatment and quality of life in our society show that racism is still omnipresent.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "All sciences, even chemistry and biology are not uncompromising and are conditioned by our society.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The categories “women” and “men” are social constructs that should be given up.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Nobody is by nature predisposed to criminality.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Sexual orientation is a social construct",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Social differences between ethnic groups cannot be explained by biology.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The social roles of women and men can partly be explained by biological differences.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Hormonal differences can explain some differences in individual characteristics between women and men.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Sexual assaults are partly caused by men's natural impulse.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Transgender individuals will never really be of the gender they would like to be.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Members of a nation or culture have some unchangeable characteristics that define them.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Biologically, human beings are designed for heterosexuality.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Selfishness is the overriding drive in the human species, no matter the context.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "c1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "c0",
+        value: 3
+      }
+    ]
+  },
+  /* NATIONALISME ************************************************* */
+  {
+    question: "Borders should eventually be abolished.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "People need to stand up for their ideals, even if it leads them to betray their country.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "My country must pay for the damages caused by the crimes it committed in other countries.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "If two countries have similar economies, social systems and environmental norms, then the free market between them has no negative impact.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "National Chauvinism during sports competitions is not acceptable.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "I am equally concerned about the inhabitants of my country and those of other the countries.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Foreigners living in my country should be allowed to act politically, equally to those who have the nationality.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Citizens should take priority over foreigners.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The values of my country are superior to those of other countries.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Multiculturalism is a threat to our society.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "A good citizen is a patriot.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is legitimate for a country to intervene militarily to defend its economic interests.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is necessary to teach history in order to create a sense of belonging to the nation.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Research produced by my country should not be available to other countries.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "b1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "b0",
+        value: 3
+      }
+    ]
+  },
+  /* PRODUCTION *************************************************** */
+  {
+    question:
+      "No one should get rich from owning a business, housing, or land.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Wage labor is a form of theft from the worker by companies.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "It is important that health should stay a public matter.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Energy and transport structures should be a public matter.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Patents should not exist.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is necessary to implement assemblies to ration our production to the consumers according to their needs.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The labor market enslaves workers.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Looking for one's own profit is healthy for the economy.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is merit that explains differences of wealth between two individuals.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The fact that some schools and universities are private is not a problem.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Offshoring and outsourcing are necessary evils to improve production.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "It is acceptable that there are rich and poor people.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "It is acceptable that some industry sectors are private.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Banks should remain private.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "p1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "p0",
+        value: 3
+      }
+    ]
+  },
+  /* MARKET ******************************************************* */
+  {
+    question: "Revenues and capital should be taxed to redistribute wealth.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The age of retirement should be lowered.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Dismissals of employees should be forbidden except if it is justified.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Minimal levels of salary should be ensured to make sure that a worker can live of her/his work.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "It is necessary to avoid private monopoly.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Loans contracted in the public sphere (State, regions, collectivities...) should not necessarily be refunded.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Some sectors or type of employment should be financially supported.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Market economy is optimal when it is not regulated.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Nowadays employees are free to choose when signing a contract with their future employer",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is necessary to remove regulations in labor legislation to encourage firms to hire.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The maximum allowed hours in the legal work week should be increased.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Environmental norms should be influenced by mass consumption and not from an authority.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Social assistance deters people from working.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "State-run companies should be managed like private ones and follow the logic of the market (competition, profitability...).",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "m1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "m0",
+        value: 3
+      }
+    ]
+  },
+  /* SOCIETE ****************************************************** */
+  {
+    question: "Traditions should be questioned.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "I do not have any problem if other official languages are added or replace the already existing official language in my country.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Marriage should be abolished.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Foreigners enrich our culture.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The influence of religion should decrease.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "A language is defined by its users, not by scholars.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Euthanasia should be authorized.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Homosexuals should not be treated equally to heterosexuals with regards to marriage, parentage, adoption or procreation.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "In some specific conditions, the death penalty is justified.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      },
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      },
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Technological progress must not change society too quickly.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "School should mostly teach our values, traditions and fundamental knowledge.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Abortion should be limited to specific cases.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      },
+      {
+        axis: "femi",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The main goal of a couple is to make at least one child.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Abstinence should be preferred to contraception, to preserve the true nature of the sexual act.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "s1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "s0",
+        value: 3
+      }
+    ]
+  },
+  /* ECOLOGIE ***************************************************** */
+  {
+    question:
+      "It is not acceptable that human actions should lead to the extinction of species.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "GMOs should be forbidden outside research and medical purposes.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "We must fight against global warming.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "We should accept changes in our way of consuming food to limit the exploitation of nature.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is important to encourage an agriculture that maintains a food biodiversity, even if the output is inferior.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Preserving non urban ecosystems is more important than creating jobs.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Reduction of waste should be done by reducing production.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Space colonization is a good solution for supplying the lack of raw material on Earth (iron, rare metals, fuel...) ",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Transforming ecosystems durably to increase the quality of life of human beings is legitimate.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is necessary to massively invest in research to improve productivity.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Transhumanism will be beneficial because it will allow us to improve our capacities.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Nuclear fission, when well maintained, is a good source of energy.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Exploitation of fossil fuels is necessary.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Maintaining strong economic growth should be an objective for the government.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "e1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "e0",
+        value: 3
+      }
+    ]
+  },
+  /* LIBERTAIRE *************************************************** */
+  {
+    question: "Prisons should no longer exist.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is unfair to set a minimal penalty for an offense or a crime.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Individuals who get out of prison should be accompanied in their reinsertion.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Justice should always take into consideration the context and the past of the condemned and adapt their penalty accordingly.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Conditions of life in jail should be greatly improved.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The filing and storage of personal records should be delimited strictly and database cross-checking should be forbidden.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The right to be anonymous on Internet should be guaranteed.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The purpose of the judiciary system should be to punish those who went against the law.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "The police should be armed.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "The sacrifice of some civil liberties is a necessity in order to be protected from terrorist acts.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Order and authority should be respected in all circumstances.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Heavy penalties are efficient because they are dissuasive.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "It is better to arrest someone potentially dangerous preventively rather than taking the risk of having them committing a crime.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "j1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "j0",
+        value: 3
+      }
+    ]
+  },
+  /* STRATEGIE **************************************************** */
+  {
+    question: "Mass strike is a good way to acquire new rights.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Armed struggle in a country is sometimes necessary.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Insurrection is necessary to deeply change society.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Activism in existing political organizations is not relevant to change society.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Elections organized by the state cannot question the powers in place.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Hacking has a legitimate place in political struggle.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Sabotage is legitimate under certain conditions.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Activists must always act in strict accordance with the law.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Revolutions will always end up in a bad way.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Changing the system radically is counter-productive. We should rather transform it progressively.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question: "Violence against individuals is never productive.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "We should always distance ourselves from protesters who use violence.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "We need to make compromises with the opposition to apply our ideas.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  {
+    question:
+      "Changes in an individual's way of life can induce changes in society.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "t1",
+        value: 3
+      }
+    ],
+    valuesNo: [
+      {
+        axis: "t0",
+        value: 3
+      }
+    ]
+  },
+  /* BONUS ******************************************************** */
+  {
+    question: "My religion must be spread as widely as possible.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "reli",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  },
+  {
+    question:
+      "It is a small group that consciously and secretly controls the world.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "comp",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  },
+  {
+    question: "A good policy is a pragmatic policy without ideology.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "prag",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  },
+  {
+    question:
+      "We need to establish a monarchy to federate the people and preserve our sovereignty.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "mona",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  },
+  {
+    question: "Humans should neither eat nor exploit animals.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "vega",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  },
+  {
+    question: "The State should be abolished.",
+    answer: 0,
+    valuesYes: [
+      {
+        axis: "anar",
+        value: 3
+      }
+    ],
+    valuesNo: []
+  }
+];
+
+var qn = 0; // Question number
+var prev_answer = null;
+
+function shuffle(array) {
+  var i = 0,
+    j = 0,
+    temp = null;
+
+  for (i = array.length - 1; i > 0; i -= 1) {
+    j = Math.floor(Math.random() * (i + 1));
+    temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+}
+shuffle(questions);
+
+init_question();
+
+function init_question() {
+  document.getElementById("question-text").innerHTML = questions[qn].question;
+  document.getElementById(
+    "question-number"
+  ).innerHTML = "Question %num% of %sum%"
+    .replace("%num%", qn + 1)
+    .replace("%sum%", questions.length);
+  if (qn == 0) {
+    document.getElementById("back_button").style.display = "none";
+    document.getElementById("back_button_off").style.display = "block";
+  } else {
+    document.getElementById("back_button").style.display = "block";
+    document.getElementById("back_button_off").style.display = "none";
+  }
+}
+
+function next_question(mult) {
+  questions[qn].answer = mult;
+  qn++;
+
+  if (qn < questions.length) {
+    init_question();
+  } else {
+    results();
+  }
+}
+function prev_question() {
+  if (qn == 0) {
+    return;
+  }
+  qn--;
+  init_question();
+}
+
+function calc_score(score, max_value) {
+  return ((100 * score) / max_value).toFixed(0);
+}
+
+function results() {
+  var axes = {};
+
+  for (var i = 0; i < questions.length; i++) {
+    q = questions[i];
+
+    for (var j = 0; j < q.valuesYes.length; j++) {
+      a = q.valuesYes[j];
+      if (!(a.axis in axes)) {
+        axes[a.axis] = {
+          val: 0,
+          sum: 0
+        };
+      }
+
+      if (q.answer > 0) {
+        axes[a.axis].val += q.answer * a.value;
+      }
+      axes[a.axis].sum += Math.max(a.value, 0);
+    }
+
+    for (var j = 0; j < q.valuesNo.length; j++) {
+      a = q.valuesNo[j];
+      if (!(a.axis in axes)) {
+        axes[a.axis] = {
+          val: 0,
+          sum: 0
+        };
+      }
+
+      if (q.answer < 0) {
+        axes[a.axis].val -= q.answer * a.value;
+      }
+      axes[a.axis].sum += Math.max(a.value, 0);
+    }
+  }
+
+  url = "";
+  for (var aK in axes) {
+    if (axes[aK].val > 0) {
+      if (url != "") url += "&";
+      url += aK + "=" + calc_score(axes[aK].val, axes[aK].sum);
+    }
+  }
+  url = window.btoa(url);
+  url = "/results/?" + url;
+
+  location.href = url;
+}

quiz/index.html

@@ -0,0 +1,65 @@
+<!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 - 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="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@PolitiScales" />
+	<meta name="twitter:creator" content="@PolitiScales" />
+	<meta property="og:url" content="http://politiscales.net/en_US/" />
+	<meta property="og:title" content="PolitiScales" />
+	<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="http://politiscales.net/images/facebook-preview.png" />
+</head>
+<body>
+
+<header>
+	<div id="header">
+		<h1><a href="/">PolitiScales</a></h1>
+	</div>
+</header>
+
+<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 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>PolitiScale is an initiative of <a href="http://www.radicalisees-sur-internet.fr">“Radicalisé·e·s sur Internet”</a> which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
+
+<p>Interested by translating PolitiScales? Please visit our <a href="https://crowdin.com/project/politiscales">Crowdin project</a>.</p>
+</div>
+
+<script src="/quiz.js"></script>
+</body>
+</html>

results.js

@@ -0,0 +1,814 @@
+"use strict";
+
+var urlToCopy = document.getElementById("urlToCopy");
+if (urlToCopy) {
+  urlToCopy.innerHTML = location.href;
+}
+
+function shareLink() {
+  var urlToCopy = document.getElementById("urlToCopy");
+  var urlToCopyContainer = document.getElementById("urlToCopyContainer");
+  if (urlToCopy && urlToCopyContainer) {
+    urlToCopyContainer.style.display = "block";
+    var range = document.createRange();
+    range.selectNode(urlToCopy);
+    window.getSelection().addRange(range);
+
+    try {
+      // Now that we've selected the anchor text, execute the copy command
+      if(document.execCommand('copy')) {
+        var button = document.getElementById("buttonLink");
+        if (button) {
+          button.className = "button buttonLinkGood";
+          setTimeout(function() {
+            var buttonTimeout = document.getElementById("buttonLink");
+            if (buttonTimeout) button.className = "button buttonLink";
+          }, 2000);
+        }
+      }
+    } catch (err) {}
+  }
+}
+
+function getQueryVariable(variable) {
+  var query = window.atob(window.location.search.substring(1));
+  var vars = query.split("&");
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split("=");
+    if (pair[0] == variable) {
+      if (pair[1] == "NaN") {
+        return 0;
+      } else {
+        return pair[1] / 100;
+      }
+    }
+  }
+  return 0;
+}
+
+function setAxisValue(name, value) {
+  var axis = document.getElementById(name);
+  if (!axis) return;
+
+  var text = document.getElementById(name + "Text");
+  if (!text) return;
+
+  axis.style.width = (100 * value).toFixed(1) + "%";
+
+  text.innerHTML = (100 * value).toFixed(0) + "%";
+  if (text.offsetWidth > (axis.offsetWidth - 5)) text.style.display = "none";
+  else text.style.display = "";
+}
+
+function setBonus(name, value, limit) {
+  var axis = document.getElementById(name);
+  if (!axis) return;
+
+  if (value > limit) {
+    axis.style.display = "flex";
+    axis.style.opacity = value * value;
+  } else {
+    axis.style.display = "none";
+  }
+}
+
+var axes = ["c", "b", "p", "m", "s", "j", "e", "t"];
+
+var bonus = {
+  anar: 0.9,
+  prag: 0.5,
+  femi: 0.9,
+  comp: 0.9,
+  vega: 0.5,
+  reli: 0.5,
+  mona: 0.5
+};
+
+var characteristics = [];
+var axesValues = {
+  c: 0,
+  b: 0,
+  p: 0,
+  m: 0,
+  s: 0,
+  j: 0,
+  e: 0,
+  t: 0
+};
+
+for (var i = 0; i < axes.length; i++) {
+  var negativeValue = getQueryVariable(axes[i] + "0");
+  var positiveValue = getQueryVariable(axes[i] + "1");
+  setAxisValue(axes[i] + "AxisNeg", negativeValue);
+  setAxisValue(axes[i] + "AxisPos", positiveValue);
+  setAxisValue(axes[i] + "AxisMid", 1 - negativeValue - positiveValue);
+
+  if (negativeValue > positiveValue) {
+    characteristics.push({ name: axes[i] + "0", value: negativeValue });
+  } else {
+    characteristics.push({ name: axes[i] + "1", value: positiveValue });
+  }
+
+  axesValues[axes[i]] = positiveValue - negativeValue;
+}
+
+var bonusEnabled = 0;
+
+for (var b in bonus) {
+  var value = getQueryVariable(b);
+
+  setBonus(b + "Bonus", value, bonus[b]);
+
+  if (value > bonus[b]) {
+    bonusEnabled = 1;
+    characteristics.push({ name: b, value: value });
+  }
+}
+
+characteristics.sort(function(a, b) {
+  return a.value < b.value;
+});
+
+var charSlogan = {
+  c0: "Equality",
+  b0: "Humanity",
+  b1: "Fatherland",
+  p0: "Socialism",
+  p1: "Work",
+  m1: "Liberty",
+  s1: "Family",
+  j0: "Justice",
+  j1: "Order",
+  e0: "Ecology",
+  t0: "Revolution"
+};
+
+function findFlagColors() {
+  var colors = [];
+
+  for (var i = 0; i < flagColors.length; i++) {
+    var accepted = 1;
+
+    var mainValue = 0;
+    var mainValueFound = 0;
+
+    for (var j = 0; j < flagColors[i].cond.length; j++) {
+      var charFound = 0;
+      for (var k = 0; k < characteristics.length; k++) {
+        if (characteristics[k].name == flagColors[i].cond[j].name) {
+          charFound = 1;
+          if (
+            characteristics[k].value < flagColors[i].cond[j].vmin ||
+            characteristics[k].value > flagColors[i].cond[j].vmax
+          )
+            accepted = 0;
+          else if (!mainValueFound) {
+            mainValueFound = 1;
+            mainValue = characteristics[k].value;
+          }
+
+          break;
+        }
+      }
+
+      if (!charFound) accepted = 0;
+
+      if (!accepted) break;
+    }
+
+    if (accepted) {
+      colors.push({
+        bgColor: flagColors[i].bgColor,
+        fgColor: flagColors[i].fgColor,
+        value: mainValue
+      });
+    }
+  }
+
+  colors.sort(function(a, b) {
+    return a.value < b.value;
+  });
+
+  return colors;
+}
+
+function findFlagShape(numColors) {
+  var flagFound = -1;
+  var flagValue = [0, 0, 0];
+  var flagColor = 0;
+
+  for (var i = 0; i < flagShapes.length; i++) {
+    if (flagShapes[i].numColors > numColors) continue;
+
+    var condValue = [0, 0];
+    var accepted = 1;
+    if (flagShapes[i].cond.length > 0) {
+      for (var j = 0; j < flagShapes[i].cond.length; j++) {
+        var value = axesValues[flagShapes[i].cond[j].name];
+        if (
+          value < flagShapes[i].cond[j].vmin ||
+          value > flagShapes[i].cond[j].vmax
+        ) {
+          accepted = 0;
+        }
+        if (j < 3) condValue[j] = Math.abs(value);
+
+        if (!accepted) break;
+      }
+    } else {
+      var condValue = [0, 0];
+    }
+
+    if (accepted && flagColor <= flagShapes[i].numColors) {
+      if (flagShapes[i].numColors > flagColor) {
+        flagColor = flagShapes[i].numColors;
+        flagValue[0] = condValue[0];
+        flagValue[1] = condValue[1];
+        flagValue[2] = condValue[2];
+        flagFound = i;
+      } else if (condValue[0] > flagValue[0]) {
+        flagColor = flagShapes[i].numColors;
+        flagValue[0] = condValue[0];
+        flagValue[1] = condValue[1];
+        flagValue[2] = condValue[2];
+        flagFound = i;
+      } else if (condValue[0] == flagValue[0]) {
+        if (condValue[1] > flagValue[1]) {
+          flagColor = flagShapes[i].numColors;
+          flagValue[0] = condValue[0];
+          flagValue[1] = condValue[1];
+          flagValue[2] = condValue[2];
+          flagFound = i;
+        } else if (condValue[1] == flagValue[1]) {
+          if (condValue[2] > flagValue[2]) {
+            flagColor = flagShapes[i].numColors;
+            flagValue[0] = condValue[0];
+            flagValue[1] = condValue[1];
+            flagValue[2] = condValue[2];
+            flagFound = i;
+          }
+        }
+      }
+    }
+  }
+
+  return flagFound;
+}
+
+function getCharacteristic(name, vmin, vmax) {
+  for (var k = 0; k < characteristics.length; k++) {
+    if (characteristics[k].name != name) continue;
+
+    if (characteristics[k].value >= vmin && characteristics[k].value <= vmax)
+      return characteristics[k].value;
+    else return -1.0;
+  }
+
+  return -1.0;
+}
+
+function findFlagSymbol(numColors) {
+  var symbol0 = {
+    parent_type: "none",
+    transform: {}
+  };
+  var symbol1 = {
+    parent_type: "none",
+    transform: {}
+  };
+  var valueMax = 0;
+
+  if (numColors == 0) {
+    symbol0.parent_type = "dot";
+    symbol0.transform = {
+      child_type: "none",
+      x: 3,
+      y: 3,
+      main: true,
+      parent_tx: 0,
+      parent_ty: 0,
+      parent_sx: 1,
+      parent_sy: 1,
+      parent_r: 0,
+      child_tx: 0,
+      child_ty: 0,
+      child_sx: 1,
+      child_sy: 1,
+      child_r: 0
+    };
+  }
+
+  for (var s0 = 0; s0 < flagSymbols.length; s0++) {
+    var charVal0 = getCharacteristic(
+      flagSymbols[s0].cond.name,
+      flagSymbols[s0].cond.vmin,
+      flagSymbols[s0].cond.vmax
+    );
+    if (charVal0 > 0) {
+      var value = charVal0 * 1.5;
+      var transform0 = -1;
+      if (value > valueMax) {
+        for (k0 = 0; k0 < flagSymbols[s0].data.transforms.length; k0++) {
+          if (flagSymbols[s0].data.transforms[k0].child_type == "none") {
+            transform0 = k0;
+          }
+        }
+
+        if (transform0 >= 0) {
+          symbol0.parent_type = flagSymbols[s0].data.parent_type;
+          symbol0.transform = flagSymbols[s0].data.transforms[transform0];
+          symbol1.parent_type = "none";
+          valueMax = value;
+        }
+      }
+
+      for (var s1 = s0 + 1; s1 < flagSymbols.length; s1++) {
+        transform0 = -1;
+        var transform1 = -1;
+        var k0 = -1;
+        for (k0 = 0; k0 < flagSymbols[s0].data.transforms.length; k0++) {
+          for (var k1 = 0; k1 < flagSymbols[s1].data.transforms.length; k1++) {
+            if (
+              flagSymbols[s0].data.parent_type ==
+                flagSymbols[s1].data.transforms[k1].child_type &&
+              flagSymbols[s1].data.parent_type ==
+                flagSymbols[s0].data.transforms[k0].child_type
+            ) {
+              transform0 = k0;
+              transform1 = k1;
+            }
+          }
+        }
+
+        if (transform1 < 0 || transform0 < 0) continue;
+
+        var charVal1 = getCharacteristic(
+          flagSymbols[s1].cond.name,
+          flagSymbols[s1].cond.vmin,
+          flagSymbols[s1].cond.vmax
+        );
+        if (charVal1 > 0) {
+          value = charVal0 + charVal1;
+          if (value > valueMax) {
+            symbol0.parent_type = flagSymbols[s0].data.parent_type;
+            symbol0.transform = flagSymbols[s0].data.transforms[transform0];
+            symbol1.parent_type = flagSymbols[s1].data.parent_type;
+            symbol1.transform = flagSymbols[s1].data.transforms[transform1];
+            valueMax = value;
+          }
+        }
+      }
+    }
+  }
+
+  if (
+    symbol0.parent_type != "none" &&
+    symbol1.parent_type != "none" &&
+    symbol1.transform.main &&
+    !symbol0.transform.main
+  )
+    return [symbol1, symbol0];
+  else return [symbol0, symbol1];
+}
+
+var generatedSlogan = "";
+var sloganDiv = document.getElementById("slogan");
+if (sloganDiv) {
+  var selectedSlogan = [];
+
+  for (var i = 0; i < characteristics.length; i++) {
+    if (
+      characteristics[i].value > 0 &&
+      charSlogan.hasOwnProperty(characteristics[i].name)
+    ) {
+      selectedSlogan.push({
+        text: charSlogan[characteristics[i].name],
+        value: characteristics[i].value
+      });
+    }
+  }
+
+  selectedSlogan.sort(function(a, b) {
+    return a.value < b.value;
+  });
+
+  var counter = 0;
+  for (var i = 0; i < selectedSlogan.length; i++) {
+    if (generatedSlogan != "") generatedSlogan += " · ";
+    generatedSlogan += selectedSlogan[i].text;
+    counter++;
+
+    if (counter >= 3) break;
+  }
+
+  sloganDiv.innerHTML = generatedSlogan;
+}
+
+if (!bonusEnabled) {
+  bonusBox = document.getElementById("bonusBox");
+  bonusBox.style.display = "none";
+}
+
+var images = {
+  sprites: "/images/flag_sprites.png",
+  c0: "/images/constructivism_small.png",
+  c1: "/images/essentialism_small.png",
+  j0: "/images/justice_soft_small.png",
+  j1: "/images/justice_hard_small.png",
+  s0: "/images/progressism_small.png",
+  s1: "/images/conservatism_small.png",
+  b0: "/images/internationalism_small.png",
+  b1: "/images/nationalism_small.png",
+  p0: "/images/communism_small.png",
+  p1: "/images/capitalism_small.png",
+  m0: "/images/regulation_small.png",
+  m1: "/images/laissezfaire_small.png",
+  e0: "/images/ecology_small.png",
+  e1: "/images/productivism_small.png",
+  t0: "/images/revolution_small.png",
+  t1: "/images/reformism_small.png",
+  anar: "/images/anarchism_small.png",
+  prag: "/images/pragmatism_small.png",
+  femi: "/images/feminism_small.png",
+  comp: "/images/complotism_small.png",
+  vega: "/images/veganism_small.png",
+  mona: "/images/monarchism_small.png",
+  reli: "/images/religion_small.png"
+};
+
+var numImageLoaded = 0;
+
+function onImageLoaded() {
+  numImageLoaded++;
+
+  if (numImageLoaded < images.length) {
+    return;
+  }
+
+  var flag = document.getElementById("generatedFlag");
+  if (flag) {
+    var ctx = flag.getContext("2d");
+
+    var spriteX = 256;
+    var spriteY = 128;
+    var spriteS = 1.0;
+
+    var colors = findFlagColors();
+    var symbolData = findFlagSymbol(colors.length);
+
+    var flagId = findFlagShape(colors.length);
+
+    if (colors.length <= 0)
+      colors.push({ bgColor: "#ffffff", fgColor: "#000000" });
+
+    if (flagId < 0) {
+      ctx.beginPath();
+      ctx.rect(0, 0, 512, 256);
+      ctx.fillStyle = "#ffffff";
+      ctx.fill();
+    } else {
+      for (var i = 0; i < flagShapes[flagId].shapes.length; i++) {
+        var path = flagShapes[flagId].shapes[i];
+        var numPoints = path.length / 2;
+
+        ctx.beginPath();
+        ctx.moveTo(path[1] * 512, path[2] * 256);
+
+        if (path[1] == "circle") {
+          ctx.arc(
+            path[2] * 512,
+            path[3] * 256,
+            path[4] * 256,
+            0,
+            2 * Math.PI,
+            false
+          );
+        } else if (
+          path[1] == "circleSymbol" &&
+          symbolData[0].parent_type != "none"
+        ) {
+          ctx.arc(
+            path[2] * 512,
+            path[3] * 256,
+            path[4] * 256,
+            0,
+            2 * Math.PI,
+            false
+          );
+        } else {
+          for (var j = 1; j < numPoints; j++) {
+            ctx.lineTo(path[1 + j * 2 + 0] * 512, path[1 + j * 2 + 1] * 256);
+          }
+        }
+        ctx.fillStyle = colors[path[0]].bgColor;
+        ctx.fill();
+      }
+
+      spriteX = flagShapes[flagId].symbol[0] * 512;
+      spriteY = flagShapes[flagId].symbol[1] * 256;
+      spriteS = flagShapes[flagId].symbol[2];
+    }
+
+    if (symbolData[0].parent_type != "none") {
+      var tmpC = document.createElement("canvas");
+      tmpC.width = images["sprites"].width;
+      tmpC.height = images["sprites"].height;
+      var tmpCtx = tmpC.getContext("2d");
+      var coloredSprites = tmpCtx.getImageData(0, 0, tmpC.width, tmpC.height);
+
+      tmpCtx.beginPath();
+      tmpCtx.rect(0, 0, tmpC.width, tmpC.height);
+      tmpCtx.fillStyle = colors[0].fgColor;
+      tmpCtx.fill();
+
+      tmpCtx.globalCompositeOperation = "destination-in";
+      tmpCtx.drawImage(images["sprites"], 0, 0);
+
+      ctx.save();
+      ctx.translate(spriteX, spriteY);
+      ctx.scale(spriteS, spriteS);
+
+      var sx = symbolData[0].transform.x;
+      var sy = symbolData[0].transform.y;
+
+      ctx.save();
+      ctx.translate(
+        symbolData[0].transform.parent_tx,
+        -symbolData[0].transform.parent_ty
+      );
+      ctx.rotate((symbolData[0].transform.parent_r * Math.PI) / 180);
+      ctx.scale(
+        symbolData[0].transform.parent_sx,
+        symbolData[0].transform.parent_sy
+      );
+      ctx.drawImage(tmpC, sx * 128, sy * 128, 128, 128, -64, -64, 128, 128);
+      ctx.restore();
+
+      if (symbolData[1].parent_type != "none") {
+        var sx = symbolData[1].transform.x;
+        var sy = symbolData[1].transform.y;
+
+        ctx.translate(
+          symbolData[0].transform.child_tx,
+          -symbolData[0].transform.child_ty
+        );
+        ctx.rotate((symbolData[0].transform.child_r * Math.PI) / 180);
+        ctx.scale(
+          symbolData[0].transform.child_sx,
+          symbolData[0].transform.child_sy
+        );
+
+        ctx.translate(
+          symbolData[1].transform.parent_tx,
+          -symbolData[1].transform.parent_ty
+        );
+        ctx.rotate((symbolData[1].transform.parent_r * Math.PI) / 180);
+        ctx.scale(
+          symbolData[1].transform.parent_sx,
+          symbolData[1].transform.parent_sy
+        );
+
+        ctx.drawImage(tmpC, sx * 128, sy * 128, 128, 128, -64, -64, 128, 128);
+        ctx.restore();
+      }
+
+      ctx.restore();
+    }
+  }
+
+  var rPreview = document.getElementById("generatedResults");
+  if (rPreview) {
+    var ctx = rPreview.getContext("2d");
+
+    ctx.beginPath();
+    ctx.rect(0, 0, rPreview.width, rPreview.height);
+    ctx.fillStyle = "#ebebeb";
+    ctx.fill();
+
+    var yPos = 20;
+
+    if (flag) {
+      var flagCtx = flag.getContext("2d");
+      var flagSize = 160;
+
+      //Logo
+      ctx.beginPath();
+      ctx.rect(0, 0, rPreview.width, 42);
+      ctx.fillStyle = "#500076";
+      ctx.fill();
+
+      ctx.fillStyle = "#ffffff";
+      ctx.font = "bold 25px sans-serif";
+      ctx.textAlign = "left";
+      ctx.fillText("PolitiScales", 10, 30);
+
+      ctx.fillStyle = "#ffffff";
+      ctx.font = "bold 15px sans-serif";
+      ctx.textAlign = "right";
+      ctx.fillText("www.politiscales.net", rPreview.width - 10, 27);
+
+      yPos += 48;
+
+      //Flag
+      ctx.drawImage(
+        flag,
+        0,
+        0,
+        flag.width,
+        flag.height,
+        rPreview.width / 2.0 - flagSize,
+        yPos,
+        flagSize * 2,
+        flagSize
+      );
+      yPos += flagSize + 10;
+
+      //Slogan
+      ctx.fillStyle = "#000000";
+      ctx.font = "25px sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(generatedSlogan, rPreview.width / 2.0, yPos + 30);
+      yPos += 70;
+
+      //Axes
+      var axesDrawInfo = [
+        {
+          key: "c",
+          color0: "#a425b6",
+          color1: "#34b634",
+          name0: "Constructivism",
+          name1: "Essentialism"
+        },
+        {
+          key: "j",
+          color0: "#14bee1",
+          color1: "#e6cc27",
+          name0: "Rehabilitative justice",
+          name1: "Punitive justice"
+        },
+        {
+          key: "s",
+          color0: "#850083",
+          color1: "#970000",
+          name0: "Progressivism",
+          name1: "Conservatism"
+        },
+        {
+          key: "b",
+          color0: "#3e6ffd",
+          color1: "#ff8500",
+          name0: "Internationalism",
+          name1: "Nationalism"
+        },
+        {
+          key: "p",
+          color0: "#cc0000",
+          color1: "#ffb800",
+          name0: "Communism",
+          name1: "Capitalism"
+        },
+        {
+          key: "m",
+          color0: "#269B32",
+          color1: "#6608C0",
+          name0: "Regulationism",
+          name1: "Laissez-faire"
+        },
+        {
+          key: "e",
+          color0: "#a0e90d",
+          color1: "#4deae9",
+          name0: "Ecology",
+          name1: "Productivism"
+        },
+        {
+          key: "t",
+          color0: "#eb1a66",
+          color1: "#0ee4c8",
+          name0: "Revolution",
+          name1: "Reformism"
+        }
+      ];
+
+      var axeMargin = 100;
+      var axeWidth = rPreview.width - axeMargin * 2;
+      ctx.strokeStyle = "#888888";
+      for (var i = 0; i < axesDrawInfo.length; i++) {
+        var negativeValue = getQueryVariable(axesDrawInfo[i]["key"] + "0");
+        var positiveValue = getQueryVariable(axesDrawInfo[i]["key"] + "1");
+        var neutralValue = 1 - negativeValue - positiveValue;
+
+        var negSize = axeWidth * negativeValue;
+        var posSize = axeWidth * positiveValue;
+        var ntrSize = axeWidth * neutralValue;
+
+        ctx.beginPath();
+        ctx.rect(0.5 + axeMargin + negSize, 0.5 + yPos, ntrSize, 30);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.rect(0.5 + axeMargin, 0.5 + yPos, negSize, 30);
+        ctx.fillStyle = axesDrawInfo[i]["color0"];
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.rect(
+          0.5 + rPreview.width - axeMargin - posSize,
+          0.5 + yPos,
+          posSize,
+          30
+        );
+        ctx.fillStyle = axesDrawInfo[i]["color1"];
+        ctx.fill();
+        ctx.stroke();
+
+        if (negSize > 40) {
+          ctx.fillStyle = "#ffffff";
+          ctx.font = "20px sans-serif";
+          ctx.textAlign = "right";
+          ctx.fillText(
+            Math.round(negativeValue * 100) + "%",
+            axeMargin + negSize - 5,
+            yPos + 23
+          );
+        }
+
+        if (posSize > 40) {
+          ctx.fillStyle = "#ffffff";
+          ctx.font = "20px sans-serif";
+          ctx.textAlign = "left";
+          ctx.fillText(
+            Math.round(positiveValue * 100) + "%",
+            axeMargin + negSize + ntrSize + 5,
+            yPos + 23
+          );
+        }
+
+        if (ntrSize > 40) {
+          ctx.fillStyle = "#888888";
+          ctx.font = "20px sans-serif";
+          ctx.textAlign = "center";
+          ctx.fillText(
+            Math.round(neutralValue * 100) + "%",
+            axeMargin + negSize + ntrSize / 2,
+            yPos + 23
+          );
+        }
+
+        ctx.drawImage(
+          images[axesDrawInfo[i]["key"] + "0"],
+          axeMargin - 73,
+          yPos - 27
+        );
+        ctx.drawImage(
+          images[axesDrawInfo[i]["key"] + "1"],
+          rPreview.width - axeMargin + 73 - 86,
+          yPos - 27
+        );
+
+        ctx.fillStyle = "#000000";
+        ctx.font = "16px sans-serif";
+        ctx.textAlign = "left";
+        ctx.fillText(axesDrawInfo[i]["name0"], axeMargin + 8, yPos - 6);
+
+        ctx.textAlign = "right";
+        ctx.fillText(
+          axesDrawInfo[i]["name1"],
+          rPreview.width - axeMargin - 8,
+          yPos - 6
+        );
+
+        yPos += 100;
+      }
+
+      var xShift = 0;
+      var numBonus = 0;
+      for (var b in bonus) {
+        value = getQueryVariable(b);
+        if (value > bonus[b]) {
+          numBonus++;
+        }
+      }
+
+      for (var b in bonus) {
+        value = getQueryVariable(b);
+        if (value > bonus[b]) {
+          ctx.drawImage(
+            images[b],
+            rPreview.width / 2 - ((numBonus - 1) * 100) / 2 + xShift - 43,
+            yPos - 27
+          );
+          xShift += 100;
+        }
+      }
+    }
+  }
+}
+
+for (var b in images) {
+  var src = images[b];
+  images[b] = new Image();
+  images[b].src = src;
+  images[b].onload = onImageLoaded;
+}

results/index.html

@@ -0,0 +1,384 @@
+<!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="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@PolitiScales" />
+	<meta name="twitter:creator" content="@PolitiScales" />
+	<meta property="og:url" content="http://politiscales.net/en_US/" />
+	<meta property="og:title" content="PolitiScales" />
+	<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="http://politiscales.net/images/facebook-preview.png" />
+</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 ltr">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 class="shareText">Share your result with this link, or using a sharing button:</div>
+			<div id="urlToCopyContainer" class="urlToCopyContainer">
+				<div id="urlToCopy" class="urlToCopy"></div>
+			</div>
+			<div class="navButtons">
+				<a class="button buttonLink" onclick="shareLink();" id="buttonLink"><i class="fa fa-link" aria-hidden="true"></i> Copy Link</a>
+			</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><strong>Anarchist:</strong>  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><strong>Pragmatist:</strong> politics objectively boil 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><strong>Radical Feminist:</strong> 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><strong>Conspiratorial:</strong> 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><strong>Vegan:</strong> 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><strong>Monarchist:</strong> 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><strong>Missionary:</strong> 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>PolitiScale is an initiative of <a href="http://www.radicalisees-sur-internet.fr">“Radicalisé·e·s sur Internet”</a> which is freely inspired by <a href="https://8values.github.io/">8values</a>.</p>
+
+<p>Interested by translating PolitiScales? Please visit our <a href="https://crowdin.com/project/politiscales">Crowdin project</a>.</p>
+</div>
+
+<script type="application/javascript" src="/flags.js"></script>
+<script type="application/javascript" src="/results.js"></script>
+</body>
+</html>
+

style.css

@@ -0,0 +1,443 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: calc(14px + 0.5vmin);
+  background-color: #ebebeb;
+}
+
+#header {
+  padding: 1em;
+  background-color: #500076;
+}
+
+#header h1 {
+  max-width: 640px;
+  margin: 0 auto;
+  font-weight: 600;
+}
+
+#header a {
+  color: white;
+  text-decoration: none;
+}
+
+#mainFrame {
+
+}
+
+#content {
+  padding: 3em 1em 1em;
+}
+
+#footer {
+  padding: 1em;
+  text-align: center;
+}
+
+hr {
+  border-top: #c5c5c5 0.2vmin solid;
+  margin-top: 4vmin;
+  margin-bottom: 5vmin;
+}
+
+a {
+  color: black;
+  text-decoration: underline;
+}
+
+h2 {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+h3 {
+  max-width: 640px;
+  margin: 0 auto;
+  font-size: calc(16px + 1vmin);
+  font-weight: 500;
+}
+
+.simpleText {
+  max-width: 640px;
+  margin: 1em auto 2em;
+}
+
+.ltr {
+  text-align: left;
+}
+.rtl {
+  text-align: right;
+}
+
+.shareText {
+  margin-top: 5vmin;
+  margin-bottom: 5vmin;
+  text-align: center;
+  text-justify: inter-word;
+  font-size: 2vmin;
+  padding-left: 2vmin;
+  padding-right: 2vmin;
+}
+
+.columnContainer {
+  position: relative;
+}
+.columnLeft {
+  float: left;
+  width: 100%;
+}
+.columnRight {
+  float: left;
+  width: 100%;
+  margin-bottom: 4vmin;
+}
+@media screen and (min-width: 80em) {
+  .columnLeft {
+    width: 50%;
+  }
+  .columnRight {
+    width: 50%;
+  }
+}
+
+.axisEnd {
+  display: inline-block;
+  width: 15vmin;
+  height: 15vmin;
+  vertical-align: middle;
+  z-index: 3;
+  position: relative;
+}
+.axisEnd > img {
+  width: 100%;
+  position: relative;
+  left: 5vmin;
+}
+.axisEndLeft > img {
+  left: 2vmin;
+}
+.axisEndRight > img {
+  left: -2vmin;
+}
+.axisProgress {
+  display: inline-block;
+  width: calc(100% - 30vmin);
+  height: 15vmin;
+  vertical-align: middle;
+}
+.axisSubProgress {
+  display: inline-block;
+  height: 5vmin;
+  margin-top: 5vmin;
+  color: white;
+  font-size: 3.2vmin;
+  box-shadow: 0vmin 0vmin 0.4vmin #222222;
+  z-index: 2;
+  position: relative;
+}
+.axisSubProgress span {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 1.1vmin;
+  padding-right: 1.1vmin;
+}
+
+.questionBox {
+  max-width: 640px;
+  min-height: 5em;
+  margin: 1em auto;
+}
+.description {
+  margin: 1.5em auto;
+  display: flex;
+  justify-content: center;
+}
+.descText,
+.descTextMono {
+  flex-grow: 1;
+  max-width: 640px;
+}
+.descText {
+  width: calc(100% - 30vmin);
+}
+.descTextMono {
+  align-self: center;
+}
+.descTextMono p {
+  margin: 0;
+}
+.descImg {
+  line-height: 0;
+}
+.descImg img {
+  width: 15vmin;
+  height: 15vmin;
+}
+
+.axisDesc {
+}
+.axisDescLeft,
+.axisDescRight {
+  width: 50%;
+  display: inline-block;
+  position: relative;
+  top: 4vmin;
+  z-index: 4;
+  font-size: 2.5vmin;
+}
+.axisDescLeft {
+  text-align: left;
+}
+.axisDescRight {
+  text-align: right;
+}
+.axisDescLeft p {
+  margin: 0;
+  margin-left: 16vmin;
+}
+.axisDescRight p {
+  margin: 0;
+  margin-right: 16vmin;
+}
+.axisNeutral {
+  background-color: #ebebeb;
+  color: black;
+  text-align: center;
+  z-index: 1;
+  position: relative;
+}
+.axisConstructivism {
+  background-color: #a425b6;
+  text-align: right;
+}
+.axisEssentialism {
+  background-color: #34b634;
+  text-align: left;
+}
+.axisInternationalism {
+  background-color: #3e6ffd;
+  text-align: right;
+}
+.axisNationalism {
+  background-color: #ff8500;
+  text-align: left;
+}
+.axisCommunism {
+  background-color: #cc0000;
+  text-align: right;
+}
+.axisCapitalism {
+  background-color: #ffb800;
+  text-align: left;
+}
+.axisProgressism {
+  background-color: #850083;
+  text-align: right;
+}
+.axisConservatism {
+  background-color: #970000;
+  text-align: left;
+}
+.axisEcology {
+  background-color: #a0e90d;
+  text-align: right;
+}
+.axisProductivism {
+  background-color: #4deae9;
+  text-align: left;
+}
+.axisLiberal {
+  background-color: #14bee1;
+  text-align: right;
+}
+.axisAuthoritarism {
+  background-color: #e6cc27;
+  text-align: left;
+}
+.axisRegulation {
+  background-color: #269b32;
+  text-align: right;
+}
+.axisLaissez {
+  background-color: #6608c0;
+  text-align: left;
+}
+.axisRevo {
+  background-color: #eb1a66;
+  text-align: right;
+}
+.axisRefo {
+  background-color: #0ee4c8;
+  text-align: left;
+}
+
+.bonusList {
+  text-align: center;
+}
+.bonus {
+  width: 15vmin;
+  height: 15vmin;
+}
+
+.navButtons {
+  margin: 0 auto 1em;
+  max-width: 400px;
+}
+
+.buttonQuestion,
+.button {
+  text-align: center;
+  width: 100%;
+  margin: 0.5em 0;
+  padding: 0.5em 0;
+  display: inline-block;
+  border: none;
+  border-radius: 3px;
+  text-decoration: none;
+  font-size: 18px;
+  transition: 0.5s;
+}
+.button:hover {
+  background-color: white;
+  color: #500076;
+}
+
+.button {
+  background-color: #500076;
+  color: white;
+}
+
+.buttonQuestion {
+  color: white;
+}
+
+.buttonLink {
+  background-color: #500076;
+  color: white;
+}
+.buttonLink:hover {
+  color: #500076;
+}
+.buttonLinkGood {
+  background-color: #0eb31a;
+  color: white;
+}
+.buttonLinkGood:hover {
+  background-color: #0eb31a;
+  color: white;
+}
+
+.flagDecoration {
+  text-align: center;
+}
+.flagDecoration canvas {
+  border: solid 1px grey;
+  max-width: 70vmin;
+}
+.generatedResultsDecorations {
+  text-align: center;
+}
+.generatedResultsDecorations canvas {
+  border: solid 1px grey;
+  max-width: 800px;
+  width: 100%;
+}
+#slogan {
+  margin: 1em 0;
+  font-size: 4vmin;
+}
+.urlToCopyContainer {
+  width: 100%;
+  text-align: center;
+}
+.urlToCopy {
+  max-width: 400px;
+  background-color: white;
+  display: inline-block;
+  padding: 0.5em;
+  margin: 1em;
+  z-index: 6;
+  border-radius: 3px;
+  word-break: break-all;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.scale {
+  font-family: Segoe UI, sans-serif;
+  display: flex;
+  width: 100%;
+  margin-bottom: 1em;
+}
+.scale .left,
+.scale .right {
+  width: 15vmin;
+  height: 15vmin;
+  position: relative;
+}
+.scale .left img,
+.scale .right img {
+  position: absolute;
+  top: 0;
+  width: 15vmin;
+  z-index: 2;
+}
+.scale .left img {
+  left: 2vmin;
+}
+.scale .right img {
+  right: 2vmin;
+}
+.scale .axis {
+  flex-grow: 1;
+}
+.scale .axis .label {
+  display: flex;
+  font-size: 2.5vmin;
+  height: 5vmin;
+  align-items: center;
+}
+.scale .axis .label .left-label,
+.scale .axis .label .right-label {
+  width: 50%;
+  margin: 0 0.5em;
+}
+.scale .axis .label .right-label {
+  text-align: right;
+}
+.scale .axis .axis-bar {
+  display: flex;
+  box-shadow: 0vmin 0vmin 0.4vmin #222;
+  height: 5vmin;
+}
+.scale .axis .axis-bar .axis-left,
+.scale .axis .axis-bar .axis-center,
+.scale .axis .axis-bar .axis-right {
+  font-size: 3.2vmin;
+}
+.scale .axis .axis-bar .axis-left,
+.scale .axis .axis-bar .axis-right {
+  color: white;
+}
+.scale .axis .axis-bar .axis-left span,
+.scale .axis .axis-bar .axis-right span {
+  padding: 0 1.1vmin;
+}
+.scale .axis .axis-bar .axis-left span,
+.scale .axis .axis-bar .axis-center span,
+.scale .axis .axis-bar .axis-right span {
+  vertical-align: middle;
+  }
+.scale .axis .axis-bar .axis-left {
+  text-align: right;
+}
+.scale .axis .axis-bar .axis-center {
+  text-align: center;
+  flex-grow: 1;
+}
+.scale .axis .axis-bar .axis-right {
+  
+}