Skip to content

Commit 5b0c16b

Browse files
yu-zhao-xyzyu-zhao-xyz
committed
web framework
0 parents  commit 5b0c16b

14 files changed

Lines changed: 1190 additions & 0 deletions

‎.DS_Store‎

6 KB
Binary file not shown.

‎css/.DS_Store‎

6 KB
Binary file not shown.

‎css/style.css‎

Lines changed: 342 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,342 @@
1+
h1, h2, h3, p, span {
2+
font-family: 'Lato', sans-serif;
3+
font-style: normal;
4+
}
5+
6+
h1 {
7+
font-weight: bold;
8+
font-size: 22px;
9+
line-height: 26px;
10+
11+
margin-bottom: 24px;
12+
13+
color: #222222;
14+
}
15+
16+
h2 {
17+
font-weight: bold;
18+
font-size: 16px;
19+
line-height: 19px;
20+
21+
color: #222222;
22+
23+
margin-bottom: 24px;
24+
}
25+
26+
body {
27+
margin:0px;
28+
}
29+
30+
31+
.top_bar {
32+
width: 100vw;
33+
height: 70px;
34+
margin: 0px;
35+
border-bottom: 2px solid #1C2ECC;
36+
background: #F9FBFF;
37+
text-align: center;
38+
}
39+
40+
progress[value] {
41+
-webkit-appearance: none;
42+
appearance: none;
43+
44+
width: 100vw;
45+
height: 10px;
46+
}
47+
48+
progress[value]::-webkit-progress-bar {
49+
background-color: #F9FBFF;
50+
border-radius: 0px;
51+
}
52+
53+
progress[value]::-webkit-progress-value {
54+
background-color: #1C2ECC;
55+
border-radius: 0px 5px 5px 0px;
56+
}
57+
58+
iframe {
59+
width: 100%;
60+
height: 60%;
61+
}
62+
63+
.changing_frame {
64+
width: 60vw;
65+
margin-top: 35px;
66+
margin-right:auto;
67+
margin-left: auto;
68+
}
69+
70+
.control {
71+
width: 100vw;
72+
height: 135px;
73+
bottom: 0px;
74+
left: 0px;
75+
margin-top: 20px;
76+
text-align: center;
77+
78+
position:absolute;
79+
80+
}
81+
82+
.control_feedback {
83+
border-top: 2px solid #1C2ECC;
84+
background: #F9FBFF;
85+
}
86+
87+
.btn-container {
88+
margin:0px;
89+
text-align: center;
90+
/*top:40px;*/
91+
92+
}
93+
94+
.fb-container {
95+
position: relative;
96+
top: 0px;
97+
height: 40px;
98+
99+
}
100+
101+
.quiz_row {
102+
display: flex;
103+
/*margin-left: 107px;*/
104+
justify-content:space-between;
105+
}
106+
107+
.quiz_pic {
108+
width: 298px;
109+
}
110+
111+
.title {
112+
padding-top: 20px;
113+
padding-bottom: 20px;
114+
color: #1C2ECC;
115+
}
116+
117+
.large-pic {
118+
width: 100%;
119+
}
120+
121+
.large-pic-cont {
122+
width: 80%;
123+
margin: auto;
124+
}
125+
126+
.quote {
127+
background: #FFFFFF;
128+
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
129+
border-radius: 20px;
130+
width: 100%;
131+
display: flex;
132+
margin-bottom: 8px;
133+
}
134+
135+
.quote-line-1 {
136+
padding-left: 30px;
137+
padding-right: 15px;
138+
padding-top: 5px;
139+
}
140+
141+
.quote-line-2 {
142+
padding-left: 30px;
143+
padding-right: 15px;
144+
padding-top: 5px;
145+
padding-bottom: 15px;
146+
}
147+
148+
.highlight {
149+
font-weight: bold;
150+
color: #01CD62;
151+
}
152+
153+
.teacher_avatar {
154+
width: 26px;
155+
height: 26px;
156+
margin-top:0px;
157+
padding-top: 20px;
158+
padding-left: 20px;
159+
160+
}
161+
162+
163+
/* multiple_choice section*/
164+
165+
.multiple_choice {
166+
167+
width: 219px;
168+
height: 38px;
169+
170+
border: 1px solid #B6B6B6;
171+
box-sizing: border-box;
172+
border-radius: 19px;
173+
174+
text-align: left;
175+
176+
margin-bottom: 11px;
177+
178+
}
179+
180+
.multiple_choice span {
181+
font-size: 14px;
182+
line-height: 17px;
183+
color: #222222;
184+
padding-left: 18px;
185+
186+
}
187+
188+
.selected_choice {
189+
background: #F9FBFF;
190+
border: 1px solid #1C2ECC;
191+
}
192+
193+
.selected_choice span {
194+
color: #1C2ECC;
195+
font-weight: bold;
196+
}
197+
198+
/*input box*/
199+
200+
.input_box {
201+
/*width: 624px;*/
202+
width: 100%;
203+
height: 131px;
204+
205+
border: 1px solid #B6B6B6;
206+
box-sizing: border-box;
207+
border-radius: 10px;
208+
}
209+
210+
.input_box_sm {
211+
width: 30%;
212+
height: 40px;
213+
214+
border: 1px solid #B6B6B6;
215+
box-sizing: border-box;
216+
border-radius: 10px;
217+
}
218+
219+
.main-btn {
220+
width: 136px;
221+
height: 42px;
222+
223+
background: #01CD62;
224+
border: 2px solid #01CD62;
225+
box-sizing: border-box;
226+
border-radius: 10px;
227+
228+
text-align: center;
229+
230+
position: relative;
231+
margin:0 auto;
232+
}
233+
234+
.main-btn span {
235+
font-weight: bold;
236+
font-size: 18px;
237+
line-height: 22px;
238+
239+
align-items: center;
240+
241+
color: #FFFFFF;
242+
}
243+
244+
/*#back {
245+
height: 39px;
246+
width: 39px;
247+
}*/
248+
249+
.fb-container p {
250+
margin: 0 atuo;
251+
font-size: 20px;
252+
line-height: 24px;
253+
text-align: center;
254+
color: #222222;
255+
}
256+
257+
.flex_display {
258+
display: flex;
259+
align-items: center;
260+
}
261+
262+
.margin-right-20 {
263+
margin-right: 20px;
264+
}
265+
266+
/*drag n drop*/
267+
268+
269+
.drag_item_cont {
270+
display:flex;
271+
flex-direction:row;
272+
/*justify-content: space-around;*/
273+
}
274+
275+
.drag_item_cont div {
276+
margin-right: 5px;
277+
}
278+
279+
.tag {
280+
background: #F9FBFF;
281+
box-sizing: border-box;
282+
border-radius: 20px;
283+
width: 70px;
284+
height: 30px;
285+
margin:0;
286+
text-align: center;
287+
justify-content: center;
288+
}
289+
290+
291+
.tag_temp_solid_border {
292+
border: 2px solid #1C2ECC;
293+
}
294+
295+
.tag_temp_dashed_border {
296+
border: 2px dashed #1C2ECC;
297+
}
298+
299+
.tag_state_solid_border {
300+
border: 2px solid #01CD62;
301+
}
302+
303+
.tag_state_dashed_border {
304+
border: 2px dashed #01CD62;
305+
}
306+
307+
#drop_1 {
308+
position: absolute;
309+
left: 35vw;
310+
/*top:64vh;*/
311+
top:32vw;
312+
}
313+
314+
#drop_2 {
315+
position: absolute;
316+
left: 48vw;
317+
top:32vw;
318+
}
319+
320+
#drop_3 {
321+
position: absolute;
322+
left: 63vw;
323+
top: 20vw;
324+
}
325+
326+
#drop_4 {
327+
position: absolute;
328+
left: 35vw;
329+
top:34.3vw;
330+
}
331+
332+
#drop_5 {
333+
position: absolute;
334+
left: 48vw;
335+
top:34.3vw;
336+
}
337+
338+
#drop_6 {
339+
position: absolute;
340+
left: 63vw;
341+
top: 22.3vw;
342+
}

‎images/AC-W-LABEL.png‎

53.6 KB
Loading

‎images/AC-WO-Label.png‎

45.8 KB
Loading

‎images/Q1.png‎

221 KB
Loading

‎images/Q2.png‎

270 KB
Loading

‎images/Q3.png‎

445 KB
Loading

‎images/back_button.png‎

6.22 KB
Loading

‎images/guided_discovery.png‎

82.2 KB
Loading

0 commit comments

Comments
 (0)