-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstudy.html
More file actions
402 lines (381 loc) · 22.1 KB
/
study.html
File metadata and controls
402 lines (381 loc) · 22.1 KB
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Guide to AI-Powered Learning</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Calm Neutrals" - A palette of warm off-whites, soft grays, and a gentle slate blue for accents to create a focused and calm learning environment. -->
<!-- Application Structure Plan: The SPA is designed as a task-oriented interactive guide. It replaces a linear document structure with a tabbed interface for "YouTube" and "Book" learning, allowing users to switch contexts easily. Within each tab, techniques are presented as interactive cards that expand to reveal details and simple "simulations" of the AI tools. This structure was chosen to move the user from passive reading to active exploration, making the concepts more tangible and memorable. A dynamic chart provides a visual summary of the benefits, reinforcing the value proposition of each technique set. -->
<!-- Visualization & Content Choices: Report info on AI techniques is transformed into interactive cards. Goal: Organize & Inform. Method: HTML/CSS for cards, JS for interaction (show/hide details, simulate AI responses). Justification: Encourages user engagement over passive reading. Report info on the *benefits* of AI is visualized. Goal: Compare. Viz: A dynamic Chart.js horizontal bar chart. Interaction: Chart updates when switching between YouTube/Book tabs. Justification: Provides a quick, data-driven summary of effectiveness. All interactions are built with vanilla JS and Chart.js, confirming no SVG or Mermaid is used. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #F8F7F4;
color: #333;
}
.tab-active {
background-color: #4A5568;
color: #FFFFFF;
border-color: #4A5568;
}
.tab-inactive {
background-color: #E2E8F0;
color: #4A5568;
border-color: #CBD5E0;
}
.card {
background-color: #FFFFFF;
border-radius: 0.75rem;
border: 1px solid #E2E8F0;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
transform: translateY(-2px);
}
.card-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
padding: 0 1.5rem;
}
.card-content.show {
max-height: 1000px;
padding: 1.5rem 1.5rem;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
</style>
</head>
<body class="antialiased">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<header class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Supercharge Your Studies</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">This interactive guide demonstrates how to use AI to learn more effectively from common sources like YouTube and books. Explore the techniques below to make your study sessions more productive and insightful.</p>
</header>
<main>
<div class="flex justify-center mb-10">
<div class="flex space-x-2 p-1 bg-gray-200 rounded-full">
<button id="youtube-tab" class="tab-button py-2 px-6 rounded-full text-sm font-semibold transition-colors duration-300 tab-active">Learn from YouTube</button>
<button id="book-tab" class="tab-button py-2 px-6 rounded-full text-sm font-semibold transition-colors duration-300 tab-inactive">Learn from Books</button>
</div>
</div>
<div id="content-area">
</div>
<section id="effectiveness-section" class="mt-16">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Visualize the Benefits</h2>
<p class="text-center text-gray-600 mb-8 max-w-2xl mx-auto">Each set of AI techniques offers a different boost to your learning process. This chart illustrates the potential impact on time saved, comprehension, and retention for the selected learning source.</p>
<div class="bg-white p-6 rounded-xl shadow-md">
<div class="chart-container">
<canvas id="effectivenessChart"></canvas>
</div>
</div>
</section>
</main>
<footer class="text-center mt-16 pt-8 border-t border-gray-200">
<p class="text-gray-500">© 2025 AI Learning Guide. Empower your education with technology.</p>
</footer>
</div>
<script>
const contentData = {
youtube: {
intro: "YouTube is a vast ocean of knowledge. These AI techniques act as your smart navigation tools, helping you find the treasure without getting lost at sea. Interact with each method to understand how you can summarize long videos, analyze content deeply, and clarify complex topics in seconds.",
techniques: [
{
id: 'yt-summary',
title: '1. Instant Video Summarization',
description: "Don't waste time on irrelevant videos. Use AI to get the key points instantly.",
tools: "Browser extensions ('YouTube Summary with ChatGPT') or dedicated summary websites.",
interaction: {
type: 'input-button',
label: 'Enter YouTube Video URL:',
placeholder: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
buttonText: 'Simulate Summary',
resultText: "<strong>AI Summary:</strong> This video discusses the importance of focus in deep work. Key points include minimizing distractions, using time-blocking techniques, and the 'Pomodoro' method. The speaker argues that sustained, focused effort is the key to producing high-quality output in a knowledge-based economy."
}
},
{
id: 'yt-analysis',
title: '2. In-Depth Transcript Analysis',
description: 'Go beyond watching. Get a full transcript to search, analyze, and query the content.',
tools: 'AI assistants (Gemini, ChatGPT), transcription services.',
interaction: {
type: 'text-buttons',
label: 'Sample Video Transcript:',
text: "So, the core of the theory revolves around quantum entanglement, where particles become linked... it's a non-local phenomenon, which Einstein famously called 'spooky action at a distance.' Understanding this is crucial for quantum computing...",
buttons: [
{ text: 'Extract Keywords', result: '<strong>Keywords:</strong> Quantum Entanglement, Non-local Phenomenon, Spooky Action at a Distance, Quantum Computing.' },
{ text: 'Generate Quiz', result: '<strong>Quiz Question:</strong> What did Einstein call the phenomenon of quantum entanglement?' }
]
}
},
{
id: 'yt-concept',
title: '3. On-Demand Concept Explanation',
description: 'Never get stuck on a difficult topic again. Ask an AI to explain it in simple terms.',
tools: 'Any AI chatbot or assistant.',
interaction: {
type: 'input-button',
label: 'Enter a Complex Concept:',
placeholder: 'Quantum Entanglement',
buttonText: 'Simplify Concept',
resultText: "<strong>Simplified Explanation:</strong> Imagine you have two magic coins. No matter how far apart they are, if one lands on heads, you instantly know the other one landed on tails. They are mysteriously linked. That's like quantum entanglement, but with tiny particles instead of coins."
}
}
],
chartData: {
labels: ['Time Saved', 'Deeper Comprehension', 'Knowledge Retention'],
data: [90, 65, 70]
}
},
book: {
intro: "Books are concentrated sources of wisdom. AI tools can help you unpack that wisdom more efficiently. Whether you're reading a dense textbook or a lengthy novel, these methods will help you grasp key arguments, find answers, and create personalized study materials.",
techniques: [
{
id: 'book-summary',
title: '1. Smart Chapter Summaries',
description: "Get a chapter's overview before you read to focus your attention on the key ideas.",
tools: 'AI assistants for e-books, OCR apps for physical books.',
interaction: {
type: 'text-buttons',
label: 'Sample Chapter Text:',
text: 'The industrial revolution marked a pivotal shift from agrarian economies to industrial and manufacturing-based ones. This transition was powered by technological innovations like the steam engine, leading to unprecedented urbanization and societal change...',
buttons: [
{ text: 'Summarize Main Argument', result: "<strong>Main Argument:</strong> The industrial revolution, driven by technological innovation, fundamentally reshaped economies and society by shifting them from agrarian to industrial models, causing massive urbanization." }
]
}
},
{
id: 'book-qa',
title: '2. AI-Powered Q&A',
description: 'Get answers to your specific questions about the text without endless searching.',
tools: 'Any AI chatbot or assistant.',
interaction: {
type: 'input-button',
label: 'Ask a question about the text:',
placeholder: 'What was the effect of the steam engine?',
buttonText: 'Find Answer',
resultText: "<strong>AI Answer:</strong> Based on the text, the steam engine was a key technological innovation that powered the industrial revolution, enabling the shift to a manufacturing-based economy and contributing to urbanization."
}
},
{
id: 'book-study',
title: '3. Custom Study Material Generation',
description: 'Turn book content into active learning tools like flashcards and quizzes.',
tools: 'AI assistants.',
interaction: {
type: 'text-buttons',
label: 'Sample Text for Flashcards:',
text: 'Cognitive Dissonance is the mental discomfort experienced by a person who holds two or more contradictory beliefs, ideas, or values.',
buttons: [
{ text: 'Create Flashcard', result: '<strong>Front:</strong> What is Cognitive Dissonance? <br><strong>Back:</strong> The mental discomfort from holding contradictory beliefs.' },
{ text: 'Create Outline Point', result: '<strong>Outline:</strong> I. Key Psychological Concepts <br> A. Cognitive Dissonance <br> 1. Definition: Discomfort from conflicting beliefs.' }
]
}
}
],
chartData: {
labels: ['Time Saved', 'Deeper Comprehension', 'Knowledge Retention'],
data: [75, 85, 90]
}
}
};
const contentArea = document.getElementById('content-area');
const youtubeTab = document.getElementById('youtube-tab');
const bookTab = document.getElementById('book-tab');
let currentView = 'youtube';
let chart;
function createCard(technique) {
const card = document.createElement('div');
card.className = 'card mb-6';
let interactionHTML = '';
if (technique.interaction.type === 'input-button') {
interactionHTML = `
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">${technique.interaction.label}</label>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<input type="text" placeholder="${technique.interaction.placeholder}" class="flex-grow p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-300 focus:border-blue-500">
<button class="interaction-btn bg-gray-700 text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 text-sm font-semibold" data-result="${technique.interaction.resultText}">${technique.interaction.buttonText}</button>
</div>
</div>
`;
} else if (technique.interaction.type === 'text-buttons') {
const buttonsHTML = technique.interaction.buttons.map(btn =>
`<button class="interaction-btn bg-gray-700 text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors duration-200 text-sm font-semibold" data-result="${btn.result}">${btn.text}</button>`
).join('');
interactionHTML = `
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-2">${technique.interaction.label}</label>
<div class="p-3 bg-gray-50 border border-gray-200 rounded-md text-sm text-gray-600 italic">
${technique.interaction.text}
</div>
<div class="flex flex-wrap gap-2 mt-3">
${buttonsHTML}
</div>
</div>
`;
}
card.innerHTML = `
<div class="p-6 cursor-pointer" data-target="${technique.id}">
<div class="flex justify-between items-center">
<h3 class="text-xl font-semibold text-gray-800">${technique.title}</h3>
<span class="text-gray-400 transform transition-transform duration-300">▼</span>
</div>
<p class="text-gray-600 mt-2">${technique.description}</p>
</div>
<div id="${technique.id}" class="card-content">
<div>
<h4 class="font-semibold text-gray-700">Suggested Tools:</h4>
<p class="text-gray-600 text-sm mb-4">${technique.tools}</p>
<h4 class="font-semibold text-gray-700">Interactive Example:</h4>
${interactionHTML}
<div class="result-box mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md text-blue-800 text-sm" style="display: none;"></div>
</div>
</div>
`;
return card;
}
function renderContent(view) {
const data = contentData[view];
contentArea.innerHTML = `
<section id="${view}-section">
<p class="text-center text-gray-600 mb-10 max-w-3xl mx-auto">${data.intro}</p>
<div class="max-w-4xl mx-auto">
${data.techniques.map(tech => createCard(tech).outerHTML).join('')}
</div>
</section>
`;
addEventListeners();
}
function addEventListeners() {
document.querySelectorAll('.card [data-target]').forEach(header => {
header.addEventListener('click', () => {
const targetId = header.getAttribute('data-target');
const content = document.getElementById(targetId);
const icon = header.querySelector('span');
document.querySelectorAll('.card-content.show').forEach(openContent => {
if (openContent.id !== targetId) {
openContent.classList.remove('show');
const otherIcon = document.querySelector(`[data-target="${openContent.id}"] span`);
if(otherIcon) otherIcon.style.transform = 'rotate(0deg)';
}
});
content.classList.toggle('show');
icon.style.transform = content.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0deg)';
});
});
document.querySelectorAll('.interaction-btn').forEach(button => {
button.addEventListener('click', (e) => {
const resultText = e.target.getAttribute('data-result');
const resultBox = e.target.closest('.card-content').querySelector('.result-box');
resultBox.innerHTML = resultText;
resultBox.style.display = 'block';
});
});
}
function updateChart(view) {
const data = contentData[view].chartData;
if (chart) {
chart.data.labels = data.labels;
chart.data.datasets[0].data = data.data;
chart.update();
} else {
const ctx = document.getElementById('effectivenessChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.labels,
datasets: [{
label: 'Effectiveness Boost',
data: data.data,
backgroundColor: [
'rgba(74, 85, 104, 0.6)',
'rgba(49, 130, 206, 0.6)',
'rgba(56, 161, 105, 0.6)'
],
borderColor: [
'rgba(74, 85, 104, 1)',
'rgba(49, 130, 206, 1)',
'rgba(56, 161, 105, 1)'
],
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
beginAtZero: true,
max: 100,
grid: {
color: '#E2E8F0'
}
},
y: {
grid: {
display: false
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.raw}%`;
}
}
}
}
}
});
}
}
youtubeTab.addEventListener('click', () => {
if (currentView !== 'youtube') {
currentView = 'youtube';
youtubeTab.classList.replace('tab-inactive', 'tab-active');
bookTab.classList.replace('tab-active', 'tab-inactive');
renderContent(currentView);
updateChart(currentView);
}
});
bookTab.addEventListener('click', () => {
if (currentView !== 'book') {
currentView = 'book';
bookTab.classList.replace('tab-inactive', 'tab-active');
youtubeTab.classList.replace('tab-active', 'tab-inactive');
renderContent(currentView);
updateChart(currentView);
}
});
document.addEventListener('DOMContentLoaded', () => {
renderContent(currentView);
updateChart(currentView);
});
</script>
</body>
</html>