Skip to content

Commit 043c64c

Browse files
lam1aalam1aa
committed
fix: move drag-and-drop quiz styling to separate css file
1 parent d119004 commit 043c64c

File tree

2 files changed

+179
-182
lines changed

2 files changed

+179
-182
lines changed

‎_static/drag_drop.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
2+
3+
/* drag and drop styling */
4+
.drag-drop-quiz {
5+
max-width: 900px;
6+
margin: 20px 0;
7+
padding: 20px;
8+
border: 1px solid #e0e0e0;
9+
border-radius: 10px;
10+
}
11+
12+
.quiz-title {
13+
font-weight: bold;
14+
margin-bottom: 20px;
15+
text-align: left;
16+
}
17+
18+
.quiz-main {
19+
margin-bottom: 30px;
20+
width: 100%;
21+
}
22+
23+
.descriptions-container {
24+
width: 100%;
25+
}
26+
27+
.description-zone {
28+
display: flex;
29+
align-items: center;
30+
margin: 15px 0;
31+
gap: 15px;
32+
}
33+
34+
.description-label {
35+
flex: 0 0 60%;
36+
padding: 12px;
37+
background: #f8f9fa;
38+
border: 1px solid #e9ecef;
39+
border-radius: 8px;
40+
}
41+
42+
.drop-area {
43+
flex: 0 0 35%;
44+
min-height: 50px;
45+
border: 2px dashed #ccc;
46+
border-radius: 8px;
47+
background: white;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
transition: all 0.3s ease;
52+
padding: 10px;
53+
}
54+
55+
.drop-area.drag-over {
56+
border-color: #667eea;
57+
background: #e8f0ff;
58+
border-style: solid;
59+
}
60+
61+
.drop-placeholder {
62+
color: #999;
63+
font-style: italic;
64+
font-size: 14px;
65+
}
66+
67+
.dropped-item {
68+
background: #00305e;
69+
color: white;
70+
padding: 8px 12px;
71+
border-radius: 6px;
72+
cursor: pointer;
73+
transition: all 0.3s ease;
74+
width: 100%;
75+
text-align: center;
76+
}
77+
78+
.dropped-item:hover {
79+
background: #004080;
80+
}
81+
82+
.options-container {
83+
margin-bottom: 20px;
84+
}
85+
86+
.options-title {
87+
margin-bottom: 15px;
88+
color: #555;
89+
padding-bottom: 5px;
90+
}
91+
92+
.options-list {
93+
display: flex;
94+
flex-wrap: wrap;
95+
gap: 15px;
96+
justify-content: flex-start;
97+
}
98+
99+
.draggable-option {
100+
background: #fafafa;
101+
border: 1px solid #e0e0e0;
102+
color: #333333;
103+
padding: 12px 20px;
104+
border-radius: 8px;
105+
cursor: grab;
106+
user-select: none;
107+
transition: all 0.3s ease;
108+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
109+
min-width: 120px;
110+
text-align: center;
111+
}
112+
113+
.draggable-option:hover {
114+
transform: translateY(-2px);
115+
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
116+
}
117+
118+
.draggable-option:active {
119+
cursor: grabbing;
120+
}
121+
122+
.draggable-option.dragging {
123+
opacity: 0.5;
124+
}
125+
126+
.quiz-controls {
127+
text-align: left;
128+
margin-top: 20px;
129+
}
130+
131+
.quiz-button {
132+
background: #00305e;
133+
color: white;
134+
border: 2px solid #00396e;
135+
padding: 10px 25px;
136+
border-radius: 6px;
137+
cursor: pointer;
138+
font-size: 16px;
139+
margin: 0 10px 0 0;
140+
transition: background 0.3s ease;
141+
}
142+
143+
.quiz-button:hover {
144+
background: #004080;
145+
}
146+
147+
.reset-button {
148+
background: transparent;
149+
color: #00305e;
150+
}
151+
152+
.reset-button:hover {
153+
background: #00305e;
154+
color: white;
155+
}
156+
157+
.feedback {
158+
margin-top: 15px;
159+
padding: 15px;
160+
border-radius: 6px;
161+
}
162+
163+
.feedback.correct {
164+
background: #d4edda;
165+
color: #155724;
166+
border: 1px solid #c3e6cb;
167+
}
168+
169+
.feedback.incorrect {
170+
background: #f8d7da;
171+
color: #721c24;
172+
border: 1px solid #f5c6cb;
173+
}
174+
175+
.feedback.partial {
176+
background: #fff3cd;
177+
color: #856404;
178+
border: 1px solid #ffeaa7;
179+
}

‎_static/quadriga.css‎

Lines changed: 0 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -339,185 +339,3 @@ html[data-theme='dark'] div.story > .admonition-title {
339339
html[data-theme='dark'] div.story > .admonition-title::after {
340340
color: #b876d1
341341
}
342-
343-
344-
345-
/* drag and drop styling */
346-
.drag-drop-quiz {
347-
max-width: 900px;
348-
margin: 20px 0;
349-
padding: 20px;
350-
border: 1px solid #e0e0e0;
351-
border-radius: 10px;
352-
}
353-
354-
.quiz-title {
355-
font-weight: bold;
356-
margin-bottom: 20px;
357-
text-align: left;
358-
}
359-
360-
.quiz-main {
361-
margin-bottom: 30px;
362-
width: 100%;
363-
}
364-
365-
.descriptions-container {
366-
width: 100%;
367-
}
368-
369-
.description-zone {
370-
display: flex;
371-
align-items: center;
372-
margin: 15px 0;
373-
gap: 15px;
374-
}
375-
376-
.description-label {
377-
flex: 0 0 60%;
378-
padding: 12px;
379-
background: #f8f9fa;
380-
border: 1px solid #e9ecef;
381-
border-radius: 8px;
382-
}
383-
384-
.drop-area {
385-
flex: 0 0 35%;
386-
min-height: 50px;
387-
border: 2px dashed #ccc;
388-
border-radius: 8px;
389-
background: white;
390-
display: flex;
391-
align-items: center;
392-
justify-content: center;
393-
transition: all 0.3s ease;
394-
padding: 10px;
395-
}
396-
397-
.drop-area.drag-over {
398-
border-color: #667eea;
399-
background: #e8f0ff;
400-
border-style: solid;
401-
}
402-
403-
.drop-placeholder {
404-
color: #999;
405-
font-style: italic;
406-
font-size: 14px;
407-
}
408-
409-
.dropped-item {
410-
background: #00305e;
411-
color: white;
412-
padding: 8px 12px;
413-
border-radius: 6px;
414-
cursor: pointer;
415-
transition: all 0.3s ease;
416-
width: 100%;
417-
text-align: center;
418-
}
419-
420-
.dropped-item:hover {
421-
background: #004080;
422-
}
423-
424-
.options-container {
425-
margin-bottom: 20px;
426-
}
427-
428-
.options-title {
429-
font-weight: bold;
430-
margin-bottom: 15px;
431-
color: #555;
432-
border-bottom: 2px solid #ddd;
433-
padding-bottom: 5px;
434-
}
435-
436-
.options-list {
437-
display: flex;
438-
flex-wrap: wrap;
439-
gap: 15px;
440-
justify-content: flex-start;
441-
}
442-
443-
.draggable-option {
444-
background: #fafafa;
445-
border: 1px solid #e0e0e0;
446-
color: #333333;
447-
padding: 12px 20px;
448-
border-radius: 8px;
449-
cursor: grab;
450-
user-select: none;
451-
transition: all 0.3s ease;
452-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
453-
min-width: 120px;
454-
text-align: center;
455-
}
456-
457-
.draggable-option:hover {
458-
transform: translateY(-2px);
459-
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
460-
}
461-
462-
.draggable-option:active {
463-
cursor: grabbing;
464-
}
465-
466-
.draggable-option.dragging {
467-
opacity: 0.5;
468-
}
469-
470-
.quiz-controls {
471-
text-align: left;
472-
margin-top: 20px;
473-
}
474-
475-
.quiz-button {
476-
background: #00305e;
477-
color: white;
478-
border: 2px solid #00396e;
479-
padding: 10px 25px;
480-
border-radius: 6px;
481-
cursor: pointer;
482-
font-size: 16px;
483-
margin: 0 10px 0 0;
484-
transition: background 0.3s ease;
485-
}
486-
487-
.quiz-button:hover {
488-
background: #004080;
489-
}
490-
491-
.reset-button {
492-
background: transparent;
493-
color: #00305e;
494-
}
495-
496-
.reset-button:hover {
497-
background: #00305e;
498-
color: white;
499-
}
500-
501-
.feedback {
502-
margin-top: 15px;
503-
padding: 15px;
504-
border-radius: 6px;
505-
}
506-
507-
.feedback.correct {
508-
background: #d4edda;
509-
color: #155724;
510-
border: 1px solid #c3e6cb;
511-
}
512-
513-
.feedback.incorrect {
514-
background: #f8d7da;
515-
color: #721c24;
516-
border: 1px solid #f5c6cb;
517-
}
518-
519-
.feedback.partial {
520-
background: #fff3cd;
521-
color: #856404;
522-
border: 1px solid #ffeaa7;
523-
}

0 commit comments

Comments
 (0)