Skip to content

Commit 4afae02

Browse files
ndittrenndittren
authored
Merge pull request #651 from ccnmtl/ERD-357
Multiple Incorrect Feedback
2 parents 5bd994b + 0b6012d commit 4afae02

File tree

7 files changed

+662
-513
lines changed

7 files changed

+662
-513
lines changed

‎media/js/src/simulations/simulation1/multipleChoiceQuestion.jsx‎

Lines changed: 75 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,15 @@ import { saveAnswer, extractTextContent } from './../../utils/utils';
55
export const MultipleChoiceQuestion = ({
66
isSubmitted, setIsSubmitted, submissionId, questionNumber,
77
question, options, answer, header, questionStyle, optionStyle,
8-
answerStyle, correctFeedback, incorrectFeedback, idkey }) => {
8+
answerStyle, correctFeedback, incorrectFeedbackMap, idkey
9+
}) => {
910
const [selectedOption, setSelectedOption] = useState(null);
1011
const [isCorrect, setIsCorrect] = useState(null);
11-
const [shuffledOptions, setShuffledOptions] = useState([]);
12+
// const [shuffledOptions, setShuffledOptions] = useState([]);
1213
const [isAnswered, setIsAnswered] = useState(false);
1314

14-
const shuffleArray = (array) => {
15-
for (let i = array.length - 1; i > 0; i--) {
16-
const j = Math.floor(Math.random() * (i + 1));
17-
[array[i], array[j]] = [array[j], array[i]];
18-
}
19-
return array;
20-
};
21-
22-
const handleOptionSelect = (option) => {
23-
setSelectedOption(option);
15+
const handleOptionSelect = (optionIndex) => {
16+
setSelectedOption(optionIndex);
2417
};
2518

2619
const handleRetry = () => {
@@ -31,94 +24,98 @@ export const MultipleChoiceQuestion = ({
3124

3225
const handleSubmit = async() => {
3326
setIsAnswered(true);
34-
// eslint-disable-next-line max-len
35-
const correct = extractTextContent(selectedOption) === extractTextContent(answer);
27+
28+
const selectedText = extractTextContent(options[selectedOption]);
29+
const correctText = extractTextContent(answer);
30+
31+
const correct = selectedText === correctText;
3632
setIsCorrect(correct);
3733

3834
await saveAnswer(submissionId, questionNumber, header,
3935
extractTextContent(selectedOption), correct, {});
4036

41-
if (correct) {
42-
setIsSubmitted(true);
43-
} else {
44-
setIsSubmitted(false); // Allow retry for incorrect answers
45-
}
37+
setIsSubmitted(correct);
4638
};
4739

4840
const isQualifier = header === 'Qualifier';
4941

5042
useEffect(() => {
51-
setShuffledOptions(shuffleArray([...options]));
43+
// setShuffledOptions(shuffleArray([...options]));
5244
document.getElementById(`multiple-${idkey}`).scrollIntoView(
53-
{ behavior: 'smooth'});
45+
{ behavior: 'smooth' });
5446
}, []);
5547

5648
useEffect(() => {
5749
if (isAnswered) {
5850
document.getElementById('feedback')
59-
.scrollIntoView({ behavior: 'smooth'});
51+
.scrollIntoView({ behavior: 'smooth' });
6052
}
6153
}, [isAnswered]);
6254

63-
return (<>
64-
<div className="simulation__step-container d-flex">
65-
<div className="simulation__step-num">
66-
&bull;
67-
</div>
68-
<div className="simulation__step-toggle--down">
69-
</div>
70-
<div className="simulation__step-body">
71-
<header className="simulation__step-header">
72-
<h2 className="h2-primary">{header}</h2>
73-
</header>
74-
<div className="simulation__step-content">
75-
<p className="mb-2" style={questionStyle}>
76-
{question}
77-
</p>
78-
<div className="choice-list">
79-
{shuffledOptions.map((option, index) => (
80-
<div key={index} className="form-check">
81-
<input
82-
className="form-check-input"
83-
type="radio"
84-
id={`option-${index}-${idkey}`}
85-
name={`options-${idkey}-${index}`}
86-
value={option}
87-
checked={selectedOption === option}
88-
onChange={() => handleOptionSelect(option)}
89-
disabled={isAnswered}
90-
/>
91-
<label className="form-check-label"
92-
htmlFor={`option-${index}-${idkey}`}
93-
style={optionStyle}>
94-
{option}
95-
</label>
55+
return (
56+
<>
57+
<div className="simulation__step-container d-flex">
58+
<div className="simulation__step-num">
59+
&bull;
60+
</div>
61+
<div className="simulation__step-toggle--down">
62+
</div>
63+
<div className="simulation__step-body">
64+
<header className="simulation__step-header">
65+
<h2 className="h2-primary">{header}</h2>
66+
</header>
67+
<div className="simulation__step-content">
68+
<p className="mb-2" style={questionStyle}>
69+
{question}
70+
</p>
71+
<div className="choice-list">
72+
{options.map((option, index) => (
73+
<div key={index} className="form-check">
74+
<input
75+
className="form-check-input"
76+
type="radio"
77+
id={`option-${index}-${idkey}`}
78+
name={`options-${idkey}`}
79+
value={index}
80+
checked={selectedOption === index}
81+
onChange={
82+
() => handleOptionSelect(index)}
83+
disabled={isAnswered}
84+
/>
85+
<label className="form-check-label"
86+
htmlFor={`option-${index}-${idkey}`}
87+
style={optionStyle}>
88+
{option}
89+
</label>
90+
</div>
91+
))}
92+
</div>
93+
<button
94+
className="btn btn-sm btn-success mt-3"
95+
id={`multiple-${idkey}`}
96+
disabled={isAnswered || selectedOption === null}
97+
onClick={handleSubmit}>Submit</button>
98+
{isAnswered && (
99+
<div className="mt-3"
100+
style={answerStyle} id="feedback">
101+
{/* eslint-disable-next-line max-len */}
102+
{isCorrect ? correctFeedback : incorrectFeedbackMap[selectedOption]}
96103
</div>
97-
))}
104+
)}
105+
{isAnswered && !isCorrect && !isQualifier && (
106+
<div className="mt-3">
107+
<button
108+
className="btn btn-sm btn-warning"
109+
onClick={handleRetry}>
110+
Retry
111+
</button>
112+
</div>
113+
)}
98114
</div>
99-
<button
100-
className="btn btn-sm btn-success mt-3"
101-
id={`multiple-${idkey}`}
102-
disabled={isAnswered || !selectedOption}
103-
onClick={handleSubmit}>Submit</button>
104-
{isAnswered && (
105-
<div className="mt-3" style={answerStyle} id="feedback">
106-
{isCorrect ? correctFeedback : incorrectFeedback}
107-
</div>
108-
)}
109-
{isAnswered && !isCorrect && !isQualifier && (
110-
<div className="mt-3">
111-
<button
112-
className="btn btn-sm btn-warning"
113-
onClick={handleRetry}>
114-
Retry
115-
</button>
116-
</div>
117-
)}
118115
</div>
119116
</div>
120-
</div> {/* div class=simulation__step-container */}
121-
</>);
117+
</>
118+
);
122119
};
123120

124121
MultipleChoiceQuestion.propTypes = {
@@ -134,6 +131,6 @@ MultipleChoiceQuestion.propTypes = {
134131
optionStyle: PropTypes.object,
135132
answerStyle: PropTypes.object,
136133
correctFeedback: PropTypes.object,
137-
incorrectFeedback: PropTypes.object,
134+
incorrectFeedbackMap: PropTypes.object.isRequired,
138135
idkey: PropTypes.string
139136
};

0 commit comments

Comments
 (0)