Minecraft trivia

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Trivia | Made by Sebastian Guardo</title>

<style>
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(#6cc04a,#4a8f2a);
    color:white;
    text-align:center;
}

header{
    background:#2d5f20;
    padding:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
}

h1{
    margin:0;
    font-size:45px;
}

#game{
    max-width:700px;
    margin:40px auto;
    background:#2f2f2f;
    padding:25px;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,.4);
}

#question{
    font-size:28px;
    margin-bottom:25px;
}

button{
    display:block;
    width:100%;
    padding:15px;
    margin:12px 0;
    font-size:20px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#55aa33;
    color:white;
    transition:.2s;
}

button:hover{
    background:#70cc44;
    transform:scale(1.02);
}

#score{
    font-size:22px;
    margin-top:20px;
}

footer{
    margin-top:40px;
    padding:20px;
    background:#2d5f20;
}
</style>
</head>
<body>

<header>
<h1>⛏️ Minecraft Trivia ⛏️</h1>
<p>Made by <strong>Sebastian Guardo</strong></p>
</header>

<div id="game">
    <h2 id="question"></h2>

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

    <h3 id="score"></h3>
</div>

<footer>
Made by Sebastian Guardo © 2026
</footer>

<script>
const questions = [
{
question:"What pickaxe is required to mine diamond ore?",
answers:["Stone Pickaxe","Iron Pickaxe","Gold Pickaxe","Wooden Pickaxe"],
correct:1
},
{
question:"Which dimension is the Ender Dragon found in?",
answers:["The Nether","The Overworld","The End","Deep Dark"],
correct:2
},
{
question:"Which mob explodes when it gets close to you?",
answers:["Zombie","Skeleton","Creeper","Spider"],
correct:2
},
{
question:"What lights a Nether Portal?",
answers:["Torch","Flint and Steel","Lava Bucket","Campfire"],
correct:1
},
{
question:"How many obsidian blocks are needed for the smallest Nether Portal frame?",
answers:["10","12","14","16"],
correct:0
},
{
question:"What is the maximum stack size for most items?",
answers:["16","32","64","99"],
correct:2
},
{
question:"Which food attracts pigs?",
answers:["Bread","Carrots","Seeds","Apples"],
correct:1
},
{
question:"Who is Minecraft's final boss?",
answers:["Wither","Warden","Ender Dragon","Elder Guardian"],
correct:2
}
];

questions.sort(()=>Math.random()-0.5);

let current=0;
let score=0;

const question=document.getElementById("question");
const answers=document.getElementById("answers");
const scoreText=document.getElementById("score");

function loadQuestion(){

if(current>=questions.length){
question.innerHTML="🏆 Game Over!";
answers.innerHTML="";
scoreText.innerHTML=`Final Score: ${score} / ${questions.length}`;
return;
}

const q=questions[current];

question.innerHTML=q.question;
answers.innerHTML="";

q.answers.forEach((answer,index)=>{
const btn=document.createElement("button");
btn.innerText=answer;

btn.onclick=()=>{

if(index===q.correct){
score++;
alert("✅ Correct!");
}else{
alert("❌ Wrong!");
}

current++;
loadQuestion();

};

answers.appendChild(btn);

});

scoreText.innerHTML=`Score: ${score}`;
}

loadQuestion();
</script>

</body>
</html>