#jb-anime-quiz {
–jb-bg1: #fff6d8;
–jb-bg2: #ffd06b;
–jb-ink: #2f3a8f;
–jb-accent: #ff4f81;
–jb-accent-2: #ff9f1c;
–jb-ok: #20b26b;
–jb-bad: #e5484d;
–jb-card: #fffaf0;
–jb-shadow: 0 18px 40px rgba(47,58,143,.18);
font-family: “Trebuchet MS”, “Hiragino Kaku Gothic ProN”, “Yu Gothic”, Arial, sans-serif;
color: #20243d;
max-width: 860px;
margin: 28px auto;
position: relative;
}
#jb-anime-quiz * { box-sizing: border-box; }
.jbq-shell {
background:
radial-gradient(circle at 12% 12%, rgba(255,255,255,.75) 0 60px, transparent 61px),
radial-gradient(circle at 90% 18%, rgba(255,255,255,.45) 0 48px, transparent 49px),
linear-gradient(145deg, var(–jb-bg1), var(–jb-bg2));
border: 5px solid var(–jb-ink);
border-radius: 28px;
overflow: hidden;
box-shadow: var(–jb-shadow);
position: relative;
}
.jbq-header {
padding: 22px 20px 8px;
position: relative;
}
.jbq-badge {
display: inline-block;
background: var(–jb-ink);
color: #fff;
font-weight: 700;
font-size: 12px;
letter-spacing: .08em;
padding: 8px 12px;
border-radius: 999px;
margin-bottom: 12px;
}
.jbq-title {
margin: 0;
font-size: clamp(28px, 5vw, 44px);
line-height: 1.04;
color: var(–jb-ink);
text-shadow: 2px 2px 0 rgba(255,255,255,.7);
}
.jbq-sub {
margin: 10px 0 0;
font-size: 15px;
line-height: 1.6;
max-width: 60ch;
}
.jbq-chibi {
position: absolute;
right: 18px;
top: 18px;
width: 148px;
height: 148px;
border: 4px solid var(–jb-ink);
border-radius: 22px;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,.12);
transform: rotate(-2deg);
}
.jbq-chibi img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
display: block;
}
.jbq-chibi-label {
position: absolute;
left: 8px;
bottom: 8px;
background: rgba(47,58,143,.92);
color: #fff;
font-size: 11px;
font-weight: 800;
padding: 5px 8px;
border-radius: 999px;
letter-spacing: .03em;
z-index: 3;
}
.jbq-spark {
position: absolute;
font-size: 22px;
color: var(–jb-accent);
animation: jbqFloat 2.6s ease-in-out infinite;
z-index: 2;
text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.jbq-s1 { left: 10px; top: 10px; }
.jbq-s2 { right: 10px; bottom: 10px; animation-delay: .8s; }
.jbq-s3 { right: 12px; top: 8px; color: var(–jb-accent-2); animation-delay: 1.4s; }
@keyframes jbqFloat {
0%,100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-5px) rotate(8deg); }
}
.jbq-panel {
background: rgba(255,250,240,.95);
border-top: 4px solid var(–jb-ink);
padding: 20px;
}
.jbq-progress-wrap {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.jbq-progress {
height: 14px;
flex: 1;
background: rgba(47,58,143,.12);
border-radius: 999px;
overflow: hidden;
border: 2px solid rgba(47,58,143,.16);
}
.jbq-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(–jb-accent), var(–jb-accent-2));
transition: width .35s ease;
}
.jbq-step {
min-width: 72px;
text-align: right;
font-weight: 700;
color: var(–jb-ink);
}
.jbq-card {
background: var(–jb-card);
border: 4px solid var(–jb-ink);
border-radius: 22px;
padding: 18px;
box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.jbq-question {
font-size: clamp(20px, 3vw, 28px);
line-height: 1.3;
margin: 0 0 14px;
color: var(–jb-ink);
}
.jbq-bubble {
position: relative;
background: #fff;
border: 3px solid var(–jb-ink);
border-radius: 18px;
padding: 14px 16px;
margin-bottom: 16px;
line-height: 1.55;
}
.jbq-bubble:after {
content: “”;
position: absolute;
left: 22px;
bottom: -14px;
width: 20px;
height: 20px;
background: #fff;
border-right: 3px solid var(–jb-ink);
border-bottom: 3px solid var(–jb-ink);
transform: rotate(45deg);
}
.jbq-options {
display: grid;
gap: 12px;
margin-top: 20px;
}
.jbq-option {
appearance: none;
border: 3px solid var(–jb-ink);
background: #fff;
color: #20243d;
padding: 14px 16px;
border-radius: 16px;
text-align: left;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
box-shadow: 0 6px 14px rgba(47,58,143,.08);
}
.jbq-option:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(47,58,143,.12);
background: #fff8ea;
}
.jbq-option.correct {
background: #e9fff4;
border-color: var(–jb-ok);
color: #115d39;
}
.jbq-option.wrong {
background: #fff0f0;
border-color: var(–jb-bad);
color: #8a1f24;
}
.jbq-option:disabled { cursor: default; }
.jbq-feedback {
display: none;
margin-top: 16px;
padding: 14px 16px;
border-radius: 16px;
border: 3px dashed var(–jb-ink);
background: #fffdf7;
line-height: 1.6;
}
.jbq-feedback.show { display: block; }
.jbq-feedback strong { color: var(–jb-ink); }
.jbq-actions {
display: flex;
gap: 12px;
margin-top: 18px;
flex-wrap: wrap;
}
.jbq-btn {
appearance: none;
border: 3px solid var(–jb-ink);
background: var(–jb-accent);
color: #fff;
font-weight: 800;
letter-spacing: .02em;
padding: 12px 18px;
border-radius: 999px;
cursor: pointer;
transition: transform .12s ease, filter .18s ease;
}
.jbq-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.jbq-btn.secondary { background: var(–jb-ink); }
.jbq-btn.ghost { background: #fff; color: var(–jb-ink); }
.jbq-start, .jbq-result {
text-align: center;
padding: 14px 8px 4px;
}
.jbq-result-score {
font-size: clamp(38px, 8vw, 64px);
margin: 8px 0;
color: var(–jb-accent);
text-shadow: 2px 2px 0 #fff;
}
.jbq-result-title {
font-size: clamp(22px, 4vw, 32px);
color: var(–jb-ink);
margin: 8px 0 10px;
}
.jbq-result-text {
max-width: 56ch;
margin: 0 auto 16px;
line-height: 1.7;
}
.jbq-mini {
font-size: 13px;
opacity: .8;
margin-top: 10px;
}
.jbq-result-art {
width: 120px;
height: 120px;
margin: 0 auto 14px;
border: 4px solid var(–jb-ink);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,.12);
transform: rotate(2deg);
background: #fff;
}
.jbq-result-art img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
display: block;
}
@media (max-width: 720px) {
.jbq-chibi {
position: static;
margin: 16px auto 0;
width: 120px;
height: 120px;
transform: rotate(0);
}
.jbq-header {
text-align: center;
}
.jbq-sub {
margin-left: auto;
margin-right: auto;
}
}
(function () {
const quizCharacterImage = “https://japonyabulteni.com/wp-content/uploads/2026/04/img_6851.jpeg”;
const quizData = [
{
q: “Japonya Bülteni’ndeki “yanlış bilinen 5 söylence” yazısına göre hangisi fazla genelleyici bir klişe?”,
blurb: “Anime dedektifi gibi düşün: blog klişeyi patlatıyor mu, yoksa onaylıyor mu?”,
options: [
“Japonlar kısa boylu olur”,
“Japonya’da şehirler vardır”,
“Tokyo’da tren vardır”,
“Japonya’da mevsimler yaşanır”
],
answer: 0,
exp: “Yazıda “Japonlar kısa boylu olur” genellemesinin fazla kaba olduğu, farkın sanıldığı kadar büyük olmadığı anlatılıyor.”
},
{
q: “Aynı yazıya göre 2015’te, hafta sonları hariç Japonya’daki resmi tatil sayısı kaç gündü?”,
blurb: “Biraz kültür, biraz takvim, biraz da manga seviyesi dikkat!”,
options: [“10 gün”, “17 gün”, “21 gün”, “28 gün”],
answer: 1,
exp: “Yazıda 2015 için hafta sonları hariç 17 resmi tatilden söz ediliyor.”
},
{
q: “Hayao Miyazaki söyleşisinde yeni proje olarak ne anlatılıyor?”,
blurb: “Ghibli radarlarını aç!”,
options: [
“Samuray bir kedi destanı”,
“Yeşil yaprak üstündeki küçük bir tırtılın hikâyesi”,
“Tokyo metrosunda geçen bir aşk hikâyesi”,
“Robot balıkçılarla ilgili bir bilimkurgu”
],
answer: 1,
exp: “Blogdaki Miyazaki yazısında yeni proje olarak küçük bir tırtılın hikâyesi aktarılıyor.”
},
{
q: “Miyazaki, hangi yaşam tarzına özellikle mesafeli duruyor?”,
blurb: “Bazen tek bir cümle, koca bir dünya görüşünü açar.”,
options: [
“Dağ köyü yaşamına”,
“Amerikan tipi, rekabeti kutsayan ve tüketimi tanrılaştıran yaşam tarzına”,
“Animasyon stüdyolarına”,
“Çocuk filmlerine”
],
answer: 1,
exp: “Yazıda Miyazaki’nin Amerikan tipi yaşam tarzını ve rekabet/tüketim kültürünü açıkça eleştirdiği aktarılıyor.”
},
{
q: “İstanbul–Tokyo havaalanları yazısına göre Tokyo şehir merkezine yaklaşık 80 km uzaklıkta olan havaalanı hangisi?”,
blurb: “Şimdi shinkansen hızında cevap ver!”,
options: [“Haneda”, “Narita”, “Kansai”, “Chitose”],
answer: 1,
exp: “Karşılaştırma yazısında Narita’nın şehir merkezine yaklaşık 80 km uzakta olduğu belirtiliyor.”
},
{
q: “Blogdaki Tokyo notlarına göre helal malzeme bulmak için öne çıkan bölge hangisi?”,
blurb: “Gizli harita açıldı!”,
options: [“Ginza”, “Shin-Okubo”, “Odaiba”, “Akihabara”],
answer: 1,
exp: “Tokyo pahalı mı? yazısındaki yorum bölümünde, helal malzeme için Shin-Okubo bölgesi işaret ediliyor.”
},
{
q: ““Tokyo gerçekten pahalı mı (2)?” yazısında 2016 Ekim sonu itibarıyla Japonya’ya gelen yabancı ziyaretçi sayısı yaklaşık kaçtı?”,
blurb: “Turizm boss savaşına hazır mısın?”,
options: [“12.4 milyon”, “16.3 milyon”, “20.1 milyon”, “24.8 milyon”],
answer: 2,
exp: “Güncellenen yazıda 2016 Ekim sonu itibarıyla turist sayısının 20.1 milyona ulaştığı yazıyor.”
},
{
q: ““Japonya’da 7.3 büyüklüğünde deprem oldu” yazısında sarsıntı yaklaşık ne zaman hissediliyor?”,
blurb: “Son soru: deprem sensörü modu aç!”,
options: [“Gece yarısı 00:30 civarı”, “Sabah 6 civarı”, “Öğlen 12 civarı”, “Akşam 20:00 civarı”],
answer: 1,
exp: “Yazar sarsıntının sabah 6 civarı hissedildiğini anlatıyor.”
}
];
const root = document.getElementById(“jb-anime-quiz”);
if (!root) return;
let current = -1;
let score = 0;
let answered = false;
const shell = document.createElement(“div”);
shell.className = “jbq-shell”;
shell.innerHTML = `
JAPONYA BÜLTENİ × ANIME QUIZ
Tokyo mu, Miyazaki mi, Yoksa Vapur Sensei mi?
Blogdaki yazılardan ilham alan, anime enerjili mini quiz.
Her cevapta küçük bir açıklama var. Hazırsan başlayalım.
✦★✦
`;
root.appendChild(shell);
const app = shell.querySelector(“#jbq-app”);
function resultMeta(s, total) {
if (s <= 2) {
return {
title: "Çırak Gezgin 🌱",
text: "Sen daha açılış jeneriğindesin ama merakın doğru yerde. Bir iki Japonya Bülteni yazısı daha okuyunca tam bir şehir-anime iz sürücüsüne dönüşürsün."
};
}
if (s <= 4) {
return {
title: "Metro Kaşifi 🚃",
text: "Fena değilsin. Tokyo’nun raylı sistemi kadar disiplinli olmasan da blogun ritmini yakalamaya başlamışsın."
};
}
if (s <= 6) {
return {
title: "Ghibli Muhabiri ✍️",
text: "Hem kültür hem şehir hem de gündelik Japonya detaylarına iyi kulak vermişsin. Sen bu evrende yan karakter değil, ana kadrodasın."
};
}
return {
title: "Japonya Bülteni Sensei 🏮",
text: "Helal olsun. Miyazaki, Narita, Shin-Okubo, deprem saati… hepsi sende. Blogun ruhunu bayağı iyi toplamışsın."
};
}
function renderStart() {
app.innerHTML = `
Kurallar basit: 8 soru var. Her sorudan sonra mini açıklama geliyor.
Sonunda anime usulü bir sonuç kartı alacaksın.
Not: Bu quiz blogdaki gerçek yazılardan esinlenmiştir.
Japonya'dan anlatılar 
