forked from Deyvid777/dozenvalues
-
Notifications
You must be signed in to change notification settings - Fork 0
/
results.html
1 lines (1 loc) · 6.59 KB
/
results.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Dozenvalues</title><link rel="shortcut icon" href="./assets/icon.png" type="image/x-icon"><link href="./assets/icon.png" type="image/x-icon"><meta property="og:title" content="Dozenvalues"><meta property="og:image" content="https://quark88.github.io/dozenvalues/assets/icon.png"><meta property="og:url" content="https://quark88.github.io/dozenvalues"><meta property="og:type" content="Political test"><meta property="og:locale" content="en_US"><meta property="og:description" content="DozenValues is a political test that aims to map differing political perspectives onto six axes."><link rel="stylesheet" href="./dist/style.css"></head><body> <h1 id="title"></h1><h2 id="pagename"></h2><div id="axisholder"></div><h2 id="score1"></h2><h3 id="score2"></h3><p id="desc"></p><h2 id="simple_results"></h2><canvas id="results1"></canvas><button id="download1"><svg viewBox="0 0 24 24"><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" /></svg></button><h2 id="advanced_results"></h2><canvas id="results2"></canvas><button id="download2"><svg viewBox="0 0 24 24"><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" /></svg></button><div class="small-button-holder"><button class="small-button" id="matches_button"></button><button class="small-button" id="lister_button"></button><button class="small-button" id="questions_button"></button></div><button id="back_button"></button><script type="application/javascript">window.VERSION = "5.0.0"</script><script type="module">import{getJson as t,getLanguage as e,Canvas as n,matchAxisTier as s,orderScores as o}from"./dist/common.js";const l=new URLSearchParams(document.location.search);let i=l.get("lang")??"en";const a=e(i);i=a.lang??i;const c=(l.get("score")??"50,50,50,50,50,50").split(",").map((t=>{const e=parseFloat(t);return Number.isNaN(e)||!Number.isFinite(e)?50:Math.max(Math.min(e,100),0)}));if(c.length<6)throw alert("Invalid result"),new Error("Missing scores");l.get("send");const r=document.getElementById("results1"),d=document.getElementById("results2"),h=window.matchMedia?.("(prefers-color-scheme: dark)").matches,[m,x]=h?["#202020","#fff"]:["#e0e0e0","#000"],u=new n(r,800,880,a.font.text_font,a.font.title_font,x,m),f=new class{canvas;ctx;font;titleFont;bgColor;fgColor;images=["econ","stat","cult"];constructor(t,e,n,s,o,l,i){this.canvas=t,this.canvas.width=e,this.canvas.height=n,this.ctx=this.canvas.getContext("2d"),this.font=s,this.titleFont=o,this.fgColor=l,this.bgColor=i,this.ctx.fillStyle=this.bgColor,this.ctx.fillRect(0,0,e,n)}drawImages(){this.images.forEach(((t,e)=>{const n=new Image;n.src="./assets/"+t+"compass.svg",n.addEventListener("load",(()=>this.ctx.drawImage(n,250*(e+1&2),500*(e+1&1),500,500)))}))}setFontsize(t){this.ctx.font=t.toFixed(0)+"px "+this.font}drawBorders(){this.ctx.fillStyle="black";for(let t=0;t<3;t++)this.ctx.fillRect(0,496*t,1e3,8),this.ctx.fillRect(496*t,0,8,1e3)}drawheader(t,e){this.ctx.fillStyle=this.fgColor,this.ctx.font="64px "+this.titleFont,this.ctx.fillText(t,16,64,480),this.setFontsize(32);for(let t=0;t<3;t++){const n=`${t+1}. ${e[t].name}`;this.ctx.fillText(n,16,112+40*t)}}drawAxis(t,e,n,s){this.ctx.fillStyle=this.fgColor,this.setFontsize(24);let o="";o+=e>=50?e.toFixed(1)+" "+n.leftvalue.name:(100-e).toFixed(1)+" "+n.rightvalue.name,o+=` (${s})`,this.ctx.fillText(o,16,240+48*t)}drawDot(t,e,n){e=4.64*(100-e)+18,n=4.64*(100-n)+18,e+=250*(2&t),n+=500*(1&t),this.ctx.fillStyle="white",this.ctx.lineWidth=4,this.ctx.beginPath(),this.ctx.arc(e,n,12,0,2*Math.PI),this.ctx.fill(),this.ctx.stroke()}}(d,1e3,1e3,a.font.text_font,a.font.title_font,x,m);f.drawImages();const g=a.resultstext.version_name+": "+window.VERSION,w=t("ideologies-"+i),p=o(c,[1,.9,1,.6,.6,.7],w);for(const t of Object.keys(a.resultstext.text))document.getElementById(t).textContent=a.resultstext.text[t];document.title=a.resultstext.text.title;document.getElementById("score1").textContent=`${a.resultstext.closest_match}: ${p[0].name}`;const v=document.getElementById("score2");v.textContent=a.resultstext.next_matches+": ";let y=Array();for(let t=1;t<5;t++)y.push(p[t].name);v.textContent+=y.join(", ");document.getElementById("desc").textContent=p[0].desc;document.getElementById("back_button").addEventListener("click",(()=>window.location.href="index.html?lang="+i));document.getElementById("lister_button").addEventListener("click",(()=>window.location.href="lister.html?lang="+i+"&score="+c.map((t=>t.toFixed(1))).join(",")));document.getElementById("questions_button").addEventListener("click",(()=>window.location.href=`questions.html?lang=${i}`));document.getElementById("matches_button").addEventListener("click",(()=>{window.location.href="matches.html?lang="+i+"&ideo="+btoa(p[0].name)}));for(let t=1;t<3;t++){document.getElementById("download"+t.toFixed()).addEventListener("click",(()=>{const e=document.createElement("a");e.download="dv.png";const n=document.getElementById("results"+t.toFixed());e.href=n.toDataURL("image/png"),e.click()}))}const E=document.getElementById("axisholder");let C=Array();a.axes.forEach(((t,e)=>{const n=s(c[e],t.tiers);let o;o=a.resultstext.axis_name_before?`${a.resultstext.axis_name} ${t.axisname}: ${n}`:`${t.axisname} ${a.resultstext.axis_name}: ${n}`,C.push(o);const l=document.createElement("h2");l.textContent=o,E.appendChild(l);const i=document.createElement("div");i.className="axis";const r=new Image;r.src=t.leftvalue.icon;const d=new Image;d.src=t.rightvalue.icon;const h=(t,e,n)=>{const s=document.createElement("div");if(s.className="bar",s.style.backgroundColor=e,s.style.width=n.toFixed(1)+"%",t?(s.style.borderLeftStyle="solid",s.style.textAlign="right"):(s.style.borderRightStyle="solid",s.style.textAlign="left"),n>20){const t=document.createElement("div");t.className="text-wrapper",t.textContent=n.toFixed(1)+"%",s.appendChild(t)}return s};i.appendChild(r),i.appendChild(h(!1,t.leftvalue.color,c[e])),i.appendChild(h(!0,t.rightvalue.color,100-c[e])),i.appendChild(d),E.appendChild(i)})),window.onload=()=>{u.drawHeader(a.resultstext.text.title,"quark88.github.io/dozenvalues/",g,p[0].name),f.drawBorders(),f.drawheader(a.resultstext.text.title,p),a.axes.forEach(((t,e)=>{if(f.drawAxis(e,c[e],a.axes[e],C[e].split(": ")[1]),e%2==0){const t=Math.floor(e/2)+1,[n,s]=2===t?[c[e+1],c[e]]:[c[e],c[e+1]];f.drawDot(t,n,s)}const n=[t.leftvalue.icon,t.rightvalue.icon];u.drawImages(n,e);const s=[t.leftvalue.color,t.rightvalue.color];u.drawBar(e,s,c[e],C[e])}))};</script></body></html>