-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 17.7 KB
/
index.html
1
<!doctype html><html><head><link href="https://fonts.googleapis.com/css?family=Andika:300,400,700|Andika:400,700" rel="stylesheet"><meta charset="utf-8"><title>values-common</title><link rel="icon" type="x-icon" href="icons/icon.png"><link rel="shortcut icon" type="x-icon" href="icons/icon.png"><style>html{background-color:#bbb;padding:0;scroll-behavior:smooth}body{background-color:#ddd;border-bottom-color:#eee;border-bottom-width:20px;border-left:20px solid #eee;border-right:20px solid #eee;border-top-color:#eee;border-top-width:20px;margin:0 auto;min-height:calc(100vh - 4em);padding:2em;width:80%}p{color:#444;font-family:Andika,sans-serif;font-size:18.5pt;line-height:1.15;margin:4pt}p.value{font-size:24pt;letter-spacing:.03em;line-height:2.11666656px;margin-bottom:22px;margin-left:20pt;margin-top:22px;text-indent:-16pt}p.axis_name,p.value{font-family:Andika}p.axis_name{color:#333;font-size:19pt;margin-top:50px}p.question{align-items:center;background-color:#eee;border-radius:16pt;color:#333;display:flex;font-size:36pt;font-weight:400;justify-content:center;margin:16pt auto;min-height:144pt;min-width:500pt;padding:16pt;width:70%}h1,p.question{font-family:Andika,sans-serif;text-align:center}h1{color:#222;font-size:72pt;line-height:72pt;margin-bottom:0;margin-top:0}h2{color:#333;font-family:Andika,sans-serif;font-size:34pt;line-height:36pt;margin-bottom:10pt;margin-top:12pt}li{font-size:16pt;text-indent:16pt}a{font-family:inherit}div.center{align-items:center;background-color:#eee;border-radius:8pt;color:#fff;display:flex;flex-flow:row wrap;font-family:Andika,sans-serif;font-size:24pt;justify-content:center;margin:auto;min-width:488pt;padding:6pt;text-align:center;text-decoration:none;width:calc(100% - 2rem)}.column{display:block;max-width:11rem;padding:6pt;width:22%}.quadcolumn{display:block;width:100%!important}img.quadcolumn:first-of-type{padding-bottom:6pt}img.quadcolumn:hover{transform:scale(1.05)}div.axis_name{color:#333;font-family:Andika;font-size:19pt;padding-bottom:8.65pt}.spacer{display:flex}.spacer>div{display:inline-block;*display:inline;margin-top:10px;text-align:center}.button{background-color:#2196f3;border:none;border-radius:8pt;color:#fff;cursor:pointer;display:block;font-family:Andika,sans-serif;font-size:24pt;margin:-2px auto;min-width:500pt;padding:8pt;text-align:center;text-decoration:none;width:50%}.button:focus,.button:hover{background:#1687e0}.small_button,.small_button_off{background-color:#333;border:none;border-radius:8pt;color:#fff;cursor:pointer;display:block;font-family:Andika,sans-serif;font-size:18pt;margin:-2px auto;min-width:100pt;padding:8pt;text-align:center;text-decoration:none;width:10%}.small_button:focus,.small_button:hover{background:#222}.small_button_off{background-color:#ddd;border:2px solid #888;color:#888;cursor:not-allowed;margin:-4px auto}.arrow{height:auto;width:60%!important}div.explanation_blurb_left,div.explanation_blurb_right{margin-left:1%;margin-right:1%;vertical-align:top;width:37%}div.explanation_axis{vertical-align:top;width:20.9%}div.axis{align-items:center;display:flex;justify-content:center;width:100%}div.bar{background-color:#eee;border-bottom:4px solid #222;border-left-color:#222;border-left-width:4px;border-right-color:#222;border-right-width:1px;border-top:4px solid #222;display:block;height:36pt;line-height:36pt;margin-bottom:4pt;margin-top:4pt;padding:8pt}div.text-wrapper{color:#222;display:inline-block;font-family:Andika,sans-serif;font-size:36pt;line-height:36pt}span.weight-300{font-weight:300}.explanation_bg{background-color:#eee;border-radius:25px;margin-top:15px}#banner{border:2px solid #444;border-radius:8pt;display:block;margin:8pt auto}#downloadButton{color:#444;display:block;height:3rem;margin-left:auto;margin-right:auto;width:3rem}@media (prefers-color-scheme:dark){body{background-color:#141414;border-color:#000}html{background-color:#505050}div.axis_name,h1,h2,p.axis_name{color:#fff}.blurb-text,.question,p{color:silver}.button,.small_button,.small_button_off{border:8px solid #080808}.explanation_bg,.spacer,div.center{background-color:#080808}.bar{border-color:#000}p.question{background-color:#000;border:8px solid #080808;color:#fff}.text-wrapper{color:#000}.small_button:focus,.small_button:hover{background:#000}}</style></head><body><script>(()=>{"use strict";var t={d:(n,e)=>{for(var i in e)t.o(e,i)&&!t.o(n,i)&&Object.defineProperty(n,i,{enumerable:!0,get:e[i]})},o:(t,n)=>Object.prototype.hasOwnProperty.call(t,n)};t.d({},{T:()=>tt,o:()=>nt});var n=window.location.href.slice(0,window.location.href.lastIndexOf("/"));function e(t){var e=new XMLHttpRequest;return e.open("GET",n+"/json/"+t+".json",!1),e.send(null),JSON.parse(e.responseText)}function i(t){var e=new XMLHttpRequest;return e.open("HEAD",n+"/"+t,!1),e.send(null),200===e.status}function o(t,n){return n?t.right.icon?t.right.icon:i("value_images/"+t.id+"_"+(n?1:0)+".svg")?"value_images/"+t.id+"_"+(n?1:0)+".svg":"value_images/"+t.id+"_"+(n?1:0)+".png":t.left.icon?t.left.icon:i("value_images/"+t.id+"_"+(n?1:0)+".svg")?"value_images/"+t.id+"_"+(n?1:0)+".svg":"value_images/"+t.id+"_"+(n?1:0)+".png"}for(var l,r,a=e("axes"),s=e("buttons"),d=e("questions"),c=!!i("json/questions_short.json")&&e("questions_short"),u=e("general"),h=e("ideologies"),f=e("canvas"),v="<style>"+(l="style",(r=new XMLHttpRequest).open("GET",n+"/"+l+".css",!1),r.send(null),r.responseText+"</style>"),g={},m=0,b=a;m<b.length;m++){g[(q=b[m]).id]=0}for(var p=0,x=d;p<x.length;p++)for(var w=x[p],y=0,k=a;y<k.length;y++){g[(q=k[y]).id]+=Math.abs(w.effect[q.id])}for(var C=g,T=(g={},0),B=a;T<B.length;T++){g[(q=B[T]).id]=0}for(var E=0,L=c;E<L.length;E++){w=L[E];for(var M=0,_=a;M<_.length;M++){var q;g[(q=_[M]).id]+=Math.abs(w.effect[q.id])}}var I=g;document.head.title=u.title;for(var S="",F=0,H=a;F<H.length;F++){S+='<div class="column">',S+='<div class="axis_name quadcolumn">'+(V=H[F]).name.toUpperCase()+"</div>",S+='<a href="#anchor-'+V.id+'"><img src="'+o(V,!1)+'" class="quadcolumn"></a>',S+='<a href="#anchor-'+V.id+'"><img src="'+o(V,!0)+'" class="quadcolumn"></a>',S+="</div>"}for(var O="",R=0,j=a;R<j.length;R++){var V;O+='<div class="spacer"><div class="explanation_blurb_left" id="anchor-'+(V=j[R]).id+'"><p class="value"><b style="color:'+V.left.color+';">'+V.left.name.toUpperCase()+'</b></p><p class="blurb-text">\n'+V.left.description+'\n</p></div><div class="explanation_axis">\n<p class="axis_name">'+V.name.toUpperCase()+'</p>\n<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"\n"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">\n\n<svg xmlns="http://www.w3.org/2000/svg"\nwidth="71.2522mm" height="21.8695mm"\nviewBox="0 0 202 62" class="arrow">\n<path id="Selection"\nfill="#333333" stroke-width="1"\nd="M 24.00,36.00\nC 24.00,36.00 36.00,45.29 36.00,45.29\n38.83,47.31 46.16,51.96 47.16,55.17\n48.60,59.83 43.62,61.44 40.00,60.70\n36.61,60.00 31.85,56.22 29.00,54.12\n29.00,54.12 10.00,40.13 10.00,40.13\n7.38,38.16 1.63,34.60 1.63,31.00\n1.63,27.40 7.38,23.84 10.00,21.87\n10.00,21.87 29.00,7.88 29.00,7.88\n31.85,5.78 36.61,2.00 40.00,1.30\n43.62,0.56 48.60,2.17 47.16,6.83\n46.16,10.04 38.83,14.69 36.00,16.71\n36.00,16.71 24.00,26.00 24.00,26.00\n24.00,26.00 178.00,26.00 178.00,26.00\n178.00,26.00 166.00,16.71 166.00,16.71\n163.17,14.69 155.84,10.04 154.84,6.83\n153.40,2.17 158.38,0.56 162.00,1.30\n165.39,2.00 170.15,5.78 173.00,7.88\n173.00,7.88 192.00,21.87 192.00,21.87\n194.62,23.84 200.37,27.40 200.37,31.00\n200.37,34.60 194.62,38.16 192.00,40.13\n192.00,40.13 173.00,54.12 173.00,54.12\n170.15,56.22 165.39,60.00 162.00,60.70\n158.38,61.44 153.40,59.83 154.84,55.17\n155.84,51.96 163.17,47.31 166.00,45.29\n166.00,45.29 178.00,36.00 178.00,36.00\n178.00,36.00 24.00,36.00 24.00,36.00 Z" />\n</svg>\n\n</div><div class="explanation_blurb_right"><p class="value"><b style="color:'+V.right.color+';">'+V.right.name.toUpperCase()+'</b></p><p class="blurb-text">\n'+V.right.description+"\n</p></div></div>"}for(var A='<a href="'+u.github+'" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>\n<h1>'+u.title+'</h1>\n<hr>\n<div class="center">\n'+S+'\n</div>\n<br>\n<button class="button" id="instructionButton";" style="font-size:36pt;">Click here to start!</button>\n<br><hr>\n<h2>What is '+u.title+"?</h2>\n<p>"+u.description+"</p>\n<h2><a>"+u.valQuestion+"</a></h2>\n<p>"+u.valDescription+'</p>\n<div class="explanation_bg">\n'+O+"\n<br/>\n</div>\n<br>",D="<h1>"+u.title+'</h1>\n<hr />\n<h2 style="text-align: center">Instructions</h2>\n<p class="question">\n\tYou will be presented with '+d.length+' statements. For each one, click the\n\tbutton with your opinion on it.\n</p>\n<button class="button" id="quizButton">Got it!</button>\n<br />\n<button class="button" id="shuffleButton">Shuffled</button>\n<br />\n'+(c?'<button class="button" id="shortButton">Short Version</button>\n<br />\n<button class="button" id="shortShuffleButton">Short Shuffled</button>\n<br />':"")+'\n<button class="button disagree" id="backButton">\n\tWait, nevermind!\n</button>\n<br />',z="",N=0,U=s;N<U.length;N++){var G=U[N];z+='<button class="button" style="background-color:'+G.color+';" onMouseOver="this.style.backgroundColor=\''+G.focusColor+"'\" onMouseOut=\"this.style.backgroundColor='"+G.color+"'\">"+G.name+"</button><br />"}var P,Q,Z="<h1>"+u.title+'</h1>\n<hr />\n<h2 style="text-align: center" id="questionNumber">Loading...</h2>\n<p class="question" id="questionText"></p>\n'+z+'\n<button class="small_button" id="backQButton">Back</button>',W=0,X=[];function Y(t,n){void 0===t&&(t=!1),void 0===n&&(n=!1);var e=n?t?c.sort((function(){return.5-Math.random()})):c:t?d.sort((function(){return.5-Math.random()})):d;function i(){P.innerText="Question "+(W+1)+" of "+e.length,Q.innerText=e[W].question}document.body.innerHTML=Z+v;for(var o=document.getElementsByClassName("button"),l=function(t){o[t].addEventListener("click",(function(){if(W+1<e.length)!function(t){X[W]={};for(var n=0,o=a;n<o.length;n++){var l=o[n];X[W][l.id]=e[W].effect[l.id]*s[t].modifier}W++,i()}(t);else{X[W]={};for(var o=0,l=a;o<l.length;o++){var r=l[o];X[W][r.id]=e[W].effect[r.id]*s[t].modifier}W++,function(t){void 0===t&&(t=!1);for(var n=X[0],e=function(t){n[t.id]=X.map((function(n){return n[t.id]})).reduce((function(t,n){return t+n}),0)},i=0,o=a;i<o.length;i++)e(o[i]);var l=n,r=t?I:C;for(var s in n)l[s]=(n[s]+r[s])/(.01*(r[s]+r[s]));location.search="?"+Object.values(l).map((function(t){return t.toFixed(1)})).join(",")}(n)}}))},r=0;r<o.length;r++)l(r);document.getElementById("backQButton").addEventListener("click",(function(){W>0?(W--,i()):nt(tt.index)})),P=document.getElementById("questionNumber"),Q=document.getElementById("questionText"),i()}function J(t){for(var n=["Neutral","Moderate","Strong","Extreme","Fanatic"],e=0;e<n.length;e++)if(Math.abs(t-50)<e*(50/n.length)+10)return n[e];return""}function K(t,n){return J(t)+" "+("Neutral"!=J(t)?t>50?n.left.name:n.right.name:"")}function $(){var t,n=Object.fromEntries(location.href.split("?")[1].split(",").map((function(t,n){return[a[n].id,parseFloat(t)]}))),e=(t=n,h[h.map((function(n,e){var i={},o=function(e){i[e]=Math.abs(n.stats[e]-t[e])*(a.find((function(t){return t.id===e})).weight?a.find((function(t){return t.id===e})).weight:1)};for(var l in t)o(l);return[e,Object.values(i).reduce((function(t,n){return t+n}))]})).sort((function(t,n){return t[1]-n[1]}))[0][0]]),i=function(t){for(var n,e,i,o,l,r,s=[],d=0;d<a.length;d++)if(a[d].tiers){for(var c=0,u=0;u<a[d].tiers.length;u++)c+=null!==(i=null===(e=null===(n=a[d])||void 0===n?void 0:n.weights)||void 0===e?void 0:e[u])&&void 0!==i?i:1;var h=0,f=[];for(u=0;u<a[d].tiers.length;u++)h+=100/c*(null!==(r=null===(l=null===(o=a[d])||void 0===o?void 0:o.weights)||void 0===l?void 0:l[u])&&void 0!==r?r:1),f[u]=h;for(u=0;u<f.length;u++)if(t[a[d].id]>50){if(100-t[a[d].id]<=f[u]||u===f.length-1){s[d]=a[d].tiers[u];break}}else if(t[a[d].id]<=f[u]||u===f.length-1){s[d]=a[d].tiers[a[d].tiers.length-u-1];break}}else s[d]=!1;return s}(n);document.body.innerHTML=function(t,n,e){for(var i,l="",r=0;r<a.length;r++){var s=a[r],d=null!==(i=f.limit)&&void 0!==i?i:30;l+="<h2>"+(e[r]?s.name+" Axis: "+e[r]:""+K(t[s.id],s))+'<span class="weight-300" id="economic-label"></span></h2><div class="axis"><img src="'+o(s,!1)+'" height="128pt" /><div style="background-color:'+s.left.color+";border-right-style:solid;text-align:left;width:"+t[s.id]+'%" class="bar"><div class="text-wrapper">'+(t[s.id]>d?t[s.id].toFixed(1)+"%":"")+'</div></div><div style="background-color:'+s.right.color+";border-left-style:solid;text-align:right;width:"+(100-t[s.id])+'%" class="bar"><div class="text-wrapper">'+(100-t[s.id]>d?(100-t[s.id]).toFixed(1)+"%":"")+'</div></div><img src="'+o(s,!0)+'" height="128pt" /></div>'}return"<h1>"+u.title+"</h1>\n<hr />\n<h1>Results</h1>\n"+l+"\n<h2>Closest Match: "+n.name+'</h2>\n<hr />\n<canvas id="banner" width="800" height="'+(170+120*a.length-18-6)+'"></canvas>\n<div id="downloadButton"><svg viewBox="0 0 24 24">\n\t<path fill="currentColor" d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 15L17.55 9.54L16.13 8.13L13 11.25V2H11V11.25L7.88 8.13L6.46 9.55L12 15Z" />\n</svg></div>\n<button class="button" id="backButton">Back</button>\n<br />'}(n,e,i)+v,document.getElementById("backButton").addEventListener("click",(function(){location.search=""})),document.getElementById("downloadButton").addEventListener("click",(function(){var t=document.createElement("a");t.download="result.png",t.href=document.getElementById("banner").toDataURL(),t.click()})),window.onload=function(){!function(t,n,e){var i=-24,l=document.getElementById("banner").getContext("2d");l.fillStyle=f.bgColor,l.fillRect(0,0,800,170+120*a.length+i),l.fillStyle=f.fgColor,l.font="700 "+4e3/l.measureText(u.title).width+"px "+u.mainFont,l.textAlign="left",l.fillText(u.title,20,66),l.font="50px "+u.mainFont,l.fillText(n.name,20,116),l.textAlign="right",l.font="300 "+12e3/l.measureText(u.link).width+"px "+u.mainFont,l.fillText(u.link,780,42),l.fillText(u.version,780,72),a.forEach((function(n,r){var a,s,d,c,h,v,g,m,b,p,x,w,y,k,C,T,B,E,L=72,M=120*r+i,_=170+M,q=180+M-((null!==(a=f.barThickness)&&void 0!==a?a:L)+2*(null!==(s=f.outlineThickness)&&void 0!==s?s:4)-80)/2,I=184+M-((null!==(d=f.barThickness)&&void 0!==d?d:L)-L)/2,S=237.5+M+((null!==(c=f.barThickness)&&void 0!==c?c:L)-L)/4,F=175+M-((null!==(h=f.barThickness)&&void 0!==h?h:L)+2*(null!==(v=f.outlineThickness)&&void 0!==v?v:4)-80)/2,H=new Image(200,200);H.onload=function(){l.drawImage(H,20,_,100,100)},H.src=o(n,!1);var O=new Image(200,200);O.onload=function(){l.drawImage(O,680,_,100,100)},O.src=o(n,!0),l.fillStyle=null!==(g=f.valColor)&&void 0!==g?g:f.fgColor,l.fillRect(120,q,560,(null!==(m=f.barThickness)&&void 0!==m?m:L)+2*(null!==(b=f.outlineThickness)&&void 0!==b?b:4)),l.fillStyle=n.left.color,l.fillRect(120,I,5.6*t[n.id]-(null!==(p=f.outlineThickness)&&void 0!==p?p:4)/2,null!==(x=f.barThickness)&&void 0!==x?x:L),l.fillStyle=n.right.color,l.fillRect(120+5.6*t[n.id]+(null!==(w=f.outlineThickness)&&void 0!==w?w:4)/2,I,5.6*(100-t[n.id])-(null!==(y=f.outlineThickness)&&void 0!==y?y:4)/2,null!==(k=f.barThickness)&&void 0!==k?k:L),l.fillStyle=null!==(C=f.valColor)&&void 0!==C?C:f.fgColor,l.font=.625*(null!==(T=f.barThickness)&&void 0!==T?T:L)+"px "+u.mainFont,l.textAlign="left",t[n.id]>(null!==(B=f.limit)&&void 0!==B?B:30)&&l.fillText(t[n.id].toFixed(1)+"%",130,S),l.textAlign="right",100-t[n.id]>(null!==(E=f.limit)&&void 0!==E?E:30)&&l.fillText((100-t[n.id]).toFixed(1)+"%",670,S),l.fillStyle=f.fgColor,l.font="300 30px "+u.mainFont,l.textAlign="center",l.fillText(e[r]?n.name+" Axis: "+e[r]:""+K(t[n.id],n),400,F)}))}(n,e,i)}}var tt;function nt(t){switch(t){case tt.index:document.body.innerHTML=A+v,document.getElementById("instructionButton").addEventListener("click",(function(){nt(tt.instructions)}));break;case tt.instructions:document.body.innerHTML=D+v,document.getElementById("quizButton").addEventListener("click",(function(){nt(tt.quiz)})),document.getElementById("backButton").addEventListener("click",(function(){nt(tt.index)})),document.getElementById("shuffleButton").addEventListener("click",(function(){Y(!0)})),c&&(document.getElementById("shortButton").addEventListener("click",(function(){Y(!1,!0)})),document.getElementById("shortShuffleButton").addEventListener("click",(function(){Y(!0,!0)})));break;case tt.quiz:Y();break;case tt.results:$()}}!function(t){t[t.index=0]="index",t[t.instructions=1]="instructions",t[t.quiz=2]="quiz",t[t.results=3]="results"}(tt||(tt={})),document.title=u.title,location.search?nt(tt.results):nt(tt.index)})();</script></body></html>