<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programming Quiz</title>
    <link rel="stylesheet" href="Decor.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><p>НАВИГАЦИЯ</p></li>
                <li><a href="./Story.html">Введение в химию</a></li>
                <li><a href="#">Ультимативный тест по химии</a></li>
            </ul>
        </nav>
    </header>

    <h1>Programming Quiz</h1>
    
    <div id="quiz-container">
        <!-- Секция 1: 1 ответ -->
        <div id="question-1" class="question-container">
            <h2> Раздел 1: Вопрос 1</h2>
            <p class="question-text">Какой из элементов ГАЗ при комнатной температуре?</p>
            <ul class="answer-container">
                <li><input type="radio" name="question-1-answer" value="a"> a) Азот</li>
                <li><input type="radio" name="question-1-answer" value="b"> b) Серебро</li>
                <li><input type="radio" name="question-1-answer" value="c"> c) Фосфор</li>
                <li><input type="radio" name="question-1-answer" value="d"> d) Аммиак</li>
            </ul>
        </div>
        <div id="question-2" class="question-container" hidden>
            <h2>Раздел 1: Вопрос 2</h2>
            <p class="question-text">Какой элемент обозначается символом O?</p>
            <ul class="answer-container">
                <li><input type="radio" name="question-2-answer" value="a"> a) Фосген</li>
                <li><input type="radio" name="question-2-answer" value="b"> b) Оганесон</li>
                <li><input type="radio" name="question-2-answer" value="c"> c) Осмий</li>
                <li><input type="radio" name="question-2-answer" value="d"> d) Кислород</li>
            </ul>
        </div>
        <div id="question-3" class="question-container" hidden>
            <h2>Раздел 1: Вопрос 3</h2>
            <p class="question-text">Все следующие элементы ТВЕРДЫЕ при комнатной температуре, кроме?</p>
            <ul class="answer-container">
                <li><input type="radio" name="question-3-answer" value="a"> a) Кальций</li>
                <li><input type="radio" name="question-3-answer" value="b"> b) Платина</li>
                <li><input type="radio" name="question-3-answer" value="c"> c) Ртуть</li>
                <li><input type="radio" name="question-3-answer" value="d"> d) Лантан</li>
            </ul>
        </div>
        <!-- Секция 2: Несколько ответов-->
        <div id="question-4" class="question-container" hidden>
            <h2>Раздел 2: Вопрос 4</h2>
            <p class="question-text">Какие из элементов жидкие при комнатной температуре?</p>
            <ul class="answer-container">
                <li><input type="checkbox" name="question-4-answer" value="a"> a) Бром</li>
                <li><input type="checkbox" name="question-4-answer" value="b"> b) Кислород</li>
                <li><input type="checkbox" name="question-4-answer" value="c"> c) Вода</li>
                <li><input type="checkbox" name="question-4-answer" value="d"> d) Гелий</li>
            </ul>
        </div>
        <div id="question-5" class="question-container" hidden>
            <h2>Раздел 2: Вопрос 5 </h2>
            <p class="question-text">Какие из этих газов благородные?</p>
            <ul class="answer-container">
                <li><input type="checkbox" name="question-5-answer" value="a"> a) Аргон</li>
                <li><input type="checkbox" name="question-5-answer" value="b"> b) Водород</li>
                <li><input type="checkbox" name="question-5-answer" value="c"> c) Фтор</li>
                <li><input type="checkbox" name="question-5-answer" value="d"> d) Ксенон</li>
            </ul>
        </div>
        <div id="question-6" class="question-container" hidden>
            <h2>Раздел 2: Вопрос 6 </h2>
            <p class="question-text">Какие жидкости растворят жиры?</p>
            <ul class="answer-container">
                <li><input type="checkbox" name="question-6-answer" value="a"> a) Вода </li>
                <li><input type="checkbox" name="question-6-answer" value="b"> b) Этиловый спирт</li>
                <li><input type="checkbox" name="question-6-answer" value="c"> c) Бутанол</li>
                <li><input type="checkbox" name="question-6-answer" value="d"> d) Ацетон</li>
            </ul>
        </div>

        <!-- Раздел 3: Написать ответ -->
        <div id="question-7" class="question-container" hidden>
            <h2>Раздел 3: Вопрос 7 </h2>
            <p class="question-text">Фамилия человека, открывшего периодический закон</p>
            <textarea id="question-7-answer" lang="ru"></textarea> <!-- Добавлен атрибут языка -->
        </div>
        <div id="question-8" class="question-container" hidden>
            <h2>Раздел 3: Вопрос 8 </h2>
            <p class="question-text">Какой щелочной металл назван в честь неба?</p>
            <textarea id="question-8-answer" lang="ru"></textarea> <!-- Добавлен атрибут языка -->
        </div>
        <div id="question-9" class="question-container" hidden>
            <h2>Раздел 3: Вопрос 9 </h2>
            <p class="question-text">Как называется класс органических веществ, с группой -OH</p>
            <textarea id="question-9-answer" lang="ru"></textarea> <!-- Добавлен атрибут языка -->
        </div>
        
        <!-- Раздел 4: Заполнить пропуски -->
        <div id="question-10" class="question-container" hidden>
            <h2>Раздел 4: Вопрос 10</h2>
            <p class="question-text"> _______ был открыт сначало на солнце, и лишь потом на Земле</p>
            <input type="text" id="question-10-answer">
        </div>
        <div id="question-11" class="question-container" hidden>
            <h2>Раздел 4: Вопрос 11</h2>
            <p class="question-text"> _______ словно человек - болеет чумой</p>
            <input type="text" id="question-11-answer">
        </div>
        <div id="question-12" class="question-container" hidden>
            <h2>Раздел 4: Вопрос 12 </h2>
            <p class="question-text"> Все время алхимики искали _______ камень</p>
            <input type="text" id="question-12-answer">
        </div>

        
        <!-- Раздел 5: Сопоставление -->
        <div id="question-13" class="question-container" hidden>
            <h2>Раздел 5: Вопрос 13</h2>
            <p>Сопоставте людей:(Д.Менделеев; К.Шееле; Д.Гиббс)</p>
            <p>И их открытия:(Уравнение Аппеля; Открытие Кислорода; Пикнометр)</p>
            <table id="question-13-table">
                <thead>
                    <tr>
                        <th>Люди</th>
                        <th>Открытия</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" id="concept-1"></td>
                        <td><textarea id="description-1"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-2"></td>
                        <td><textarea id="description-2"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-3"></td>
                        <td><textarea id="description-3"></textarea></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="question-14" class="question-container" hidden>
            <h2>Раздел 5: Вопрос 14</h2>
            <p>Сопоставте Элемент:(Платина; Иод; Рентгений)</p>
            <p>И год его открытия:(1994; 1811; 1735)</p>
            <table id="question-14-table">
                <thead>
                    <tr>
                        <th>Элемент</th>
                        <th>Год</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" id="concept-4"></td>
                        <td><textarea id="description-4"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-5"></td>
                        <td><textarea id="description-5"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-6"></td>
                        <td><textarea id="description-6"></textarea></td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div id="question-15" class="question-container" hidden>
            <h2>Раздел 5: Вопрос 15</h2>
            <p>Сопоставте название молекулы:(Синильная кислота, Этиловый спирт, Гидроксид натрия)</p>
            <p>И ее формулу:(HCN; NaOH; C2H5OH)</p>
            <table id="question-15-table">
                <thead>
                    <tr>
                        <th>название молекулы</th>
                        <th>формула</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" id="concept-7"></td>
                        <td><textarea id="description-7"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-8"></td>
                        <td><textarea id="description-8"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="concept-9"></td>
                        <td><textarea id="description-9"></textarea></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Раздел 6: True/False -->
        <div id="question-16" class="question-container" hidden>
            <h2>Раздел 6: Вопрос 16</h2>
            <p class="question-text">Д.И.Менделеев открыл водку</p>
            <input type="radio" id="true-option" name="question-16-answer" value="Правда">
            <label for="true-option">Правда</label> <!-- Добавлен элемент label -->
            <input type="radio" id="false-option" name="question-16-answer" value="Конечно правда">
            <label for="false-option">Конечно правда</label> <!-- Добавлен элемент label -->
        </div>
        
        <div id="question-17" class="question-container" hidden>
            <h2>Раздел 6: Вопрос 17</h2>
            <p class="question-text">Шведский химик Шееле скончался от паров ртути</p>
            <input type="radio" id="true-option2" name="question-17-answer" value="Правда">
            <label for="true-option2">Правда</label> <!-- Добавлен элемент label -->
            <input type="radio" id="false-option2" name="question-17-answer" value="Ложь">
            <label for="false-option2">Ложь</label> <!-- Добавлен элемент label -->
        </div>

        <!-- Submit Button -->
		<button type="button" class="submit-button" onclick="nextQuestion()">Следующий вопрос.</button>
    </div>
    
    <script src="Test.js"></script>
</body>
</html>
