Κουίζ για το ποίημα Συμφωνία μ’ ένα δέντρ
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<title>Κουίζ - Συμφωνία μ' ένα δέντρο</title>
<style>
body{
font-family: Arial, sans-serif;
background:#e8f5e9;
text-align:center;
padding:20px;
}
h1{
color:#2e7d32;
font-size:42px;
}
.tree{
font-size:70px;
}
.question{
background:white;
border-radius:25px;
padding:25px;
margin:20px auto;
max-width:750px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
h2{
font-size:30px;
color:#1b5e20;
}
.answer{
background:#81c784;
border:none;
border-radius:20px;
padding:15px;
margin:10px;
width:80%;
font-size:25px;
cursor:pointer;
}
.answer:hover{
background:#66bb6a;
transform:scale(1.03);
}
#message{
font-size:30px;
font-weight:bold;
margin:20px;
}
#score{
font-size:28px;
color:#1565c0;
}
#next{
display:none;
background:#1565c0;
color:white;
border:none;
border-radius:15px;
padding:15px 30px;
font-size:25px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="tree">🌳</div>
<h1>Συμφωνία μ' ένα δέντρο</h1>
<p style="font-size:25px">
Κουίζ κατανόησης του ποιήματος<br>
του Γιώργη Κρόκου
</p>
<div id="quiz" class="question"></div>
<div id="message"></div>
<div id="score"></div>
<button id="next" onclick="nextQuestion()">
➡️ Επόμενη ερώτηση
</button>
<script>
const questions=[
{
q:"Ποιος είναι ο φίλος του παιδιού στο ποίημα;",
a:["🌳 Ένα δέντρο","🐶 Ένας σκύλος","🐱 Μια γάτα"],
correct:0
},
{
q:"Πώς είναι το δέντρο;",
a:["🍂 Ξερό","🌳 Φουντωτό","🌱 Μικρό"],
correct:1
},
{
q:"Τι δίνει το παιδί στο δέντρο;",
a:["💧 Νερό","🍎 Καρπό","🎁 Δώρο"],
correct:0
},
{
q:"Τι δίνει το δέντρο στο παιδί;",
a:["🚗 Αυτοκίνητο","🍎 Καρπό","🧸 Παιχνίδι"],
correct:1
},
{
q:"Ποιον παινεύει το παιδί;",
a:["🐦 Τα πουλιά του δέντρου","🐟 Τα ψάρια","🦋 Τις πεταλούδες"],
correct:0
},
{
q:"Τι αγκαλιάζει το παιδί;",
a:["🌳 Τον κορμό του δέντρου","☁️ Ένα σύννεφο","🌸 Ένα λουλούδι"],
correct:0
},
{
q:"Πώς νιώθει το παιδί για το δέντρο;",
a:["❤️ Το αγαπά","😡 Το θυμώνει","😴 Το βαριέται"],
correct:0
},
{
q:"Πώς μπορούμε να προστατεύουμε τα δέντρα;",
a:["🪓 Να τα κόβουμε","💧 Να τα φροντίζουμε","🗑️ Να πετάμε σκουπίδια"],
correct:1
}
];
let current=0;
let score=0;
function showQuestion(){
let quiz=document.getElementById("quiz");
let q=questions[current];
quiz.innerHTML=
`
<h2>${current+1}. ${q.q}</h2>
${q.a.map((answer,index)=>
`<button class="answer" onclick="checkAnswer(${index})">
${answer}
</button>`
).join("")}
`;
document.getElementById("next").style.display="none";
document.getElementById("message").innerHTML="";
}
function checkAnswer(index){
let q=questions[current];
if(index==q.correct){
score++;
document.getElementById("message").innerHTML=
"🎉 Μπράβο! Σωστή απάντηση! 🌟";
playSound();
}
else{
document.getElementById("message").innerHTML=
"🌱 Προσπάθησε ξανά!";
}
document.getElementById("score").innerHTML=
"⭐ Βαθμοί: "+score+" / "+questions.length;
document.getElementById("next").style.display="inline-block";
}
function nextQuestion(){
current++;
if(current<questions.length){
showQuestion();
}
else{
document.getElementById("quiz").innerHTML=
`
<h2>🏆 Τέλος παιχνιδιού!</h2>
<p style="font-size:30px">
Είσαι φίλος των δέντρων! 🌳💚
</p>
`;
document.getElementById("next").style.display="none";
}
}
function playSound(){
let sound=new SpeechSynthesisUtterance("Μπράβο");
sound.lang="el-GR";
speechSynthesis.speak(sound);
}
showQuestion();
</script>
</body>
</html>
Σχόλια
Δημοσίευση σχολίου