Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/hifi11.in/public_html/lms/Lms

Free Space:

10.32 TB

🔧 Quick Actions

✏️ Editing: section-intro.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Session - QUEST</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-yellow: #fec53a;
            --primary-blue: #44ade5;
            --dark-blue: #2c6a91;
            --light-bg: #f8f9fa;
            --success: #28a745;
            --danger: #dc3545;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--light-bg);
            overflow-x: hidden;
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--primary-blue) !important;
        }
        
        .navbar-brand span {
            color: var(--primary-yellow);
        }
        
        .btn-primary {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            background-color: var(--dark-blue);
            border-color: var(--dark-blue);
            transform: translateY(-2px);
        }
        
        .btn-warning {
            background-color: var(--primary-yellow);
            border-color: var(--primary-yellow);
            color: #333;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-warning:hover {
            background-color: #e6b12e;
            border-color: #e6b12e;
            transform: translateY(-2px);
        }
        
        .btn-success {
            background-color: var(--success);
            border-color: var(--success);
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-danger {
            background-color: var(--danger);
            border-color: var(--danger);
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .practice-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header-section {
            background: linear-gradient(135deg, var(--primary-blue) 0%, #2c6a91 100%);
            color: white;
            padding: 30px 0;
            border-radius: 0 0 20px 20px;
            margin-bottom: 30px;
        }
        
        .progress-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }
        
        .progress-bar {
            background-color: var(--primary-blue);
            border-radius: 10px;
            height: 10px;
        }
        
        .question-card {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            position: relative;
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .question-number {
            font-weight: 700;
            color: var(--dark-blue);
            font-size: 1.2rem;
        }
        
        .difficulty-badge {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.8rem;
        }
        
        .difficulty-easy {
            background-color: #e6f7ee;
            color: #0a8754;
        }
        
        .difficulty-medium {
            background-color: #fff4e6;
            color: #cc7a00;
        }
        
        .difficulty-hard {
            background-color: #ffe6e6;
            color: #cc0000;
        }
        
        .question-text {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        
        .options-container {
            margin-bottom: 25px;
        }
        
        .option {
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        
        .option:hover {
            border-color: var(--primary-blue);
            background-color: rgba(68, 173, 229, 0.05);
        }
        
        .option.selected {
            border-color: var(--primary-blue);
            background-color: rgba(68, 173, 229, 0.1);
        }
        
        .option.correct {
            border-color: var(--success);
            background-color: rgba(40, 167, 69, 0.1);
        }
        
        .option.incorrect {
            border-color: var(--danger);
            background-color: rgba(220, 53, 69, 0.1);
        }
        
        .option-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e9ecef;
            margin-right: 15px;
            font-weight: 600;
        }
        
        .option.selected .option-letter {
            background-color: var(--primary-blue);
            color: white;
        }
        
        .option.correct .option-letter {
            background-color: var(--success);
            color: white;
        }
        
        .option.incorrect .option-letter {
            background-color: var(--danger);
            color: white;
        }
        
        .feedback-container {
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            display: none;
        }
        
        .feedback-correct {
            background-color: rgba(40, 167, 69, 0.1);
            border-left: 4px solid var(--success);
        }
        
        .feedback-incorrect {
            background-color: rgba(220, 53, 69, 0.1);
            border-left: 4px solid var(--danger);
        }
        
        .feedback-title {
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .controls-container {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .timer-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            margin-bottom: 30px;
        }
        
        .timer {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark-blue);
        }
        
        .results-container {
            background-color: white;
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            display: none;
            margin-bottom: 30px;
        }
        
        .results-score {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 20px;
        }
        
        .results-message {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }
        
        .question-nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e9ecef;
            background-color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .nav-btn:hover {
            border-color: var(--primary-blue);
        }
        
        .nav-btn.current {
            border-color: var(--primary-blue);
            background-color: var(--primary-blue);
            color: white;
        }
        
        .nav-btn.answered {
            border-color: var(--success);
            background-color: var(--success);
            color: white;
        }
        
        .nav-btn.skipped {
            border-color: var(--primary-yellow);
            background-color: var(--primary-yellow);
            color: #333;
        }
        
        .footer {
            background-color: var(--dark-blue);
            color: white;
            padding: 60px 0 30px;
            margin-top: 60px;
        }
        
        .footer h5 {
            color: var(--primary-yellow);
            margin-bottom: 20px;
        }
        
        .footer a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer a:hover {
            color: var(--primary-yellow);
        }
        
        .copyright {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
            margin-top: 40px;
            text-align: center;
            color: #aaa;
        }
        
        @media (max-width: 768px) {
            .controls-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .controls-container .btn {
                width: 100%;
            }
            
            .question-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    
    <?php include 'header.php' ?>

<div class="header-section">
        <div class="practice-container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1>Problem Solving Practice</h1>
                    <p class="lead mb-0">Grade 3 - Mathematics • 10 Questions</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="timer-container">
                        <div class="timer" id="timer">20:00</div>
                        <small>Time Remaining</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="practice-container">
        
        <div class="progress-container">
            <div class="d-flex justify-content-between mb-2">
                <span>Progress</span>
                <span id="progress-text">1/10</span>
            </div>
            <div class="progress">
                <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

<div class="question-nav" id="question-nav">
            
        </div>

<div class="question-card">
            <div class="question-header">
                <div class="question-number">Question <span id="current-question">1</span> of 10</div>
                <div class="difficulty-badge difficulty-medium" id="difficulty">Medium</div>
            </div>
            
            <div class="question-text" id="question-text">
                
            </div>
            
            <div class="options-container" id="options-container">
                
            </div>
            
            <div class="feedback-container" id="feedback-container">
                <div class="feedback-title" id="feedback-title"></div>
                <div id="feedback-content"></div>
            </div>
            
            <div class="controls-container">
                <button class="btn btn-outline-primary" id="prev-btn" disabled>
                    <i class="fas fa-arrow-left me-2"></i>Previous
                </button>
                <button class="btn btn-outline-warning" id="skip-btn">
                    Skip Question
                </button>
                <button class="btn btn-primary" id="next-btn">
                    Next Question<i class="fas fa-arrow-right ms-2"></i>
                </button>
                <button class="btn btn-success" id="submit-btn" style="display: none;">
                    Submit Answer
                </button>
            </div>
        </div>

<div class="results-container" id="results-container">
            <div class="results-score" id="final-score">0%</div>
            <h2>Practice Session Complete!</h2>
            <p class="results-message" id="results-message">You've completed the practice session. Review your results below.</p>
            
            <div class="row text-start mb-4">
                <div class="col-md-6">
                    <p><strong>Correct Answers:</strong> <span id="correct-answers">0</span>/10</p>
                    <p><strong>Time Spent:</strong> <span id="time-spent">0:00</span></p>
                </div>
                <div class="col-md-6">
                    <p><strong>Accuracy:</strong> <span id="accuracy">0%</span></p>
                    <p><strong>Skipped Questions:</strong> <span id="skipped-questions">0</span></p>
                </div>
            </div>
            
            <div class="d-flex justify-content-center gap-3">
                <button class="btn btn-primary" id="review-btn">
                    <i class="fas fa-redo me-2"></i>Review Answers
                </button>
                <button class="btn btn-warning" id="new-session-btn">
                    <i class="fas fa-plus me-2"></i>New Session
                </button>
            </div>
        </div>
    </div>

<?php include 'footer.php' ?>

// Application state
        let currentQuestionIndex = 0;
        let userAnswers = Array(questions.length).fill(null);
        let skippedQuestions = [];
        let timerInterval;
        let timeRemaining = 20 * 60; // 20 minutes in seconds
        let startTime = new Date();
        let sessionActive = true;

// DOM Elements
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const currentQuestionElement = document.getElementById('current-question');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        const difficultyElement = document.getElementById('difficulty');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const skipBtn = document.getElementById('skip-btn');
        const submitBtn = document.getElementById('submit-btn');
        const feedbackContainer = document.getElementById('feedback-container');
        const feedbackTitle = document.getElementById('feedback-title');
        const feedbackContent = document.getElementById('feedback-content');
        const questionNav = document.getElementById('question-nav');
        const resultsContainer = document.getElementById('results-container');
        const finalScore = document.getElementById('final-score');
        const correctAnswersElement = document.getElementById('correct-answers');
        const timeSpentElement = document.getElementById('time-spent');
        const accuracyElement = document.getElementById('accuracy');
        const skippedQuestionsElement = document.getElementById('skipped-questions');
        const resultsMessage = document.getElementById('results-message');
        const reviewBtn = document.getElementById('review-btn');
        const newSessionBtn = document.getElementById('new-session-btn');
        const timerElement = document.getElementById('timer');

// Initialize the application
        function init() {
            generateQuestionNavigation();
            loadQuestion(currentQuestionIndex);
            startTimer();
            
            // Add event listeners
            prevBtn.addEventListener('click', goToPreviousQuestion);
            nextBtn.addEventListener('click', goToNextQuestion);
            skipBtn.addEventListener('click', skipQuestion);
            submitBtn.addEventListener('click', submitAnswer);
            reviewBtn.addEventListener('click', reviewAnswers);
            newSessionBtn.addEventListener('click', startNewSession);
        }

// Generate question navigation buttons
        function generateQuestionNavigation() {
            questionNav.innerHTML = '';
            questions.forEach((question, index) => {
                const button = document.createElement('div');
                button.className = 'nav-btn';
                button.textContent = index + 1;
                button.addEventListener('click', () => goToQuestion(index));
                questionNav.appendChild(button);
            });
            updateNavigation();
        }

// Update navigation buttons
        function updateNavigation() {
            const navButtons = document.querySelectorAll('.nav-btn');
            navButtons.forEach((button, index) => {
                button.classList.remove('current', 'answered', 'skipped');
                
                if (index === currentQuestionIndex) {
                    button.classList.add('current');
                } else if (userAnswers[index] !== null) {
                    button.classList.add('answered');
                } else if (skippedQuestions.includes(index)) {
                    button.classList.add('skipped');
                }
            });
        }

// Load a question
        function loadQuestion(index) {
            if (index < 0 || index >= questions.length) return;
            
            const question = questions[index];
            currentQuestionIndex = index;
            
            // Update question text
            questionText.textContent = question.text;
            
            // Update question number
            currentQuestionElement.textContent = index + 1;
            
            // Update difficulty
            difficultyElement.textContent = question.difficulty.charAt(0).toUpperCase() + question.difficulty.slice(1);
            difficultyElement.className = `difficulty-badge difficulty-${question.difficulty}`;
            
            // Update progress
            const progress = ((index + 1) / questions.length) * 100;
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${index + 1}/${questions.length}`;
            
            // Generate options
            optionsContainer.innerHTML = '';
            question.options.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                if (userAnswers[index] === option.id) {
                    optionElement.classList.add('selected');
                }
                
                optionElement.innerHTML = `
                    <div class="option-letter">${option.id}</div>
                    <div class="option-text">${option.text}</div>
                `;
                
                optionElement.addEventListener('click', () => selectOption(option.id));
                optionsContainer.appendChild(optionElement);
            });
            
            // Update buttons
            prevBtn.disabled = index === 0;
            nextBtn.disabled = index === questions.length - 1;
            
            // Show/hide submit button
            if (userAnswers[index] !== null) {
                submitBtn.style.display = 'none';
                nextBtn.style.display = 'inline-block';
                showFeedback(index);
            } else {
                submitBtn.style.display = 'none';
                nextBtn.style.display = 'inline-block';
                hideFeedback();
            }
            
            // Update navigation
            updateNavigation();
        }

// Select an option
        function selectOption(optionId) {
            // Remove selected class from all options
            const options = document.querySelectorAll('.option');
            options.forEach(option => {
                option.classList.remove('selected');
            });
            
            // Add selected class to clicked option
            const selectedOption = document.querySelector(`.option .option-letter`);
            if (selectedOption) {
                selectedOption.parentElement.classList.add('selected');
            }
            
            // Find the correct option element
            options.forEach(option => {
                if (option.querySelector('.option-letter').textContent === optionId) {
                    option.classList.add('selected');
                }
            });
            
            // Show submit button
            submitBtn.style.display = 'inline-block';
            nextBtn.style.display = 'none';
        }

// Submit answer
        function submitAnswer() {
            const selectedOption = document.querySelector('.option.selected');
            if (!selectedOption) return;
            
            const optionId = selectedOption.querySelector('.option-letter').textContent;
            userAnswers[currentQuestionIndex] = optionId;
            
            // Show feedback
            showFeedback(currentQuestionIndex);
            
            // Update navigation
            updateNavigation();
            
            // Hide submit button, show next button
            submitBtn.style.display = 'none';
            nextBtn.style.display = 'inline-block';
            
            // Check if all questions are answered
            checkCompletion();
        }

// Show feedback
        function showFeedback(questionIndex) {
            const question = questions[questionIndex];
            const userAnswer = userAnswers[questionIndex];
            const correctOption = question.options.find(opt => opt.correct);
            
            // Mark options as correct/incorrect
            const options = document.querySelectorAll('.option');
            options.forEach(option => {
                const optionId = option.querySelector('.option-letter').textContent;
                const isCorrect = optionId === correctOption.id;
                const isUserAnswer = optionId === userAnswer;
                
                if (isCorrect) {
                    option.classList.add('correct');
                } else if (isUserAnswer && !isCorrect) {
                    option.classList.add('incorrect');
                }
            });
            
            // Show feedback container
            feedbackContainer.style.display = 'block';
            
            if (userAnswer === correctOption.id) {
                feedbackContainer.className = 'feedback-container feedback-correct';
                feedbackTitle.textContent = 'Correct!';
            } else {
                feedbackContainer.className = 'feedback-container feedback-incorrect';
                feedbackTitle.textContent = 'Incorrect';
            }
            
            feedbackContent.textContent = question.explanation;
        }

// Hide feedback
        function hideFeedback() {
            feedbackContainer.style.display = 'none';
        }

// Skip question
        function skipQuestion() {
            skippedQuestions.push(currentQuestionIndex);
            updateNavigation();
            
            if (currentQuestionIndex < questions.length - 1) {
                goToNextQuestion();
            } else {
                checkCompletion();
            }
        }

// Go to next question
        function goToNextQuestion() {
            if (currentQuestionIndex < questions.length - 1) {
                loadQuestion(currentQuestionIndex + 1);
            } else {
                checkCompletion();
            }
        }

// Go to previous question
        function goToPreviousQuestion() {
            if (currentQuestionIndex > 0) {
                loadQuestion(currentQuestionIndex - 1);
            }
        }

// Go to specific question
        function goToQuestion(index) {
            loadQuestion(index);
        }

// Check if all questions are completed
        function checkCompletion() {
            const answeredQuestions = userAnswers.filter(answer => answer !== null).length;
            if (answeredQuestions + skippedQuestions.length === questions.length) {
                showResults();
            }
        }

// Show results
        function showResults() {
            sessionActive = false;
            clearInterval(timerInterval);
            
            // Calculate score
            const correctAnswers = userAnswers.reduce((count, answer, index) => {
                if (answer === null) return count;
                const correctOption = questions[index].options.find(opt => opt.correct);
                return count + (answer === correctOption.id ? 1 : 0);
            }, 0);
            
            const accuracy = (correctAnswers / questions.length) * 100;
            const timeSpent = new Date() - startTime;
            const minutes = Math.floor(timeSpent / 60000);
            const seconds = Math.floor((timeSpent % 60000) / 1000);
            
            // Update results
            finalScore.textContent = `${accuracy.toFixed(0)}%`;
            correctAnswersElement.textContent = `${correctAnswers}/${questions.length}`;
            timeSpentElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
            accuracyElement.textContent = `${accuracy.toFixed(0)}%`;
            skippedQuestionsElement.textContent = skippedQuestions.length;
            
            // Set message based on performance
            if (accuracy >= 80) {
                resultsMessage.textContent = "Excellent work! You've mastered this topic.";
            } else if (accuracy >= 60) {
                resultsMessage.textContent = "Good job! With a bit more practice, you'll master this topic.";
            } else {
                resultsMessage.textContent = "Keep practicing! Review the questions you missed and try again.";
            }
            
            // Show results container
            resultsContainer.style.display = 'block';
        }

// Review answers
        function reviewAnswers() {
            resultsContainer.style.display = 'none';
            currentQuestionIndex = 0;
            loadQuestion(0);
        }

// Start new session
        function startNewSession() {
            // Reset state
            userAnswers = Array(questions.length).fill(null);
            skippedQuestions = [];
            currentQuestionIndex = 0;
            timeRemaining = 20 * 60;
            startTime = new Date();
            sessionActive = true;
            
            // Reset UI
            resultsContainer.style.display = 'none';
            updateNavigation();
            loadQuestion(0);
            startTimer();
        }

// Timer functions
        function startTimer() {
            updateTimerDisplay();
            timerInterval = setInterval(() => {
                if (sessionActive && timeRemaining > 0) {
                    timeRemaining--;
                    updateTimerDisplay();
                } else if (timeRemaining <= 0) {
                    clearInterval(timerInterval);
                    showResults();
                }
            }, 1000);
        }

// Initialize the application when the DOM is loaded
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: section-intro.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation