Skip to content

Commit

Permalink
update reading test
Browse files Browse the repository at this point in the history
  • Loading branch information
@ducvugithub
ducvugithub committed Dec 29, 2023
1 parent aeecf3f commit ae41027
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 31 deletions.
38 changes: 33 additions & 5 deletions client/components/Tests/ReadingTest/ReadingTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const TIMER_START_DELAY = 3000
const ReadingTest = () => {
const [displaySpinner, setDisplaySpinner] = useState(false)
const [paused, setPaused] = useState(false)

const [showCorrect, setShowCorrect] = useState(false)
const [questionDone, setquestionDone] = useState(false)
const [showFeedbacks, setShowFeedbacks] = useState(false)
const {
feedbacks,
Expand All @@ -33,6 +36,12 @@ const ReadingTest = () => {

const dispatch = useDispatch()

const nextQuestion = () => {
setShowCorrect(false)
setquestionDone(false)
dispatch(nextReadingTestQuestion())
}

const checkAnswer = choice => {
if (!currentReadingTestQuestion) return

Expand All @@ -44,16 +53,18 @@ const ReadingTest = () => {
? currentReadingTestQuestion.question_concept_feedbacks.synthesis
: undefined;
const itemFeedbacks = currentReadingTestQuestion.item_feedbacks
? Object.entries(currentReadingTestQuestion.item_feedbacks).map(([, value]) => value)
: [];
? Object.entries(currentReadingTestQuestion.item_feedbacks)
.filter(([, value]) => value !== undefined)
.map(([, value]) => value)
: [];
const mediationFeedbacks = currentReadingTestQuestion.question_concept_feedbacks
? Object.entries(currentReadingTestQuestion.question_concept_feedbacks)
.filter(([key]) => key.startsWith('mediation_'))
.map(([, value]) => value)
: [];

if (choice.is_correct == false){
if (countNotSelectedChoices > 0){
if (countNotSelectedChoices > 2){
const remainItemFeedbacks = itemFeedbacks.filter(feedback => !feedbacks.includes(feedback));
const remainMediationFeedbacks = mediationFeedbacks.filter(feedback => !feedbacks.includes(feedback));
if (remainItemFeedbacks.length > 0){
Expand All @@ -63,13 +74,21 @@ const ReadingTest = () => {
dispatch(updateTestFeedbacks(choice.option, remainMediationFeedbacks[0]))
} else if (!feedbacks.includes(synthesis_feedback)) {
dispatch(updateTestFeedbacks(choice.option, synthesis_feedback))
setShowCorrect(true)
setquestionDone(true)
}
}
} else {
dispatch(updateTestFeedbacks(choice.option, synthesis_feedback))
setShowCorrect(true)
setquestionDone(true)
}
}

if (choice.is_correct){
setquestionDone(true)
}

if (choice.is_correct == true && synthesis_feedback != undefined && !feedbacks.includes(synthesis_feedback)) {
dispatch(updateTestFeedbacks(choice.option, synthesis_feedback))
}
Expand All @@ -89,9 +108,16 @@ const ReadingTest = () => {
)
dispatch(markAnsweredChoice(choice.option))
}
setShowFeedbacks(true)
}

useEffect(() => {
if (feedbacks.length == 0){
setShowFeedbacks(false)
} else {
setShowFeedbacks(true)
}
}, [feedbacks, currentReadingTestQuestion.choices])

useEffect(() => {
if (!readingTestSessionId) return
if (!currentReadingTestQuestion) {
Expand Down Expand Up @@ -128,7 +154,7 @@ const ReadingTest = () => {
</div>
<Button
className="next-reading-question-button"
onClick={() => dispatch(nextReadingTestQuestion())}
onClick={() => nextQuestion()}
disabled={showFeedbacks || currentReadingQuestionIndex == readingTestQuestions.length - 1}
style={{
whiteSpace: 'pre-line',
Expand All @@ -149,6 +175,8 @@ const ReadingTest = () => {
onAnswer={checkAnswer}
answerPending={answerPending}
showFeedbacks={showFeedbacks}
showCorrect={showCorrect}
questionDone={questionDone}
/>
</div>
)}
Expand Down
29 changes: 7 additions & 22 deletions client/components/Tests/ReadingTest/ReadingTestFeedbacks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {
style={{
position: 'absolute',
top: '40%',
left: '40%',
width: "65%",
left: '-10%',
width: "60%",
transform: 'translate(-50%, -50%)',
zIndex: 1000,
padding: "1em",
Expand All @@ -63,6 +63,7 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {
className='left-arrow'
onClick={prevSlide}
onTouchEnd={prevSlide}
disabled={filteredSlides.length==0}
>
<Icon
className='left-arrow'
Expand All @@ -73,26 +74,13 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {

<div className='content-container' style={
{
overflowY: 'auto',
overflowY: 'hidden',
overflowX: 'hidden',
paddingLeft: '1em',
paddingRight: '1em',
width: '100%'
}
}>
{/* {Object.keys(feedbacks).map((fb_key, index) => (
<div
key={fb_key}
style={{
color: 'red',
marginBottom: '0.5em',
borderBottom: index < Object.keys(feedbacks).length - 1 ? '1px solid black' : 'none',
paddingBottom: '0.5em',
whiteSpace: 'pre-line',
}}
className="feedback"
dangerouslySetInnerHTML={sanitizeHtml(feedbacks[fb_key])}
/>
))} */}
<div
className='slide-container'
style={{
Expand All @@ -104,10 +92,6 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {
<div className='slide active' key={current}>
<div
style={{
// color: 'red',
// marginBottom: '0.5em',
// borderBottom: index < Object.keys(feedbacks).length - 1 ? '1px solid black' : 'none',
// paddingBottom: '0.5em',
whiteSpace: 'pre-line',
}}
className="feedback"
Expand All @@ -121,6 +105,7 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {
className='right-arrow'
onClick={nextSlide}
onTouchEnd={nextSlide}
disabled={filteredSlides.length==0}
>
<Icon
className='right-arrow'
Expand Down Expand Up @@ -159,7 +144,7 @@ const ReadingTestFeedbacks = ({ showFeedbacks, closeFeedbacks }) => {

return (
<div style={{ display: 'flex', position: 'relative' }}>
{showFeedbacks && renderFeedback()}
{showFeedbacks && feedbacks.length > 0 && renderFeedback()}
</div>
);
};
Expand Down
14 changes: 10 additions & 4 deletions client/components/Tests/ReadingTest/ReadingTestMC.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Button } from 'react-bootstrap';
import { sanitizeHtml } from 'Utilities/common';
import useWindowDimensions from 'Utilities/windowDimensions';

const ReadingTestMC = ({ exercise, onAnswer, answerPending, showFeedbacks }) => {
const ReadingTestMC = ({ exercise, onAnswer, answerPending, showFeedbacks, showCorrect, questionDone }) => {
const { choices, question, prephrase, test_text } = exercise;
// const { feedbacks } = useSelector(({ tests }) => tests);

Expand All @@ -12,7 +12,7 @@ const ReadingTestMC = ({ exercise, onAnswer, answerPending, showFeedbacks }) =>
return (
<div style={{ display: 'flex', position: 'relative' }}>
{/* <Draggable cancel=".interactable"> */}
<div style={{ display: bigScreen ? 'flex' : 'block', paddingRight: '0.5em' }}>
<div style={{ display: bigScreen ? 'flex' : 'block', paddingRight: '1em' }}>
{/* Left Column */}
<div style={{ flex: '1', marginRight: '20px' }}>
<div className="test-prephrase">{prephrase}</div>
Expand Down Expand Up @@ -42,12 +42,18 @@ const ReadingTestMC = ({ exercise, onAnswer, answerPending, showFeedbacks }) =>
<Button
className="test-choice-button"
onClick={!answerPending ? () => onAnswer(choice) : undefined}
disabled={showFeedbacks}
disabled={showFeedbacks || choice.isSelected || questionDone}
style={{
whiteSpace: 'pre-line',
lineHeight: '1.0',
padding: '0.6em',
backgroundColor: choice.isSelected ? (choice.is_correct ? 'lightgreen' : 'lightcoral') : ''
backgroundColor: showCorrect && choice.is_correct
? 'lightgreen'
: choice.isSelected
? choice.is_correct
? 'lightgreen'
: 'lightcoral'
: ''
}}
>
<span style={{ fontSize: '0.7em' }}>{choice?.option}</span>
Expand Down

0 comments on commit ae41027

Please sign in to comment.