you are a programmer I want you to take this code and make an php file to secure xls file and get data from it <!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Randomly Load XLSX Data</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Full height of the viewport */
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            text-align: center;
        }
        #output {
            max-width: 90%; /* Ensure content doesn't exceed the screen */
            width: 90%; /* Allow width to scale */
            padding: 2%; /* Responsive padding */
            border-radius: 10px;
            background: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        img {
            width: 100%; /* Makes the image take full width of the parent */
            max-height: 300px; /* Limit maximum height */
            height: auto; /* Maintain aspect ratio */
            border-radius: 10px;
            display: block; /* Center image */
            margin: 0 auto; /* Center image */
        }
        p {
            font-size: 2vw; /* Responsive font size using viewport width */
            color: #333;
            margin-top: 1em; /* Responsive spacing */
            background-color: #eef; /* Light blue background for the answer */
            padding: 10px; /* Padding for better appearance */
            border-radius: 5px; /* Round corners */
        }
        .question-container {
            width: 100%; /* Full width for the question */
            display: flex;
            flex-direction: column;
            align-items: center; /* Center elements horizontally */
        }
        .question {
            font-size: 2.5vw; /* Responsive font size using viewport width */
            font-weight: bold; /* Bold the question */
            color: #fff; /* Text color */
            margin-bottom: 10px; /* Space between question and loading bar */
            background-color: #007BFF; /* Background color for the question */
            padding: 10px; /* Padding for more spacing */
            border-radius: 5px; /* Round corners */
            display: inline-block; /* Allow width of background to shrink to content */
            word-wrap: break-word; /* Break words if necessary */
            width: 100%; /* Full width to fit the parent */
        }
        /* Loading bar styles */
        .loading-bar {
            width: 100%; /* Full width of the parent */
            background-color: #eee; /* Light grey background */
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            height: 10px; /* Height of the loading bar */
            margin-top: 10px; /* Space between loading bar and other elements */
        }
        .loading-progress {
            height: 100%; /* Full height */
            background-color: #007BFF; /* Blue color for the progress */
            width: 0; /* Start width at 0 */
            transition: width 0.1s ease; /* Animation for width change */
        }
    </style>
</head>
<body dir="rtl">

<div id="output">
    <div class="question-container">
        <div class="loading-bar hidden" id="loadingBar">
            <div class="loading-progress" id="loadingProgress"></div>
        </div>
        <div id="content" class="hidden"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<script>
    let jsonData = []; // To store the loaded data
    let refreshInterval; // To hold the reference to the interval timer
    let loadingTimeout; // To hold the timeout for loading

    // Function to fetch the XLSX file and process it
    function loadXLSX() {
        const filePath = 'answer.xlsx'; // Specify your Excel file path

        fetch(filePath)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.arrayBuffer(); // Read the response as an ArrayBuffer
            })
            .then(data => {
                const workbook = XLSX.read(data, { type: 'array' });
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });

                // Remove header if it exists
                if (jsonData.length > 0) {
                    jsonData.shift(); // Remove header row
                    showRandomRow(); // Show the first random row
                    startAutoRefresh(); // Start the timer for refreshing
                } else {
                    console.error('No data found in the Excel file.');
                }
            })
            .catch(error => {
                console.error('Error fetching the file:', error);
                document.getElementById('output').innerText = 'فشل في تحميل الملف'; // Arabic for "Failed to load the file."
            });
    }

    // Function to show a random row
    function showRandomRow() {
        if (jsonData.length > 0) {
            const randomIndex = Math.floor(Math.random() * jsonData.length);
            const row = jsonData[randomIndex];

            const questionText = row[0]; // Assuming the question is in the first column
            const questionImg = row[1]; // Image URL
            const answer1 = row[2]; // First answer option
            const answer2 = row[3]; // Second answer option
            const answer3 = row[4]; // Third answer option
            const answer4 = row[5]; // Fourth answer option
            const correct = row[6]; // Correct answer indicator (1-4)

            // Determine which answer to display based on the correct number
            let correctAnswerText = '';
            switch (correct) {
                case 1:
                    correctAnswerText = answer1;
                    break;
                case 2:
                    correctAnswerText = answer2;
                    break;
                case 3:
                    correctAnswerText = answer3;
                    break;
                case 4:
                    correctAnswerText = answer4;
                    break;
                default:
                    correctAnswerText = 'رقم إجابة غير صالح'; // Arabic for "Invalid answer number"
                    break;
            }

            // Show content
            const content = document.getElementById('content');
            content.classList.remove('hidden');

            // Update the output HTML to show question, image, and answer
            content.innerHTML = `
                <div class="question">${questionText}</div>
                <img src="${questionImg}" alt="صورة السؤال" onload="this.style.display='block'"/>
                <p>${correctAnswerText}</p>
            `;
        }
    }

    // Function to start the auto-refresh timer
    function startAutoRefresh() {
        refreshInterval = setInterval(() => {
            const randomDelay = Math.floor(Math.random() * 5000) + 5000; // Random time between 5 and 10 seconds
            
            // Start loading bar animation
            startLoadingBar(randomDelay);

            setTimeout(showRandomRow, randomDelay);
        }, 10000); // Refresh every 10 seconds
    }

    // Function to start the loading bar
    function startLoadingBar(duration) {
        const loadingBar = document.getElementById('loadingBar');
        const loadingProgress = document.getElementById('loadingProgress');
        
        loadingBar.classList.remove('hidden'); // Show the loading bar
        loadingProgress.style.width = '0%'; // Reset width

        let startTime = Date.now();
        loadingTimeout = setInterval(() => {
            let elapsedTime = Date.now() - startTime;
            let percentage = Math.min((elapsedTime / duration) * 100, 100);
            loadingProgress.style.width = percentage + '%'; // Update loading width

            if (percentage >= 100) {
                clearInterval(loadingTimeout); // Stop the animation when complete
            }
        }, 100); // Update every 100 milliseconds
    }

    // Load the file when the script runs
    loadXLSX();
</script>
</body>
</html>