<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مسابقة</title>
<style>
body { font-family: Arial; text-align: center; direction: rtl; }
.container { max-width: 500px; margin: auto; }
button { display:block; margin:10px auto; padding:10px; width:100%; }
#next { display:none; }
</style>
</head>
<body>
<div class="container">
<h2 id="question">السؤال</h2>
<div id="answers"></div>
<button id="next" onclick="nextQuestion()">التالي</button>
<h3 id="result"></h3>
</div>
<script>
let questions = [
{
q: "كم عدد الكواكب؟",
options: ["7","8","9","10"],
answer: 1
},
{
q: "عاصمة السعودية؟",
options: ["جدة","مكة","الرياض","الدمام"],
answer: 2
}
];
let current = 0;
let score = 0;
function loadQuestion(){
document.getElementById("next").style.display="none";
let q = questions[current];
document.getElementById("question").innerText = q.q;
let answersDiv = document.getElementById("answers");
answersDiv.innerHTML = "";
q.options.forEach((opt,i)=>{
let btn = document.createElement("button");
btn.innerText = opt;
btn.onclick = ()=>selectAnswer(i);
answersDiv.appendChild(btn);
});
}
function selectAnswer(i){
let correct = questions[current].answer;
if(i === correct){
score++;
alert("✔️ صحيح");
} else {
alert("❌ خطأ");
}
document.getElementById("next").style.display="block";
}
function nextQuestion(){
current++;
if(current < questions.length){
loadQuestion();
} else {
document.querySelector(".container").innerHTML =
"<h2>انتهت المسابقة 🎉</h2><h3>نتيجتك: "+score+" / "+questions.length+"</h3>";
}
}
loadQuestion();
</script>
</body>
</html>
