-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1 lines (1 loc) · 16.6 KB
/
index.html
1
<!doctype html><html><head><link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto: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"><meta property="og:ttl" content="600"><meta property="og:site_name" content="notaquaheart.github.io/TransAxes/"><meta property="og:title" content="TransAxes"><meta property="og:type" content="website"><meta property="og:description" content="Test your attitudes on a multitude of issues commonly discussed in the trans community."><meta property="og:url" content="https://notaquaheart.github.io/TransAxes/"><meta property="og:image" content="https://notaquaheart.github.io/TransAxes/icons/icon.png"><meta property="og:image:width" content="512"><meta property="og:image:height" content="512"><meta name="theme-color" content="#55CDFC" data-react-helmet="true"><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:Roboto,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:Montserrat}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:Montserrat,sans-serif;text-align:center}h1{color:#222;font-size:72pt;line-height:72pt;margin-bottom:0;margin-top:0}h2{color:#333;font-size:34pt;line-height:36pt;margin-bottom:10pt;margin-top:12pt}h2,h3{font-family:Montserrat,sans-serif}h3{font-size:20pt;text-align:center}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:Montserrat,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:Montserrat;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:Montserrat,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:Montserrat,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:Montserrat,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}</style></head><body><script>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};t.d({},{T:()=>F,o:()=>_});const e=window.location.href.slice(0,window.location.href.lastIndexOf("/"));function n(t){var n=new XMLHttpRequest;return n.open("GET",e+"/json/"+t+".json",!1),n.send(null),JSON.parse(n.responseText)}function i(t){var n=new XMLHttpRequest;return n.open("HEAD",e+"/"+t,!1),n.send(null),200===n.status}function o(t,e){return e?t.right.icon?t.right.icon:i(`value_images/${t.id}_${e?1:0}.svg`)?`value_images/${t.id}_${e?1:0}.svg`:`value_images/${t.id}_${e?1:0}.png`:t.left.icon?t.left.icon:i(`value_images/${t.id}_${e?1:0}.svg`)?`value_images/${t.id}_${e?1:0}.svg`:`value_images/${t.id}_${e?1:0}.png`}const r=n("axes"),s=n("buttons"),a=n("questions"),l=n("general"),c=n("canvas"),d=`<style>${u="style",h=new XMLHttpRequest,h.open("GET",e+"/"+u+".css",!1),h.send(null),h.responseText}</style>`;var u,h,f={};for(const t of r)f[t.id]=0;for(const t of a)for(const e of r)f[e.id]+=Math.abs(t.effect[e.id]);const g=f;f={};for(const t of r)f[t.id]=0;const m=f;document.head.title=l.title;var b="";for(const t of r)b+='<div class="column">',b+=`<div class="axis_name quadcolumn">${t.name.toUpperCase()}</div>`,b+=`<a href="#anchor-${t.id}"><img src="${o(t,!1)}" class="quadcolumn"></a>`,b+=`<a href="#anchor-${t.id}"><img src="${o(t,!0)}" class="quadcolumn"></a>`,b+="</div>";var v="";for(const t of r)v+=`<div class="spacer"><div class="explanation_blurb_left" id="anchor-${t.id}"><p class="value"><b id="${t.left.name}_desc" style="color:${t.left.color};">${t.left.name.toUpperCase()}</b></p><p class="blurb-text">\n${t.left.description}\n</p></div><div class="explanation_axis">\n<p class="axis_name">${t.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 id="${t.right.name}_desc" style="color:${t.right.color};">${t.right.name.toUpperCase()}</b></p><p class="blurb-text">\n${t.right.description}\n</p></div></div>`;const p=`<a href="${l.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>${l.title}</h1>\n<h3 id="version">${l.version}</h3>\n<h3 id="twitterlink">by <a href="https://twitter.com/NotAquaHeart">@NotAquaHeart</a></h3>\n<hr/>\n<div class="center">\n${b}\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 ${l.title}?</h2>\n<p>${l.description}</p>\n<h2><a>${l.valQuestion}</a></h2>\n<p>${l.valDescription}</p>\n<div class="explanation_bg">\n${v}\n<br/>\n</div>\n<br>`,$=`<h1>${l.title}</h1>\n<h3 id="version">${l.version}</h3>\n<h3 id="twitterlink">by <a href="https://twitter.com/NotAquaHeart">@NotAquaHeart</a></h3>\n<hr />\n<h2 style="text-align: center">Instructions</h2>\n<p class="question">\n\tYou will be presented with ${a.length} statements. For each one, click the\n\tbutton with your opinion on it.\n</p>\n<button class="button" id="quizButton">Start test (Unshuffled)</button>\n<br />\n<button class="button" id="shuffleButton">Start test (Shuffled)</button>\n<br />\n<button class="button disagree" id="backButton">Back to menu</button>\n<br />`;var x="";for(const t of s)x+=`<button class="button" style="background-color:${t.color};" onMouseOver="this.style.backgroundColor='${t.focusColor}'" onMouseOut="this.style.backgroundColor='${t.color}'">${t.name}</button><br />`;const w=`<h1>${l.title}</h1>\n<h3 id="version">${l.version}</h3>\n<h3 id="twitterlink">by <a href="https://twitter.com/NotAquaHeart">@NotAquaHeart</a></h3>\n<hr />\n<h2 style="text-align: center" id="questionNumber">Loading...</h2>\n<p class="question" id="questionText"></p>\n${x}\n<button class="small_button" id="backQButton">Back</button>`;var k,y,C=0,T=[];function B(t=!1,e=!1){var n=t?a.sort((()=>.5-Math.random())):a;function i(){k.innerText=`Question ${C+1} of ${n.length}`,y.innerText=n[C].question}function o(t){T[C]={};for(const e of r)T[C][e.id]=n[C].effect[e.id]*s[t].modifier;C++,i()}function l(t=!1){var e=T[0];for(const t of r)e[t.id]=T.map((e=>e[t.id])).reduce(((t,e)=>t+e),0);var n=e;const i=t?m:g;for(const t in e)n[t]=(e[t]+i[t])/(.01*(i[t]+i[t]));location.search="?"+Object.values(n).map((t=>t.toFixed(1))).join(",")}document.body.innerHTML=w+d;let c=document.getElementsByClassName("button");for(let t=0;t<c.length;t++)c[t].addEventListener("click",(()=>{if(C+1<n.length)o(t);else{T[C]={};for(const e of r)T[C][e.id]=n[C].effect[e.id]*s[t].modifier;C++,l(e)}}));document.getElementById("backQButton").addEventListener("click",(()=>{C>0?(C--,i()):_(F.index)})),k=document.getElementById("questionNumber"),y=document.getElementById("questionText"),i()}function L(t){const e=["Neutral","Moderate","Strong","Extreme","Fanatic"];for(let n=0;n<e.length;n++)if(Math.abs(t-50)<n*(50/e.length)+10)return e[n];return""}function E(t,e){return L(t)+" "+("Neutral"!=L(t)?t>50?e.left.name:e.right.name:"")}function q(){const t=Object.fromEntries(location.href.split("?")[1].split(",").map(((t,e)=>[r[e].id,parseFloat(t)]))),e=function(t){var e=[];for(let s=0;s<r.length;s++)if(r[s].tiers){var n=0;for(let t=0;t<r[s].tiers.length;t++)n+=r[s]?.weights?.[t]??1;var i=0,o=[];for(let t=0;t<r[s].tiers.length;t++)i+=100/n*(r[s]?.weights?.[t]??1),o[t]=i;for(let n=0;n<o.length;n++)if(t[r[s].id]>50){if(100-t[r[s].id]<=o[n]||n===o.length-1){e[s]=r[s].tiers[n];break}}else if(t[r[s].id]<=o[n]||n===o.length-1){e[s]=r[s].tiers[r[s].tiers.length-n-1];break}}else e[s]=!1;return e}(t);document.body.innerHTML=function(t,e){var n="";for(let i=0;i<r.length;i++){const s=r[i],a=c.limit??30;n+=`<h2>${e[i]?`${s.name} Axis: ${e[i]}`:`${E(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]>a?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]>a?(100-t[s.id]).toFixed(1)+"%":""}</div></div><img src="${o(s,!0)}" height="128pt" /></div>`}return`<h1>${l.title}</h1>\n\t<h3 id="version">${l.version}</h3>\n<h3 id="twitterlink">by <a href="https://twitter.com/NotAquaHeart">@NotAquaHeart</a></h3>\n<hr />\n<h1 id="result-text">Results</h1>\n${n}\n<hr id="results-separator" />\n<canvas id="banner" width="800" height="${170+120*r.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 />`}(t,e)+d,document.getElementById("backButton").addEventListener("click",(()=>{location.search=""})),document.getElementById("downloadButton").addEventListener("click",(()=>{var t=document.createElement("a");t.download="result.png",t.href=document.getElementById("banner").toDataURL(),t.click()})),window.onload=()=>{!function(t,e){const n=-24;var i=document.getElementById("banner").getContext("2d"),s=i.createLinearGradient(0,0,0,170+120*r.length+n);s.addColorStop(0,"#D0F0FF"),s.addColorStop(.5,"#FFFFFF"),s.addColorStop(1,"#FFE0F6"),i.fillStyle=s,i.fillRect(0,0,800,170+120*r.length+n),i.fillStyle=c.fgColor,i.font="700 "+4e3/i.measureText(l.title).width+"px "+l.mainFont,i.textAlign="left",i.fillText(l.title,20,96),i.font="50px "+l.mainFont,i.textAlign="right",i.font="300 "+12e3/i.measureText(l.link).width+"px "+l.mainFont,i.fillText(l.link,780,42),i.fillText(l.version,780,72),r.forEach(((r,s)=>{const a=72,d=120*s+n,u=170+d,h=180+d-((c.barThickness??a)+2*(c.outlineThickness??4)-80)/2,f=184+d-((c.barThickness??a)-a)/2,g=237.5+d+((c.barThickness??a)-a)/4,m=175+d-((c.barThickness??a)+2*(c.outlineThickness??4)-80)/2;var b=new Image(200,200);b.onload=()=>{i.drawImage(b,20,u,100,100)},b.src=o(r,!1);var v=new Image(200,200);v.onload=()=>{i.drawImage(v,680,u,100,100)},v.src=o(r,!0),i.fillStyle=c.valColor??c.fgColor,i.fillRect(120,h,560,(c.barThickness??a)+2*(c.outlineThickness??4)),i.fillStyle=r.left.color,i.fillRect(120,f,5.6*t[r.id]-(c.outlineThickness??4)/2,c.barThickness??a),i.fillStyle=r.right.color,i.fillRect(120+5.6*t[r.id]+(c.outlineThickness??4)/2,f,5.6*(100-t[r.id])-(c.outlineThickness??4)/2,c.barThickness??a),i.fillStyle=c.valColor??c.fgColor,i.font=.625*(c.barThickness??a)+"px "+l.mainFont,i.textAlign="left",t[r.id]>(c.limit??30)&&i.fillText(t[r.id].toFixed(1)+"%",130,g),i.textAlign="right",100-t[r.id]>(c.limit??30)&&i.fillText((100-t[r.id]).toFixed(1)+"%",670,g),i.fillStyle=c.fgColor,i.font="300 24px "+l.mainFont,i.textAlign="center",i.fillText(e[s]?`${r.name} Axis: ${e[s]}`:`${E(t[r.id],r)}`,400,m-5)}))}(t,e)}}var F;function _(t){switch(t){case F.index:document.body.innerHTML=p+d,document.getElementById("instructionButton").addEventListener("click",(()=>{_(F.instructions)}));break;case F.instructions:document.body.innerHTML=$+d,document.getElementById("quizButton").addEventListener("click",(()=>{_(F.quiz)})),document.getElementById("backButton").addEventListener("click",(()=>{_(F.index)})),document.getElementById("shuffleButton").addEventListener("click",(()=>{B(!0)}));break;case F.quiz:B();break;case F.results:q()}}!function(t){t[t.index=0]="index",t[t.instructions=1]="instructions",t[t.quiz=2]="quiz",t[t.results=3]="results"}(F||(F={})),document.title=l.title,location.search?_(F.results):_(F.index)})();</script></body></html>