Hugging Face's logo

Spaces:
dkescape
/
trash
Running

App Files Community
dkescape commited on
Commit
09c5912
·
verified ·
1 Parent(s): c6ee7d7

Create index2.html

Browse files
Files changed (1) hide show
  1. index2.html +721 -0
index2.html ADDED
@@ -0,0 +1,721 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>OOP Exam Revision Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3b82f6',
15
+ secondary: '#1e40af',
16
+ accent: '#0ea5e9',
17
+ light: '#f0f9ff',
18
+ dark: '#0c4a6e'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
26
+
27
+ body {
28
+ font-family: 'Poppins', sans-serif;
29
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
30
+ background-attachment: fixed;
31
+ }
32
+
33
+ .unit-card {
34
+ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
35
+ }
36
+
37
+ .unit-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+
42
+ .choice-chip {
43
+ cursor: pointer;
44
+ transition: all 0.2s ease;
45
+ }
46
+
47
+ .choice-chip:hover {
48
+ transform: scale(1.05);
49
+ }
50
+
51
+ .question-card {
52
+ overflow: hidden;
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .highlighted {
57
+ background: linear-gradient(90deg, #dbeafe 0%, transparent 100%);
58
+ border-left: 4px solid #3b82f6;
59
+ }
60
+
61
+ .exam-tip {
62
+ animation: pulse 2s infinite;
63
+ }
64
+
65
+ @keyframes pulse {
66
+ 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
67
+ 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
68
+ 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
69
+ }
70
+
71
+ mark {
72
+ background-color: #fef3c7;
73
+ padding: 0 2px;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body>
78
+ <!-- Header -->
79
+ <header class="bg-secondary text-white py-8 shadow-xl">
80
+ <div class="container mx-auto px-4">
81
+ <div class="flex flex-col md:flex-row justify-between items-center gap-6">
82
+ <div>
83
+ <h1 class="text-3xl md:text-4xl font-bold flex items-center gap-3">
84
+ <i class="fas fa-laptop-code"></i>
85
+ OOP with C++ Exam Revision Guide
86
+ </h1>
87
+ <p class="mt-2 text-blue-200">
88
+ Comprehensive preparation material for Object Oriented Programming exam
89
+ </p>
90
+ </div>
91
+ <div class="inline-flex gap-2">
92
+ <button class="bg-accent hover:bg-blue-500 text-white px-4 py-2 rounded-full flex items-center">
93
+ <i class="fas fa-book mr-2"></i> Study Notes
94
+ </button>
95
+ <button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-full flex items-center">
96
+ <i class="fas fa-download mr-2"></i> PDF Version
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Exam Tips -->
104
+ <section class="py-6 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-100">
105
+ <div class="container mx-auto px-4">
106
+ <div class="exam-tip bg-white rounded-xl p-4 shadow-md flex items-start">
107
+ <div class="bg-accent text-white rounded-full p-3 mr-4">
108
+ <i class="fas fa-lightbulb text-lg"></i>
109
+ </div>
110
+ <div>
111
+ <h3 class="font-bold text-lg text-secondary mb-1">Quick Tips for Your Exam</h3>
112
+ <ul class="list-disc pl-5 space-y-1 text-gray-700">
113
+ <li>Write neatly, underline keywords: <mark>private</mark>, <mark>friend</mark>, <mark>inline</mark>, <mark>::</mark></li>
114
+ <li><strong>Draw tables</strong> for comparisons (OOP vs POP, access specifiers)</li>
115
+ <li>Write small code snippets — even 4 lines with comments can get full marks</li>
116
+ <li>Spend ~1 minute per 2 marks — don't over-write answers</li>
117
+ <li>If you're unsure, write something — definition, syntax, or an example</li>
118
+ </ul>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <main class="container mx-auto px-4 py-8">
125
+ <!-- Unit Navigation -->
126
+ <section class="mb-12">
127
+ <h2 class="text-2xl font-bold text-center text-secondary mb-8">Exam Units</h2>
128
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
129
+ <button data-unit="1" class="unit-card bg-gradient-to-br from-blue-100 to-blue-200 border border-blue-300 rounded-2xl p-6 text-center hover:border-blue-500 shadow-md">
130
+ <h3 class="text-xl font-bold text-secondary flex justify-center items-center">
131
+ <i class="fas fa-cube mr-2 text-accent"></i>
132
+ UNIT-1
133
+ </h3>
134
+ <p class="text-gray-700 font-medium mt-2">Principles Of OOP</p>
135
+ <div class="bg-primary/10 text-xs inline-block px-3 py-1 rounded-full mt-3 text-primary font-medium">
136
+ 12 Questions
137
+ </div>
138
+ </button>
139
+
140
+ <button data-unit="2" class="unit-card bg-gradient-to-br from-indigo-100 to-indigo-200 border border-indigo-300 rounded-2xl p-6 text-center hover:border-indigo-500 shadow-md">
141
+ <h3 class="text-xl font-bold text-secondary flex justify-center items-center">
142
+ <i class="fas fa-cogs mr-2 text-indigo-500"></i>
143
+ UNIT-2
144
+ </h3>
145
+ <p class="text-gray-700 font-medium mt-2">Function, Class & Objects</p>
146
+ <div class="bg-indigo-500/10 text-xs inline-block px-3 py-1 rounded-full mt-3 text-indigo-700 font-medium">
147
+ 9 Questions
148
+ </div>
149
+ </button>
150
+
151
+ <button data-unit="3" class="unit-card bg-gradient-to-br from-cyan-100 to-cyan-200 border border-cyan-300 rounded-2xl p-6 text-center hover:border-cyan-500 shadow-md">
152
+ <h3 class="text-xl font-bold text-secondary flex justify-center items-center">
153
+ <i class="fas fa-hat-wizard mr-2 text-cyan-500"></i>
154
+ UNIT-3
155
+ </h3>
156
+ <p class="text-gray-700 font-medium mt-2">Constructor & Destructor</p>
157
+ <div class="bg-cyan-500/10 text-xs inline-block px-3 py-1 rounded-full mt-3 text-cyan-700 font-medium">
158
+ 6 Questions
159
+ </div>
160
+ </button>
161
+ </div>
162
+ </section>
163
+
164
+ <!-- Comparison Tables -->
165
+ <section class="mb-12">
166
+ <h2 class="text-2xl font-bold text-secondary mb-6 flex items-center gap-2">
167
+ <i class="fas fa-table text-accent"></i> Important Comparison Tables
168
+ </h2>
169
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
170
+ <!-- OOP vs POP Table -->
171
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
172
+ <div class="bg-primary text-white py-3 px-4">
173
+ <h3 class="font-bold text-lg flex items-center gap-2">
174
+ <i class="fas fa-object-group"></i> OOP vs POP Comparison
175
+ </h3>
176
+ </div>
177
+ <div class="overflow-x-auto">
178
+ <table class="min-w-full">
179
+ <thead class="bg-blue-50">
180
+ <tr>
181
+ <th class="py-3 px-4 text-left">Feature</th>
182
+ <th class="py-3 px-4 text-left">OOP</th>
183
+ <th class="py-3 px-4 text-left">POP</th>
184
+ </tr>
185
+ </thead>
186
+ <tbody>
187
+ <tr class="border-b">
188
+ <td class="py-3 px-4 font-medium">Approach</td>
189
+ <td class="py-3 px-4"><mark>Object-based</mark></td>
190
+ <td class="py-3 px-4">Procedure-based</td>
191
+ </tr>
192
+ <tr class="border-b bg-blue-50">
193
+ <td class="py-3 px-4 font-medium">Focus</td>
194
+ <td class="py-3 px-4"><mark>Data & methods</mark></td>
195
+ <td class="py-3 px-4">Algorithms</td>
196
+ </tr>
197
+ <tr class="border-b">
198
+ <td class="py-3 px-4 font-medium">Data Security</td>
199
+ <td class="py-3 px-4"><mark>Encapsulation</mark></td>
200
+ <td class="py-3 px-4">Limited/no security</td>
201
+ </tr>
202
+ <tr class="border-b bg-blue-50">
203
+ <td class="py-3 px-4 font-medium">Reusability</td>
204
+ <td class="py-3 px-4"><mark>High</mark> (inheritance)</td>
205
+ <td class="py-3 px-4"><mark>Low</mark></td>
206
+ </tr>
207
+ <tr class="border-b">
208
+ <td class="py-3 px-4 font-medium">Examples</td>
209
+ <td class="py-3 px-4">C++, Java, Python</td>
210
+ <td class="py-3 px-4">C, Pascal, FORTRAN</td>
211
+ </tr>
212
+ </tbody>
213
+ </table>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Access Specifiers Table -->
218
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
219
+ <div class="bg-indigo-500 text-white py-3 px-4">
220
+ <h3 class="font-bold text-lg flex items-center gap-2">
221
+ <i class="fas fa-lock"></i> Access Specifiers Comparison
222
+ </h3>
223
+ </div>
224
+ <div class="overflow-x-auto">
225
+ <table class="min-w-full">
226
+ <thead class="bg-indigo-50">
227
+ <tr>
228
+ <th class="py-3 px-4 text-left"></th>
229
+ <th class="py-3 px-4 text-left">public</th>
230
+ <th class="py-3 px-4 text-left">private</th>
231
+ <th class="py-3 px-4 text-left">protected</th>
232
+ </tr>
233
+ </thead>
234
+ <tbody>
235
+ <tr class="border-b">
236
+ <td class="py-3 px-4 font-medium">Access in same class</td>
237
+ <td class="py-3 px-4">✅</td>
238
+ <td class="py-3 px-4">✅</td>
239
+ <td class="py-3 px-4">✅</td>
240
+ </tr>
241
+ <tr class="border-b bg-indigo-50">
242
+ <td class="py-3 px-4 font-medium">Access in derived class</td>
243
+ <td class="py-3 px-4">✅</td>
244
+ <td class="py-3 px-4"><mark>❌</mark></td>
245
+ <td class="py-3 px-4">✅</td>
246
+ </tr>
247
+ <tr class="border-b">
248
+ <td class="py-3 px-4 font-medium">Access from objects</td>
249
+ <td class="py-3 px-4">✅</td>
250
+ <td class="py-3 px-4"><mark>❌</mark></td>
251
+ <td class="py-3 px-4"><mark>❌</mark></td>
252
+ </tr>
253
+ <tr class="border-b bg-indigo-50">
254
+ <td class="py-3 px-4 font-medium">Default specifier</td>
255
+ <td class="py-3 px-4">Classes: ❌<br>Structs: ✅</td>
256
+ <td class="py-3 px-4">Classes: ✅</td>
257
+ <td class="py-3 px-4">❌</td>
258
+ </tr>
259
+ </tbody>
260
+ </table>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- Unit Content -->
267
+ <div>
268
+ <!-- Unit 1 -->
269
+ <section id="unit-1" class="mb-12">
270
+ <div class="flex items-center gap-3 mb-6">
271
+ <div class="w-2 h-10 bg-primary rounded-lg"></div>
272
+ <h2 class="text-2xl font-bold text-secondary flex items-center gap-2">
273
+ <i class="fas fa-cube text-accent"></i> UNIT-1: Principles Of OOP
274
+ </h2>
275
+ </div>
276
+
277
+ <div class="grid grid-cols-1 gap-4">
278
+ <!-- Question 1 -->
279
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
280
+ <div class="flex flex-wrap gap-3 items-start justify-between">
281
+ <div>
282
+ <span class="font-bold text-secondary text-lg">Q1.</span>
283
+ <span class="text-gray-800 font-medium">Define OOP.</span>
284
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">2 MARKS</span>
285
+ </div>
286
+ <div class="flex gap-2">
287
+ <button class="choice-chip bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
288
+ Easy
289
+ </button>
290
+ <button class="choice-chip bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium highlighted">
291
+ <i class="fas fa-check-circle mr-1"></i>Important
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Question 2 with Top Tip -->
298
+ <div class="relative">
299
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
300
+ <div class="flex flex-wrap gap-3 items-start justify-between">
301
+ <div>
302
+ <span class="font-bold text-secondary text-lg">Q2.</span>
303
+ <span class="text-gray-800 font-medium">List applications of OOP.</span>
304
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">2 MARKS</span>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <div class="absolute -top-2 -right-2 bg-amber-500 text-white text-xs font-bold px-2 py-1 rounded-lg shadow-lg">
309
+ <i class="fas fa-star mr-1"></i> Top Application Areas
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Question 3 -->
314
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
315
+ <div class="flex flex-wrap gap-3 items-start justify-between">
316
+ <div>
317
+ <span class="font-bold text-secondary text-lg">Q3.</span>
318
+ <span class="text-gray-800 font-medium">List advantages & disadvantages of OOP.</span>
319
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
320
+ </div>
321
+ <div class="flex gap-2">
322
+ <button class="choice-chip bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
323
+ Theory
324
+ </button>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Question 4 -->
330
+ <div class="question-card bg-white rounded-lg shadow-md p-5 highlighted">
331
+ <div class="flex flex-wrap gap-3 items-start justify-between">
332
+ <div>
333
+ <span class="font-bold text-secondary text-lg">Q4.</span>
334
+ <span class="text-gray-800 font-medium">Differentiate OOP & POP.</span>
335
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
336
+ </div>
337
+ <div class="flex gap-2">
338
+ <button class="choice-chip bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">
339
+ <i class="fas fa-table mr-1"></i> Tabular Form
340
+ </button>
341
+ </div>
342
+ </div>
343
+ <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
344
+ <p class="text-sm text-gray-700 font-medium">
345
+ <i class="fas fa-lightbulb text-blue-500 mr-2"></i>
346
+ Refer to OOP vs POP table for structured comparisons
347
+ </p>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Question 5 -->
352
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
353
+ <div class="flex flex-wrap gap-3 items-start justify-between">
354
+ <div>
355
+ <span class="font-bold text-secondary text-lg">Q5.</span>
356
+ <span class="text-gray-800 font-medium">Explain the basic concepts of C++.</span>
357
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
358
+ </div>
359
+ <div class="flex gap-2">
360
+ <button class="choice-chip bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">
361
+ Core Concepts
362
+ </button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Question 6 with Code Example -->
368
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
369
+ <div class="flex flex-wrap gap-3 items-start justify-between">
370
+ <div>
371
+ <span class="font-bold text-secondary text-lg">Q6.</span>
372
+ <span class="text-gray-800 font-medium">Explain the structure of C++ with example.</span>
373
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
374
+ </div>
375
+ <div class="flex gap-2">
376
+ <button class="choice-chip bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium" data-toggle="code">
377
+ <i class="fas fa-code mr-1"></i> Show Example Code
378
+ </button>
379
+ </div>
380
+ </div>
381
+ <div class="hidden mt-4" id="code-example">
382
+ <pre class="bg-gray-800 text-green-300 p-4 rounded-lg text-sm overflow-x-auto">
383
+ #include &lt;iostream&gt;
384
+ using namespace std;
385
+
386
+ int main() {
387
+ cout << "Hello, OOP in C++!" << endl;
388
+ return 0;
389
+ }</pre>
390
+ <div class="mt-2 text-sm text-gray-600">
391
+ Basic structure of a C++ program with necessary components
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Additional Questions (Collapsed for brevity) -->
397
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
398
+ <!-- Question 7 -->
399
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
400
+ <div>
401
+ <span class="font-bold text-secondary text-lg">Q7.</span>
402
+ <span class="text-gray-800 font-medium">List & explain user-defined data types & derived data types with example.</span>
403
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Question 8 -->
408
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
409
+ <div>
410
+ <span class="font-bold text-secondary text-lg">Q8.</span>
411
+ <span class="text-gray-800 font-medium">Define variable.</span>
412
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">2 MARKS</span>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Question 9 -->
417
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
418
+ <div>
419
+ <span class="font-bold text-secondary text-lg">Q9.</span>
420
+ <span class="text-gray-800 font-medium">What is a reference variable in C++?</span>
421
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Question 10 -->
426
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
427
+ <div>
428
+ <span class="font-bold text-secondary text-lg">Q10.</span>
429
+ <span class="text-gray-800 font-medium">Describe variable declaration & dynamic initialization in C++.</span>
430
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- Question 11 -->
435
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
436
+ <div>
437
+ <span class="font-bold text-secondary text-lg">Q11.</span>
438
+ <span class="text-gray-800 font-medium">Explain Scope Resolution.</span>
439
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Question 12 with Access Specifier Tip -->
444
+ <div class="question-card bg-white rounded-lg shadow-md p-5 highlighted">
445
+ <div class="flex flex-wrap gap-3 items-start justify-between">
446
+ <div>
447
+ <span class="font-bold text-secondary text-lg">Q12.</span>
448
+ <span class="text-gray-800 font-medium">Explain access specifiers (public, private, protected).</span>
449
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
450
+ </div>
451
+ <div class="flex gap-2">
452
+ <button class="choice-chip bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">
453
+ <i class="fas fa-table mr-1"></i> Use Table Above
454
+ </button>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </section>
461
+
462
+ <!-- Unit 2 -->
463
+ <section id="unit-2" class="mb-12">
464
+ <div class="flex items-center gap-3 mb-6">
465
+ <div class="w-2 h-10 bg-indigo-500 rounded-lg"></div>
466
+ <h2 class="text-2xl font-bold text-secondary flex items-center gap-2">
467
+ <i class="fas fa-cogs text-indigo-500"></i> UNIT-2: Function, Class & Objects
468
+ </h2>
469
+ </div>
470
+
471
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
472
+ <!-- Unit 2 questions (collapsed for brevity) -->
473
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
474
+ <span class="font-bold text-secondary text-lg">Q13.</span>
475
+ <span class="text-gray-800 font-medium">Define function with function prototype, function declaration & function calling.</span>
476
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
477
+ </div>
478
+
479
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
480
+ <span class="font-bold text-secondary text-lg">Q14.</span>
481
+ <span class="text-gray-800 font-medium">Define an inline function & explain how to implement with example.</span>
482
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
483
+ <div class="mt-3">
484
+ <mark class="font-medium text-gray-700">Tip: Underline the keyword 'inline' in answer</mark>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="question-card bg-white rounded-lg shadow-md p-5 highlighted">
489
+ <span class="font-bold text-secondary text-lg">Q15.</span>
490
+ <span class="text-gray-800 font-medium">Explain default and constant arguments with example.</span>
491
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
492
+ </div>
493
+
494
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
495
+ <span class="font-bold text-secondary text-lg">Q16.</span>
496
+ <span class="text-gray-800 font-medium">Explain Function Overloading with example.</span>
497
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
498
+ </div>
499
+
500
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
501
+ <span class="font-bold text-secondary text-lg">Q17.</span>
502
+ <span class="text-gray-800 font-medium">Define class & object.</span>
503
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">2 MARKS</span>
504
+ </div>
505
+
506
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
507
+ <span class="font-bold text-secondary text-lg">Q18.</span>
508
+ <span class="text-gray-800 font-medium">What is an instance of a class?</span>
509
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">2 MARKS</span>
510
+ </div>
511
+
512
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
513
+ <span class="font-bold text-secondary text-lg">Q19.</span>
514
+ <span class="text-gray-800 font-medium">Define Member Function & Nesting of Member Function.</span>
515
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
516
+ </div>
517
+
518
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
519
+ <span class="font-bold text-secondary text-lg">Q20.</span>
520
+ <span class="text-gray-800 font-medium">Define Private Member Function.</span>
521
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
522
+ </div>
523
+
524
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
525
+ <span class="font-bold text-secondary text-lg">Q21.</span>
526
+ <span class="text-gray-800 font-medium">What is a Friend Function? Explain with example.</span>
527
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
528
+ <div class="mt-3">
529
+ <mark class="font-medium text-gray-700">Underline 'friend' in answer</mark>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </section>
534
+
535
+ <!-- Unit 3 -->
536
+ <section id="unit-3" class="mb-12">
537
+ <div class="flex items-center gap-3 mb-6">
538
+ <div class="w-2 h-10 bg-cyan-500 rounded-lg"></div>
539
+ <h2 class="text-2xl font-bold text-secondary flex items-center gap-2">
540
+ <i class="fas fa-hat-wizard text-cyan-500"></i> UNIT-3: Constructor & Destructor
541
+ </h2>
542
+ </div>
543
+
544
+ <div class="grid grid-cols-1 gap-4">
545
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
546
+ <span class="font-bold text-secondary text-lg">Q22.</span>
547
+ <span class="text-gray-800 font-medium">What is a constructor? Explain in brief with example.</span>
548
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
549
+ </div>
550
+
551
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
552
+ <span class="font-bold text-secondary text-lg">Q23.</span>
553
+ <span class="text-gray-800 font-medium">Explain default constructor with program.</span>
554
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
555
+ <div class="mt-3 text-sm text-gray-600">
556
+ <i class="fas fa-code text-blue-500 mr-2"></i> Write a simple program showing a default constructor
557
+ </div>
558
+ </div>
559
+
560
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
561
+ <span class="font-bold text-secondary text-lg">Q24.</span>
562
+ <span class="text-gray-800 font-medium">How to test a copy constructor? Justify with program.</span>
563
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
564
+ </div>
565
+
566
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
567
+ <span class="font-bold text-secondary text-lg">Q25.</span>
568
+ <span class="text-gray-800 font-medium">Explain parameterized constructor with example.</span>
569
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">4 MARKS</span>
570
+ </div>
571
+
572
+ <div class="question-card bg-white rounded-lg shadow-md p-5">
573
+ <span class="font-bold text-secondary text-lg">Q26.</span>
574
+ <span class="text-gray-800 font-medium">Explain Characteristics of Constructor.</span>
575
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
576
+ </div>
577
+
578
+ <div class="question-card bg-white rounded-lg shadow-md p-5 highlighted">
579
+ <div class="flex flex-wrap gap-3 items-start justify-between">
580
+ <div>
581
+ <span class="font-bold text-secondary text-lg">Q27.</span>
582
+ <span class="text-gray-800 font-medium">Write a C++ program to enter student details by passing parameters to constructors.</span>
583
+ <span class="text-sm bg-blue-100 text-primary px-2 py-0.5 rounded-full">3 MARKS</span>
584
+ </div>
585
+ <div class="flex gap-2">
586
+ <button class="choice-chip bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium" data-toggle="code2">
587
+ <i class="fas fa-code mr-1"></i> Example Program
588
+ </button>
589
+ </div>
590
+ </div>
591
+ <div class="hidden mt-4" id="code-example2">
592
+ <pre class="bg-gray-800 text-green-300 p-4 rounded-lg text-sm overflow-x-auto">
593
+ #include &lt;iostream&gt;
594
+ #include &lt;string&gt;
595
+ using namespace std;
596
+
597
+ class Student {
598
+ string name;
599
+ int roll;
600
+ public:
601
+ Student(string n, int r) { // Constructor with parameters
602
+ name = n;
603
+ roll = r;
604
+ }
605
+ void display() {
606
+ cout << "Name: " << name << "\nRoll: " << roll;
607
+ }
608
+ };
609
+
610
+ int main() {
611
+ Student s1("John", 101);
612
+ s1.display();
613
+ return 0;
614
+ }</pre>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </section>
619
+ </div>
620
+
621
+ <!-- Key Concepts Review-->
622
+ <section class="mb-12 bg-gradient-to-br from-blue-50 to-white p-6 rounded-xl shadow-lg border border-blue-100">
623
+ <h2 class="text-2xl font-bold text-secondary mb-6">Key Concepts Cheatsheet</h2>
624
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
625
+ <div class="bg-white rounded-lg p-4 border border-blue-200 shadow-sm flex flex-col items-center text-center">
626
+ <div class="bg-blue-100 p-3 rounded-full mb-3">
627
+ <i class="fas fa-box-open text-blue-600 text-xl"></i>
628
+ </div>
629
+ <h3 class="font-bold text-secondary">Encapsulation</h3>
630
+ <p class="text-sm text-gray-600 mt-1">Bundling data with methods operating on that data</p>
631
+ </div>
632
+
633
+ <div class="bg-white rounded-lg p-4 border border-indigo-200 shadow-sm flex flex-col items-center text-center">
634
+ <div class="bg-indigo-100 p-3 rounded-full mb-3">
635
+ <i class="fas fa-sitemap text-indigo-600 text-xl"></i>
636
+ </div>
637
+ <h3 class="font-bold text-secondary">Inheritance</h3>
638
+ <p class="text-sm text-gray-600 mt-1">Creating hierarchical relationships between classes</p>
639
+ </div>
640
+
641
+ <div class="bg-white rounded-lg p-4 border border-purple-200 shadow-sm flex flex-col items-center text-center">
642
+ <div class="bg-purple-100 p-3 rounded-full mb-3">
643
+ <i class="fas fa-bolt text-purple-600 text-xl"></i>
644
+ </div>
645
+ <h3 class="font-bold text-secondary">Polymorphism</h3>
646
+ <p class="text-sm text-gray-600 mt-1">Same methods performing different actions</p>
647
+ </div>
648
+
649
+ <div class="bg-white rounded-lg p-4 border border-cyan-200 shadow-sm flex flex-col items-center text-center">
650
+ <div class="bg-cyan-100 p-3 rounded-full mb-3">
651
+ <i class="fas fa-puzzle-piece text-cyan-600 text-xl"></i>
652
+ </div>
653
+ <h3 class="font-bold text-secondary">Abstraction</h3>
654
+ <p class="text-sm text-gray-600 mt-1">Hiding complex details, showing only essentials</p>
655
+ </div>
656
+ </div>
657
+ </section>
658
+ </main>
659
+
660
+ <!-- Footer -->
661
+ <footer class="bg-secondary text-blue-100 py-8">
662
+ <div class="container mx-auto px-4">
663
+ <div class="flex flex-col md:flex-row justify-between items-center">
664
+ <div class="mb-4 md:mb-0">
665
+ <h3 class="text-xl font-bold text-white">OOP Exam Revision Guide</h3>
666
+ <p class="mt-1">Comprehensive preparation material for your Object Oriented Programming exam</p>
667
+ </div>
668
+ <div class="flex space-x-4">
669
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center">
670
+ <i class="fas fa-print mr-2"></i> Print Summary
671
+ </button>
672
+ <button class="bg-cyan-500 hover:bg-cyan-600 text-white py-2 px-4 rounded-lg flex items-center">
673
+ <i class="fas fa-book-open mr-2"></i> Revise Key Points
674
+ </button>
675
+ </div>
676
+ </div>
677
+ <div class="mt-8 pt-8 border-t border-blue-800 text-center text-sm text-blue-200">
678
+ <p>This study guide covers essential OOP concepts as presented in standard curriculum and exam patterns.</p>
679
+ <p class="mt-2">Important keywords: <mark>private</mark>, <mark>friend</mark>, <mark>inline</mark>, <mark>::</mark>, <mark>using</mark>, <mark>namespace</mark>, <mark>class</mark>, <mark>object</mark>, <mark>constructor</mark>, <mark>destructor</mark></p>
680
+ </div>
681
+ </div>
682
+ </footer>
683
+
684
+ <script>
685
+ document.addEventListener('DOMContentLoaded', function() {
686
+ // Code toggle functionality
687
+ const codeButtons = document.querySelectorAll('[data-toggle="code"]');
688
+ codeButtons.forEach(button => {
689
+ button.addEventListener('click', () => {
690
+ const codeExample = button.closest('.question-card').querySelector('#code-example');
691
+ codeExample.classList.toggle('hidden');
692
+ });
693
+ });
694
+
695
+ // Unit navigation hover effect
696
+ const unitCards = document.querySelectorAll('.unit-card');
697
+ unitCards.forEach(card => {
698
+ card.addEventListener('click', () => {
699
+ const unitId = card.dataset.unit;
700
+ location.hash = `#unit-${unitId}`;
701
+ // Highlight the unit section
702
+ const unitSection = document.getElementById(`unit-${unitId}`);
703
+ unitSection.classList.add('animate-pulse');
704
+ setTimeout(() => {
705
+ unitSection.classList.remove('animate-pulse');
706
+ }, 1500);
707
+ });
708
+ });
709
+
710
+ // Example shown in Unit 3
711
+ const codeButton2 = document.querySelector('[data-toggle="code2"]');
712
+ if(codeButton2) {
713
+ codeButton2.addEventListener('click', () => {
714
+ const codeExample = document.getElementById('code-example2');
715
+ codeExample.classList.toggle('hidden');
716
+ });
717
+ }
718
+ });
719
+ </script>
720
+ </body>
721
+ </html>