Skip to content

Commit 0750efc

Browse files
aabhinavg1aabhinavg1
committed
[added the mcq and improved it]
1 parent 2fd8269 commit 0750efc

File tree

8 files changed

+761
-171
lines changed

8 files changed

+761
-171
lines changed

Diff for: ‎docs/mcq/Question.js

+23-13
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
import { useState } from 'react';
2-
import './Question.module.css'; // Assuming you will add custom styles in this CSS file
2+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
3+
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
4+
import './Question.module.css';
35

46
export const Question = ({ question, options, answer, code }) => {
5-
const [selected, setSelected] = useState(null);
6-
const [showAnswer, setShowAnswer] = useState(false);
7+
const [selected, setSelected] = useState(null); // State to store single selected option
8+
const [showAnswer, setShowAnswer] = useState(false); // State to toggle answer visibility
79

810
const handleSelect = (option) => {
9-
setSelected(option);
10-
setShowAnswer(true);
11+
setSelected(option); // Update the selected option
12+
setShowAnswer(true); // Show the answer section
1113
};
1214

1315
return (
1416
<div className="mcq-question">
1517
<h3>{question}</h3>
1618

17-
{/* Display code if provided */}
19+
{/* Display code with syntax highlighting */}
1820
{code && (
19-
<pre className="code-block">
21+
<SyntaxHighlighter language="cpp" style={vscDarkPlus} className="code-block">
2022
{code}
21-
</pre>
23+
</SyntaxHighlighter>
2224
)}
2325

2426
<div className="mcq-options">
2527
{options.map((option, index) => (
2628
<div
2729
key={index}
28-
className={`mcq-option ${selected === option ? 'selected' : ''} ${showAnswer && selected !== option && option === answer ? 'correct' : ''}`}
30+
className={`mcq-option
31+
${selected === option ? 'selected' : ''}
32+
${showAnswer && option === answer ? 'correct' : ''}`}
2933
onClick={() => handleSelect(option)}
3034
style={{ cursor: 'pointer' }}
35+
tabIndex="0" // Ensures keyboard accessibility
3136
>
3237
{index + 1}) {option}
3338
</div>
@@ -37,10 +42,15 @@ export const Question = ({ question, options, answer, code }) => {
3742
{/* Answer Section */}
3843
{showAnswer && (
3944
<div className="mcq-answer">
40-
<strong>Your selected answer: </strong>{selected}<br />
41-
<strong className={selected === answer ? 'correct-answer' : 'incorrect-answer'}>
42-
{selected === answer ? 'Correct!' : 'Incorrect, try again!'}
43-
</strong>
45+
<strong>Your selected answer: </strong>{selected || 'None'}<br />
46+
{selected === answer ? (
47+
<strong className="correct-answer">Correct!</strong>
48+
) : (
49+
<>
50+
<strong className="incorrect-answer">Incorrect!</strong><br />
51+
The correct answer is: <strong>{answer}</strong>.
52+
</>
53+
)}
4454
</div>
4555
)}
4656

Diff for: ‎docs/mcq/Question.module.css

+88-77
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,88 @@
1-
2-
.mcq-options {
3-
display: flex;
4-
flex-direction: column;
5-
gap: 30px; /* Space between options */
6-
}
7-
8-
.mcq-option {
9-
padding: 18px;
10-
background-color: #f9f9f9;
11-
border: 1px solid #ddd;
12-
border-radius: 8px;
13-
font-size: 16px;
14-
cursor: pointer;
15-
text-align: left;
16-
transition: background-color 0.3s, transform 0.3s ease-in-out, box-shadow 0.3s ease;
17-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
18-
}
19-
20-
.mcq-option:hover {
21-
background-color: #efefef;
22-
transform: scale(1.02);
23-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
24-
}
25-
26-
.mcq-option.selected {
27-
background-color: #4CAF50;
28-
color: white;
29-
border: 1px solid #4CAF50;
30-
transform: scale(1.03);
31-
}
32-
33-
.mcq-option.correct {
34-
background-color: #4CAF50;
35-
color: white;
36-
border: 1px solid #4CAF50;
37-
transform: scale(1.03);
38-
}
39-
40-
.mcq-answer {
41-
margin-top: 30px; /* Increased space to separate answers from options */
42-
font-size: 18px;
43-
font-weight: bold;
44-
text-align: center;
45-
}
46-
47-
.correct-answer {
48-
color: #4CAF50;
49-
}
50-
51-
.incorrect-answer {
52-
color: #f44336;
53-
}
54-
55-
.answer-divider {
56-
margin-top: 30px; /* Increased space for line separation */
57-
border: none;
58-
border-top: 2px solid #ddd;
59-
margin-bottom: 30px; /* Increased space after the line */
60-
}
61-
.code-block {
62-
background-color: #2d2d2d;
63-
color: #f8f8f2;
64-
padding: 15px;
65-
border-radius: 5px;
66-
font-family: "Courier New", Courier, monospace;
67-
font-size: 14px;
68-
overflow-x: auto;
69-
margin-top: 15px;
70-
}
71-
.answer-divider {
72-
margin-top: 30px;
73-
border: none;
74-
border-top: 2px solid #ddd;
75-
margin-bottom: 30px;
76-
}
77-
1+
.mcq-options {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 24px; /* Slightly increased spacing for better readability */
5+
}
6+
7+
.mcq-option {
8+
padding: 16px;
9+
background-color: #f9f9f9;
10+
border: 1px solid #ddd;
11+
border-radius: 10px;
12+
font-size: 16px;
13+
cursor: pointer;
14+
text-align: left;
15+
transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
16+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Softer and more modern shadow */
17+
}
18+
19+
.mcq-option:hover {
20+
background-color: #f0f0f0;
21+
transform: translateY(-2px); /* Subtle lift effect */
22+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
23+
}
24+
25+
.mcq-option.selected {
26+
background-color: #4CAF50;
27+
color: white;
28+
border: 1px solid #4CAF50;
29+
transform: scale(1.03);
30+
font-weight: bold;
31+
}
32+
33+
.mcq-option.correct {
34+
background-color: #4CAF50;
35+
color: white;
36+
border: 1px solid #4CAF50;
37+
transform: scale(1.03); /* Consistent feedback for correct option */
38+
font-weight: bold;
39+
}
40+
41+
.mcq-option.incorrect {
42+
background-color: #f44336;
43+
color: white;
44+
border: 1px solid #f44336;
45+
transform: scale(1.03); /* Consistent feedback for incorrect option */
46+
font-weight: bold;
47+
}
48+
49+
.mcq-option.highlight-correct {
50+
background-color: #4CAF50;
51+
color: white;
52+
border: 1px solid #4CAF50;
53+
transform: scale(1.03);
54+
}
55+
56+
.mcq-answer {
57+
margin-top: 30px;
58+
font-size: 18px;
59+
font-weight: bold;
60+
text-align: center;
61+
}
62+
63+
.correct-answer {
64+
color: #4CAF50;
65+
}
66+
67+
.incorrect-answer {
68+
color: #f44336;
69+
}
70+
71+
.answer-divider {
72+
margin: 40px 0; /* Added more spacing for visual clarity */
73+
border: none;
74+
border-top: 2px solid #ddd;
75+
}
76+
77+
.code-block {
78+
background-color: #000000; /* Pure black for high contrast */
79+
color: #f8f8f2; /* Light color for better readability */
80+
padding: 15px;
81+
border-radius: 6px;
82+
font-family: "Courier New", Courier, monospace;
83+
font-size: 15px; /* Optimized for smaller blocks */
84+
overflow-x: auto;
85+
margin-top: 20px;
86+
white-space: pre-wrap;
87+
word-wrap: break-word; /* Handles long strings gracefully */
88+
}

Diff for: ‎docs/mcq/questions/basic/control-flow.md

+18-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ int main() {
2626
}`}
2727
options={['0 1 2', '1 2 3', '0 1 2 3', '1 2 3 4']}
2828
answer="0 1 2"
29+
2930
/>
3031

3132

@@ -52,14 +53,29 @@ int main() {
5253
options={['To stop the execution of the current loop iteration and move to the next iteration', 'To exit the loop entirely', 'To break out of a function', 'To jump to the end of the function']}
5354
answer="To stop the execution of the current loop iteration and move to the next iteration"
5455
/>
55-
5656
<Question
57-
question="8).What is the output of the following C++ code?"
57+
question="8) What is the output of the following C++ code?"
5858

59+
code={`#include <iostream>
60+
using namespace std;
61+
62+
int main() {
63+
for (int i = 0; i < 3; i++) {
64+
if (i == 0) {
65+
cout << i << " ";
66+
} else if (i == 1) {
67+
cout << i << " ";
68+
} else {
69+
cout << i << " ";
70+
}
71+
}
72+
return 0;
73+
}`}
5974
options={['0 1 2', '1 2 3', '0 1 2 3', '0 1 2 3 4']}
6075
answer="0 1 2"
6176
/>
6277

78+
6379
<Question
6480
question="9).What will be printed if the following C++ code is executed?"
6581

0 commit comments

Comments
 (0)