Skip to content

Commit 047e838

Browse files
wingkwongwingkwong
committed
feat: 0.6.0 build
1 parent fe0848d commit 047e838

File tree

3 files changed

+176
-2
lines changed

3 files changed

+176
-2
lines changed

‎docs/bundle.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="React Quiz Component Demo"><title>React Quiz Component Demo</title><link rel="icon" href="favicon.ico" type="image/x-icon" /><script defer="defer" src="bundle.js"></script></head><body><div id="app"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="React Quiz Component Demo"><title>React Quiz Component Demo</title><script defer="defer" src="bundle.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>

‎docs/main.css

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.react-quiz-container {
2+
margin: 20px;
3+
max-width: 500px;
4+
}
5+
6+
.react-quiz-container .startQuizWrapper {
7+
margin-top: 10px;
8+
}
9+
10+
.react-quiz-container .btn {
11+
margin-bottom: 0;
12+
font-weight: 600;
13+
text-align: center;
14+
padding: 11px 12px;
15+
vertical-align: middle;
16+
touch-action: manipulation;
17+
cursor: pointer;
18+
background-image: none;
19+
border: 1px solid transparent;
20+
white-space: nowrap;
21+
-webkit-user-select: none;
22+
-moz-user-select: none;
23+
-ms-user-select: none;
24+
user-select: none;
25+
cursor: pointer;
26+
}
27+
28+
.react-quiz-container .questionWrapper .btn {
29+
margin-top: 10px;
30+
margin-bottom: 10px;
31+
border-radius: 4px;
32+
border: 1px solid #e8e8e8;
33+
font-size: 15px;
34+
display: block;
35+
white-space: normal;
36+
text-align: unset;
37+
}
38+
39+
.react-quiz-container .questionWrapper .btn.correct {
40+
background: green;
41+
color: white;
42+
}
43+
44+
.react-quiz-container .questionModal .alert {
45+
padding: 20px;
46+
margin-bottom: 21px;
47+
border: 1px solid transparent;
48+
border-radius: 2px;
49+
color: #fff;
50+
}
51+
52+
.react-quiz-container .correct {
53+
background: green;
54+
}
55+
56+
.react-quiz-container .incorrect {
57+
background: red;
58+
color: white;
59+
}
60+
61+
.react-quiz-container .questionWrapper img {
62+
width: 100%;
63+
}
64+
65+
.react-quiz-container .answerBtn {
66+
width: 100%;
67+
}
68+
69+
.react-quiz-container .selected {
70+
background: #007bff;
71+
color: white;
72+
}
73+
74+
.react-quiz-container .startQuizWrapper .startQuizBtn {
75+
font-size: 15px;
76+
border-radius: 2px;
77+
line-height: 1.35135;
78+
color: rgba(0, 0, 0, 0.65);
79+
background-color: #fff;
80+
border: 1px solid #d9d9d9;
81+
}
82+
83+
.react-quiz-container .result-answer-wrapper {
84+
margin-bottom: 20px;
85+
border: 1px solid #e8e8e8;
86+
border-bottom-left-radius: 5px;
87+
border-bottom-right-radius: 5px;
88+
}
89+
90+
.react-quiz-container .result-answer-wrapper h3 {
91+
background-color: #fafafa;
92+
opacity: 0.8;
93+
color: rgba(0, 0, 0, 0.9);
94+
margin: 0px;
95+
padding: 10px;
96+
border-top-left-radius: 5px;
97+
border-top-right-radius: 5px;
98+
}
99+
100+
.react-quiz-container .result-answer-wrapper .explanation {
101+
padding: 20px;
102+
margin: 0px 20px 20px 20px;
103+
border: 1px solid #e8e8e8;
104+
}
105+
106+
.react-quiz-container .result-answer-wrapper .tag-container {
107+
margin: 20px;
108+
}
109+
110+
.react-quiz-container .result-answer {
111+
padding: 0px 20px;
112+
}
113+
114+
.react-quiz-container .quiz-synopsis {
115+
margin: 15px 0px;
116+
}
117+
118+
.react-quiz-container .quiz-result-filter {
119+
overflow: hidden;
120+
width: 120px;
121+
-webkit-border-radius: 5px;
122+
-moz-border-radius: 5px;
123+
border-radius: 5px;
124+
background-color: #fefefe;
125+
margin-bottom: 10px;
126+
border: 1px solid #e8e8e8;
127+
}
128+
129+
.react-quiz-container .quiz-result-filter select {
130+
background: transparent;
131+
border: none;
132+
font-size: 16px;
133+
padding: 5px;
134+
width: 100%;
135+
height: 30px;
136+
border: 1px solid #ffffff;
137+
}
138+
139+
.react-quiz-container .tag-container {
140+
margin-top: 20px;
141+
margin-bottom: 20px;
142+
display: flex;
143+
flex-wrap: wrap;
144+
gap: 5px;
145+
}
146+
147+
.react-quiz-container .selection-tag,
148+
.react-quiz-container .number-of-selection {
149+
padding: 7px;
150+
border-radius: 5px;
151+
color: #ffffff;
152+
}
153+
154+
.react-quiz-container .number-of-selection {
155+
background: #673ab7;
156+
margin-left: 5px;
157+
}
158+
159+
.react-quiz-container .selection-tag.single {
160+
background: #3f51b5;
161+
}
162+
163+
.react-quiz-container .selection-tag.multiple {
164+
background: #ff9800;
165+
}
166+
.react-quiz-container .selection-tag.segment {
167+
background: #3db4b9;
168+
margin-left: 5px;
169+
}
170+
171+
.react-quiz-container .questionBtnContainer {
172+
display: flex;
173+
justify-content: space-between;
174+
}

0 commit comments

Comments
 (0)