Bu Testte Doğru Yok… Sadece Sen Varsın

.kd-story-test{max-width:860px;margin:30px auto;font-family:Arial,sans-serif;color:#182338}
.kd-story-hero{margin-bottom:20px}
.kd-story-badge{display:inline-block;padding:7px 12px;border-radius:999px;background:#e0f2fe;color:#1e73be;font-size:12px;font-weight:800;margin-bottom:12px}
.kd-story-hero h2{margin:0 0 12px;font-size:34px;line-height:1.2;color:#152033;font-weight:900}
.kd-story-hero p{margin:0;color:#5b6678;font-size:15px;line-height:1.9}

.kd-story-card{padding:24px;border-radius:24px;background:linear-gradient(180deg,#fff,#f0f7ff);border:1px solid #dbeafe;box-shadow:0 12px 30px rgba(30,115,190,.09)}
.kd-story-step{display:inline-block;margin-bottom:12px;padding:7px 11px;border-radius:999px;background:#eff6ff;color:#1e73be;font-size:12px;font-weight:800}
.kd-story-card h3{margin:0 0 12px;font-size:24px;line-height:1.35;font-weight:900;color:#152033}
.kd-story-card p{margin:0 0 18px;color:#5b6678;font-size:15px;line-height:1.8}

.kd-story-options{display:grid;gap:11px}
.kd-story-option{width:100%;text-align:left;border:1px solid #dbeafe;background:#f0f7ff;color:#24344d;border-radius:16px;padding:15px 16px;font-size:16px;line-height:1.5;font-weight:800;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.kd-story-option:hover{background:#e0f2fe;border-color:#93c5fd;transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,115,190,.12)}

.kd-story-progress{margin:16px 0 0;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid #dbeafe;box-shadow:0 8px 22px rgba(30,115,190,.05);color:#5b6678;font-size:13px;font-weight:800;display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center}
.kd-story-bar{grid-column:1/-1;height:8px;border-radius:999px;background:#e0f2fe;overflow:hidden}
.kd-story-bar div{width:20%;height:100%;border-radius:999px;background:linear-gradient(90deg,#1e73be,#2563eb,#60a5fa);transition:width .25s ease}

.kd-story-result{display:none;margin-top:18px;padding:24px;border-radius:24px;background:linear-gradient(135deg,#fff,#f0f7ff);border:1px solid #dbeafe;box-shadow:0 16px 34px rgba(30,115,190,.12)}
.kd-story-result-badge{display:inline-block;padding:7px 12px;border-radius:999px;background:#e0f2fe;color:#1e73be;font-size:12px;font-weight:900;margin-bottom:12px}
.kd-story-result h3{margin:0 0 10px;font-size:28px;line-height:1.3;color:#152033}
.kd-story-result p{margin:0 0 16px;color:#5b6678;font-size:15px;line-height:1.8}

.kd-result-stat{margin:16px 0;padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(219,234,254,.9)}
.kd-result-stat-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;font-weight:900;color:#5b6678}
.kd-result-stat-bar{height:9px;border-radius:999px;background:#e5eefb;overflow:hidden}
.kd-result-stat-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1e73be,#60a5fa)}

.kd-story-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.kd-story-actions button,.kd-story-actions a{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:15px;border:1px solid #dbeafe;background:#f0f7ff;color:#1e73be;font-size:14px;font-weight:900;text-decoration:none;cursor:pointer}
.kd-story-actions .kd-main-btn{background:linear-gradient(135deg,#1e73be,#2563eb);color:#fff;border:none;box-shadow:0 12px 24px rgba(30,115,190,.25)}

.kd-theme-derin{background:linear-gradient(135deg,#fff,#f5f3ff);border-color:#ddd6fe}
.kd-theme-derin .kd-story-result-badge,.kd-theme-derin .kd-result-stat-fill{background:linear-gradient(90deg,#7c3aed,#a78bfa);color:#fff}

.kd-theme-gizem{background:linear-gradient(135deg,#fff,#f8fafc);border-color:#cbd5e1}
.kd-theme-gizem .kd-story-result-badge,.kd-theme-gizem .kd-result-stat-fill{background:linear-gradient(90deg,#334155,#64748b);color:#fff}

.kd-theme-merak{background:linear-gradient(135deg,#fff,#eff6ff);border-color:#bfdbfe}
.kd-theme-merak .kd-story-result-badge,.kd-theme-merak .kd-result-stat-fill{background:linear-gradient(90deg,#1e73be,#60a5fa);color:#fff}

.kd-theme-gercekci{background:linear-gradient(135deg,#fff,#ecfdf5);border-color:#bbf7d0}
.kd-theme-gercekci .kd-story-result-badge,.kd-theme-gercekci .kd-result-stat-fill{background:linear-gradient(90deg,#059669,#34d399);color:#fff}

.kd-theme-analiz{background:linear-gradient(135deg,#fff,#fff7ed);border-color:#fed7aa}
.kd-theme-analiz .kd-story-result-badge,.kd-theme-analiz .kd-result-stat-fill{background:linear-gradient(90deg,#ea580c,#fb923c);color:#fff}

@media(max-width:768px){
.kd-story-test{margin:22px auto}
.kd-story-hero h2{font-size:26px}
.kd-story-card{padding:17px;border-radius:19px}
.kd-story-card h3{font-size:20px}
.kd-story-option{font-size:15px;padding:14px;border-radius:14px}
.kd-story-result{padding:18px;border-radius:19px}
.kd-story-result h3{font-size:22px}
.kd-story-actions{flex-direction:column}
.kd-story-actions button,.kd-story-actions a{width:100%}
}

(function(){
if(window.kdStoryTestLoaded) return;
window.kdStoryTestLoaded = true;

const questions = [
{
title:”Eski bir kitapçıda kapağı olmayan bir kitap buluyorsun.”,
desc:”Kitabın ilk sayfasında sadece şu yazıyor: “Beni okursan kendini bulursun.” Ne yaparsın?”,
options:[
{text:”Hiç düşünmeden okumaya başlarım.”,type:”merak”},
{text:”Önce kitabın ne olduğunu araştırırım.”,type:”analiz”},
{text:”Biraz korkarım ama yine de çantama atarım.”,type:”gizem”},
{text:”Kapağı bile olmayan kitaba güvenmem.”,type:”gercekci”}
]
},
{
title:”Kitabın içinden sana ilişik olmayan bir not düşüyor.”,
desc:”Notta şu yazıyor: “En oldukca kaçtığın şey, aslına bakarsak en oldukca aradığın şeydir.””,
options:[
{text:”Bu cümleyi uzun uzun düşünürüm.”,type:”derin”},
{text:”Notu saklarım, ileride anlam kazanabilir.”,type:”gizem”},
{text:”Bana fazla dramatik gelir.”,type:”gercekci”},
{text:”Hemen devamını okumak isterim.”,type:”merak”}
]
},
{
title:”Bir sonraki sayfada dört kapı çizilmiş.”,
desc:”Her kapının altında değişik bir kelime var. Hangisini seçersin?”,
options:[
{text:”Hakikat”,type:”derin”},
{text:”Macera”,type:”merak”},
{text:”Sır”,type:”gizem”},
{text:”Güven”,type:”gercekci”}
]
},
{
title:”Kitap sana tek bir sual soruyor.”,
desc:”Bir hikâyede seni en oldukca ne etkisinde bırakır?”,
options:[
{text:”Karakterlerin iç dünyası.”,type:”derin”},
{text:”Sürükleyici olaylar.”,type:”merak”},
{text:”Beklenmedik sonlar.”,type:”gizem”},
{text:”Gerçek hayata benzemesi.”,type:”gercekci”}
]
},
{
title:”Son sayfada kitabın senden bir seçim yapmanı istiyor.”,
desc:”Bu kitabı kapattığında yanında ne kalsın isterdin?”,
options:[
{text:”Aklımdan çıkmayacak bir fikir.”,type:”derin”},
{text:”Yeni bir okuma isteği.”,type:”merak”},
{text:”Çözülemeyen bir soru.”,type:”gizem”},
{text:”Hayata dair net bir ders.”,type:”gercekci”}
]
}
];

const scores = {merak:0, çözümleme:0, gizem:0, gercekci:0, derin:0};
let current = 0;

const titleEl = document.getElementById(“kdQuestionTitle”);
const descEl = document.getElementById(“kdQuestionDesc”);
const optionsEl = document.getElementById(“kdOptions”);
const stepEl = document.getElementById(“kdStepText”);
const progressText = document.getElementById(“kdProgressText”);
const progressFill = document.getElementById(“kdProgressFill”);
const resultEl = document.getElementById(“kdResult”);

function renderQuestion(){
const q = questions[current];
titleEl.textContent = q.title;
descEl.textContent = q.desc;
stepEl.textContent = (current + 1) + ” / ” + questions.length;
progressText.textContent = (current + 1) + ” / ” + questions.length;
progressFill.style.width = (((current + 1) / questions.length) * 100) + “%”;
optionsEl.innerHTML = “”;

q.options.forEach(function(option){
const btn = document.createElement(“button”);
btn.type = “button”;
btn.className = “kd-story-option”;
btn.textContent = option.text;

btn.addEventListener(“click”, function(){
scores[option.type]++;
if(current scores[topType]) topType = key;
});

const results = {
merak:{
title:”Meraklı Okur”,
text:”Sen bir kitabı bir tek okumazsın, onun seni nereye götüreceğini de merak edersin. Yeni türlere ve sürükleyici hikâyelere açıksın.”,
percent:37
},
çözümleme:{
title:”Analitik Okur”,
text:”Sen ayrıntıları kaçırmayan, karakterlerin davranışlarını ve olayların arkasındaki sebepleri çözmeye çalışan bir okursun.”,
percent:18
},
gizem:{
title:”Gizem Avcısı Okur”,
text:”Senin için bir kitabın en güzel yanı bilinmeyendir. Ters köşeler, sırlar ve karanlık atmosferler seni daha oldukca içine çeker.”,
percent:21
},
gercekci:{
title:”Gerçekçi Okur”,
text:”Sen kitaplarda hayata dokunan, insana bir şey öğreten ve gerçeklikle bağları olan hikâyeleri seversin.”,
percent:14
},
derin:{
title:”Derin Okur”,
text:”Sen kitaplarda bir tek vaka aramazsın; anlam, düşünce ve duygu ararsın. Bir cümle üstünde uzun uzun düşünmek sana oldukca yakın.”,
percent:10
}
};

const r = results[topType];
const shareText = encodeURIComponent(“Benim okur ruhum: ” + r.title + ” çıktı! Sen de testi çöz: ” + window.location.href);
const whatsappUrl = “https://wa.me/?text=” + shareText;
const twitterUrl = “https://twitter.com/intent/tweet?text=” + shareText;

document.querySelector(“.kd-story-card”).style.display = “none”;
document.querySelector(“.kd-story-progress”).style.display = “none”;

resultEl.className = “kd-story-result kd-theme-” + topType;
resultEl.style.display = “block”;
resultEl.innerHTML = `

Kontrol Sonucun

${r.text}

`;

resultEl.scrollIntoView({behavior:”smooth”, block:”center”});
}

window.kdStoryRestart = function(){
current = 0;
Object.keys(scores).forEach(function(key){scores[key] = 0;});
document.querySelector(“.kd-story-card”).style.display = “block”;
document.querySelector(“.kd-story-progress”).style.display = “grid”;
resultEl.style.display = “none”;
resultEl.innerHTML = “”;
resultEl.className = “kd-story-result”;
renderQuestion();
document.getElementById(“kdStoryTest”).scrollIntoView({behavior:”smooth”, block:”start”});
};

renderQuestion();
})();
The post Bu Testte Doğru Yok… Sadece Sen Varsın first appeared on Kitap Diyarı.