MindWorld

<!DOCTYPE html>

<html lang="kk">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>MindWorld</title>

<style>

body{background:#092e28;color:white;font-family:Arial;text-align:center;padding:15px}

.card{background:#17483b;border-radius:20px;padding:20px;margin:15px auto;max-width:500px}

h1{color:#a8ffb0;font-size:36px}

button,select{padding:12px;margin:6px;border:0;border-radius:12px;font-size:16px}

button{background:#a8ffb0;color:#123b2b}

.answer{display:block;width:100%;margin:10px 0;background:#fff;color:#123b2b}

</style>

</head>

<body>

<h1>🌍 MindWorld</h1>

<p id="intro">Сиқырлы орманға қош келдің!</p>

<select id="lang" onchange="render()">

<option value="kk">Қазақша 🇰🇿</option>

<option value="en">English 🇬🇧</option>

<option value="ko">한국어 🇰🇷</option>

</select>

<div class="card">

<div style="font-size:65px">🧚🏻‍♀️🌲</div>

<h2 id="title">Мими перісі</h2>

<p>⭐ <span id="score">0</span> | 🏆 <span id="level">1</span></p>

<h3 id="question"></h3>

<div id="answers"></div>

<p id="message"></p>

<button onclick="next()">Келесі сұрақ ➜</button>

</div>

<div class="card">

<h2>🌿 Орман құпиясы</h2>

<p id="fact">Ағаштар ауаны тазартуға көмектеседі!</p>

<button onclick="fact()">Жаңа құпия ✨</button>

</div>

<script>

const quiz={

kk:[

["Қазақстанның астанасы?",["Астана","Алматы","Ақтау"],0],

["Күн жүйесіндегі жұлдыз?",["Ай","Күн","Жер"],1],

["2 + 3 = ?",["4","5","6"],1],

["Суда өмір сүретін жануар?",["Балық","Түйе","Қоян"],0],

["Өсімдікке не қажет?",["Тас","Су мен жарық","Пластик"],1]],

en:[

["Capital of Kazakhstan?",["Astana","Almaty","Aktau"],0],

["Which is a star?",["Moon","Sun","Earth"],1],

["What is 2 + 3?",["4","5","6"],1],

["Which animal lives in water?",["Fish","Camel","Rabbit"],0],

["What helps plants grow?",["Rocks","Water and light","Plastic"],1]],

ko:[

["카자흐스탄의 수도는?",["아스타나","알마티","악타우"],0],

["별은 무엇인가요?",["달","태양","지구"],1],

["2 + 3은 얼마인가요?",["4","5","6"],1],

["물에 사는 동물은?",["물고기","낙타","토끼"],0],

["식물에 필요한 것은?",["돌","물과 빛","플라스틱"],1]]

};

const facts={

kk:["Ағаштар ауаны тазартуға көмектеседі!","Аралар гүлдерді тозаңдандырады!","Орманда көптеген жануарлар өмір сүреді!"],

en:["Trees help clean the air!","Bees pollinate flowers!","Many animals live in forests!"],

ko:["나무는 공기를 깨끗하게 합니다!","벌은 꽃가루받이를 돕습니다!","숲에는 많은 동물이 삽니다!"]

};

let i=0,score=0,done=false;

function render(){

let l=document.getElementById("lang").value;

document.getElementById("intro").textContent={kk:"Сиқырлы орманға қош келдің!",en:"Welcome to the magic forest!",ko:"마법의 숲에 오신 것을 환영합니다!"}[l];

document.getElementById("title").textContent={kk:"Мими перісімен білім ал!",en:"Learn with Mimi!",ko:"미미와 함께 배워요!"}[l];

let q=quiz[l][i%quiz[l].length];

document.getElementById("question").textContent=q[0];

document.getElementById("message").textContent="";

document.getElementById("answers").innerHTML="";

done=false;

q[1].forEach((a,n)=>{

let b=document.createElement("button");

b.className="answer";b.textContent=a;

b.onclick=()=>check(n,q[2]);

document.getElementById("answers").appendChild(b);

});

document.getElementById("score").textContent=score;

document.getElementById("level").textContent=Math.floor(score/30)+1;

}

function check(n,right){

if(done)return;done=true;

let l=document.getElementById("lang").value;

if(n===right){score+=10;document.getElementById("message").textContent={kk:"Дұрыс! +10 ұпай ⭐",en:"Correct! +10 points ⭐",ko:"정답! +10점 ⭐"}[l];}

else document.getElementById("message").textContent={kk:"Қайта ойланып көр!",en:"Try again next time!",ko:"다시 생각해 보세요!"}[l];

document.getElementById("score").textContent=score;

document.getElementById("level").textContent=Math.floor(score/30)+1;

}

function next(){i++;render()}

function fact(){

let l=document.getElementById("lang").value;

let list=facts[l];

document.getElementById("fact").textContent=list[Math.floor(Math.random()*list.length)];

}

render();

</script>

</body>

</html>