<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Στοίβες</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 20px;
            background-color: #f7f7f7;
            color: #333;
        }
        .quiz-container {
            max-width: 600px;
            margin: auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .question {
            margin-bottom: 20px;
        }
        .question h2 {
            margin: 0 0 10px;
        }
        .options {
            list-style: none;
            padding: 0;
        }
        .options li {
            margin: 10px 0;
        }
        button {
            background: #007bff;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background: #e9ffe9;
            border: 1px solid #b5d6b5;
            border-radius: 5px;
            color: #2c662d;
        }
        .feedback {
            margin-top: 10px;
            padding: 10px;
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .correct {
            color: green;
        }
        .incorrect {
            color: red;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>Quiz για Στοίβες</h1>
        <div id="quiz">
            <!-- Questions will be dynamically injected here -->
        </div>
        <button id="submit" disabled>Υποβολή</button>
        <div id="result" class="result" style="display: none;"></div>
    </div>

    <script>
        const questions = [
            {
                question: "Ποια είναι η βασική αρχή λειτουργίας μιας στοίβας;",
                options: ["FIFO", "LIFO", "Τυχαία Πρόσβαση", "Κυκλική"],
                answer: "LIFO"
            },
            {
                question: "Ποια είναι η λειτουργία που προσθέτει ένα στοιχείο στη στοίβα;",
                options: ["Push", "Pop", "Enqueue", "Dequeue"],
                answer: "Push"
            },
            {
                question: "Τι κάνει η λειτουργία pop;",
                options: [
                    "Προσθέτει ένα στοιχείο στην κορυφή της στοίβας",
                    "Αφαιρεί το στοιχείο από την κορυφή της στοίβας",
                    "Αφαιρεί όλα τα στοιχεία",
                    "Πρόσβαση στο τελευταίο στοιχείο"
                ],
                answer: "Αφαιρεί το στοιχείο από την κορυφή της στοίβας"
            },
            {
                question: "Ποια είναι η αρχική τιμή του δείκτη μιας άδειας στοίβας;",
                options: ["0", "-1", "1", "Μη Ορισμένο"],
                answer: "0"
            },
            {
                question: "Τι συμβαίνει όταν προσπαθείτε να κάνετε push σε γεμάτη στοίβα;",
                options: [
                    "Υπερχείλιση Στοίβας",
                    "Υποχείλιση Στοίβας",
                    "Το στοιχείο αγνοείται",
                    "Τίποτα από τα παραπάνω"
                ],
                answer: "Υπερχείλιση Στοίβας"
            },
            {
                question: "Πώς ελέγχετε αν μια στοίβα είναι άδεια;",
                options: [
                    "Ελέγξτε αν ο δείκτης στοίβας είναι -1",
                    "Ελέγξτε αν ο δείκτης στοίβας είναι 0",
                    "Ελέγξτε αν ο δείκτης στοίβας είναι ίσος με το μέγεθος της στοίβας",
                    "Τίποτα από τα παραπάνω"
                ],
                answer: "Ελέγξτε αν ο δείκτης στοίβας είναι 0"
            },
            {
                question: "Με ποια σειρά προσπελάζονται τα στοιχεία σε μια μη κενή στοίβα;",
                options: [
                    "Από τη βάση προς την κορυφή",
                    "Από την κορυφή προς τη βάση",
                    "Τυχαία",
                    "Καμία από τις παραπάνω"
                ],
                answer: "Από την κορυφή προς τη βάση"
            },
            {
                question: "Ποιο είναι το μέγιστο μέγεθος μιας στοίβας που ορίζεται με πίνακα μεγέθους Ν;",
                options: ["N", "N-1", "N+1", "Κανένα"],
                answer: "N"
            },
            {
                question: "Παράδειγμα 1  Ώθηση & Απώθηση στοιχείου σε στοίβα. 1) Σε μια στοίβα 10 θέσεων έχουν τοποθετηθεί διαδοχικά τα στοιχεία: Σ, Γ, Μ, Α, Δ στην 1η, 2η, 3η, 4η και 5η θέση αντίστοιχα.  Αν εφαρμόσετε τις παρακάτω λειτουργίες: Απώθηση, Απώθηση, Απώθηση, Ώθηση Χ, Ώθηση Δ και Απώθηση,  ποια είναι η τελική μορφή της στοίβας (ΑΠΟ ΚΑΤΩ ΠΡΟΣ ΤΑ ΠΑΝΩ);",
                options: ["ΧΓΣΜ", "ΣΓΜΧ", "ΣΜΓΧ", "ΧΜΓΣ"],
                answer: "ΣΓΜΧ"
            }
        ];

        const quizContainer = document.getElementById("quiz");
        const submitButton = document.getElementById("submit");
        const resultContainer = document.getElementById("result");

        function loadQuiz() {
            questions.forEach((q, index) => {
                const questionElement = document.createElement("div");
                questionElement.className = "question";

                questionElement.innerHTML = `
                    <h2>Ερώτηση ${index + 1}: ${q.question}</h2>
                    <ul class="options">
                        ${q.options
                            .map(
                                (option, i) => `
                            <li>
                                <label>
                                    <input type="radio" name="question${index}" value="${option}">
                                    ${option}
                                </label>
                            </li>
                        `
                            )
                            .join("")}
                    </ul>
                `;
                quizContainer.appendChild(questionElement);
            });
        }

        function calculateResult() {
            let score = 0;
            resultContainer.innerHTML = ''; // Clear previous results
            questions.forEach((q, index) => {
                const selectedOption = document.querySelector(
                    `input[name="question${index}"]:checked`
                );
                const feedbackElement = document.createElement("div");
                feedbackElement.className = "feedback";
                if (selectedOption && selectedOption.value === q.answer) {
                    score++;
                    feedbackElement.innerHTML = `Ερώτηση ${index + 1}: <span class="correct">Σωστό!</span>`;
                } else {
                    feedbackElement.innerHTML = `Ερώτηση ${index + 1}: <span class="incorrect">Λάθος.</span> Η σωστή απάντηση είναι: ${q.answer}`;
                }
                resultContainer.appendChild(feedbackElement);
            });
            resultContainer.style.display = "block";
            const scoreElement = document.createElement("div");
            scoreElement.innerText = `Σκορ: ${score} από ${questions.length}!`;
            resultContainer.appendChild(scoreElement);
        }

        function checkAllAnswered() {
            const allAnswered = questions.every((q, index) => {
                return document.querySelector(`input[name="question${index}"]:checked`);
            });
            submitButton.disabled = !allAnswered;
        }

        submitButton.addEventListener("click", calculateResult);

        // Add event listeners to all radio buttons to check if all questions are answered
        function addRadioListeners() {
            const radioButtons = document.querySelectorAll('input[type="radio"]');
            radioButtons.forEach(radio => {
                radio.addEventListener('change', checkAllAnswered);
            });
        }

        // Load the quiz on page load
        loadQuiz();
        addRadioListeners();
    </script>
</body>
</html>