MAINHACK

Viewing / Editing File: main.js

// Main JavaScript file for Arabic Quiz Website

// Global variables
let soundEnabled = true;
let currentAudio = null;

// Sound effects URLs
const sounds = {
    correct: 'assets/sounds/correct.mp3',
    incorrect: 'assets/sounds/incorrect.mp3',
    bonus: 'assets/sounds/bonus.mp3',
    deduction: 'assets/sounds/deduction.mp3',
    steal: 'assets/sounds/steal.mp3',
    timer: 'assets/sounds/timer.mp3',
    gameStart: 'assets/sounds/game_start.mp3',
    gameEnd: 'assets/sounds/game_end.mp3',
    cardFlip: 'assets/sounds/card_flip.mp3',
    millionaireCorrect: 'assets/sounds/millionaire_correct.mp3',
    millionaireWrong: 'assets/sounds/millionaire_wrong.mp3',
    lifeline: 'assets/sounds/lifeline.mp3'
};

// Initialize when document is ready
$(document).ready(function() {
    initializeSoundControl();
    initializeAnimations();
    initializeFormValidation();
    
    
    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
    
    // Initialize popovers
    $('[data-bs-toggle="popover"]').popover();
});

// Sound Management
function initializeSoundControl() {
    // Add sound control button if it doesn't exist
    if (!$('.sound-control').length) {
        $('body').append(`
            <button class="sound-control" id="soundToggle" title="تحكم في الصوت">
                <i class="fas fa-volume-up"></i>
            </button>
        `);
    }
    
    // Handle sound toggle
    $('#soundToggle').click(function() {
        soundEnabled = !soundEnabled;
        const icon = soundEnabled ? 'fa-volume-up' : 'fa-volume-mute';
        $(this).html(`<i class="fas ${icon}"></i>`)
               .toggleClass('muted', !soundEnabled);
        
        if (currentAudio) {
            currentAudio.pause();
        }
        
        localStorage.setItem('soundEnabled', soundEnabled);
    });
    
    // Load sound preference
    const savedSoundPreference = localStorage.getItem('soundEnabled');
    if (savedSoundPreference !== null) {
        soundEnabled = savedSoundPreference === 'true';
        $('#soundToggle').click();
    }
}

// Animation Management
function initializeAnimations() {
    // Add entrance animations to cards
    $('.card').each(function(index) {
        $(this).css({
            'opacity': '0',
            'transform': 'translateY(30px)'
        });
        
        setTimeout(() => {
            $(this).animate({
                opacity: 1
            }, 500).css('transform', 'translateY(0)');
        }, index * 100);
    });
    
    // Add hover effects
    $('.btn').hover(
        function() {
            $(this).css('transform', 'translateY(-2px)');
        },
        function() {
            $(this).css('transform', 'translateY(0)');
        }
    );
}

// Form Validation
function initializeFormValidation() {
    $('form').on('submit', function(e) {
        let isValid = true;
        
        // Clear previous validation messages
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();
        
        // Check required fields
        $(this).find('[required]').each(function() {
            if (!$(this).val().trim()) {
                $(this).addClass('is-invalid');
                $(this).after('<div class="invalid-feedback">هذا الحقل مطلوب</div>');
                isValid = false;
            }
        });
        
        // Check email format
        $(this).find('input[type="email"]').each(function() {
            const email = $(this).val().trim();
            if (email && !isValidEmail(email)) {
                $(this).addClass('is-invalid');
                $(this).after('<div class="invalid-feedback">يرجى إدخال بريد إلكتروني صحيح</div>');
                isValid = false;
            }
        });
        
        // Check password confirmation
        const password = $(this).find('input[name="password"]').val();
        const confirmPassword = $(this).find('input[name="confirm_password"]').val();
        if (password && confirmPassword && password !== confirmPassword) {
            $(this).find('input[name="confirm_password"]').addClass('is-invalid');
            $(this).find('input[name="confirm_password"]').after('<div class="invalid-feedback">كلمات المرور غير متطابقة</div>');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            showAlert('يرجى تصحيح الأخطاء المذكورة أعلاه', 'error');
            $('.is-invalid').first().focus();
        }
    });
}

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// Loading Management
function showLoading(message = 'جاري التحميل...') {
    if (!$('#loadingModal').length) {
        $('body').append(`
            <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-dialog-centered modal-sm">
                    <div class="modal-content">
                        <div class="modal-body text-center py-4">
                            <div class="loading mb-3"></div>
                            <div id="loadingMessage">${message}</div>
                        </div>
                    </div>
                </div>
            </div>
        `);
    }
    $('#loadingMessage').text(message);
    $('#loadingModal').modal('show');
}

function hideLoading() {
    setTimeout(() => {
        $('#loadingModal').modal('hide');
    }, 500);
}

// Alert Management
function showAlert(message, type = 'info', duration = 5000) {
    const alertTypes = {
        success: 'alert-success',
        error: 'alert-danger',
        warning: 'alert-warning',
        info: 'alert-info'
    };
    
    const alertClass = alertTypes[type] || 'alert-info';
    const icons = {
        success: 'fa-check-circle',
        error: 'fa-exclamation-circle',
        warning: 'fa-exclamation-triangle',
        info: 'fa-info-circle'
    };
    
    const icon = icons[type] || 'fa-info-circle';
    
    const alertId = 'alert-' + Date.now();
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show position-fixed" 
             id="${alertId}" 
             style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
            <i class="fas ${icon} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    $('body').append(alertHtml);
    
    if (duration > 0) {
        setTimeout(() => {
            $('#' + alertId).alert('close');
        }, duration);
    }
}

// Timer Functions
function startTimer(duration, callback) {
    let timeLeft = duration;
    const timerId = setInterval(() => {
        timeLeft--;
        
        if (timeLeft <= 10 && timeLeft > 0) {
            playSound('timer');
            $('.timer-container').addClass('timer-warning');
        } else {
            $('.timer-container').removeClass('timer-warning');
        }
        
        if (callback) callback(timeLeft);
        
        if (timeLeft <= 0) {
            clearInterval(timerId);
            if (callback) callback(0);
        }
    }, 1000);
    
    return timerId;
}

function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

// Random Selection with Animation
function selectRandomStudent(students, callback) {
    if (!students || students.length === 0) {
        callback(null);
        return;
    }
    
    let currentIndex = 0;
    let rotations = 0;
    const maxRotations = students.length * 3 + Math.floor(Math.random() * students.length);
    
    const interval = setInterval(() => {
        $('.selected-student').text(students[currentIndex]);
        animateElement('.selected-student', 'pulse');
        
        currentIndex = (currentIndex + 1) % students.length;
        rotations++;
        
        if (rotations >= maxRotations) {
            clearInterval(interval);
            const finalIndex = Math.floor(Math.random() * students.length);
            $('.selected-student').text(students[finalIndex]);
            animateElement('.selected-student', 'bounceIn');
            
            setTimeout(() => {
                callback(students[finalIndex]);
            }, 1000);
        }
    }, 100);
}

// Rich Text Editor Integration
function initializeRichTextEditor(selector) {
    // This would integrate with a rich text editor like CKEditor or TinyMCE
    // For now, we'll use a simple textarea with formatting preservation
    $(selector).each(function() {
        const $this = $(this);
        
        // Handle paste events
        $this.on('paste', function(e) {
            setTimeout(() => {
                const pastedContent = $this.val();
                // Process pasted content for formatting and images
                processPastedContent(pastedContent, $this);
            }, 100);
        });
    });
}

// Utility Functions
function shuffleArray(array) {
    const shuffled = [...array];
    for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return shuffled;
}

function formatScore(score) {
    return score.toLocaleString('ar-SA');
}

function validateArabicInput(input) {
    const arabicRegex = /^[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF\s\d\u060C\u061B\u061F\u0640]+$/;
    return arabicRegex.test(input.trim());
}

function sanitizeInput(input) {
    return $('<div>').text(input).html();
}

// Export functions for use in other files
window.QuizApp = {
    playSound,
    animateElement,
    showAlert,
    hideAlert: () => $('.alert').alert('close'),
    showLoading,
    hideLoading,
    startTimer,
    formatTime,
    selectRandomStudent,
    shuffleArray,
    formatScore,
    validateArabicInput,
    sanitizeInput
};

// Console welcome message
console.log(`
🎓 منصة المسابقات التعليمية
📱 نسخة 1.0
🔧 تم تطويرها باستخدام: HTML, CSS, JS (jQuery), Bootstrap, PHP, MySQL
`);

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: main.js

Server Info

System Features

User Info