Skip to content

Irecode23/QUIZ-APP

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
README.md
README.md
 
 

Repository files navigation

QUIZ-APP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School CBT Practice Quiz</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }

        /* Main container */
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 25px;
        }

        /* Header with timer */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eaeaea;
        }

        .timer {
            background-color: #e94560;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 18px;
        }

        /* Question display */
        .question-container {
            margin-bottom: 25px;
        }

        .question-number {
            font-size: 16px;
            color: #666;
            margin-bottom: 8px;
        }

        .question-text {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        /* Options styling */
        .options-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option {
            padding: 14px 20px;
            background-color: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 18px;
        }

        .option:hover {
            background-color: #e9ecef;
            border-color: #b0b0b0;
        }

        .option.selected {
            background-color: #d1e7ff;
            border-color: #3498db;
        }

        /* Navigation buttons */
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .btn {
            padding: 12px 28px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.2s;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .prev-btn {
            background-color: #6c757d;
            color: white;
        }

        .prev-btn:hover:not(:disabled) {
            background-color: #5a6268;
        }

        .next-btn {
            background-color: #28a745;
            color: white;
        }

        .next-btn:hover:not(:disabled) {
            background-color: #218838;
        }

        /* Submit button */
        .submit-btn {
            background-color: #e94560;
            color: white;
            padding: 14px 32px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            margin: 20px auto 0;
            display: block;
            transition: background-color 0.2s;
        }

        .submit-btn:hover {
            background-color: #d03a50;
        }

        /* Result screen */
        .result-container {
            text-align: center;
            padding: 40px 20px;
        }

        .result-text {
            font-size: 32px;
            font-weight: 700;
            color: #e94560;
            margin-bottom: 20px;
        }

        .result-subtext {
            font-size: 20px;
            color: #666;
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            .container {
                padding: 15px;
            }

            .header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .question-text {
                font-size: 18px;
            }

            .option {
                font-size: 16px;
                padding: 12px 16px;
            }

            .btn {
                padding: 10px 20px;
                font-size: 16px;
            }

            .submit-btn {
                padding: 12px 24px;
                font-size: 16px;
            }

            .result-text {
                font-size: 26px;
            }

            .result-subtext {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Quiz Screen -->
        <div id="quiz-screen">
            <div class="header">
                <h1>School CBT Practice</h1>
                <div class="timer" id="timer">Time: 10:00</div>
            </div>

            <div class="question-container">
                <div class="question-number">Question <span id="current-question">1</span> of <span id="total-questions">5</span></div>
                <div class="question-text" id="question-text">Question text will appear here...</div>
            </div>

            <div class="options-container" id="options-container">
                <!-- Options will be dynamically inserted here -->
            </div>

            <div class="navigation">
                <button class="btn prev-btn" id="prev-btn" disabled>Previous</button>
                <button class="btn next-btn" id="next-btn">Next</button>
            </div>

            <button class="submit-btn" id="submit-btn" style="display: none;">Submit Quiz</button>
        </div>

        <!-- Result Screen -->
        <div id="result-screen" style="display: none;">
            <div class="result-container">
                <div class="result-text">AWAIT RESULT</div>
                <div class="result-subtext">Your answers have been submitted.</div>
            </div>
        </div>
    </div>

    <script>
        // Quiz data - each question has text, options, and correct answer index (0-based)
        const quizData = [
            {
                question: "What is the capital of France?",
                options: ["Berlin", "Madrid", "Paris", "Rome"],
                correct: 2
            },
            {
                question: "Which planet is known as the Red Planet?",
                options: ["Venus", "Mars", "Jupiter", "Saturn"],
                correct: 1
            },
            {
                question: "What is 2 + 2?",
                options: ["3", "4", "5", "6"],
                correct: 1
            },
            {
                question: "Who wrote 'Romeo and Juliet'?",
                options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"],
                correct: 1
            },
            {
                question: "What is the largest mammal?",
                options: ["Elephant", "Blue Whale", "Giraffe", "Hippopotamus"],
                correct: 1
            }
        ];

        // Quiz state variables
        let currentQuestionIndex = 0;
        let userAnswers = new Array(quizData.length).fill(null); // Store user selections (null = not answered)
        let timeLeft = 600; // 10 minutes in seconds
        let timerInterval = null;

        // DOM elements
        const quizScreen = document.getElementById('quiz-screen');
        const resultScreen = document.getElementById('result-screen');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const currentQuestionEl = document.getElementById('current-question');
        const totalQuestionsEl = document.getElementById('total-questions');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const submitBtn = document.getElementById('submit-btn');
        const timerEl = document.getElementById('timer');

        // Initialize the quiz
        function initQuiz() {
            totalQuestionsEl.textContent = quizData.length;
            loadQuestion(currentQuestionIndex);
            startTimer();
        }

        // Load a specific question
        function loadQuestion(index) {
            const question = quizData[index];
            currentQuestionEl.textContent = index + 1;
            questionText.textContent = question.question;

            // Clear previous options
            optionsContainer.innerHTML = '';

            // Create option elements
            question.options.forEach((option, i) => {
                const optionElement = document.createElement('div');
                optionElement.classList.add('option');
                optionElement.textContent = option;
                optionElement.dataset.index = i;

                // Highlight if previously selected
                if (userAnswers[index] === i) {
                    optionElement.classList.add('selected');
                }

                // Add click event to select option
                optionElement.addEventListener('click', () => {
                    // Remove selected class from all options
                    document.querySelectorAll('.option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    // Add selected class to clicked option
                    optionElement.classList.add('selected');
                    // Save user answer
                    userAnswers[index] = i;
                });

                optionsContainer.appendChild(optionElement);
            });

            // Update navigation buttons
            prevBtn.disabled = (index === 0);
            nextBtn.style.display = (index === quizData.length - 1) ? 'none' : 'inline-block';
            submitBtn.style.display = (index === quizData.length - 1) ? 'block' : 'none';
        }

        // Navigate to previous question
        function goToPrevious() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                loadQuestion(currentQuestionIndex);
            }
        }

        // Navigate to next question
        function goToNext() {
            if (currentQuestionIndex < quizData.length - 1) {
                currentQuestionIndex++;
                loadQuestion(currentQuestionIndex);
            }
        }

        // Submit the quiz
        function submitQuiz() {
            // Stop the timer
            clearInterval(timerInterval);
            
            // Switch to result screen
            quizScreen.style.display = 'none';
            resultScreen.style.display = 'block';
            
            // In a real application, you would send answers to a server here
            console.log("User answers:", userAnswers);
        }

        // Timer functionality
        function startTimer() {
            timerInterval = setInterval(() => {
                timeLeft--;
                
                // Calculate minutes and seconds
                const minutes = Math.floor(timeLeft / 60);
                const seconds = timeLeft % 60;
                
                // Format time as MM:SS
                const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                timerEl.textContent = `Time: ${formattedTime}`;
                
                // If time runs out, auto-submit
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    submitQuiz();
                }
            }, 1000);
        }

        // Event listeners for buttons
        prevBtn.addEventListener('click', goToPrevious);
        nextBtn.addEventListener('click', goToNext);
        submitBtn.addEventListener('click', submitQuiz);

        // Initialize the quiz when the page loads
        window.addEventListener('load', initQuiz);
    </script>
</body>
</html>

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published