ggvardgit.github.io/QUICK_TEST.html at main · ggvardgit/ggvardgit.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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Test - APUSH Learning Hub</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            background: #f5f5f5;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        .test-item {
            padding: 10px;
            margin: 5px 0;
            background: white;
            border-radius: 4px;
        }
        .pass { color: #10b981; }
        .fail { color: #ef4444; }
        .info { color: #2563eb; }
        button {
            background: #2563eb;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #1d4ed8; }
        #results { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>🧪 APUSH Learning Hub - Quick Test</h1>

    <div class="test-section">
        <h2>1. File Validation</h2>
        <button onclick="testFiles()">Check Required Files</button>
        <div id="file-results"></div>
    </div>

    <div class="test-section">
        <h2>2. Navigation Test</h2>
        <button onclick="testNavigation()">Test Navigation Links</button>
        <div id="nav-results"></div>
    </div>

    <div class="test-section">
        <h2>3. Data Structure Test</h2>
        <button onclick="testData()">Validate APUSH Data</button>
        <div id="data-results"></div>
    </div>

    <div class="test-section">
        <h2>4. LocalStorage Test</h2>
        <button onclick="testStorage()">Test Data Persistence</button>
        <div id="storage-results"></div>
    </div>

    <div class="test-section">
        <h2>5. AI Integration Test</h2>
        <button onclick="testAI()">Check AI Setup</button>
        <div id="ai-results"></div>
    </div>

    <div id="results"></div>

    <script src="apush-data.js"></script>
    <script src="openai-api.js"></script>
    <script src="script.js"></script>
    <script>
        function testFiles() {
            const results = document.getElementById('file-results');
            results.innerHTML = '<p>Checking files...</p>';

            const checks = [];

            // Check APUSH_DATA
            if (typeof APUSH_DATA !== 'undefined') {
                checks.push('<div class="test-item pass">✅ APUSH_DATA loaded</div>');
            } else {
                checks.push('<div class="test-item fail">❌ APUSH_DATA not found</div>');
            }

            // Check APUSH object
            if (typeof APUSH !== 'undefined') {
                checks.push('<div class="test-item pass">✅ APUSH utilities loaded</div>');
            } else {
                checks.push('<div class="test-item fail">❌ APUSH utilities not found</div>');
            }

            // Check OpenAIAPI (server-backed)
            if (typeof OpenAIAPI !== 'undefined') {
                checks.push('<div class="test-item pass">✅ OpenAIAPI loaded</div>');
            } else {
                checks.push('<div class="test-item info">ℹ️ OpenAIAPI not loaded (optional)</div>');
            }

            results.innerHTML = checks.join('');
        }

        function testNavigation() {
            const results = document.getElementById('nav-results');
            results.innerHTML = '<p>Testing navigation...</p>';

            const pages = [
                'index.html',
                'units.html',
                'dashboard.html',
                'schedule.html',
                'resources.html'
            ];

            const checks = pages.map(page => {
                // Check if file exists by trying to fetch it
                return fetch(page, { method: 'HEAD' })
                    .then(() => `<div class="test-item pass">✅ ${page} exists</div>`)
                    .catch(() => `<div class="test-item fail">❌ ${page} not found</div>`);
            });

            Promise.all(checks).then(html => {
                results.innerHTML = html.join('');
            });
        }

        function testData() {
            const results = document.getElementById('data-results');
            results.innerHTML = '<p>Validating data structure...</p>';

            if (!window.APUSH_DATA) {
                results.innerHTML = '<div class="test-item fail">❌ APUSH_DATA not loaded</div>';
                return;
            }

            const checks = [];
            const periods = APUSH_DATA.periods;
            const periodCount = Object.keys(periods).length;

            if (periodCount === 8) {
                checks.push('<div class="test-item pass">✅ All 8 periods present</div>');
            } else {
                checks.push(`<div class="test-item fail">❌ Expected 8 periods, found ${periodCount}</div>`);
            }

            // Check sample period
            const sample = periods[3];
            if (sample) {
                const required = ['number', 'name', 'dates', 'themes', 'timeline', 'causesEffects'];
                const missing = required.filter(f => !sample[f]);
                if (missing.length === 0) {
                    checks.push('<div class="test-item pass">✅ Period data structure valid</div>');
                } else {
                    checks.push(`<div class="test-item fail">❌ Missing fields: ${missing.join(', ')}</div>`);
                }
            }

            results.innerHTML = checks.join('');
        }

        function testStorage() {
            const results = document.getElementById('storage-results');
            results.innerHTML = '<p>Testing LocalStorage...</p>';

            const checks = [];

            try {
                // Test write
                localStorage.setItem('test_key', 'test_value');
                const read = localStorage.getItem('test_key');
                if (read === 'test_value') {
                    checks.push('<div class="test-item pass">✅ LocalStorage read/write works</div>');
                    localStorage.removeItem('test_key');
                } else {
                    checks.push('<div class="test-item fail">❌ LocalStorage read/write failed</div>');
                }

                // Check existing data
                const progress = localStorage.getItem('userProgress');
                if (progress) {
                    checks.push('<div class="test-item info">ℹ️ User progress data found</div>');
                } else {
                    checks.push('<div class="test-item info">ℹ️ No user progress (normal for new users)</div>');
                }

                checks.push('<div class="test-item info">ℹ️ OpenAI runs on the server (OPENAI_API_KEY), not in localStorage</div>');
            } catch (e) {
                checks.push(`<div class="test-item fail">❌ LocalStorage error: ${e.message}</div>`);
            }

            results.innerHTML = checks.join('');
        }

        async function testAI() {
            const results = document.getElementById('ai-results');
            results.innerHTML = '<p>Checking AI integration...</p>';

            const checks = [];

            if (typeof OpenAIAPI === 'undefined') {
                checks.push('<div class="test-item fail">❌ OpenAIAPI not loaded</div>');
                results.innerHTML = checks.join('');
                return;
            }

            checks.push('<div class="test-item pass">✅ OpenAIAPI loaded</div>');

            try {
                const r = await fetch('/api/health');
                const h = await r.json();
                if (h.ai) {
                    checks.push('<div class="test-item pass">✅ Server reports OpenAI available</div>');
                } else {
                    checks.push('<div class="test-item info">ℹ️ Server running but OPENAI_API_KEY not set (fallback questions only)</div>');
                }
            } catch (e) {
                checks.push('<div class="test-item info">ℹ️ Could not reach /api/health — use python app.py (not file://)</div>');
            }

            await OpenAIAPI.refreshAiStatus();
            if (OpenAIAPI.hasApiKey()) {
                checks.push('<div class="test-item pass">✅ Client sees server AI as available</div>');
            }

            results.innerHTML = checks.join('');
        }

        // Run all tests on load
        window.addEventListener('load', () => {
            console.log('Quick Test Page Loaded');
            console.log('Click buttons above to run individual tests');
        });
    </script>
</body>
</html>