Skip to content

Commit 3afccc5

Browse files
deekshita04deekshita04
committed
VLABS updates
1 parent 0276370 commit 3afccc5

File tree

6 files changed

+337
-137
lines changed

6 files changed

+337
-137
lines changed

‎experiment/contributors.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

22
<!-- Remove all lines above this line before making changes to the file -->
33
### Subject Matter Experts
4-
| SNo. | Name | Email | Institute | ID |
5-
| :---: | :---: | :---: | :---: | :---: |
6-
| 1 | Dr. Anshu Sarje | anshu.sarje@iiit.ac.in | IIIT-H | id |
4+
| SNo. | Name | Email | Institute |
5+
| :---: | :---: | :---: | :---: |
6+
| 1 | Dr. Anshu Sarje | anshu.sarje@iiit.ac.in | IIIT-H |
77

88
### Developers
9-
| SNo. | Name | Email | Institute | ID |
10-
| :---: | :---: | :---: | :---: | :---: |
11-
| 1 | Deekshita Addlagatta | deekshita.addlagatta@students.iiit.ac.in | IIIT-H | 2022102079 |
9+
| SNo. | Name | Email | Institute |
10+
| :---: | :---: | :---: | :---: |
11+
| 1 | Deekshita Addlagatta | deekshita.addlagatta@students.iiit.ac.in | IIIT-H |

‎experiment/procedure.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
### Procedure
2+
23
#### Task-1
34
In the first task, the user is provided with three plots of carrier distribution vs Energy. The fermi level of each of these plots is either near the midgap, below midgap or above midgap. The user is asked to match the plots to what type of dopants are present in each semiconductor.<br>
45

‎experiment/simulation/css/em.css

Lines changed: 181 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,198 @@
11
body {
2-
font-family: Arial, sans-serif;
3-
text-align: center;
4-
background-color: #f4f4f9;
5-
color: #333;
6-
}
7-
8-
.container {
9-
margin: 20px auto;
10-
max-width: 600px;
11-
}
12-
13-
ul {
14-
list-style: none;
15-
padding: 0;
16-
}
17-
18-
button {
19-
padding: 10px 20px;
20-
font-size: 16px;
21-
cursor: pointer;
22-
background-color: #4caf50;
23-
color: #fff;
24-
border: none;
25-
border-radius: 5px;
26-
}
27-
28-
button:hover {
29-
background-color: #45a049;
30-
}
31-
32-
#result {
33-
margin-top: 20px;
34-
font-size: 18px;
35-
}
36-
37-
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background-color: #f4f4f9;
5+
color: #333;
6+
margin: 0;
7+
padding: 10px;
8+
min-height: 100vh;
9+
}
10+
11+
.container {
12+
margin: 0 auto;
13+
max-width: 800px;
14+
padding: 15px;
15+
box-sizing: border-box;
16+
}
17+
18+
h1 {
19+
font-size: clamp(1.5rem, 4vw, 2rem);
20+
margin: 15px 0 25px;
21+
}
22+
23+
/* Main matching container */
24+
.column1 {
25+
display: flex;
26+
justify-content: space-between;
27+
align-items: flex-start;
28+
position: relative;
29+
gap: 20px;
30+
margin: 20px 0;
31+
}
32+
33+
/* Columns */
34+
.left-column,
35+
.right-column {
36+
flex: 1;
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
}
41+
42+
/* Image styles */
43+
.left-column img {
44+
width: 100%;
45+
max-width: 180px;
46+
height: auto;
47+
margin: 10px 0;
48+
border: 2px solid transparent;
49+
border-radius: 5px;
50+
transition: all 0.2s ease;
51+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
52+
}
53+
54+
.left-column img.selected {
55+
border-color: #4caf50;
56+
transform: scale(1.02);
57+
}
58+
59+
/* Option list styles */
60+
.right-column ul {
61+
padding: 0;
62+
margin-top: 50%;
63+
width: 100%;
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
}
68+
69+
.right-column li {
70+
width: 100%;
71+
max-width: 180px;
72+
margin: 10px 0;
73+
padding: 12px;
74+
font-size: clamp(0.9rem, 3vw, 1rem);
75+
border: 1px solid #ddd;
76+
background-color: #fff;
77+
text-align: center;
78+
cursor: pointer;
79+
box-sizing: border-box;
80+
border-radius: 5px;
81+
transition: all 0.2s ease;
82+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
83+
}
84+
85+
.right-column li.selected {
86+
background-color: #d0f0c0;
87+
border-color: #4caf50;
88+
transform: scale(1.02);
89+
}
90+
91+
.right-column li.matched {
92+
background-color: #e0e0e0;
93+
border-color: #aaa;
94+
pointer-events: none;
95+
}
96+
97+
/* SVG connecting lines */
98+
svg#lines {
99+
position: absolute;
100+
top: 0;
101+
left: 0;
102+
width: 100%;
103+
height: 100%;
104+
pointer-events: none;
105+
z-index: 10;
106+
}
107+
108+
/* Buttons */
109+
.button-container {
110+
display: flex;
111+
flex-wrap: wrap;
112+
justify-content: center;
113+
gap: 15px;
114+
margin: 25px 0;
115+
}
116+
117+
button {
118+
padding: 12px 20px;
119+
font-size: clamp(0.9rem, 3vw, 1rem);
120+
cursor: pointer;
121+
background-color: #4caf50;
122+
color: white;
123+
border: none;
124+
border-radius: 5px;
125+
min-width: 120px;
126+
transition: background-color 0.2s;
127+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
128+
}
129+
130+
button:hover {
131+
background-color: #45a049;
132+
}
133+
134+
#refresh {
135+
background-color: #45a049;
136+
}
137+
138+
#refresh:hover {
139+
background-color: #45a049;
140+
}
141+
142+
#nextPage {
143+
background-color: #45a049;
144+
}
145+
146+
#nextPage:hover {
147+
background-color: #45a049;
148+
}
149+
150+
#result {
151+
margin: 20px 0;
152+
font-size: clamp(1rem, 3.5vw, 1.2rem);
153+
min-height: 24px;
154+
font-weight: bold;
155+
}
156+
157+
/* Responsive adjustments */
158+
@media (max-width: 600px) {
38159
.column1 {
39-
display: flex;
40-
justify-content: space-between;
41-
position: relative;
42-
160+
gap: 10px;
43161
}
44162

45-
.left-column{
46-
margin-top: 10px;
47-
margin-right: 10px;
48-
position: relative;
49-
}
50-
51-
.right-column {
52-
flex: 1;
53-
margin-top: 30%;
54-
align-items: flex-start; /* Align to the top-left */
55-
position: relative; /* Allow finer control of placement */
56-
padding:20px;
163+
.left-column img {
164+
max-width: 140px;
57165
}
166+
58167
.right-column li {
59-
width: 30%; /* Fixed width for each list item */
60-
height: "auto";
61-
margin: 10px auto; /* Center the items inside the column */
168+
max-width: 140px;
62169
padding: 10px;
63-
border: 1px solid #ddd;
64-
background-color: #fff;
65-
text-align: center;
66-
cursor: pointer;
67-
box-sizing: border-box; /* Ensures padding doesn't increase width */
68170
}
69171

70-
canvas {
71-
margin: 10px;
72-
border: 1px solid #ddd;
73-
background-color: #fff;
74-
cursor: pointer;
172+
button {
173+
padding: 10px 15px;
174+
min-width: 100px;
75175
}
76-
77-
ul {
78-
list-style: none;
79-
padding: 0;
176+
}
177+
178+
@media (max-width: 400px) {
179+
.left-column img {
180+
max-width: 120px;
80181
}
81-
82-
li {
83-
margin: 10px;
84-
padding: 50px;
85-
border: 1px solid #ddd;
86-
background-color: #fff;
87-
cursor: pointer;
182+
.right-column ul {
183+
margin-top: 200px;
88184
}
89-
90-
li.selected {
91-
background-color: #d0f0c0;
92-
border-color: #4caf50;
185+
.right-column li {
186+
max-width: 120px;
187+
padding: 8px;
93188
}
94189

95-
li.matched {
96-
background-color: #e0e0e0;
97-
border-color: #aaa;
98-
pointer-events: none;
99-
cursor: not-allowed;
190+
.button-container {
191+
gap: 10px;
100192
}
101193

102-
svg#lines {
103-
position: absolute;
104-
top: 0;
105-
left: 0;
106-
width: 100%;
107-
height: 100%;
108-
pointer-events: none; /* Ignore pointer events for lines */
109-
}
110-
.v-collapsible {
111-
cursor: pointer;
112-
font-weight: bold;
194+
button {
195+
padding: 8px 12px;
196+
min-width: 90px;
113197
}
114-
.instruction-list{
115-
text-align: left;
116-
padding-left: 10%;
117-
padding-right: 10%;
118-
}
198+
}

‎experiment/simulation/doping.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<ul style="list-style: disc;">
1818
<li>The plot shown is an approximate plot of temperature vs the majority charge carriers.</li>
1919
<li>"a" denotes extrinsic region, "b" denotes freeze off region and "c" denotes the intrinsic region </li>
20-
<li>Label the graph by typing"a", "b" or "c" (in lower case only) in the text boxes </li>
20+
<li>Label the graph by typing"a", "b" or "c" (in lower case only) in the text boxes. Entering numbers is not allowed. </li>
2121
<li>Click "Submit" to check if the labeling is correct.</li>
2222
</ul>
2323
</div>

‎experiment/simulation/js/main.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,14 @@ function validateInputs() {
6262
const input3 = document.getElementById('plot-input3').value.trim();
6363
const resultMessage = document.getElementById('result-message');
6464

65+
// Check if any input is a number
66+
if (!isNaN(input1) || !isNaN(input2) || !isNaN(input3)) {
67+
resultMessage.style.display = 'block';
68+
resultMessage.textContent = 'Error: Inputs should not be numbers';
69+
resultMessage.style.color = 'red';
70+
return; // Exit the function early
71+
}
72+
6573
// Check if the inputs match the desired values
6674
if (input1 === 'b' && input2 === 'a' && input3 === 'c') {
6775
resultMessage.style.display = 'block';
@@ -73,6 +81,5 @@ function validateInputs() {
7381
resultMessage.style.color = 'black';
7482
}
7583
}
76-
7784
// Add event listener to the submit button
7885
document.getElementById('submit-btn').addEventListener('click', validateInputs);

0 commit comments

Comments
 (0)