physhahr.github.io/binary.html at main · physhahr/physhahr.github.io · 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數字轉換挑戰</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
            text-align: center;
        }

        .container {
            max-width: 500px;
            margin: auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #result {
            margin-top: 15px;
            font-size: 1.2em;
            font-weight: bold;
            min-height: 25px;
        }

        #question {
            margin-top: 20px;
            font-size: 1.5em;
            font-weight: bold;
        }

        #guess-input {
            padding: 8px;
            font-size: 1em;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 5px;
        }

        #guess-button {
            padding: 8px 15px;
            font-size: 1em;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #guess-button:hover {
            background-color: #0056b3;
        }

        #recaptcha-container {
            display: none;
            margin-top: 20px;
        }

        #youtube-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>數字轉換挑戰</h1>
        <p id="instruction"></p>
        <p id="question"></p>
        <input type="text" id="guess-input">
        <button id="guess-button">猜猜看</button>
        <div id="recaptcha-container">
            <div class="g-recaptcha" data-sitekey="6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-" data-callback="checkGuess"></div>
        </div>
        <p id="result">---</p>
    </div>

    <div id="video-container"></div>

    <script>
        const instructionParagraph = document.getElementById('instruction');
        const questionParagraph = document.getElementById('question');
        const guessInput = document.getElementById('guess-input');
        const guessButton = document.getElementById('guess-button');
        const resultParagraph = document.getElementById('result');
        const recaptchaContainer = document.getElementById('recaptcha-container');

        let targetNumber;
        let isBinaryToDecimal;

        // 生成新的題目
        function generateQuestion() {
            targetNumber = Math.floor(Math.random() * (255 - 16 + 1)) + 16;
            isBinaryToDecimal = Math.random() < 0.5;

            if (isBinaryToDecimal) {
                const binaryString = targetNumber.toString(2);
                instructionParagraph.textContent = "請將以下二進位數字轉換成十進位：";
                questionParagraph.textContent = binaryString;
                guessInput.type = 'number';
            } else {
                instructionParagraph.textContent = "請將以下十進位數字轉換成二進位：";
                questionParagraph.textContent = targetNumber;
                guessInput.type = 'text';
            }
            // 清空輸入框
            guessInput.value = '';
        }

        // 頁面載入時先生成一題
        window.onload = generateQuestion;

        // 當點擊「猜猜看」按鈕時觸發
        guessButton.addEventListener('click', () => {
            recaptchaContainer.style.display = 'block';
            resultParagraph.textContent = "請完成 reCAPTCHA 驗證";
            guessButton.disabled = true;
            grecaptcha.render('recaptcha-container', {
                'sitekey': '6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-',
                'callback': checkGuess
            });
        });

        // reCAPTCHA 驗證成功
        function checkGuess() {
            recaptchaContainer.style.display = 'none';
            guessButton.disabled = false;

            let guess;
            let isCorrect;

            if (isBinaryToDecimal) {
                guess = parseInt(guessInput.value, 10);
                isCorrect = guess === targetNumber;
            } else {
                guess = guessInput.value.replace(/[^01]/g, '');
                isCorrect = guess === targetNumber.toString(2);
            }

            if (isCorrect) {
                resultParagraph.textContent = "恭喜你，答對了！🎉powerd by CKFGISC✨";
                playRickRoll();
            } else {
                resultParagraph.textContent = "答案不正確，請再試一次。";
            }

            grecaptcha.reset();
        }

        // Never Gonna Give You Up
        function playRickRoll() {
            const videoContainer = document.getElementById('video-container');
            if (videoContainer.querySelector('iframe')) {
                return;
            }
            const videoId = 'dQw4w9WgXcQ';
            const embedUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&loop=1&playsinline=1&allowfullscreen=1&playlist=${videoId}`;

            const iframe = document.createElement('iframe');
            iframe.setAttribute('id', 'youtube-background');
            iframe.setAttribute('src', embedUrl);
            iframe.setAttribute('title', 'YouTube video player');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
            iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
            iframe.setAttribute('allowfullscreen', 'true');

            videoContainer.appendChild(iframe);
        }
    </script>
</body>

</html>