208 lines
7.6 KiB
React
208 lines
7.6 KiB
React
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { useParams } from 'react-router-dom';
|
||
|
|
import { useExercise } from '../hooks/useExercises';
|
||
|
|
import { Container, Row, Col, ListGroup, Button, Modal, Alert, OverlayTrigger, Popover } from 'react-bootstrap';
|
||
|
|
import MultipleChoiceQuestion from './components/MultipleChoiceQuestion';
|
||
|
|
import TrueFalseQuestion from './components/TrueFalseQuestion';
|
||
|
|
import MatchingPairsQuestion from './components/MatchingPairsQuestion';
|
||
|
|
import Skeleton from 'react-loading-skeleton';
|
||
|
|
|
||
|
|
import ilustration from '../../../../assets/images/illustration/submitExercise.png';
|
||
|
|
|
||
|
|
const Exercise = () => {
|
||
|
|
const [showModal, setShowModal] = useState(false);
|
||
|
|
const [showAlert, setShowAlert] = useState(false);
|
||
|
|
const { topic, level } = useParams();
|
||
|
|
const {
|
||
|
|
questions,
|
||
|
|
currentQuestion,
|
||
|
|
currentQuestionIndex,
|
||
|
|
setCurrentQuestionIndex,
|
||
|
|
answers,
|
||
|
|
isLoading,
|
||
|
|
error,
|
||
|
|
handleAnswer,
|
||
|
|
nextQuestion,
|
||
|
|
prevQuestion,
|
||
|
|
handleSubmit,
|
||
|
|
handleConfirmSubmit
|
||
|
|
} = useExercise(topic, level);
|
||
|
|
|
||
|
|
const handleSubmitWrapper = () => {
|
||
|
|
if (handleSubmit()) {
|
||
|
|
setShowModal(true);
|
||
|
|
} else {
|
||
|
|
setShowAlert(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleCloseModal = () => setShowModal(false);
|
||
|
|
|
||
|
|
const renderQuestion = () => {
|
||
|
|
switch (currentQuestion.QUESTION_TYPE) {
|
||
|
|
case 'MCQ':
|
||
|
|
return (
|
||
|
|
<MultipleChoiceQuestion
|
||
|
|
question={currentQuestion}
|
||
|
|
onAnswer={handleAnswer}
|
||
|
|
savedAnswer={answers[currentQuestionIndex]}
|
||
|
|
index={currentQuestionIndex}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
case 'TFQ':
|
||
|
|
return (
|
||
|
|
<TrueFalseQuestion
|
||
|
|
question={currentQuestion}
|
||
|
|
onAnswer={handleAnswer}
|
||
|
|
savedAnswer={answers[currentQuestionIndex]}
|
||
|
|
index={currentQuestionIndex}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
case 'MPQ':
|
||
|
|
return (
|
||
|
|
<MatchingPairsQuestion
|
||
|
|
question={currentQuestion}
|
||
|
|
onAnswer={handleAnswer}
|
||
|
|
savedAnswer={answers[currentQuestionIndex]}
|
||
|
|
index={currentQuestionIndex}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
default:
|
||
|
|
return <p>Unknown question type.</p>;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const popover = (
|
||
|
|
<Popover id="popover-basic">
|
||
|
|
<Popover.Header as="h4">Tips</Popover.Header>
|
||
|
|
<Popover.Body className='p-2'>
|
||
|
|
<ul className='ps-3 m-0'>
|
||
|
|
<li>Click the <strong>left arrow</strong> key to go to the previous question</li>
|
||
|
|
<li>Click the <strong>right arrow</strong> key to go to the next question</li>
|
||
|
|
</ul>
|
||
|
|
</Popover.Body>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="row">
|
||
|
|
<div className="col-2">
|
||
|
|
<Skeleton containerClassName='w-100' className='w-100 mb-1 rounded-3' count={6} style={{height:"4vh"}} />
|
||
|
|
</div>
|
||
|
|
<div className="col-10">
|
||
|
|
<Skeleton containerClassName='w-100' className='w-100 mb-1 rounded-3' style={{height:"5vh"}} />
|
||
|
|
<Skeleton containerClassName='w-100' className='w-50 mb-1 rounded-3' style={{height:"20vh"}} />
|
||
|
|
<Skeleton containerClassName='w-100' className='w-100 mb-1 rounded-3' style={{height:"30vh"}} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) return <p>Error loading questions.</p>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container fluid className='exercise-page'>
|
||
|
|
<Row>
|
||
|
|
<Col sm={2}>
|
||
|
|
<div className='p-3 rounded-4 bg-white'>
|
||
|
|
<div className="mb-3 d-flex justify-content-between align-items-center">
|
||
|
|
<h4 className='mb-0 text-gd fw-bold'>Pretest</h4>
|
||
|
|
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
|
||
|
|
<i className=" bi bi-info-circle cursor-pointer text-secondary"></i>
|
||
|
|
</OverlayTrigger>
|
||
|
|
</div>
|
||
|
|
<ListGroup variant="flush" className='number-list'>
|
||
|
|
{questions.map((q, index) => (
|
||
|
|
<ListGroup.Item
|
||
|
|
key={q.ID_ADMIN_EXERCISE}
|
||
|
|
active={index === currentQuestionIndex}
|
||
|
|
onClick={() => setCurrentQuestionIndex(index)}
|
||
|
|
className={`border-0 rounded-3 number-label ${answers[index] !== null ? 'answered fw-bold' : ''}`}
|
||
|
|
style={{ cursor: 'pointer' }}
|
||
|
|
>
|
||
|
|
<i className={`me-2 bi bi-circle ${answers[index] !== null ? 'd-none' : 'd-block'}`}></i>
|
||
|
|
<i className={`me-2 bi bi-check2-circle ${answers[index] !== null ? 'd-block' : 'd-none'}`}></i>
|
||
|
|
{index+1}
|
||
|
|
</ListGroup.Item>
|
||
|
|
))}
|
||
|
|
</ListGroup>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
|
||
|
|
<Col sm={10}>
|
||
|
|
<div className='p-4 rounded-4 bg-white'>
|
||
|
|
<div className="pb-4 d-flex justify-content-between align-items-center">
|
||
|
|
<Button
|
||
|
|
variant='outline-blue'
|
||
|
|
className={`rounded-35 ${currentQuestionIndex === 0 ? 'invisible' : 'visible'}`}
|
||
|
|
onClick={prevQuestion}
|
||
|
|
disabled={currentQuestionIndex === 0}
|
||
|
|
>
|
||
|
|
<i className="bi bi-arrow-left"></i>
|
||
|
|
</Button>
|
||
|
|
<h5 className='m-0'>{`Questions ${currentQuestionIndex + 1} of ${questions.length}`}</h5>
|
||
|
|
<Button
|
||
|
|
variant="blue"
|
||
|
|
className={`rounded-35 ${currentQuestionIndex === questions.length - 1 ? 'd-none' : ''}`}
|
||
|
|
onClick={nextQuestion}
|
||
|
|
disabled={currentQuestionIndex === questions.length - 1}
|
||
|
|
>
|
||
|
|
Next Questions <i className="bi bi-arrow-right"></i>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="blue"
|
||
|
|
className={`rounded-35 px-4 ${currentQuestionIndex === questions.length - 1 ? 'd-inline-block' : 'd-none'}`}
|
||
|
|
onClick={handleSubmitWrapper}
|
||
|
|
>
|
||
|
|
Submit <i className="bi bi-send"></i>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className='p-3 border rounded-3'>
|
||
|
|
{renderQuestion()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Alert show={showAlert} variant="danger" className="custom-alert" onClose={() => setShowAlert(false)} dismissible>
|
||
|
|
<Alert.Heading>ATTENTION!</Alert.Heading>
|
||
|
|
<span>Please answer all questions before submitting.</span>
|
||
|
|
</Alert>
|
||
|
|
|
||
|
|
{/* <Modal show={showModal} onHide={handleCloseModal} centered>
|
||
|
|
<Modal.Header closeButton>
|
||
|
|
<Modal.Title>Confirmation</Modal.Title>
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body>
|
||
|
|
<p>Are you sure you want to submit your answer?</p>
|
||
|
|
</Modal.Body>
|
||
|
|
<Modal.Footer>
|
||
|
|
<Button variant="secondary" onClick={handleCloseModal}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button variant="primary" onClick={handleConfirmSubmit}>
|
||
|
|
Yes, Submit <i className="bi bi-send"></i>
|
||
|
|
</Button>
|
||
|
|
</Modal.Footer>
|
||
|
|
</Modal> */}
|
||
|
|
|
||
|
|
<Modal show={showModal} onHide={handleCloseModal} centered>
|
||
|
|
<Modal.Body className='p-4 d-flex flex-column items-center'>
|
||
|
|
<h4 className='mb-4 fw-bold text-dark'>Proceed with <span className='text-blue'>Submission</span>?</h4>
|
||
|
|
<img src={ilustration} alt="" />
|
||
|
|
<p className='my-3 text-muted fw-light'>Confirm submission? There's no going back.</p>
|
||
|
|
<div className="mt-4 w-100 d-flex justify-content-center">
|
||
|
|
<Button variant="outline-blue" className="w-50 py-2 px-5 mx-1 rounded-35" onClick={handleCloseModal}>Check Again</Button>
|
||
|
|
<Button variant="gd" className="w-50 py-2 px-5 mx-1 rounded-35" onClick={handleConfirmSubmit}>Confirm</Button>
|
||
|
|
</div>
|
||
|
|
</Modal.Body>
|
||
|
|
</Modal>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Exercise;
|
||
|
|
|
||
|
|
|
||
|
|
|