Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>...</title>
    <style>
        .question-btn {background-color: #0000FF;}
        .question-btn:disabled {background-color: #C0C0C0;}
        * {font-size: 200px;}
        body {background-color: cyan;}
        ... {
            width: 1000px;
            height: 1000px;
            overflow: hidden;
        }
        ... img {
            width: ...;
            height: ...;
            object-fit: fill;
        }
        .centering {
            position: absolute;
            top: 50;
            left: 50%;
            transform: translate(-50%, 50%);
        }
        .no-wrap {
            white-space: nowrap;
        }
        .inner-td {
            width: 80%;
            margin-right: 20%;
        }
    </style>
    <script type="text/javascript">
        const questionCategories = [...];
        let questionsFlat = {};
        let curQID = 0;
        function onLoad() {
            const loading = document.getElementById("loading");
            loading.innerHTML = "Загрузка...";
            let questionButtons = "";
            for (let categoryID = 0; categoryID < questionCategories.length; categoryID += 1) {
                const category = questionCategories[categoryID];
                let questions = [...category.questions];
                questions.sort((a, b) => a.score - b.score);
                let curCatQs = "";
                for (let questionID = 0; questionID < questions.length; questionID += 1) {
                    const question = questions[questionID];
                    const fullQID = categoryID + '_' + questionID;
                    questionsFlat[fullQID] = question;
                    curCatQs += '<td class="inner-td"><button class="question-btn" id="question' + fullQID + 'btn" onclick="loadQuestion(\'' + fullQID + '\')">' + question.score + '</button></td>';
                }
                questionButtons += '<tr><td class="inner-td no-wrap">' + category.name + "</td>" + curCatQs + "</tr>";
            }
            document.getElementById("main_menu_inner").innerHTML = questionButtons;
            document.getElementById("main_menu").style.display = "block";
            loading.style.display = "none";
        }
        function loadQuestion(questionID) {
            document.getElementById("main_menu").style.display = "none";
            curQID = questionID;
            let question = questionsFlat[questionID];
            document.getElementById("question_text").innerHTML = question.question;
            document.getElementById("question_o1").style.display = "block";
            document.getElementById("question_o2").style.display = "none";
            document.getElementById("question_answer").innerHTML = question.answer;
            document.getElementById("question").style.display = "block";
        }
        function showAnswer() {
            document.getElementById("question_o1").style.display = "none";
            document.getElementById("question_o2").style.display = "block";
        }
        function closeQuestion() {
            document.getElementById("question").style.display = "none";
            document.getElementById("question" + curQID + "btn").disabled = true;
            document.getElementById("main_menu").style.display = "block";
        }
    </script>
</head>
<body onload="onLoad()">
    <div class="centering">
        <div id="loading">Должен быть включён JavaScript</div>
        <div id="main_menu" style="display: none;">
            <h1>...</h1>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <table>
                                <tbody id="main_menu_inner"></tbody>
                            </table>
                        </td>
                        <td>
                            <div class="...">
                                <img src="...">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="question" style="display: none;">
            <div id="question_text"></div>
            <br>
            <div id="question_o1" style="text_align:center;">
                <button onclick="showAnswer()">Показать ответ</button>
            </div>
            <div id="question_o2">
                <div id="question_answer"></div>
                <div style="text_aling: right;">
                    <button onclick="closeQuestion()">Закрыть вопрос</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>