Skip to content

Commit 3934fb9

Browse files
google-labs-jules[bot]google-labs-jules[bot]
committed
Refactored the QuizComponent to use CSS classes from QuizComponent.module.css.
1 parent 517dd00 commit 3934fb9

File tree

2 files changed

+144
-99
lines changed

2 files changed

+144
-99
lines changed

‎src/components/QuizComponent.js‎

Lines changed: 20 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import styles from './QuizComponent.module.css';
23

34
export default function QuizComponent({ question, answers, children }) {
45
const [isRevealed, setIsRevealed] = useState(false);
@@ -9,113 +10,33 @@ export default function QuizComponent({ question, answers, children }) {
910
setIsRevealed(true);
1011
};
1112

12-
const styles = {
13-
container: {
14-
border: '1px solid #e5e7eb',
15-
borderRadius: '8px',
16-
padding: '24px',
17-
margin: '24px 0',
18-
backgroundColor: '#f9fafb',
19-
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
20-
},
21-
header: {
22-
fontSize: '0.875rem',
23-
fontWeight: '600',
24-
color: '#6b7280',
25-
textTransform: 'uppercase',
26-
letterSpacing: '0.05em',
27-
marginBottom: '20px',
28-
textAlign: 'left',
29-
},
30-
question: {
31-
fontSize: '1.25rem',
32-
fontWeight: '600',
33-
marginBottom: '16px',
34-
color: '#111827',
35-
},
36-
buttonContainer: {
37-
display: 'flex',
38-
flexDirection: 'column',
39-
gap: '12px',
40-
},
41-
button: {
42-
padding: '12px 16px',
43-
border: '1px solid #d1d5db',
44-
borderRadius: '6px',
45-
backgroundColor: '#ffffff',
46-
color: '#374151',
47-
cursor: 'pointer',
48-
textAlign: 'left',
49-
fontSize: '1rem',
50-
transition: 'all 0.2s ease-in-out',
51-
width: '100%',
52-
},
53-
// Style for the correct answer button after reveal
54-
correctButton: {
55-
backgroundColor: '#f0fdfa',
56-
borderColor: '#a7f3d0',
57-
color: '#047857',
58-
fontWeight: 'bold',
59-
},
60-
// Style for an incorrect answer button that the user selected
61-
incorrectButton: {
62-
backgroundColor: '#fff1f2',
63-
borderColor: '#fecdd3',
64-
color: '#be123c',
65-
},
66-
// Style for other buttons after an answer is revealed
67-
disabledButton: {
68-
opacity: 0.7,
69-
cursor: 'not-allowed',
70-
},
71-
explanation: {
72-
marginTop: '20px',
73-
padding: '16px',
74-
border: '1px solid #a5f3fc',
75-
borderRadius: '6px',
76-
backgroundColor: '#ecfeff',
77-
color: '#0e7490',
78-
},
79-
explanationHeader: {
80-
fontSize: '0.875rem',
81-
fontWeight: '600',
82-
color: '#6b7280',
83-
textTransform: 'uppercase',
84-
letterSpacing: '0.05em',
85-
marginBottom: '20px',
86-
textAlign: 'left',
87-
},
88-
};
89-
90-
// Determines the style for a button based on the current state.
91-
const getButtonStyle = (answer) => {
92-
if (!isRevealed) {
93-
return styles.button;
94-
}
95-
// If revealed, style the correct answer green.
96-
if (answer.isCorrect) {
97-
return { ...styles.button, ...styles.correctButton };
98-
}
99-
// If the user selected this specific incorrect answer, style it red.
100-
if (selectedAnswer === answer) {
101-
return { ...styles.button, ...styles.incorrectButton };
13+
// Determines the className for a button based on the current state.
14+
const getButtonClassName = (answer) => {
15+
const classNames = [styles.button];
16+
if (isRevealed) {
17+
if (answer.isCorrect) {
18+
classNames.push(styles.correctButton);
19+
} else if (selectedAnswer === answer) {
20+
classNames.push(styles.incorrectButton);
21+
} else {
22+
classNames.push(styles.disabledButton);
23+
}
10224
}
103-
// Otherwise, just disable the button.
104-
return { ...styles.button, ...styles.disabledButton };
25+
return classNames.join(' ');
10526
};
10627

10728
return (
108-
<div style={styles.container}>
109-
<h3 style={styles.header}>Test Your Knowledge</h3>
110-
<p style={styles.question}>{question}</p>
29+
<div className={styles.container}>
30+
<h3 className={styles.header}>Test Your Knowledge</h3>
31+
<p className={styles.question}>{question}</p>
11132

112-
<div style={styles.buttonContainer}>
33+
<div className={styles.buttonContainer}>
11334
{/* Map over the answers array to create a button for each one. */}
11435
{answers &&
11536
answers.map((answer, index) => (
11637
<button
11738
key={index}
118-
style={getButtonStyle(answer)}
39+
className={getButtonClassName(answer)}
11940
onClick={() => handleAnswerClick(answer)}
12041
disabled={isRevealed}
12142
>
@@ -125,8 +46,8 @@ export default function QuizComponent({ question, answers, children }) {
12546
</div>
12647

12748
{isRevealed && (
128-
<div style={styles.explanation}>
129-
<p style={styles.explanationHeader}>Explanation</p>
49+
<div className={styles.explanation}>
50+
<p className={styles.explanationHeader}>Explanation</p>
13051
<p>{children}</p>
13152
</div>
13253
)}

‎src/components/QuizComponent.module.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
.container {
2+
border: 1px solid #e5e7eb;
3+
border-radius: 8px;
4+
padding: 24px;
5+
margin: 24px 0;
6+
background-color: #f9fafb;
7+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
8+
}
9+
10+
.header {
11+
font-size: 0.875rem;
12+
font-weight: 600;
13+
color: #6b7280;
14+
text-transform: uppercase;
15+
letter-spacing: 0.05em;
16+
margin-bottom: 20px;
17+
text-align: left;
18+
}
19+
20+
/* Dark mode styles */
21+
:global([data-theme='dark']) .container {
22+
background-color: #262626;
23+
border-color: #4d4d4d;
24+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
25+
}
26+
27+
:global([data-theme='dark']) .header {
28+
color: #a0aec0;
29+
}
30+
31+
:global([data-theme='dark']) .question {
32+
color: #ffffff;
33+
}
34+
35+
:global([data-theme='dark']) .button {
36+
background-color: #4a5568;
37+
border-color: #718096;
38+
color: #ffffff;
39+
}
40+
41+
:global([data-theme='dark']) .correctButton {
42+
background-color: #2f855a;
43+
border-color: #68d391;
44+
color: #ffffff;
45+
}
46+
47+
:global([data-theme='dark']) .incorrectButton {
48+
background-color: #c53030;
49+
border-color: #fc8181;
50+
color: #ffffff;
51+
}
52+
53+
:global([data-theme='dark']) .explanation {
54+
background-color: #2d3748;
55+
border-color: #4a5568;
56+
color: #e2e8f0;
57+
}
58+
59+
:global([data-theme='dark']) .explanationHeader {
60+
color: #a0aec0;
61+
}
62+
63+
.question {
64+
font-size: 1.25rem;
65+
font-weight: 600;
66+
margin-bottom: 16px;
67+
color: #111827;
68+
}
69+
70+
.buttonContainer {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 12px;
74+
}
75+
76+
.button {
77+
padding: 12px 16px;
78+
border: 1px solid #d1d5db;
79+
border-radius: 6px;
80+
background-color: #ffffff;
81+
color: #374151;
82+
cursor: pointer;
83+
text-align: left;
84+
font-size: 1rem;
85+
transition: all 0.2s ease-in-out;
86+
width: 100%;
87+
}
88+
89+
.correctButton {
90+
background-color: #f0fdfa;
91+
border-color: #a7f3d0;
92+
color: #047857;
93+
font-weight: bold;
94+
}
95+
96+
.incorrectButton {
97+
background-color: #fff1f2;
98+
border-color: #fecdd3;
99+
color: #be123c;
100+
}
101+
102+
.disabledButton {
103+
opacity: 0.7;
104+
cursor: not-allowed;
105+
}
106+
107+
.explanation {
108+
margin-top: 20px;
109+
padding: 16px;
110+
border: 1px solid #a5f3fc;
111+
border-radius: 6px;
112+
background-color: #ecfeff;
113+
color: #0e7490;
114+
}
115+
116+
.explanationHeader {
117+
font-size: 0.875rem;
118+
font-weight: 600;
119+
color: #6b7280;
120+
text-transform: uppercase;
121+
letter-spacing: 0.05em;
122+
margin-bottom: 20px;
123+
text-align: left;
124+
}

0 commit comments

Comments
 (0)