135 lines
5.9 KiB
JavaScript
135 lines
5.9 KiB
JavaScript
// import React from 'react';
|
|
// import { Link, useParams, useLocation } from 'react-router-dom';
|
|
// import { Container, Row, Col, Button } from 'react-bootstrap';
|
|
// import staydown from '../../assets/images/user/resultStay.png'
|
|
// import jump from '../../assets/images/user/resultJump.png'
|
|
// import finish from '../../assets/images/user/resultFinish.png'
|
|
|
|
// const ExerciseResult = () => {
|
|
// const { section, topic } = useParams();
|
|
// const location = useLocation();
|
|
// localStorage.removeItem('answers');
|
|
|
|
// return (
|
|
// <Container className="result-page">
|
|
// <Row>
|
|
|
|
// {/* nilai sudah diatas KKM */}
|
|
// <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
|
|
// <h4>Your Result!</h4>
|
|
// <img src={jump} alt="/" className='h-50'/>
|
|
// <p className='my-3 text-muted'>
|
|
// You scored <span className='text-blue fw-bold'> 60/100</span>. Great job! You can jump to...
|
|
// </p>
|
|
// <h1 className='mb-3 display-5 text-blue fw-bold'>LEVEL 3</h1>
|
|
// <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
|
|
// </Col>
|
|
|
|
// {/* jika nilai dibawah KKM */}
|
|
// <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
|
|
// <h4>Your Result!</h4>
|
|
// <img src={staydown} alt="/" className='h-50'/>
|
|
// <p className='my-3 text-muted'>
|
|
// You scored <span className='text-danger fw-bold'> 30/100</span>. Good effort! To improve, you can focus on...
|
|
// </p>
|
|
// <h1 className='mb-3 display-5 text-danger fw-bold'>LEVEL 3</h1>
|
|
// <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
|
|
// </Col>
|
|
|
|
// {/* jika nilai sudah bagus tetapi belum cukup untuk ke level selanjutnya */}
|
|
// <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
|
|
// <h4>Your Result!</h4>
|
|
// <img src={staydown} alt="/" className='h-50'/>
|
|
// <p className='my-3 text-muted text-center'>
|
|
// You scored <span className='text-blue fw-bold'> 30/100</span>. Learning is a journey. <br />
|
|
// Let's explore this level further to deepen your knowledge.
|
|
// </p>
|
|
// <h1 className='mb-3 display-5 fw-bold'>LEVEL 2</h1>
|
|
// <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
|
|
// </Col>
|
|
|
|
// {/* jika yang telah dikerjakan adalah level 5 */}
|
|
// <Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
|
|
// <h4>Your Result!</h4>
|
|
// <img src={finish} alt="/" className='h-50'/>
|
|
// <p className='my-3 text-muted'>
|
|
// Way to go! You conquered <span className='text-blue fw-bold'> LEVEL 5</span> with a <span className='text-blue fw-bold'> 90/100</span>! You're a rock star!
|
|
// </p>
|
|
// <h1 className='mb-3 display-5 fw-bold'>LEVEL 2</h1>
|
|
// <Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
|
|
// </Col>
|
|
// </Row>
|
|
// </Container>
|
|
// );
|
|
// };
|
|
|
|
// export default ExerciseResult;
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
import { Link, useParams, useLocation } from 'react-router-dom';
|
|
import { Container, Row, Col, Button } from 'react-bootstrap';
|
|
import staydown from '../../../../assets/images/illustration/resultStay.png';
|
|
import jump from '../../../../assets/images/illustration/resultJump.png';
|
|
import finish from '../../../../assets/images/illustration/resultFinish.png';
|
|
import useResults from '../hooks/useResults';
|
|
|
|
const ExerciseResult = () => {
|
|
const { section, topic, level } = useParams();
|
|
const location = useLocation();
|
|
const { answers } = location.state || { answers: [] };
|
|
|
|
const { score, nextLevel } = useResults(answers);
|
|
|
|
let resultImage;
|
|
let resultText;
|
|
let resultColor;
|
|
|
|
if (nextLevel === 0) {
|
|
resultImage = finish;
|
|
resultColor = 'text-blue';
|
|
resultText = (
|
|
<> Way to go! You conquered <span className='text-blue fw-bold'>LEVEL 5</span> with a <span className='text-blue fw-bold'>{score}/100</span>! You're a rock star!</>
|
|
);
|
|
} else if (score >= 60) {
|
|
resultImage = jump;
|
|
resultColor = 'text-blue';
|
|
resultText = (
|
|
<> You scored <span className='text-blue fw-bold'>{score}/100</span>. Great job! You can jump to...</>
|
|
);
|
|
} else if (score >= 40) {
|
|
resultImage = staydown;
|
|
resultColor = '';
|
|
resultText = (
|
|
<> You scored <span className='text-blue fw-bold'>{score}/100</span>. Learning is a journey. <br/> Let's explore this level further to deepen your knowledge.</>
|
|
);
|
|
} else {
|
|
resultImage = staydown;
|
|
resultColor = 'text-red';
|
|
resultText = (
|
|
<> You scored <span className='text-red fw-bold'>{score}/100</span>. Good effort! To improve, you can focus on...</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Container className="result-page">
|
|
<Row>
|
|
<Col xs={12} className='p-4 bg-white rounded-4 d-flex flex-column align-items-center'>
|
|
<h4>Your Result!</h4>
|
|
<img src={resultImage} alt="/" className='h-50'/>
|
|
<p className='my-3 text-muted text-center'>
|
|
{resultText}
|
|
</p>
|
|
<h1 className={`mb-3 display-5 fw-bold ${resultColor}`}>{nextLevel === 0 ? '' : `LEVEL ${nextLevel}`}</h1>
|
|
<Button as={Link} to={`/learning/${section}/${topic}`} variant='warning' className='py-2 px-5 rounded-35'>Continue</Button>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default ExerciseResult;
|
|
|