import React, { useState } from 'react';
import { Award, CheckCircle, XCircle, RotateCcw, Mountain } from 'lucide-react';
const AnaglyphoQuiz = () => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [showFeedback, setShowFeedback] = useState(false);
const [score, setScore] = useState(0);
const [answeredQuestions, setAnsweredQuestions] = useState([]);
const [quizCompleted, setQuizCompleted] = useState(false);
const questions = [
{
question: "Πριν από πόσα χρόνια «γεννήθηκε» η Γη;",
options: [
"4,6 εκατομμύρια χρόνια",
"4,6 δισεκατομμύρια χρόνια",
"46 δισεκατομμύρια χρόνια",
"460 εκατομμύρια χρόνια"
],
correct: 1,
explanation: "Η Γη «γεννήθηκε» πριν από περίπου 4,6 δισεκατομμύρια χρόνια! Από τότε η επιφάνειά της διαρκώς μεταβάλλεται."
},
{
question: "Ποιες δυνάμεις προέρχονται από το εσωτερικό της Γης;",
options: [
"Εξωγενείς",
"Ενδογενείς",
"Ανθρώπινες",
"Ατμοσφαιρικές"
],
correct: 1,
explanation: "Οι ενδογενείς δυνάμεις προέρχονται από το εσωτερικό της Γης και εκδηλώνονται ως σεισμοί και ηφαίστεια."
},
{
question: "Ποιο από τα παρακάτω ΕΙΝΑΙ εξωγενής δύναμη;",
options: [
"Σεισμοί",
"Ηφαίστεια",
"Άνεμος",
"Λάβα"
],
correct: 2,
explanation: "Ο άνεμος είναι εξωγενής δύναμη που δρα στην επιφάνεια της Γης. Άλλες εξωγενείς δυνάμεις είναι το νερό, η διαφορά θερμοκρασίας και οι ανθρώπινες παρεμβάσεις."
},
{
question: "Τι ονομάζουμε κατακόρυφο διαμελισμό;",
options: [
"Τη μορφολογία των ακτών",
"Τις διαφορές στο υψόμετρο (βουνά, πεδιάδες)",
"Το υποθαλάσσιο ανάγλυφο",
"Τα νησιά"
],
correct: 1,
explanation: "Κατακόρυφο διαμελισμό ονομάζουμε τη μορφολογία μιας περιοχής και συγκεκριμένα τις διαφορές που παρατηρούνται στο υψόμετρο, όπως οροσειρές, οροπέδια, πεδιάδες και κοιλάδες."
},
{
question: "Τι ανήκει στον οριζόντιο διαμελισμό;",
options: [
"Οροσειρές",
"Πεδιάδες",
"Κόλποι και ακρωτήρια",
"Κοιλάδες"
],
correct: 2,
explanation: "Οριζόντιο διαμελισμό ονομάζουμε τη μορφολογία των ακτών και συγκεκριμένα τις διαφορές τους ως προς το μήκος και το σχήμα, όπως κόλποι, ακρωτήρια, χερσόνησοι και νησιά."
},
{
question: "Πώς χαρτογράφησε ο άνθρωπος το υποθαλάσσιο ανάγλυφο;",
options: [
"Με υποβρύχια",
"Με δορυφόρους",
"Με δύτες",
"Με αεροπλάνα"
],
correct: 1,
explanation: "Ο άνθρωπος με τη βοήθεια των δορυφόρων χαρτογράφησε το βυθό όλων των θαλασσών. Το θέαμα είναι μαγευτικό!"
},
{
question: "Ποιο είναι το υψηλότερο σημείο της Γης;",
options: [
"Κ2",
"Κιλιμάντζαρο",
"Όρος Έβερεστ",
"Όλυμπος"
],
correct: 2,
explanation: "Το Όρος Έβερεστ στα Ιμαλάια είναι το υψηλότερο σημείο του πλανήτη μας με ύψος 8.848 μέτρα!"
},
{
question: "Πόσα μέτρα είναι το ύψος του Έβερεστ;",
options: [
"8.848 μέτρα",
"8.488 μέτρα",
"8.884 μέτρα",
"8.448 μέτρα"
],
correct: 0,
explanation: "Το Όρος Έβερεστ έχει ύψος 8.848 μέτρα και βρίσκεται στα σύνορα Νεπάλ και Θιβέτ."
},
{
question: "Ποιο είναι το βαθύτερο σημείο της Γης;",
options: [
"Τάφρος του Ατλαντικού",
"Τάφρος των Μαριανών",
"Τάφρος του Ειρηνικού",
"Τάφρος της Μεσογείου"
],
correct: 1,
explanation: "Η Τάφρος των Μαριανών στον Ειρηνικό Ωκεανό είναι το βαθύτερο σημείο της Γης με βάθος 11.034 μέτρα!"
},
{
question: "Σε ποιο ανάγλυφο ανήκει η Τάφρος των Μαριανών;",
options: [
"Ηπειρωτικό",
"Υποθαλάσσιο",
"Κατακόρυφο",
"Οριζόντιο"
],
correct: 1,
explanation: "Η Τάφρος των Μαριανών ανήκει στο υποθαλάσσιο ανάγλυφο, δηλαδή στο ανάγλυφο του βυθού των θαλασσών και των ωκεανών."
},
{
question: "Τι είναι οι γεωμορφολογικές μορφές;",
options: [
"Τα ζώα που ζουν στη Γη",
"Τα φυτά που αναπτύσσονται",
"Τα στοιχεία που χαρακτηρίζουν το ανάγλυφο",
"Οι άνθρωποι που ζουν σε μια περιοχή"
],
correct: 2,
explanation: "Γεωμορφολογικά στοιχεία είναι τα στοιχεία εκείνα που χαρακτηρίζουν τις μορφές του ανάγλυφου της Γης, όπως οροσειρές, πεδιάδες, ποτάμια, νησιά κ.λπ."
},
{
question: "Ποια από τις παρακάτω δυνάμεις είναι ανθρώπινη παρέμβαση;",
options: [
"Σεισμός",
"Ηφαίστειο",
"Κατασκευή φράγματος",
"Άνεμος"
],
correct: 2,
explanation: "Η κατασκευή φράγματος είναι ανθρώπινη παρέμβαση που αλλάζει το ανάγλυφο. Άλλες ανθρώπινες δραστηριότητες που αλλοιώνουν το ανάγλυφο είναι η κατασκευή δρόμων, η εξόρυξη βουνών και η ισοπέδωση περιοχών."
}
];
const handleAnswerClick = (answerIndex) => {
if (showFeedback) return;
setSelectedAnswer(answerIndex);
setShowFeedback(true);
const isCorrect = answerIndex === questions[currentQuestion].correct;
if (isCorrect) {
setScore(score + 1);
}
setAnsweredQuestions([...answeredQuestions, {
questionIndex: currentQuestion,
userAnswer: answerIndex,
correct: isCorrect
}]);
};
const handleNext = () => {
if (currentQuestion < questions.length - 1) {
setCurrentQuestion(currentQuestion + 1);
setSelectedAnswer(null);
setShowFeedback(false);
} else {
setQuizCompleted(true);
}
};
const resetQuiz = () => {
setCurrentQuestion(0);
setSelectedAnswer(null);
setShowFeedback(false);
setScore(0);
setAnsweredQuestions([]);
setQuizCompleted(false);
};
const currentQ = questions[currentQuestion];
const isCorrect = selectedAnswer === currentQ.correct;
const percentage = Math.round((score / questions.length) * 100);
if (quizCompleted) {
return (
Ολοκλήρωσες το Κουίζ!
= 70
? 'bg-gradient-to-r from-green-100 to-emerald-100'
: percentage >= 50
? 'bg-gradient-to-r from-yellow-100 to-orange-100'
: 'bg-gradient-to-r from-red-100 to-pink-100'
}`}>
{percentage >= 70 ? ' ' : percentage >= 50 ? ' ' : ' '}
{score}/{questions.length}
{percentage}% Επιτυχία
{percentage >= 90 ? 'Άριστα! Είσαι ειδικός στο ανάγλυφο της Γης!' : percentage >= 70 ? 'Πολύ καλά! Έχεις κατακτήσει το μάθημα!' : percentage >= 50 ? 'Καλή προσπάθεια! Με λίγη επανάληψη θα τα πας τέλεια!' : 'Μην ανησυχείς! Διάβασε ξανά το μάθημα και δοκίμασε πάλι!'}
Αναλυτικά Αποτελέσματα:
{questions.map((q, index) => { const userAnswerData = answeredQuestions.find(a => a.questionIndex === index); const isCorrect = userAnswerData?.correct; return (
{isCorrect ? (
{index + 1}. {q.question}
Σωστή απάντηση: {q.options[q.correct]}
{!isCorrect && userAnswerData && (Η απάντησή σου: {q.options[userAnswerData.userAnswer]}
)}
{/* Header */}
Κουίζ Ανάγλυφου της Γης
Σκορ
{score}/{questions.length}
Ερώτηση {currentQuestion + 1} από {questions.length}
{currentQ.question}
{currentQ.options.map((option, index) => {
const isSelected = selectedAnswer === index;
const isCorrectAnswer = index === currentQ.correct;
let buttonClass = "w-full p-4 rounded-xl text-left transition-all border-2 font-medium ";
if (!showFeedback) {
buttonClass += isSelected
? "bg-blue-100 border-blue-400 text-blue-900"
: "bg-gray-50 border-gray-200 hover:bg-blue-50 hover:border-blue-300";
} else {
if (isCorrectAnswer) {
buttonClass += "bg-green-100 border-green-400 text-green-900";
} else if (isSelected && !isCorrectAnswer) {
buttonClass += "bg-red-100 border-red-400 text-red-900";
} else {
buttonClass += "bg-gray-50 border-gray-200 text-gray-500";
}
}
return (
);
})}
{/* Feedback */}
{showFeedback && (
{isCorrect ? (
{isCorrect ? 'Μπράβο! Σωστή απάντηση! ' : 'Λάθος απάντηση '}
{currentQ.explanation}
{showFeedback ? (
{isCorrect ? (
<>
✓
Σωστό!
) : (
<>
✗
Λάθος
)}
) : (
Επέλεξε μια απάντηση
)}