test.html

<p id="nullTip" class="center">还没有选择测试题哟，前往题库页面选择一个吧</p>
<div id="loadingTip" class="center">
    <mdui-circular-progress></mdui-circular-progress>
    <p>试题正在加载，很快就好</p>
</div>
<div id="testContainer">
    <div id="introPart">
        <div class="header">
            <p id="questionnaireDescription"></p>
            <strong>请仔细阅读下方红字内容，并点击“开始”按钮开始作答。</strong>
            <br>
            <strong id="questionnaireTips" class="red"></strong>
        </div>
        <mdui-divider></mdui-divider>
        <div id="references">
            <h5 style="margin-bottom: 1rem;">参考信息</h5>
        </div>
    </div>

    <div id="testArea">
        <mdui-card variant="filled" class="tip-card">
            <mdui-icon-tips-and-updates--outlined style="font-size: 27px; min-width: 30px;"></mdui-icon-tips-and-updates--outlined>
            <p id="questionnaireTips" style="margin: 0; margin-left: 8px;"></p>
        </mdui-card>
        <div class="progress-tip">
            <span id="progressText"></span>
            <mdui-linear-progress class="progress-bar"></mdui-linear-progress>
        </div>
    </div>

    <div id="controlArea">
        <mdui-button class="prev-btn" variant="tonal">
            <mdui-icon-arrow-back--outlined slot="icon"></mdui-icon-arrow-back--outlined>
            上一题
        </mdui-button>
        <mdui-button class="next-btn">
            下一题
            <mdui-icon-arrow-forward--outlined slot="end-icon"></mdui-icon-arrow-forward--outlined>
        </mdui-button>
    </div>

    <div id="resultArea" class="mdui-prose">
        <h5 style="margin-bottom: 15px;">测试结果</h5>
        <strong class="result-tips"></strong>
        <table>
            <thead>
                <tr>
                    <th>项目名称</th>
                    <th>得分</th>
                    <th>评价</th>
                </tr>
            </thead>
            <tbody id="resultTbody"></tbody>
        </table>
        <!-- <div id="resultChart"></div> -->
    </div>
</div>