test_list.html - master - Gubare/Practic

test_list.html
118 строк8 KB
Gubare
Base HTML
08 мар 2025, 16:30
08 мар 2025, 16:30e2cd24c
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Выбор тестов</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="main-container">
        <h2>Выбор тестов</h2>
        <div class="action-links">
            <a href="file:///D:/Distr/VScode/Projects/HTML/test_list.html">Назад</a>
        </div>
        <div class="filter">
            <label for="filter">Фильтр:</label>
            <select id="filter">
                <option value="all">Все</option>
                <option value="obligatory">Только обязательные</option>
                <option value="non-obligatory">Только необязательные</option>
            </select>
        </div>
        <div class="test-list" id="test-list">
            <!-- Тесты будут вставляться сюда -->
        </div>
        <div class="pagination" id="pagination">
            <!-- Пагинация будет вставляться сюда -->
        </div>
    </div>

    <script>
        const testData = [
            { Test_ID: 12345678, Test_Name: 'Цветовой тест Люшера', Description: 'Определение скрытого эмоционального состояния', Created_By_Org_ID: 12345678, Category: 'Цветовой', Created_Date: '08.03.2025', Is_Obligatory: true, Close_date: '10.03.2025' },
            { Test_ID: 12345679, Test_Name: 'Логика', Description: 'Тест на логическое мышление', Created_By_Org_ID: 12345678, Category: 'Логика', Created_Date: '09.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345680, Test_Name: 'Графика', Description: 'Тест на графические навыки', Created_By_Org_ID: 12345678, Category: 'Графика', Created_Date: '10.03.2025', Is_Obligatory: true, Close_date: '12.03.2025' },
            { Test_ID: 12345681, Test_Name: 'Музыка', Description: 'Тест на музыкальные способности', Created_By_Org_ID: 12345678, Category: 'Музыка', Created_Date: '11.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345682, Test_Name: 'Танцы', Description: 'Тест на танцевальные навыки', Created_By_Org_ID: 12345678, Category: 'Танцы', Created_Date: '12.03.2025', Is_Obligatory: true, Close_date: '14.03.2025' },
            { Test_ID: 12345683, Test_Name: 'Спорт', Description: 'Тест на физические навыки', Created_By_Org_ID: 12345678, Category: 'Спорт', Created_Date: '13.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345684, Test_Name: 'Интеллект', Description: 'Тест на интеллектуальные способности', Created_By_Org_ID: 12345678, Category: 'Интеллект', Created_Date: '14.03.2025', Is_Obligatory: true, Close_date: '16.03.2025' },
            { Test_ID: 12345685, Test_Name: 'Речь', Description: 'Тест на речевые навыки', Created_By_Org_ID: 12345678, Category: 'Речь', Created_Date: '15.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345686, Test_Name: 'Память', Description: 'Тест на память', Created_By_Org_ID: 12345678, Category: 'Память', Created_Date: '16.03.2025', Is_Obligatory: true, Close_date: '18.03.2025' },
            { Test_ID: 12345687, Test_Name: 'Креативность', Description: 'Тест на креативность', Created_By_Org_ID: 12345678, Category: 'Креативность', Created_Date: '17.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345688, Test_Name: 'Внимание', Description: 'Тест на внимание', Created_By_Org_ID: 12345678, Category: 'Внимание', Created_Date: '18.03.2025', Is_Obligatory: true, Close_date: '20.03.2025' },
            { Test_ID: 12345689, Test_Name: 'Эмоциональность', Description: 'Тест на эмоциональные навыки', Created_By_Org_ID: 12345678, Category: 'Эмоциональность', Created_Date: '19.03.2025', Is_Obligatory: false, Close_date: null },
            { Test_ID: 12345690, Test_Name: 'Коммуникабельность', Description: 'Тест на коммуникабельность', Created_By_Org_ID: 12345678, Category: 'Коммуникабельность', Created_Date: '20.03.2025', Is_Obligatory: true, Close_date: '22.03.2025' },
            { Test_ID: 12345691, Test_Name: 'Управление временем', Description: 'Тест на управление временем', Created_By_Org_ID: 12345678, Category: 'Управление временем', Created_Date: '21.03.2025', Is_Obligatory: false, Close_date: null }
        ];

        const itemsPerPage = 5;
        let currentPage = 1;
        let filteredData = testData;

        function renderTests(page) {
            const testList = document.getElementById('test-list');
            testList.innerHTML = '';

            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const paginatedItems = filteredData.slice(start, end);

            paginatedItems.forEach(test => {
                const testItem = document.createElement('div');
                testItem.className = 'test-item';
                testItem.innerHTML = `
                    <h3>${test.Test_Name} ${test.Is_Obligatory ? '<span style="color: red;">*</span>' : ''}</h3>
                    <p>${test.Description}</p>
                    <p><strong>Категория:</strong> ${test.Category}</p>
                    ${test.Close_date ? `<p><strong>Дедлайн:</strong> ${test.Close_date}</p>` : ''}
                    <a href="/test/${test.Test_ID}/${test.Created_By_Org_ID}" class="action-links a">Перейти к тестированию</a>
                `;
                testList.appendChild(testItem);
            });
        }

        function renderPagination() {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = '';

            const totalPages = Math.ceil(filteredData.length / itemsPerPage);

            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                button.disabled = i === currentPage;
                button.className = i === currentPage ? 'disabled' : '';
                button.addEventListener('click', () => {
                    currentPage = i;
                    renderTests(currentPage);
                    renderPagination();
                });
                pagination.appendChild(button);
            }
        }

        document.getElementById('filter').addEventListener('change', (event) => {
            const filterValue = event.target.value;
            switch (filterValue) {
                case 'all':
                    filteredData = testData;
                    break;
                case 'obligatory':
                    filteredData = testData.filter(test => test.Is_Obligatory);
                    break;
                case 'non-obligatory':
                    filteredData = testData.filter(test => !test.Is_Obligatory);
                    break;
            }
            currentPage = 1;
            renderTests(currentPage);
            renderPagination();
        });

        // Инициализация
        renderTests(currentPage);
        renderPagination();
    </script>
</body>
</html>