File size: 6,808 Bytes
509f3c2 |
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 |
class CustomPythonLab extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
.python-lab {
background: rgba(31, 41, 55, 0.8);
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(55, 65, 81, 0.5);
}
.editor-container {
background: #1a202c;
padding: 1.5rem;
}
.code-editor {
background: transparent;
color: #e2e8f0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
}
.console-output {
background: rgba(17, 24, 39, 0.9);
color: #e2e8f0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
}
.test-case {
padding: 0.75rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
.test-pass {
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.test-fail {
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.hints-toggle {
background: rgba(217, 70, 239, 0.1);
}
.hint-content {
background: rgba(17, 24, 39, 0.9);
}
.badge-pass {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-fail {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
</style>
<div class="python-lab">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
<!-- Left: Editor -->
<div class="lg:col-span-2">
<div class="editor-container rounded-xl mb-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<i data-feather="code" class="w-5 h-5 text-primary mr-3"></i>
<h3 class="text-lg font-semibold">Python Editor</h3>
</div>
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
</div>
<div class="code-editor">
<pre id="python-editor">
def find_first_prime(nums):
"""Return the first prime number in a list."""
for num in nums:
if num < 2:
continue
is_prime = True
for i in range(2, int(num**0.5) + 1):
if num % i == 0:
is_prime = False
break
if is_prime:
return num
return None
# Test cases
print(find_first_prime([4, 6, 7, 8, 9, 10, 11]) # Should return 7
print(find_first_prime([1, 2, 3, 4, 5]) # Should return 2
print(find_first_prime([4, 6, 8, 10])) # Should return None
</pre>
</div>
</div>
<div class="flex space-x-4 mb-6">
<button id="run-btn" class="px-6 py-3 bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary text-gray-900 font-semibold rounded-lg transition-all">
<i data-feather="play" class="w-4 h-4 mr-2"></i>
Run Code
</button>
<button id="hints-toggle" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 font-semibold rounded-lg transition-all">
<i data-feather="help-circle" class="w-4 h-4 mr-2"></i>
Show Hints
</button>
</div>
</div>
<!-- Right: Console & Tests -->
<div class="space-y-6">
<div class="console-output rounded-xl p-4">
<div class="text-sm font-medium mb-2">Console Output</div>
<div id="python-output" class="font-mono text-sm">
Click "Run Code" to see output...
</div>
</div>
<div class="hints-toggle rounded-xl p-4 hidden">
<div class="text-sm font-medium mb-2">Hints</div>
<div class="hint-content p-3 rounded-lg">
<ul class="space-y-2 text-sm">
<li class="flex items-center">
<i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
Remember that 0 and 1 are not prime numbers.</li>
<li class="flex items-center">
<i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
The Sieve of Eratosthenes is efficient for finding primes in a range.</li>
<li class="flex items-center">
<i data-feather="info" class="w-4 h-4 mr-2 text-primary"></i>
Try breaking the problem into smaller functions.</li>
</ul>
</div>
</div>
<div class="test-cases space-y-3">
<div class="text-sm font-medium">Test Cases</div>
<div class="test-case test-pass flex items-center justify-between">
<span>First prime in [4, 6, 7, 8, 9, 10, 11]</div>
<div class="badge-pass px-3 py-1 rounded-full text-xs">
PASS
</div>
</div>
<div class="test-case test-pass flex items-center justify-between">
<span>First prime in [1, 2, 3, 4, 5]</div>
<div class="badge-pass px-3 py-1 rounded-full text-xs">
PASS
</div>
</div>
<div class="test-case test-pass flex items-center justify-between">
<span>Handles empty list</span>
<div class="badge-pass px-3 py-1 rounded-full text-xs">
PASS
</div>
</div>
<div class="test-case test-fail flex items-center justify-between">
<span>First prime in large list</span>
<div class="badge-fail px-3 py-1 rounded-full text-xs">
FAIL
</div>
</div>
<div class="test-case test-pass flex items-center justify-between">
<span>Returns None if no prime</span>
<div class="badge-pass px-3 py-1 rounded-full text-xs">
PASS
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
}, 100);
}
}
customElements.define('custom-python-lab', CustomPythonLab); |