Initial commit: His Dark Materials daemon quiz
- 10-question personality quiz determining your daemon form - 8 daemon types: Lion, Eagle, Panther, Owl, Badger, Fox, Snake, Cat - HDM-themed dark UI with aurora borealis effect - Single HTML file, no build step or dependencies
This commit is contained in:
pi-agent
@@ -0,0 +1,47 @@
|
||||
# Daemon Decider
|
||||
|
||||
> *"What's your daemon?"*
|
||||
|
||||
A single-page quiz inspired by **His Dark Materials** by Philip Pullman that reveals the form of your daemon — the living companion of your soul.
|
||||
|
||||
## About
|
||||
|
||||
In Pullman's world, every person has a daemon: a physical manifestation of their inner self that appears as an animal. The form a daemon takes is deeply significant — it reflects everything the person is inside, and the bond between a person and their daemon is absolute and inseparable.
|
||||
|
||||
This quiz asks 10 questions designed to tease out archetypes that map onto eight possible daemon forms:
|
||||
|
||||
| Daemon | Archetype |
|
||||
|--------|-----------|
|
||||
| 🦁 Lion | Strength, leadership, untamed spirit |
|
||||
| 🦅 Eagle | Vision, freedom, rare perspective |
|
||||
| 🐆 Black Panther | Quiet power, mystery, stealth |
|
||||
| 🦉 Owl | Ancient wisdom, patience, observation |
|
||||
| 🦡 Badger | Resilience, independence, determination |
|
||||
| 🦊 Fox | Cleverness, adaptability, survival |
|
||||
| 🐍 Snake | Transformation, change, evolution |
|
||||
| 🐱 Cat | Gentleness, empathy, quiet fortitude |
|
||||
|
||||
## Running
|
||||
|
||||
This is a single `index.html` file — no build step, no dependencies. Serve it from any static HTTP server:
|
||||
|
||||
```bash
|
||||
# Python
|
||||
python3 -m http.server 8080
|
||||
|
||||
# Node
|
||||
npx serve .
|
||||
|
||||
# Ruby
|
||||
ruby -run -e httpd . -p 8080
|
||||
```
|
||||
|
||||
Then open `http://localhost:8080`.
|
||||
|
||||
## Design
|
||||
|
||||
The aesthetic is inspired by the northern atmosphere of *Northern Lights* — dark backgrounds, aurora borealis-like animations, and gold accents drawn from the alethiometer's needle and dials.
|
||||
|
||||
## License
|
||||
|
||||
Fan-made quiz. Not affiliated with Philip Pullman, Viking Press, or any official production.
|
||||
+227
@@ -0,0 +1,227 @@
|
||||
<!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 unknown to this world. It takes its permanent form at a certain time, reflecting all that you are 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 10</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>
|
||||
const TOTAL=10;
|
||||
let S={q:0,a:[],sc:{}};
|
||||
const D={
|
||||
lion:{form:"Lion",icon:"🦁",desc:"In His Dark Materials, only those with an incredibly powerful spirit take this form. Iorek Byrnison, the greatest armoured bear, can transform into a lion — the form of ultimate authority.\nA lion daemon means you possess untamed strength and a natural ability to lead. 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:"🦅",desc:"An eagle daemon belongs to one with a rare and soaring spirit. Billy the Eagle is one of the few daemons in bird form, and his relationship with Roger is among the most heartbreaking in all of His Dark Materials.\nEagles see the world from above. 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:"🐆",desc:"Will Parry's daemon, Kirjnus, takes this form. Black panthers are the daemon of those who walk between shadows and light.\nYou are quietly powerful — not loud about your strength, but undeniable. You adapt to any situation and keep composure in chaos. There is a mystery about you that others sense but cannot name. You trust only what you've seen with your own eyes."},
|
||||
owl:{form:"Owl",icon:"🦉",desc:"The owl is a creature of the night, watching when others sleep. In Pullman's world, 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, but when given, it is absolute."},
|
||||
badger:{form:"Badger",icon:"🦡",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."},
|
||||
fox:{form:"Fox",icon:"🦊",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 respect those who think for themselves."},
|
||||
snake:{form:"Snake",icon:"🐍",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:"🐱",desc:"The cat is an old and gentle daemon form. Squirrel, Lyra's daemon, begins in a young form 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."}
|
||||
};
|
||||
const 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:"Paths and places others have not yet explored",d:"badger"},
|
||||
{text:"The horizon — what lies just beyond it",d:"eagle"}]},
|
||||
{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:"Watch, wait, study. Find the weakness.",d:"panther"},
|
||||
{text:"Stand beside them, steady and sure.",d:"badger"},
|
||||
{text:"Look for a way out no one else would see.",d:"eagle"}]},
|
||||
{text:"In a dim corridor, a faint sound comes from every direction. What pulls you?",a:[
|
||||
{text:"A promise of ancient knowledge, locked away",d:"owl"},
|
||||
{text:"Something fierce and untamed",d:"panther"},
|
||||
{text:"The wild outdoors, somewhere without rules",d:"snake"},
|
||||
{text:"A riddle you feel you were born to solve",d:"fox"}]},
|
||||
{text:"A person is being treated unjustly. What stirs first?",a:[
|
||||
{text:"A fierce desire to protect — to be their shield",d:"cat"},
|
||||
{text:"Curiosity about why — you need the full picture",d:"owl"},
|
||||
{text:"Conviction. You speak up, no matter the cost.",d:"lion"},
|
||||
{text:"You find the right angle to turn the situation",d:"fox"}]},
|
||||
{text:"You arrive in a strange new world. What's your first instinct?",a:[
|
||||
{text:"Explore everything — every corridor, every shadow",d:"panther"},
|
||||
{text:"Find the storytellers and listen first",d:"owl"},
|
||||
{text:"Gather every scrap of information you can",d:"snake"},
|
||||
{text:"Climb high, get your bearings, see the lay of the land",d:"eagle"}]},
|
||||
{text:"Which quality would you most want your daemon to embody?",a:[
|
||||
{text:"Courage that never fades",d:"lion"},
|
||||
{text:"Wisdom from ages beyond counting",d:"owl"},
|
||||
{text:"Steadfastness — rock-solid, never wavering",d:"badger"},
|
||||
{text:"Freedom — no walls, no masters, no chains",d:"cat"}]},
|
||||
{text:"When you think about what you are, what word rises first?",a:[
|
||||
{text:"Free",d:"eagle"},
|
||||
{text:"Fierce",d:"lion"},
|
||||
{text:"Clever",d:"fox"},
|
||||
{text:"Deep",d:"panther"}]},
|
||||
{text:"Passage to another world is offered. What would you seek there?",a:[
|
||||
{text:"Knowledge — how everything connects",d:"owl"},
|
||||
{text:"Power — a chance to prove yourself",d:"lion"},
|
||||
{text:"Change — to become someone new",d:"snake"},
|
||||
{text:"Home — a place where you fit as you are",d:"cat"}]},
|
||||
{text:"The alethiometer shows you a final scene. What do you see?",a:[
|
||||
{text:"A great open sky, with the wind at your back",d:"eagle"},
|
||||
{text:"A hidden path through dark woods — you alone know the way",d:"fox"},
|
||||
{text:"A fierce creature standing between you and danger",d:"panther"},
|
||||
{text:"Someone you love, running to meet you",d:"cat"}]}
|
||||
];
|
||||
function show(id){document.querySelectorAll("section").forEach(s=>s.classList.remove("active"));document.getElementById(id).classList.add("active")}
|
||||
function startQuiz(){S={q:0,a:[],sc:{}};for(let 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,1800)}
|
||||
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+" — Take the quiz to discover your daemon! 🐾 "+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>
|
||||
Reference in New Issue
Block a user