Hugging Face's logo

Spaces:
Theo-Web3
/
Web3-Bites
No application file

App Files Community
Theo-Web3 commited on
Commit
16d2b60
·
verified ·
1 Parent(s): 02d2a99

Create Web3 Smart Contract Adventure

Browse files
Files changed (1) hide show
  1. Web3 Smart Contract Adventure +612 -0
Web3 Smart Contract Adventure ADDED
@@ -0,0 +1,612 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Web3 Smart Contract Adventure</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
+ <style>
10
+ .blockchain-animation {
11
+ background: linear-gradient(90deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
12
+ background-size: 200% 100%;
13
+ animation: blockchainFlow 5s linear infinite;
14
+ }
15
+
16
+ @keyframes blockchainFlow {
17
+ 0% { background-position: 200% 0; }
18
+ 100% { background-position: -200% 0; }
19
+ }
20
+
21
+ .contract-code {
22
+ font-family: 'Courier New', monospace;
23
+ background-color: #2d3748;
24
+ border-left: 4px solid #4299e1;
25
+ }
26
+
27
+ .wallet-pulse {
28
+ animation: pulse 2s infinite;
29
+ }
30
+
31
+ @keyframes pulse {
32
+ 0% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.7); }
33
+ 70% { box-shadow: 0 0 0 10px rgba(66, 153, 225, 0); }
34
+ 100% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0); }
35
+ }
36
+
37
+ .transaction-animation {
38
+ transition: all 0.5s ease;
39
+ }
40
+
41
+ .terminal {
42
+ background-color: #1a202c;
43
+ font-family: 'Courier New', monospace;
44
+ height: 200px;
45
+ overflow-y: auto;
46
+ }
47
+
48
+ .terminal-line {
49
+ animation: typing 0.5s steps(40, end);
50
+ }
51
+
52
+ @keyframes typing {
53
+ from { width: 0 }
54
+ to { width: 100% }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
59
+ <div class="container mx-auto px-4 py-8">
60
+ <!-- Header -->
61
+ <header class="flex justify-between items-center mb-12">
62
+ <div class="flex items-center space-x-4">
63
+ <i class="fas fa-cube text-blue-400 text-3xl"></i>
64
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
65
+ Web3 Smart Contract Adventure
66
+ </h1>
67
+ </div>
68
+ <div class="flex items-center space-x-4">
69
+ <div class="bg-gray-800 px-4 py-2 rounded-full flex items-center">
70
+ <i class="fas fa-coins text-yellow-400 mr-2"></i>
71
+ <span id="balance">100</span> ETH
72
+ </div>
73
+ <div id="wallet" class="wallet-pulse bg-blue-900 px-4 py-2 rounded-full cursor-pointer hover:bg-blue-800 transition">
74
+ <i class="fas fa-wallet mr-2"></i>
75
+ <span>0x7f...3a4b</span>
76
+ </div>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- Game Progress -->
81
+ <div class="mb-8">
82
+ <div class="flex justify-between mb-2">
83
+ <span class="text-sm">Beginner's Journey</span>
84
+ <span class="text-sm">25% Complete</span>
85
+ </div>
86
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
87
+ <div class="bg-blue-500 h-2.5 rounded-full" style="width: 25%"></div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Main Game Area -->
92
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
93
+ <!-- Left Panel - Lessons -->
94
+ <div class="lg:col-span-2 space-y-8">
95
+ <!-- Current Lesson -->
96
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-blue-500">
97
+ <h2 class="text-2xl font-bold mb-4 flex items-center">
98
+ <i class="fas fa-file-contract mr-3 text-blue-400"></i>
99
+ Lesson 2: Understanding Smart Contracts
100
+ </h2>
101
+
102
+ <div class="mb-6">
103
+ <p class="mb-4">Smart contracts are self-executing contracts with the terms of the agreement directly written into code. They run on blockchain networks like Ethereum.</p>
104
+
105
+ <div class="contract-code p-4 rounded-lg mb-4 text-sm">
106
+ <p class="text-blue-300">// Simple Storage Contract Example</p>
107
+ <p class="text-purple-300">pragma solidity ^0.8.0;</p>
108
+ <br>
109
+ <p class="text-blue-300">contract SimpleStorage {</p>
110
+ <p class="ml-4 text-gray-300"> uint storedData;</p>
111
+ <br>
112
+ <p class="ml-4 text-blue-300"> function set(uint x) public {</p>
113
+ <p class="ml-8 text-gray-300"> storedData = x;</p>
114
+ <p class="ml-4 text-blue-300"> }</p>
115
+ <br>
116
+ <p class="ml-4 text-blue-300"> function get() public view returns (uint) {</p>
117
+ <p class="ml-8 text-gray-300"> return storedData;</p>
118
+ <p class="ml-4 text-blue-300"> }</p>
119
+ <p class="text-blue-300">}</p>
120
+ </div>
121
+
122
+ <p class="mb-4">Key characteristics of smart contracts:</p>
123
+ <ul class="list-disc pl-6 space-y-2 mb-4">
124
+ <li><span class="font-semibold">Immutable:</span> Once deployed, the code cannot be changed</li>
125
+ <li><span class="font-semibold">Transparent:</span> Code is visible to everyone on the blockchain</li>
126
+ <li><span class="font-semibold">Self-executing:</span> Runs automatically when conditions are met</li>
127
+ <li><span class="font-semibold">Trustless:</span> No need for intermediaries</li>
128
+ </ul>
129
+ </div>
130
+
131
+ <div class="bg-blue-900 bg-opacity-30 p-4 rounded-lg mb-6">
132
+ <h3 class="font-bold text-lg mb-2 flex items-center">
133
+ <i class="fas fa-lightbulb mr-2 text-yellow-300"></i>
134
+ Interactive Exercise
135
+ </h3>
136
+ <p class="mb-4">Let's interact with a simulated smart contract. This contract stores a number that anyone can update.</p>
137
+
138
+ <div class="flex flex-wrap gap-4 mb-4">
139
+ <button id="readContract" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
140
+ <i class="fas fa-book-open mr-2"></i> Read Contract
141
+ </button>
142
+ <button id="writeContract" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center">
143
+ <i class="fas fa-edit mr-2"></i> Update Value
144
+ </button>
145
+ <button id="deployContract" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center">
146
+ <i class="fas fa-rocket mr-2"></i> Deploy New Contract
147
+ </button>
148
+ </div>
149
+
150
+ <div id="contractInteractionResult" class="bg-gray-700 p-3 rounded-lg hidden">
151
+ <p class="text-sm">Transaction result will appear here...</p>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="flex justify-between">
156
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center">
157
+ <i class="fas fa-arrow-left mr-2"></i> Previous Lesson
158
+ </button>
159
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
160
+ Next Lesson <i class="fas fa-arrow-right ml-2"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Quiz Section -->
166
+ <div id="quizSection" class="bg-gray-800 rounded-xl p-6 shadow-lg border-l-4 border-purple-500 hidden">
167
+ <h2 class="text-2xl font-bold mb-4 flex items-center">
168
+ <i class="fas fa-question-circle mr-3 text-purple-400"></i>
169
+ Knowledge Check
170
+ </h2>
171
+
172
+ <div class="mb-6">
173
+ <p class="mb-4">Test your understanding of smart contracts with these questions:</p>
174
+
175
+ <div class="space-y-4">
176
+ <div class="quiz-question bg-gray-700 p-4 rounded-lg">
177
+ <p class="font-semibold mb-2">1. What makes smart contracts different from traditional contracts?</p>
178
+ <div class="space-y-2">
179
+ <label class="flex items-center">
180
+ <input type="radio" name="q1" class="mr-2" value="a">
181
+ They are written in programming languages
182
+ </label>
183
+ <label class="flex items-center">
184
+ <input type="radio" name="q1" class="mr-2" value="b">
185
+ They are stored on a blockchain and execute automatically
186
+ </label>
187
+ <label class="flex items-center">
188
+ <input type="radio" name="q1" class="mr-2" value="c">
189
+ They require lawyers to interpret them
190
+ </label>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="quiz-question bg-gray-700 p-4 rounded-lg">
195
+ <p class="font-semibold mb-2">2. What happens when you deploy a smart contract to Ethereum?</p>
196
+ <div class="space-y-2">
197
+ <label class="flex items-center">
198
+ <input type="radio" name="q2" class="mr-2" value="a">
199
+ It gets stored on the blockchain and receives an address
200
+ </label>
201
+ <label class="flex items-center">
202
+ <input type="radio" name="q2" class="mr-2" value="b">
203
+ It gets sent to all Ethereum users' computers
204
+ </label>
205
+ <label class="flex items-center">
206
+ <input type="radio" name="q2" class="mr-2" value="c">
207
+ It becomes part of the Ethereum core software
208
+ </label>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="quiz-question bg-gray-700 p-4 rounded-lg">
213
+ <p class="font-semibold mb-2">3. Why are smart contracts considered "trustless"?</p>
214
+ <div class="space-y-2">
215
+ <label class="flex items-center">
216
+ <input type="radio" name="q3" class="mr-2" value="a">
217
+ Because you shouldn't trust them
218
+ </label>
219
+ <label class="flex items-center">
220
+ <input type="radio" name="q3" class="mr-2" value="b">
221
+ Because they eliminate the need for trusted third parties
222
+ </label>
223
+ <label class="flex items-center">
224
+ <input type="radio" name="q3" class="mr-2" value="c">
225
+ Because they are anonymous
226
+ </label>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <button id="submitQuiz" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg w-full flex items-center justify-center">
233
+ <i class="fas fa-check-circle mr-2"></i> Submit Answers
234
+ </button>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Right Panel - Blockchain Simulator -->
239
+ <div class="space-y-8">
240
+ <!-- Blockchain Visualization -->
241
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
242
+ <h2 class="text-xl font-bold mb-4 flex items-center">
243
+ <i class="fas fa-link mr-2 text-green-400"></i>
244
+ Blockchain Simulator
245
+ </h2>
246
+
247
+ <div class="blockchain-animation rounded-lg p-4 mb-4">
248
+ <div class="flex overflow-x-auto space-x-4 pb-2">
249
+ <div class="block bg-gray-700 p-3 rounded-lg min-w-[200px]">
250
+ <div class="text-xs text-gray-400 mb-1">Block #1</div>
251
+ <div class="text-sm mb-1">Genesis Block</div>
252
+ <div class="text-xs text-gray-400">0x000...000</div>
253
+ </div>
254
+ <div class="block bg-gray-700 p-3 rounded-lg min-w-[200px]">
255
+ <div class="text-xs text-gray-400 mb-1">Block #2</div>
256
+ <div class="text-sm mb-1">Your Wallet Created</div>
257
+ <div class="text-xs text-gray-400">0x7f3...a4b</div>
258
+ </div>
259
+ <div id="latestBlock" class="block bg-blue-900 p-3 rounded-lg min-w-[200px]">
260
+ <div class="text-xs text-gray-400 mb-1">Block #3</div>
261
+ <div class="text-sm mb-1">Ready for new transactions</div>
262
+ <div class="text-xs text-gray-400">Pending...</div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="terminal p-3 rounded-lg mb-4">
268
+ <div class="terminal-line text-green-400">$ Welcome to Web3 Adventure!</div>
269
+ <div class="terminal-line">$ Your wallet is connected: 0x7f...3a4b</div>
270
+ <div class="terminal-line">$ Balance: 100 ETH</div>
271
+ <div id="terminalOutput" class="terminal-line"></div>
272
+ </div>
273
+
274
+ <div class="text-center">
275
+ <button id="mineBlock" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center mx-auto">
276
+ <i class="fas fa-hammer mr-2"></i> Mine Block
277
+ </button>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Wallet Transactions -->
282
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
283
+ <h2 class="text-xl font-bold mb-4 flex items-center">
284
+ <i class="fas fa-exchange-alt mr-2 text-yellow-400"></i>
285
+ Transaction History
286
+ </h2>
287
+
288
+ <div class="space-y-3">
289
+ <div class="transaction bg-gray-700 p-3 rounded-lg transaction-animation">
290
+ <div class="flex justify-between text-sm">
291
+ <span class="text-blue-300">Wallet Creation</span>
292
+ <span class="text-gray-400">2 min ago</span>
293
+ </div>
294
+ <div class="text-xs text-gray-400">+100 ETH</div>
295
+ </div>
296
+
297
+ <div id="newTransactions" class="space-y-3">
298
+ <!-- New transactions will appear here -->
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Achievement Badges -->
304
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
305
+ <h2 class="text-xl font-bold mb-4 flex items-center">
306
+ <i class="fas fa-trophy mr-2 text-yellow-300"></i>
307
+ Your Achievements
308
+ </h2>
309
+
310
+ <div class="grid grid-cols-3 gap-3">
311
+ <div class="achievement bg-blue-900 bg-opacity-30 p-2 rounded-lg text-center">
312
+ <div class="mx-auto bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center mb-1">
313
+ <i class="fas fa-check"></i>
314
+ </div>
315
+ <div class="text-xs">Wallet Setup</div>
316
+ </div>
317
+ <div class="achievement bg-gray-700 p-2 rounded-lg text-center opacity-50">
318
+ <div class="mx-auto bg-gray-500 rounded-full w-10 h-10 flex items-center justify-center mb-1">
319
+ <i class="fas fa-file-contract"></i>
320
+ </div>
321
+ <div class="text-xs">First Contract</div>
322
+ </div>
323
+ <div class="achievement bg-gray-700 p-2 rounded-lg text-center opacity-50">
324
+ <div class="mx-auto bg-gray-500 rounded-full w-10 h-10 flex items-center justify-center mb-1">
325
+ <i class="fas fa-code"></i>
326
+ </div>
327
+ <div class="text-xs">Solidity Pro</div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <script>
336
+ // Game state
337
+ let gameState = {
338
+ balance: 100,
339
+ contractValue: 0,
340
+ transactions: [],
341
+ quizAnswers: {
342
+ q1: null,
343
+ q2: null,
344
+ q3: null
345
+ },
346
+ lessonProgress: 25
347
+ };
348
+
349
+ // DOM Elements
350
+ const balanceElement = document.getElementById('balance');
351
+ const terminalOutput = document.getElementById('terminalOutput');
352
+ const contractInteractionResult = document.getElementById('contractInteractionResult');
353
+ const newTransactions = document.getElementById('newTransactions');
354
+ const quizSection = document.getElementById('quizSection');
355
+ const latestBlock = document.getElementById('latestBlock');
356
+
357
+ // Buttons
358
+ const readContractBtn = document.getElementById('readContract');
359
+ const writeContractBtn = document.getElementById('writeContract');
360
+ const deployContractBtn = document.getElementById('deployContract');
361
+ const mineBlockBtn = document.getElementById('mineBlock');
362
+ const submitQuizBtn = document.getElementById('submitQuiz');
363
+ const walletBtn = document.getElementById('wallet');
364
+
365
+ // Event Listeners
366
+ readContractBtn.addEventListener('click', readContract);
367
+ writeContractBtn.addEventListener('click', writeContract);
368
+ deployContractBtn.addEventListener('click', deployContract);
369
+ mineBlockBtn.addEventListener('click', mineBlock);
370
+ submitQuizBtn.addEventListener('click', submitQuiz);
371
+ walletBtn.addEventListener('click', showWalletInfo);
372
+
373
+ // Game Functions
374
+ function readContract() {
375
+ addTerminalOutput(`> Reading contract value...`);
376
+ setTimeout(() => {
377
+ contractInteractionResult.classList.remove('hidden');
378
+ contractInteractionResult.innerHTML = `
379
+ <p class="text-green-400">Contract read successful!</p>
380
+ <p class="text-sm mt-1">Current stored value: ${gameState.contractValue}</p>
381
+ `;
382
+ addTerminalOutput(`✓ Contract value is ${gameState.contractValue}`);
383
+ addTransaction('Contract Read', '0 ETH', 'Read operation');
384
+ }, 1000);
385
+ }
386
+
387
+ function writeContract() {
388
+ addTerminalOutput(`> Updating contract value...`);
389
+ const newValue = Math.floor(Math.random() * 100);
390
+
391
+ setTimeout(() => {
392
+ contractInteractionResult.classList.remove('hidden');
393
+ contractInteractionResult.innerHTML = `
394
+ <p class="text-green-400">Contract write successful!</p>
395
+ <p class="text-sm mt-1">Value updated from ${gameState.contractValue} to ${newValue}</p>
396
+ <p class="text-xs mt-2 text-gray-400">Gas used: 0.00042 ETH</p>
397
+ `;
398
+
399
+ gameState.contractValue = newValue;
400
+ gameState.balance -= 0.00042;
401
+ balanceElement.textContent = gameState.balance.toFixed(5);
402
+
403
+ addTerminalOutput(`✓ Contract value updated to ${newValue}`);
404
+ addTerminalOutput(`- 0.00042 ETH (gas fee)`);
405
+ addTransaction('Contract Write', '-0.00042 ETH', 'Value updated');
406
+
407
+ // Show quiz after first contract interaction
408
+ if (!localStorage.getItem('quizShown')) {
409
+ setTimeout(() => {
410
+ quizSection.classList.remove('hidden');
411
+ localStorage.setItem('quizShown', 'true');
412
+ }, 1500);
413
+ }
414
+ }, 1500);
415
+ }
416
+
417
+ function deployContract() {
418
+ addTerminalOutput(`> Deploying new contract...`);
419
+
420
+ setTimeout(() => {
421
+ contractInteractionResult.classList.remove('hidden');
422
+ contractInteractionResult.innerHTML = `
423
+ <p class="text-green-400">Contract deployed successfully!</p>
424
+ <p class="text-sm mt-1">Contract address: 0x89...f2c1</p>
425
+ <p class="text-xs mt-2 text-gray-400">Gas used: 0.024 ETH</p>
426
+ `;
427
+
428
+ gameState.balance -= 0.024;
429
+ balanceElement.textContent = gameState.balance.toFixed(5);
430
+
431
+ addTerminalOutput(`✓ New contract deployed at 0x89...f2c1`);
432
+ addTerminalOutput(`- 0.024 ETH (gas fee)`);
433
+ addTransaction('Contract Deploy', '-0.024 ETH', 'New contract');
434
+
435
+ // Update achievement
436
+ const contractAchievement = document.querySelectorAll('.achievement')[1];
437
+ contractAchievement.classList.remove('bg-gray-700', 'opacity-50');
438
+ contractAchievement.classList.add('bg-purple-900', 'bg-opacity-30');
439
+ }, 2000);
440
+ }
441
+
442
+ function mineBlock() {
443
+ addTerminalOutput(`> Mining new block...`);
444
+ mineBlockBtn.disabled = true;
445
+ mineBlockBtn.innerHTML = `<i class="fas fa-cog fa-spin mr-2"></i> Mining...`;
446
+
447
+ setTimeout(() => {
448
+ // Create new block
449
+ const blockNumber = Math.floor(Math.random() * 1000) + 4;
450
+ const newBlockHash = `0x${Math.random().toString(16).substr(2, 10)}...${Math.random().toString(16).substr(2, 6)}`;
451
+
452
+ // Update blockchain visualization
453
+ latestBlock.innerHTML = `
454
+ <div class="text-xs text-gray-400 mb-1">Block #${blockNumber}</div>
455
+ <div class="text-sm mb-1">Contains ${gameState.transactions.length || 1} txns</div>
456
+ <div class="text-xs text-gray-400">${newBlockHash}</div>
457
+ `;
458
+
459
+ // Add new block to chain
460
+ const blocksContainer = document.querySelector('.flex.overflow-x-auto.space-x-4');
461
+ const newBlock = document.createElement('div');
462
+ newBlock.className = 'block bg-gray-700 p-3 rounded-lg min-w-[200px]';
463
+ newBlock.innerHTML = `
464
+ <div class="text-xs text-gray-400 mb-1">Block #${blockNumber}</div>
465
+ <div class="text-sm mb-1">Contains ${gameState.transactions.length || 1} txns</div>
466
+ <div class="text-xs text-gray-400">${newBlockHash}</div>
467
+ `;
468
+
469
+ // Create new pending block
470
+ const pendingBlock = document.createElement('div');
471
+ pendingBlock.className = 'block bg-blue-900 p-3 rounded-lg min-w-[200px]';
472
+ pendingBlock.id = 'latestBlock';
473
+ pendingBlock.innerHTML = `
474
+ <div class="text-xs text-gray-400 mb-1">Block #${blockNumber + 1}</div>
475
+ <div class="text-sm mb-1">Ready for new transactions</div>
476
+ <div class="text-xs text-gray-400">Pending...</div>
477
+ `;
478
+
479
+ blocksContainer.appendChild(newBlock);
480
+ blocksContainer.appendChild(pendingBlock);
481
+
482
+ addTerminalOutput(`✓ New block mined (#${blockNumber})`);
483
+ mineBlockBtn.disabled = false;
484
+ mineBlockBtn.innerHTML = `<i class="fas fa-hammer mr-2"></i> Mine Block`;
485
+
486
+ // Clear transactions
487
+ gameState.transactions = [];
488
+ document.getElementById('newTransactions').innerHTML = '';
489
+ }, 3000);
490
+ }
491
+
492
+ function submitQuiz() {
493
+ // Get selected answers
494
+ gameState.quizAnswers.q1 = document.querySelector('input[name="q1"]:checked')?.value;
495
+ gameState.quizAnswers.q2 = document.querySelector('input[name="q2"]:checked')?.value;
496
+ gameState.quizAnswers.q3 = document.querySelector('input[name="q3"]:checked')?.value;
497
+
498
+ // Check answers
499
+ const correctAnswers = {
500
+ q1: 'b',
501
+ q2: 'a',
502
+ q3: 'b'
503
+ };
504
+
505
+ let score = 0;
506
+ if (gameState.quizAnswers.q1 === correctAnswers.q1) score++;
507
+ if (gameState.quizAnswers.q2 === correctAnswers.q2) score++;
508
+ if (gameState.quizAnswers.q3 === correctAnswers.q3) score++;
509
+
510
+ // Display results
511
+ quizSection.innerHTML = `
512
+ <h2 class="text-2xl font-bold mb-4 flex items-center">
513
+ <i class="fas fa-poll mr-3 text-purple-400"></i>
514
+ Quiz Results
515
+ </h2>
516
+ <div class="mb-6">
517
+ <div class="bg-${score >= 2 ? 'green' : 'red'}-900 bg-opacity-30 p-4 rounded-lg mb-4">
518
+ <p class="text-lg font-semibold">You scored ${score}/3</p>
519
+ <p class="text-sm mt-2">
520
+ ${score === 3 ? 'Perfect! You understand smart contracts well.' :
521
+ score >= 2 ? 'Good job! Review the incorrect answers to improve.' :
522
+ 'Keep practicing! Review the lesson and try again.'}
523
+ </p>
524
+ </div>
525
+
526
+ <div class="space-y-4">
527
+ <div class="quiz-result bg-gray-700 p-3 rounded-lg">
528
+ <p class="font-semibold mb-1">1. What makes smart contracts different from traditional contracts?</p>
529
+ <p class="text-sm ${gameState.quizAnswers.q1 === 'b' ? 'text-green-400' : 'text-red-400'}">
530
+ ${gameState.quizAnswers.q1 === 'b' ? '✓ Correct' : '✗ Incorrect'}
531
+ </p>
532
+ <p class="text-xs text-gray-400 mt-1">Correct answer: They are stored on a blockchain and execute automatically</p>
533
+ </div>
534
+
535
+ <div class="quiz-result bg-gray-700 p-3 rounded-lg">
536
+ <p class="font-semibold mb-1">2. What happens when you deploy a smart contract to Ethereum?</p>
537
+ <p class="text-sm ${gameState.quizAnswers.q2 === 'a' ? 'text-green-400' : 'text-red-400'}">
538
+ ${gameState.quizAnswers.q2 === 'a' ? '✓ Correct' : '✗ Incorrect'}
539
+ </p>
540
+ <p class="text-xs text-gray-400 mt-1">Correct answer: It gets stored on the blockchain and receives an address</p>
541
+ </div>
542
+
543
+ <div class="quiz-result bg-gray-700 p-3 rounded-lg">
544
+ <p class="font-semibold mb-1">3. Why are smart contracts considered "trustless"?</p>
545
+ <p class="text-sm ${gameState.quizAnswers.q3 === 'b' ? 'text-green-400' : 'text-red-400'}">
546
+ ${gameState.quizAnswers.q3 === 'b' ? '✓ Correct' : '✗ Incorrect'}
547
+ </p>
548
+ <p class="text-xs text-gray-400 mt-1">Correct answer: Because they eliminate the need for trusted third parties</p>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <button onclick="location.reload()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg w-full">
554
+ <i class="fas fa-sync-alt mr-2"></i> Continue Learning
555
+ </button>
556
+ `;
557
+
558
+ // Reward for good score
559
+ if (score >= 2) {
560
+ gameState.balance += 0.5;
561
+ balanceElement.textContent = gameState.balance.toFixed(5);
562
+ addTerminalOutput(`+ 0.5 ETH (quiz reward)`);
563
+ addTransaction('Quiz Reward', '+0.5 ETH', 'Good score');
564
+ }
565
+ }
566
+
567
+ function showWalletInfo() {
568
+ terminalOutput.innerHTML = `
569
+ <div class="text-blue-300">Wallet Details:</div>
570
+ <div class="text-sm">Address: 0x7f3c5a9e1b2d4f6a8c0e3d7b5a4b3a2c1d0e9f8</div>
571
+ <div class="text-sm">Network: Ethereum Testnet</div>
572
+ <div class="text-sm">Balance: ${gameState.balance} ETH</div>
573
+ `;
574
+ }
575
+
576
+ // Helper Functions
577
+ function addTerminalOutput(message) {
578
+ const line = document.createElement('div');
579
+ line.className = 'terminal-line';
580
+ line.textContent = message;
581
+ terminalOutput.appendChild(line);
582
+ terminalOutput.scrollTop = terminalOutput.scrollHeight;
583
+ }
584
+
585
+ function addTransaction(title, amount, description) {
586
+ const transaction = {
587
+ title,
588
+ amount,
589
+ description,
590
+ timestamp: new Date().toLocaleTimeString()
591
+ };
592
+
593
+ gameState.transactions.push(transaction);
594
+
595
+ const transactionElement = document.createElement('div');
596
+ transactionElement.className = 'transaction bg-gray-700 p-3 rounded-lg transaction-animation';
597
+ transactionElement.innerHTML = `
598
+ <div class="flex justify-between text-sm">
599
+ <span class="${amount.startsWith('+') ? 'text-green-400' : 'text-blue-300'}">${title}</span>
600
+ <span class="text-gray-400">just now</span>
601
+ </div>
602
+ <div class="text-xs text-gray-400">${amount} (${description})</div>
603
+ `;
604
+
605
+ newTransactions.prepend(transactionElement);
606
+ }
607
+
608
+ // Initialize
609
+ addTerminalOutput('$ Ready to learn about smart contracts!');
610
+ </script>
611
+ </body>
612
+ </html>