pi-agent
87ba1a010d
New daemons: Wolf, Dolphin, Spider, Tiger, Stag, Bear Rebalanced distribution so every daemon has a real chance to win Better HDM atmosphere throughout questions
254 lines
22 KiB
HTML
254 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>What Is Your Daemon? | A His Dark Materials Quiz</title>
|
|
<meta name="description" content="Discover the form of your daemon — your soul's eternal companion — through a quiz inspired by Philip Pullman's His Dark Materials.">
|
|
<meta property="og:title" content="What Is Your Daemon?">
|
|
<meta property="og:description" content="Discover the form of your daemon through a His Dark Materials quiz.">
|
|
<meta property="og:type" content="website">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
@keyframes aurora{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
|
@keyframes sym-pulse{0%,100%{filter:drop-shadow(0 0 6px rgba(200,160,60,.35));opacity:.75}50%{filter:drop-shadow(0 0 18px rgba(200,160,60,.8));opacity:1}}
|
|
@keyframes fade-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes ans-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes glow{0%,100%{box-shadow:0 0 12px rgba(200,160,60,.15),inset 0 0 4px rgba(200,160,60,.06)}50%{box-shadow:0 0 22px rgba(200,160,60,.28),inset 0 0 6px rgba(200,160,60,.1)}}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
body{min-height:100vh;font-family:'Cormorant Garamond',Georgia,serif;color:#e8e0d4;display:flex;align-items:center;justify-content:center;overflow-x:hidden;position:relative;background:radial-gradient(ellipse at 50% 0%,rgba(35,50,65,.5) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(20,25,30,.6) 0%,transparent 50%),#0a0d12}
|
|
body::before{content:'';position:fixed;inset:-40%;width:180%;height:180%;background:conic-gradient(from 0deg at 55% 40%,transparent 0deg,rgba(30,80,70,.07) 40deg,transparent 70deg,rgba(55,35,70,.06) 120deg,transparent 160deg,rgba(40,90,70,.05) 210deg,transparent 250deg,rgba(30,40,65,.06) 310deg,transparent 360deg);animation:aurora 45s linear infinite;pointer-events:none;z-index:0}
|
|
body::after{content:'';position:fixed;inset:0;opacity:.02;background-image:url("data:image/svg+xml,\x3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'\x3e\x3cfilter id='n'\x3e\x3cfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/\x3e\x3cfeColorMatrix values='.12 0 0 0 0 0 .12 0 0 0 0 0 .12 0 0 0 0 0 .3 0'/\x3e\x3c/filter\x3e\x3crect width='100%25' height='100%25' filter='url(%23n)'/\x3e\x3c/svg\x3e");background-size:120px 120px;pointer-events:none;z-index:0}
|
|
.container{position:relative;z-index:1;text-align:center;max-width:580px;width:92%;padding:2.4rem 1.6rem 3rem}
|
|
.symbol{display:block;width:78px;height:78px;margin:0 auto 1.2rem;animation:sym-pulse 3.2s ease-in-out infinite;fill:none;stroke:#c8a03c;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
|
|
h1{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:clamp(1.6rem,5vw,2.2rem);color:#c8a03c;letter-spacing:3px;margin-bottom:.6rem;text-shadow:0 0 24px rgba(200,160,60,.18)}
|
|
h2{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(1.1rem,3.5vw,1.35rem);color:#d9d0c4;letter-spacing:1px;margin-bottom:.3rem}
|
|
.subtitle{font-size:1.08rem;font-style:italic;color:#989088;line-height:1.7;margin-bottom:1.8rem}
|
|
h3{font-family:'Cinzel',serif;font-size:1.55rem;font-weight:700;color:#c8a03c;margin-bottom:.35rem;letter-spacing:1px}
|
|
.btn-start{display:inline-block;padding:.85rem 2.6rem;border:1.5px solid #c8a03c;border-radius:4px;background:transparent;color:#c8a03c;font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:2.5px;cursor:pointer;transition:all .3s ease;animation:glow 2.8s ease-in-out infinite}
|
|
.btn-start:hover{background:rgba(200,160,60,.08);color:#dfc05a;box-shadow:0 0 28px rgba(200,160,60,.32),inset 0 0 8px rgba(200,160,60,.08)}
|
|
.rule-line{width:60px;height:1.5px;background:linear-gradient(90deg,transparent,#c8a03c,transparent);margin:0 auto 1.1rem;border:none}
|
|
section{display:none}
|
|
section.active{display:block;animation:fade-in .55s ease-out}
|
|
.progress-container{margin-bottom:1.5rem}
|
|
.progress-text{font-family:'Cinzel',serif;font-size:.82rem;color:#6a6460;letter-spacing:2px;text-transform:uppercase;margin-bottom:.65rem}
|
|
.progress-bar{width:100%;height:3px;background:rgba(200,160,60,.12);border-radius:2px;overflow:hidden}
|
|
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#988430,#c8a03c);border-radius:2px;transition:width .5s ease}
|
|
.question-text{font-size:1.18rem;color:#d9d0c4;line-height:1.65;margin-bottom:1.6rem;font-style:italic;min-height:48px}
|
|
.answers{display:flex;flex-direction:column;gap:.7rem}
|
|
.answer-btn{display:block;width:100%;padding:.78rem 1.2rem;border:1px solid rgba(200,160,60,.22);border-radius:4px;background:rgba(200,160,60,.03);color:#d5cdc4;font-family:'Cormorant Garamond',serif;font-size:1.05rem;cursor:pointer;transition:all .25s ease;text-align:left;line-height:1.4;animation:ans-in .4s ease-out both}
|
|
.answer-btn:nth-child(1){animation-delay:.05s}.answer-btn:nth-child(2){animation-delay:.1s}.answer-btn:nth-child(3){animation-delay:.15s}.answer-btn:nth-child(4){animation-delay:.2s}
|
|
.answer-btn:hover{background:rgba(200,160,60,.10);border-color:#c8a03c;color:#f2eadc;transform:translateX(3px)}
|
|
.answer-btn.selected{background:rgba(200,160,60,.16);border-color:#c8a03c;color:#f5efe8;box-shadow:0 0 14px rgba(200,160,60,.2)}
|
|
.loading-content{padding:2rem 0}
|
|
.daemon-icon{font-size:4rem;margin-bottom:.6rem;line-height:1}
|
|
.daemon-quote{font-style:italic;font-size:1.02rem;color:#9a9490;margin-bottom:1.4rem;line-height:1.5}
|
|
.daemon-body{text-align:left;background:rgba(200,160,60,.04);border:1px solid rgba(200,160,60,.12);border-radius:5px;padding:1.2rem 1.4rem;margin-bottom:1.4rem;line-height:1.65}
|
|
.daemon-body p{margin-bottom:.8rem}.daemon-body p:last-child{margin-bottom:0}
|
|
.daemon-body strong{color:#c8a03c;font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase}
|
|
.btn-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
|
|
.btn-retake,.btn-share{padding:.62rem 1.6rem;border:1px solid rgba(200,160,60,.35);border-radius:4px;background:transparent;color:#b0a89c;font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:1.5px;cursor:pointer;transition:all .25s ease}
|
|
.btn-retake:hover,.btn-share:hover{border-color:#c8a03c;color:#c8a03c;background:rgba(200,160,60,.06)}
|
|
.copyright{margin-top:1.6rem;font-size:.78rem;color:#4a4642;letter-spacing:.5px}
|
|
@media(max-width:480px){.container{padding:1.6rem 1rem 2rem}.daemon-icon{font-size:3rem}h3{font-size:1.3rem}.btn-row{flex-direction:column;align-items:center}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<section id="sec-intro" class="active">
|
|
<svg class="symbol" viewBox="0 0 100 100" aria-hidden="true">
|
|
<circle cx="50" cy="50" r="46"/><circle cx="50" cy="50" r="36"/>
|
|
<circle cx="50" cy="50" r="8" fill="rgba(200,160,60,.15)"/>
|
|
<line x1="50" y1="4" x2="50" y2="18"/><line x1="50" y1="82" x2="50" y2="96"/>
|
|
<line x1="4" y1="50" x2="18" y2="50"/><line x1="82" y1="50" x2="96" y2="50"/>
|
|
<line x1="18" y1="18" x2="28" y2="28"/><line x1="72" y1="72" x2="82" y2="82"/>
|
|
<line x1="82" y1="18" x2="72" y2="28"/><line x1="28" y1="72" x2="18" y2="82"/>
|
|
<path d="M50 38 Q53 34 58 36 Q62 38 60 42 Q58 48 66 50 Q62 52 60 56 Q58 62 52 60 Q51 58 48 62 Q42 66 44 58 Q48 50 42 50 Q38 50 36 54 Q32 60 36 54 Q38 48 34 46 Q28 42 36 40 Q42 38 40 34 Q40 28 50 38Z" fill="none" stroke-width=".9" stroke="#c8a03c"/>
|
|
<circle cx="50" cy="50" r="2.2" fill="#c8a03c" opacity=".5"/>
|
|
</svg>
|
|
<h1>What Is Your Daemon?</h1>
|
|
<hr class="rule-line">
|
|
<p class="subtitle">In the world of <em>His Dark Materials</em>, every soul has a daemon — a living companion that is itself, yet separate, in a form of some creature. It takes its permanent shape at a certain time, reflecting all that you carry within.<br>Are you ready to discover yours?</p>
|
|
<button class="btn-start" onclick="startQuiz()">Begin</button>
|
|
</section>
|
|
|
|
<section id="sec-quiz">
|
|
<div class="progress-container">
|
|
<div class="progress-text" id="prog-text">Question 1 of 14</div>
|
|
<div class="progress-bar"><div class="progress-fill" id="prog-fill"></div></div>
|
|
</div>
|
|
<p class="question-text" id="q-text"></p>
|
|
<div class="answers" id="q-answers"></div>
|
|
</section>
|
|
|
|
<section id="sec-loading">
|
|
<svg class="symbol" viewBox="0 0 100 100" aria-hidden="true" style="animation:spin 3s linear infinite;stroke:#c8a03c">
|
|
<circle cx="50" cy="50" r="42" stroke-dasharray="8 6"/>
|
|
<circle cx="50" cy="50" r="28" stroke-dasharray="5 4"/>
|
|
<circle cx="50" cy="50" r="6" fill="rgba(200,160,60,.2)"/>
|
|
<line x1="50" y1="8" x2="50" y2="20"/><line x1="50" y1="80" x2="50" y2="92"/>
|
|
<line x1="8" y1="50" x2="20" y2="50"/><line x1="80" y1="50" x2="92" y2="50"/>
|
|
</svg>
|
|
<div class="loading-content"><h2 style="font-size:1rem">The alethiometer is reading...</h2></div>
|
|
</section>
|
|
|
|
<section id="sec-results">
|
|
<div class="daemon-icon" id="res-icon"></div>
|
|
<h3 id="res-name"></h3>
|
|
<hr class="rule-line">
|
|
<p class="daemon-quote" id="res-quote"></p>
|
|
<div class="daemon-body" id="res-body"></div>
|
|
<div class="btn-row">
|
|
<button class="btn-retake" onclick="retakeQuiz()">Retake Quiz</button>
|
|
<button class="btn-share" id="btn-share" onclick="shareResult()">Copy Result</button>
|
|
</div>
|
|
<p class="copyright">Inspired by <em>His Dark Materials</em> by Philip Pullman. This is a fan-made quiz, not affiliated with any official production.</p>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
var TOTAL=14;
|
|
var S={q:0,a:[],sc:{}};
|
|
var D={
|
|
lion:{form:"Lion",icon:"\u{1F981}",desc:"In His Dark Materials, only the most powerful spirits take this form. Iorek Byrnison, the greatest armoured bear, transforms into a lion — the form of ultimate authority.\nYou possess untamed strength and natural leadership. You are fiercely loyal to those you love and will protect them with everything you have. You feel most alive in the moment, embracing risk and living without regrets."},
|
|
eagle:{form:"Eagle",icon:"\u{1F985}",desc:"An eagle daemon belongs to one with a rare and soaring spirit. Billy the Eagle is one of only two daemons in bird form, and his bond with Roger is among the most devastating in all of His Dark Materials.\nYou see the world from a height others cannot reach. You notice patterns others miss and hold wisdom that comes from looking deeper. You value freedom above comfort and truth above lies."},
|
|
panther:{form:"Black Panther",icon:"\u{1F406}",desc:"Will Parry's daemon, Kirjnus, takes this form. Black panthers guard those who walk between shadows and light.\nYou are quietly powerful — not loud about your strength, but undeniable. You adapt to chaos and keep composure where others break. There is a mystery about you that others feel but cannot name. You trust only what you have seen with your own eyes."},
|
|
owl:{form:"Owl",icon:"\u{1F989}",desc:"The owl is a creature of the night, watching when others sleep. Birds as daemons are rare, and the owl among the rarest — a sign of one who carries ancient wisdom.\nYou are patient, observant, and never rush to judgment. Knowledge is power to you, and you seek to understand the world before acting upon it. Trust comes slowly from you, but when given, it is absolute."},
|
|
wolf:{form:"Wolf",icon:"\u{1F43A}",desc:"The wolf is the daemon of fierce loyalty and untamed grace. In the world of daemons it is a respected and ancient form, carrying the wildness of the northern wastes.\nYou are at your strongest beside the ones you love. You feel a deep, wordless bond with those who matter to you, and you would move mountains to keep them safe. There is a wildness in you that no discipline can tame — and no one should try."},
|
|
fox:{form:"Fox",icon:"\u{1F98A}",desc:"The fox is the daemon of the clever. Quick, adaptable, always one step ahead, a fox daemon belongs to those who navigate the world with intelligence and grace.\nYou are a survivor in the best sense — you observe, adapt, and find creative solutions where others see only walls. You value freedom and have deep respect for those who think for themselves."},
|
|
badger:{form:"Badger",icon:"\u{1F9A1}",desc:"John Faa's daemon, Stelmarra, is a badger. John is loyal, determined, and fiercely independent — and so is his daemon.\nYour strength is quiet resilience. You are self-reliant and deeply loyal, though you may struggle to ask for help. You carve your own path through the world with steady, unstoppable determination."},
|
|
snake:{form:"Snake",icon:"\u{1F40D}",desc:"In His Dark Materials, the snake is the daemon of metamorphosis. It sheds its skin and becomes something new — a sign of profound transformation.\nYou are in constant evolution, never the same person from one season to the next. You are comfortable with change because you ARE change. Those who know you see growth where others see instability."},
|
|
cat:{form:"Cat",icon:"\u{1F431}",desc:"The cat is an old and gentle daemon form. Squirrel, Lyra's daemon, begins shapeless before settling as a puss-cat named Panser. Cats are gentle creatures with deep inner strength.\nYou have a gentle heart with quiet fortitude. You are empathic and protective of those who matter to you, moving through the world with grace others may not consciously notice but always feel."},
|
|
dolphin:{form:"Dolphin",icon:"\u{1F42C}",desc:"Water daemons are uncommon. The dolphin carries the spirit of intelligence woven through joy — perceptive, free, and deeply connected to those around it.\nYou navigate life with fluidity and warmth. You connect deeply with others and have an uncanny ability to read the waters of a room. You bring light wherever you go, and your intelligence shines brightest when paired with compassion."},
|
|
spider:{form:"Spider",icon:"\u{1F577}\uFE0F",desc:"The spider is a rare and ancient daemon form. In the lore of the world, insects are uncommon daemons, but the spider is revered for its patience and the intricate webs of connection it spins.\nYou are methodical and perceptive, noticing threads others miss. You weave connections between people, ideas, and places that no one else can see. Your patience is your greatest weapon — you wait, and when you move, everything shifts."},
|
|
tiger:{form:"Tiger",icon:"\u{1F40F}",desc:"The tiger is beauty edged with danger — a daemon form that carries power without ever needing to announce it. Like the lion but solitary, moving through tall grass where others walk in open fields.\nYour strength is hidden in plain sight. You are elegant and intense, capable of great gentleness and great ferocity, often without warning. Those closest to you learn to respect the quiet moments — they are calm before power."},
|
|
stag:{form:"Stag",icon:"\u{1F986}",desc:"The stag carries an old nobility. Its horns are not merely for showing — they mark wisdom earned through seasons and journeys. As a daemon form it speaks of quiet majesty.\nThere is a natural dignity about you that draws others in. You lead not by demanding but by being. Beneath the calm exterior runs a deep and protective fire — you would stand for those who cannot stand for themselves."},
|
|
bear:{form:"Bear",icon:"\u{1F43B}",desc:"The bear is raw power from the earth and the tundra. Iorek Byrnison himself — armoured, legendary, patient — walks most of his life in bear form, saving the lion for only the deepest moments.\nYou are grounded, enduring, and quietly mighty. There is a hibernation to you: you can withdraw, gather strength, and then emerge with force that reshapes the landscape. You honour the old ways and the truths that do not change."}
|
|
};
|
|
var Q=[
|
|
{text:"What draws your attention most, when left to wander?",a:[
|
|
{text:"Mysteries that hide in layers of knowledge",d:"owl"},
|
|
{text:"The raw power of untamed things",d:"panther"},
|
|
{text:"Open horizons — what lies just where sight ends",d:"eagle"},
|
|
{text:"Shadows that move — something is watching back",d:"wolf"}]},
|
|
{text:"Your code, when the world offers none:",a:[
|
|
{text:"Truth, even when it cuts",d:"lion"},
|
|
{text:"Understanding — nothing should remain unknown",d:"owl"},
|
|
{text:"Independence above all",d:"badger"},
|
|
{text:"Cleverness — the sharpest mind wins",d:"fox"}]},
|
|
{text:"Something threatens those closest to you. What do you do?",a:[
|
|
{text:"Stand your ground. Face it head-on.",d:"lion"},
|
|
{text:"Study the threat, find its weakness, strike precisely",d:"tiger"},
|
|
{text:"Stand beside them, steady as stone",d:"wolf"},
|
|
{text:"You become their shield — fierce and protective",d:"cat"}]},
|
|
{text:"In a dim corridor, a faint sound comes from every direction. What pulls you?",a:[
|
|
{text:"A riddle you feel you were born to solve",d:"fox"},
|
|
{text:"A thread you sense connects everything here",d:"spider"},
|
|
{text:"The wild outdoors, somewhere without walls",d:"badger"},
|
|
{text:"Ancient knowledge waiting, locked behind a door",d:"owl"}]},
|
|
{text:"A person is being treated unjustly. What stirs in you first?",a:[
|
|
{text:"Conviction. You speak up, no matter the cost.",d:"lion"},
|
|
{text:"Curiosity — you need the full picture before judging",d:"owl"},
|
|
{text:"A deep, wordless urge to defend your pack",d:"wolf"},
|
|
{text:"A fierce desire to protect — to be their shield",d:"cat"}]},
|
|
{text:"You arrive in a strange new world. What is your first instinct?",a:[
|
|
{text:"Climb high — see the shape of the land before committing",d:"eagle"},
|
|
{text:"Follow the water. It always tells the truth.",d:"dolphin"},
|
|
{text:"Explore every shadow — danger and discovery hide side by side",d:"panther"},
|
|
{text:"Gather information, piece together the hidden threads",d:"spider"}]},
|
|
{text:"Which quality would you most want your daemon to embody?",a:[
|
|
{text:"Courage that never fades",d:"lion"},
|
|
{text:"Freedom that no cage can hold",d:"eagle"},
|
|
{text:"Metamorphosis — the power to change at will",d:"snake"},
|
|
{text:"Nobility — a quiet fire that commands respect",d:"stag"}]},
|
|
{text:"When you think about what you are, what word rises first?",a:[
|
|
{text:"Free",d:"eagle"},
|
|
{text:"Deep",d:"panther"},
|
|
{text:"Steady",d:"stag"},
|
|
{text:"Shrewd",d:"fox"}]},
|
|
{text:"Passage to another world is offered. What would you seek there?",a:[
|
|
{text:"Knowledge — how everything connects",d:"owl"},
|
|
{text:"A chance to prove yourself against the unknown",d:"lion"},
|
|
{text:"To become someone entirely new",d:"snake"},
|
|
{text:"Someone you love, waiting for you",d:"cat"}]},
|
|
{text:"You catch sight of yourself in still water. What do you notice?",a:[
|
|
{text:"A connection between things no one else sees",d:"spider"},
|
|
{text:"A quiet smile that hides deep strength",d:"bear"},
|
|
{text:"A wild, uncontainable energy",d:"wolf"},
|
|
{text:"A gentle demeanour with steel beneath",d:"dolphin"}]},
|
|
{text:"A storm is building. Others gather in fear. What do you feel?",a:[
|
|
{text:"Power — the storm is something to embrace",d:"tiger"},
|
|
{text:"Patience — storms pass. You weather them and gain.",d:"bear"},
|
|
{text:"A call to freedom, as if the sky is clearing a path",d:"stag"},
|
|
{text:"Excitement to test what you are made of",d:"panther"}]},
|
|
{text:"The alethiometer turns, and you are offered a secret. What kind?",a:[
|
|
{text:"A truth too old for words",d:"badger"},
|
|
{text:"A hidden thread between two separate things",d:"spider"},
|
|
{text:"Your own reflection, but changed",d:"snake"},
|
|
{text:"Warmth — you realise you are loved",d:"dolphin"}]},
|
|
{text:"Your daemon has been restless of late. What might it sense?",a:[
|
|
{text:"Something is about to change — the air vibrates with it",d:"snake"},
|
|
{text:"The open country is calling it",d:"wolf"},
|
|
{text:"A hidden power within you that has not yet awakened",d:"bear"},
|
|
{text:"Beautiful danger — something worth chasing",d:"tiger"}]},
|
|
{text:"The alethiometer shows you one final scene. What do you see?",a:[
|
|
{text:"A great library, its shelves stretching into eternity",d:"owl"},
|
|
{text:"A gentle light beside you — warm and enduring",d:"stag"},
|
|
{text:"Your shadow, moving as itself",d:"fox"},
|
|
{text:"A creature molting its old skin, reborn",d:"snake"}]}
|
|
];
|
|
function show(id){document.querySelectorAll("section").forEach(function(s){s.classList.remove("active")});document.getElementById(id).classList.add("active")}
|
|
function startQuiz(){S={q:0,a:[],sc:{}};for(var d in D)S.sc[d]=0;show("sec-quiz");renderQ()}
|
|
function renderQ(){
|
|
var q=Q[S.q];
|
|
document.getElementById("q-text").textContent=q.text;
|
|
document.getElementById("prog-fill").style.width=Math.round(S.q/TOTAL*100)+"%";
|
|
document.getElementById("prog-text").textContent="Question "+(S.q+1)+" of "+TOTAL;
|
|
var box=document.getElementById("q-answers");box.innerHTML="";
|
|
q.a.forEach(function(ans,i){
|
|
var btn=document.createElement("button");
|
|
btn.className="answer-btn";btn.textContent=ans.text;
|
|
btn.onclick=function(){pick(btn,ans.d)};
|
|
btn.style.animationDelay=(i*0.08)+"s";
|
|
box.appendChild(btn);
|
|
});
|
|
}
|
|
function pick(btn,d){
|
|
var box=document.getElementById("q-answers");
|
|
box.querySelectorAll(".answer-btn").forEach(function(b){b.style.pointerEvents="none"});
|
|
btn.classList.add("selected");
|
|
S.sc[d]=(S.sc[d]||0)+1;S.q++;
|
|
if(S.q>=TOTAL){document.getElementById("prog-fill").style.width="100%";setTimeout(calcRes,650)}
|
|
else{setTimeout(renderQ,500)}
|
|
}
|
|
function calcRes(){show("sec-loading");setTimeout(showRes,2200)}
|
|
function showRes(){
|
|
var best=null,top=0;
|
|
for(var d in S.sc){if(S.sc[d]>top){top=S.sc[d];best=d}}
|
|
if(!best)best="fox";
|
|
var dm=D[best];
|
|
document.getElementById("res-icon").textContent=dm.icon;
|
|
document.getElementById("res-name").textContent="Your daemon is a "+dm.form;
|
|
document.getElementById("res-quote").innerHTML='<em>Your soul has spoken. Its companion takes the form of something wild and true.</em>';
|
|
document.getElementById("res-body").innerHTML='<p>'+dm.desc.replace(/\\n/g,'</p><p>')+'</p>';
|
|
show("sec-results");
|
|
}
|
|
function retakeQuiz(){show("sec-intro")}
|
|
function shareResult(){
|
|
var name=document.getElementById("res-name").textContent;
|
|
var txt=name+"\u2014 Take the quiz to discover your daemon! \u{1F43E} "+location.href;
|
|
if(navigator.clipboard&&navigator.clipboard.writeText){
|
|
navigator.clipboard.writeText(txt).then(function(){
|
|
var b=document.getElementById("btn-share");b.textContent="Copied!";
|
|
setTimeout(function(){b.textContent="Copy Result"},1800);
|
|
});
|
|
}else{prompt("Copy this:",txt)}
|
|
}
|
|
show("sec-intro");
|
|
</script>
|
|
</body>
|
|
</html>
|