javaOcpQuiz/index.html at main · alfo0924/javaOcpQuiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java OCP 1Z0-819 測驗</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>Java OCP 1Z0-819 測驗</h1>
        <p>本測驗包含 25 題選擇題，每題 4 分，總分 100 分</p>
    </header>

    <div id="quiz-status" class="status-bar">
        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <span id="question-counter">題目 1/25</span>
        <span id="timer">剩餘時間: 30:00</span>
    </div>

    <div id="result-container" class="hidden">
        <div class="score-section">
            <h2>測驗結果</h2>
            <div class="score-display">
                <div class="score-circle">
                    <span id="score-value">0</span>
                    <span class="score-label">分</span>
                </div>
            </div>
            <p id="score-message"></p>
        </div>

        <div class="analysis-section">
            <h3>能力分析</h3>
            <div id="category-analysis"></div>
        </div>

        <div class="review-section">
            <h3>答題回顧</h3>
            <div id="question-review"></div>
        </div>

        <button id="restart-btn" class="btn">重新測驗</button>
    </div>

    <div id="quiz-container">
        <div id="question-container">
            <h2 id="question-text"></h2>
            <div id="code-snippet" class="code-container hidden"></div>
            <div id="options-container" class="options-container"></div>
        </div>

        <div class="navigation-buttons">
            <button id="prev-btn" class="btn nav-btn" disabled>上一題</button>
            <button id="next-btn" class="btn nav-btn">下一題</button>
            <button id="submit-btn" class="btn submit-btn hidden">提交測驗</button>
        </div>
    </div>

    <footer>
        <p>© 2025 Java OCP 測驗系統 | 依據 Oracle 官方考試範圍設計</p>
    </footer>
</div>
<script src="script.js"></script>
</body>
</html>