-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1 lines (1 loc) · 3.9 KB
/
index.html
1
<!DOCTYPE html><html lang="en-US"><head><title>4Orbs</title><link href="./style.css" rel="stylesheet" type="text/css"><link rel="icon" type="image/png" sizes="48x48" href="/4orbs/assets/icon-48px.png"><link rel="icon" type="image/png" sizes="96x96" href="/4orbs/assets/icon-96px.png"><link rel="icon" type="image/svg+xml" href="/4orbs/assets/icon.svg"><link rel="shortcut icon" type="image/svg+xml" href="/4orbs/assets/icon.svg"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="" data-react-helmet="true"><meta property="og:ttl" content="60"><meta property="og:type" content="website"><meta property="og:site_name" content="theghostofinky.github.io/4orbs"><meta property="og:url" content="https://theghostofinky.github.io/4orbs/"><meta property="og:description" content="A political quiz with your results in Orbs"><meta property="og:image" content="https://theghostofinky.github.io/4orbs/assets/icon-512px.png"><meta property="og:image:width" content="512"><meta property="og:image:height" content="512"></head><body><a class="github-corner" href="https://github.com/TheGhostOfInky/4Orbs" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="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 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" style="transform-origin:130px 106px;" class="octo-arm"/><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" class="octo-body"/></svg></a><h1>4Orbs</h1><div id="demo-holder"><img id="demo-canvas2"><img id="demo-canvas1"></div><a href="instructions.html"><button>Start the test</button></a><a href="custom.html"><button>Create your own custom results</button></a><h2>What is 4Orbs?</h2><p>4Orbs is a proof of concept of a new way to display the scores from 8values-style quizzes.</p><p>This version features questions from both 8values and NewValues.</p><p>Feel free to clone the source code on github and create your own version for different quizzes that use the same format.</p><h2>What if I don't like my results?</h2><p>All the questions in this test were made by the authors of 8values and NewValues, I suggest you forward any complaints to them.</p><script type="module">import{Orbs as t,cleanUrl as a,loadJson as s}from"./dist/commons.min.js";const e=new Promise((t=>{window.addEventListener("load",(()=>{t()}))})),[n,i]=await Promise.all([s("params"),e]),o=document.getElementById("demo-canvas1"),r=document.getElementById("demo-canvas2"),m=document.createElement("canvas"),d=new class extends t{hpars;constructor(t,s){super(t,s),this.hpars={title:document.title,url:a(window.location,"index"),version:this.quizParams.version,edition:"demo"}}blankFull(){this.ctx.fillStyle=this.params.bg,this.ctx.fillRect(0,0,this.params.width,this.params.height)}genRandom(){const t={};for(const a of this.quizParams.axes)t[a]=Math.floor(7*Math.random());return t}drawRandom(){return this.blankFull(),this.drawAll(this.hpars,this.genRandom())}}(m,n);async function l(){r.src=m.toDataURL("image/png"),o.classList.add("transparent"),await Promise.all([d.drawRandom(),new Promise((t=>setTimeout(t,1250)))]),o.src=m.toDataURL("image/png"),o.classList.remove("transparent")}await d.drawRandom(),l();setInterval(l,2500);</script></body></html>