804 lines
58 KiB
React
804 lines
58 KiB
React
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import { Table, Row, Col, Button, Form, Modal, InputGroup, Accordion, Breadcrumb, Spinner } from 'react-bootstrap';
|
||
|
|
import { Link, useParams } from 'react-router-dom';
|
||
|
|
import useUpdateExercises from '../hooks/useUpdateExercises';
|
||
|
|
import ModalOperation from '../../../../components/ui/adminMessageModal/ModalOperation';
|
||
|
|
import {ReactSortable } from 'react-sortablejs';
|
||
|
|
|
||
|
|
import VideoPlayer from './components/VideoPlayer';
|
||
|
|
|
||
|
|
const mpColors = ['#FC6454', '#FBD025', '#46E59A', '#0090FF','#E355D5'];
|
||
|
|
|
||
|
|
const UpdateExercises = () => {
|
||
|
|
const { levelId } = useParams();
|
||
|
|
const {
|
||
|
|
loading,
|
||
|
|
error,
|
||
|
|
exerciseData,
|
||
|
|
setExerciseData,
|
||
|
|
formData,
|
||
|
|
levelName,
|
||
|
|
sectionName,
|
||
|
|
topicName,
|
||
|
|
mediaPath,
|
||
|
|
mediaPreview,
|
||
|
|
handleFormChange,
|
||
|
|
handleFormChangeAnswer,
|
||
|
|
handleFormChangeMedia,
|
||
|
|
handleFormResetMedia,
|
||
|
|
updateMaterials,
|
||
|
|
showLoader,
|
||
|
|
handleCloseLoader,
|
||
|
|
loaderState,
|
||
|
|
|
||
|
|
createQuestion,
|
||
|
|
updateQuestion,
|
||
|
|
deleteQuestion,
|
||
|
|
sortingQuestion,
|
||
|
|
|
||
|
|
selectedQuestion,
|
||
|
|
selectedQuestionNumber,
|
||
|
|
show,
|
||
|
|
handleShow,
|
||
|
|
handleClose,
|
||
|
|
handleShowNewData,
|
||
|
|
|
||
|
|
validUrl,
|
||
|
|
handleCheckUrl,
|
||
|
|
handleUrlInput,
|
||
|
|
showUrlModal,
|
||
|
|
handleShowUrlModal,
|
||
|
|
handleCloseUrlModal,
|
||
|
|
handleSetVideoUrl
|
||
|
|
} = useUpdateExercises(levelId);
|
||
|
|
|
||
|
|
|
||
|
|
const triggerFileInput = (e) => {
|
||
|
|
e.target.previousElementSibling.click();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='admin-teachers'>
|
||
|
|
<Row className='mb-45'>
|
||
|
|
<Col className="d-flex align-items-center breadcrumb-con">
|
||
|
|
<Button as={Link} className='btn btn-blue btn-square-back' to='/admin/material'>
|
||
|
|
<i className="bi bi-arrow-90deg-left"></i>
|
||
|
|
</Button>
|
||
|
|
<Breadcrumb className='custom-breadcrumb'>
|
||
|
|
<Breadcrumb.Item href="#">Learning</Breadcrumb.Item>
|
||
|
|
<Breadcrumb.Item href="/admin/material" className='text-capitalize'>Exercise</Breadcrumb.Item>
|
||
|
|
<Breadcrumb.Item active>Update Exercise</Breadcrumb.Item>
|
||
|
|
</Breadcrumb>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row className='mb-0'>
|
||
|
|
<Col>
|
||
|
|
<div className="cards rounded-top combine combine-top">
|
||
|
|
<div className="cards-title d-flex">
|
||
|
|
<h4>{sectionName} : {topicName} - <span className='text-blue'>{levelName}</span></h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<Row className='mb-45'>
|
||
|
|
<Col className='h-fit'>
|
||
|
|
|
||
|
|
{/* <div className="cards">
|
||
|
|
<div className="cards-title d-flex justify-content-between">
|
||
|
|
<div className="d-flex align-items-center">
|
||
|
|
<span style={{ cursor: 'grab' }}><i className="bi bi-list me-3" /></span>
|
||
|
|
<h4>1</h4>
|
||
|
|
<h4>.Multiple Choice</h4>
|
||
|
|
</div>
|
||
|
|
<div className="d-flex">
|
||
|
|
<Button size='sm' variant='outline-warning' className='me-2 border'><i className="bi bi-pencil me-1"></i>edit</Button>
|
||
|
|
<Button size='sm' variant='outline-danger' className='border'><i className="bi bi-trash3"></i></Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="cards-body">
|
||
|
|
<Row className='mb-2'>
|
||
|
|
<Col className='d-flex align-items-center'>
|
||
|
|
<img src="https://picsum.photos/300/200" alt="" className='me-2 bg-light' style={{aspectRatio:"1/1",width:"5vw",objectPosition:"center",objectFit:"contain"}}/>
|
||
|
|
<p className='m-0 fs-14p'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum assumenda tenetur nostrum, consequatur mollitia ea dignissimos adipisci rerum nesciunt laboriosam laborum ut atque beatae facilis nam illum impedit quia eius.</p>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<span className='fs-12p'>Question Choices</span>
|
||
|
|
<Row>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i><span className='fs-14p'>gatau</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya ini</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>ya itu</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i><span className='fs-14p'>gatau ini</span>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
</div> */}
|
||
|
|
|
||
|
|
{loading?(
|
||
|
|
<div className='w-100 d-flex justify-content-center align-items-center' style={{height:"20vh"}}>
|
||
|
|
<Spinner animation="grow" variant="primary" />
|
||
|
|
<Spinner animation="grow" variant="secondary" />
|
||
|
|
<Spinner animation="grow" variant="success" />
|
||
|
|
<Spinner animation="grow" variant="danger" />
|
||
|
|
<Spinner animation="grow" variant="warning" />
|
||
|
|
<Spinner animation="grow" variant="info" />
|
||
|
|
</div>
|
||
|
|
):(
|
||
|
|
<>
|
||
|
|
<Col className='mb-3 sticky-top' style={{top:'-25px'}}>
|
||
|
|
<div className="cards shadow-sm combine combine-bottom">
|
||
|
|
<div className="cards-title border-0 d-flex justify-content-between align-items-center">
|
||
|
|
<h4 className='mb-0'>{exerciseData.length} Question</h4>
|
||
|
|
<Button size='sm' variant='blue' className='px-5 rounded-3' onClick={sortingQuestion}>Save</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<ReactSortable
|
||
|
|
list={exerciseData}
|
||
|
|
setList={setExerciseData}
|
||
|
|
handle=".handle"
|
||
|
|
>
|
||
|
|
{exerciseData.map((data, index) => (
|
||
|
|
<div className="cards cards-exercise mb-3" key={data.ID_ADMIN_EXERCISE}>
|
||
|
|
<div className="cards-title d-flex justify-content-between">
|
||
|
|
<div className="d-flex align-items-center">
|
||
|
|
<span style={{ cursor: 'grab' }} className='handle'><i className="bi bi-list me-3" /></span>
|
||
|
|
<h4>{index+1}</h4>
|
||
|
|
<h4>. {data.QUESTION_TYPE}</h4>
|
||
|
|
</div>
|
||
|
|
<div className="d-flex align-items-center">
|
||
|
|
<h4 className='mb-0 me-3'>{data.SCORE_WEIGHT} point</h4>
|
||
|
|
<Button size='sm' variant='outline-warning' className='me-2 border' onClick={() => handleShow(index)}><i className="bi bi-pencil me-1"></i>edit</Button>
|
||
|
|
<Button size='sm' variant='outline-danger' className='border' onClick={() => deleteQuestion(index)}><i className="bi bi-trash3"></i></Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="cards-body">
|
||
|
|
<Row>
|
||
|
|
<Col className={`d-flex ${data.AUDIO?"flex-column":"align-items-center"}`}>
|
||
|
|
{data.IMAGE?(
|
||
|
|
<img src={`${mediaPath}/image/${data.IMAGE}`} alt=""
|
||
|
|
className='me-2 bg-light cursor-pointer'
|
||
|
|
style={{aspectRatio:"3/2",width:"10vw",objectPosition:"center",objectFit:"contain"}}
|
||
|
|
onClick={() => handleShow(index)}
|
||
|
|
/>
|
||
|
|
):(
|
||
|
|
data.AUDIO?(
|
||
|
|
<audio controls style={{height:"30px", marginBottom:"8px"}}
|
||
|
|
src={`${mediaPath}/audio/${data.AUDIO}`}
|
||
|
|
>
|
||
|
|
</audio>
|
||
|
|
):(
|
||
|
|
data.VIDEO?(
|
||
|
|
<div className='cursor-pointer' onClick={() => handleShow(index)}>
|
||
|
|
<VideoPlayer url={data.VIDEO} con="main"/>
|
||
|
|
</div>
|
||
|
|
):(
|
||
|
|
<></>
|
||
|
|
)
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
<p className='m-0 fs-14p'>{data.QUESTION}</p>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
<span className='fs-12p'>Answer Key :</span>
|
||
|
|
{data.QUESTION_TYPE === "TFQ"?(
|
||
|
|
<Row>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.trueFalse[0].IS_TRUE === 1 || data.trueFalse[0].IS_TRUE === "1" ?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>True</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.trueFalse[0].IS_TRUE === 0 || data.trueFalse[0].IS_TRUE === "0" ?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>False</span>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
):(
|
||
|
|
data.QUESTION_TYPE === "MCQ"?(
|
||
|
|
<Row>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.multipleChoices[0].ANSWER_KEY === "A"?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>
|
||
|
|
{data.multipleChoices[0].OPTION_A}
|
||
|
|
</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.multipleChoices[0].ANSWER_KEY === "B"?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>
|
||
|
|
{data.multipleChoices[0].OPTION_B}
|
||
|
|
</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.multipleChoices[0].ANSWER_KEY === "C"?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>
|
||
|
|
{data.multipleChoices[0].OPTION_C}
|
||
|
|
</span>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.multipleChoices[0].ANSWER_KEY === "D"?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>
|
||
|
|
{data.multipleChoices[0].OPTION_D}
|
||
|
|
</span>
|
||
|
|
</Col>
|
||
|
|
{data.multipleChoices[0].OPTION_E?(
|
||
|
|
<Col md={6} className='d-flex align-items-center'>
|
||
|
|
{data.multipleChoices[0].ANSWER_KEY === "E"?(
|
||
|
|
<i className="bi bi-check text-success fs-5 me-1"></i>
|
||
|
|
):(
|
||
|
|
<i className="bi bi-x text-red fs-5 me-1"></i>
|
||
|
|
)}
|
||
|
|
<span className='fs-14p'>
|
||
|
|
{data.multipleChoices[0].OPTION_E}
|
||
|
|
</span>
|
||
|
|
</Col>
|
||
|
|
):(
|
||
|
|
<></>
|
||
|
|
)}
|
||
|
|
</Row>
|
||
|
|
):(
|
||
|
|
<div className='mt-1'>
|
||
|
|
{data.matchingPairs.map((dataMp, index) => (
|
||
|
|
<Row key={index}>
|
||
|
|
<Col md={6} className='px-5 d-flex align-items-center'>
|
||
|
|
<div className='mb-2 py-1 px-3 w-100 rounded-pill' style={{backgroundColor: mpColors[index]}}>
|
||
|
|
<span className='fs-14p text-white'>{dataMp.LEFT_PAIR}</span>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
<Col md={6} className='px-5 d-flex align-items-center'>
|
||
|
|
<div className='mb-2 py-1 px-3 w-100 rounded-pill' style={{backgroundColor: mpColors[index]}}>
|
||
|
|
<span className='fs-14p text-white'>{dataMp.RIGHT_PAIR}</span>
|
||
|
|
</div>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</ReactSortable>
|
||
|
|
<div className='w-100 mt-4 p-3 bg-white rounded-4'>
|
||
|
|
<Button variant='blue' className='py-2 px-5 w-100 rounded-35' onClick={() => handleShowNewData()}>
|
||
|
|
+ add question
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Modal show={show} onHide={handleClose} className='modal-admin' scrollable fullscreen="lg-down" size='xl' centered backdrop="static">
|
||
|
|
<Modal.Header closeButton>
|
||
|
|
<Modal.Title>Question Editor</Modal.Title>
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body className='pt-0'>
|
||
|
|
<Form onSubmit={(e) => { e.preventDefault(); selectedQuestion?updateQuestion():createQuestion(); }}>
|
||
|
|
<div className="sticky-top py-2 px-3 mb-3 rounded-bottom shadow-sm bg-white d-flex justify-content-between align-items-center">
|
||
|
|
<h4 className='m-0'>{selectedQuestionNumber ? `Question ${selectedQuestionNumber}` : "New Question"}</h4>
|
||
|
|
<Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{selectedQuestion?(
|
||
|
|
<></>
|
||
|
|
):(
|
||
|
|
<Row className='mb-2'>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
|
||
|
|
<Form.Label>Question Type<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="input-group-icon">
|
||
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-braces"></i></InputGroup.Text>
|
||
|
|
<Form.Select aria-label="teacher select"
|
||
|
|
required
|
||
|
|
name='QUESTION_TYPE'
|
||
|
|
defaultValue={formData.QUESTION_TYPE}
|
||
|
|
onChange={handleFormChange}
|
||
|
|
>
|
||
|
|
<option value="" disabled hidden>Question Type</option>
|
||
|
|
<option value="MCQ">Multiple Choice</option>
|
||
|
|
<option value="TFQ">True / False</option>
|
||
|
|
<option value="MPQ">Matching Pairs</option>
|
||
|
|
</Form.Select>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
</Row>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Row className="mb-2">
|
||
|
|
<Form.Group as={Col} controlId="formGridEmail">
|
||
|
|
<Form.Label>Question<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<Form.Control
|
||
|
|
required
|
||
|
|
as="textarea"
|
||
|
|
rows={3}
|
||
|
|
className='mb-2'
|
||
|
|
placeholder='Type the Question here...'
|
||
|
|
name='QUESTION'
|
||
|
|
value={formData.QUESTION || ''}
|
||
|
|
onChange={handleFormChange}
|
||
|
|
/>
|
||
|
|
</Form.Group>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Row className='mb-2'>
|
||
|
|
<Col xs={12}>
|
||
|
|
<Form.Label>Media (optional)</Form.Label>
|
||
|
|
|
||
|
|
{formData.IMAGE?(
|
||
|
|
<div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
|
||
|
|
<Button variant='red' size='sm' className='ms-auto rounded-3'
|
||
|
|
onClick={()=>{handleFormResetMedia();}}
|
||
|
|
style={{marginBottom:"-3%"}}
|
||
|
|
>
|
||
|
|
<i className="bi bi-trash3"></i>
|
||
|
|
</Button>
|
||
|
|
{mediaPreview?(
|
||
|
|
<img src={mediaPreview} alt="" className='my-2 bg-light' style={{aspectRatio:"3/2",height:"35vh",width:"auto",objectPosition:"center",objectFit:"contain"}}/>
|
||
|
|
):(
|
||
|
|
<img src={`${mediaPath}/image/${formData.IMAGE}`} alt="" className='my-2 bg-light' style={{aspectRatio:"3/2",height:"35vh",width:"auto",objectPosition:"center",objectFit:"contain"}}/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
):(
|
||
|
|
formData.AUDIO?(
|
||
|
|
<div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
|
||
|
|
<Button variant='red' size='sm' className='ms-auto rounded-3'
|
||
|
|
onClick={()=>{handleFormResetMedia();}}
|
||
|
|
style={{marginBottom:"-3%"}}
|
||
|
|
>
|
||
|
|
<i className="bi bi-trash3"></i>
|
||
|
|
</Button>
|
||
|
|
{mediaPreview?(
|
||
|
|
<audio controls className='my-2'
|
||
|
|
src={mediaPreview}
|
||
|
|
>
|
||
|
|
</audio>
|
||
|
|
):(
|
||
|
|
<audio controls className='my-2'
|
||
|
|
src={`${mediaPath}/audio/${formData.AUDIO}`}
|
||
|
|
>
|
||
|
|
</audio>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
):(
|
||
|
|
formData.VIDEO?(
|
||
|
|
<div className='mb-2 w-100 rounded-3 d-flex flex-column justify-content-start align-items-center' style={{border: "2px dashed #dee2e6"}}>
|
||
|
|
<Button variant='red' size='sm' className='ms-auto rounded-3'
|
||
|
|
onClick={()=>{handleFormResetMedia();}}
|
||
|
|
style={{marginBottom:"-3%"}}
|
||
|
|
>
|
||
|
|
<i className="bi bi-trash3"></i>
|
||
|
|
</Button>
|
||
|
|
<VideoPlayer url={formData.VIDEO} con="modal" />
|
||
|
|
</div>
|
||
|
|
):(
|
||
|
|
<div className='mb-2 w-100 rounded-3 d-flex justify-content-around align-items-center' style={{border: "2px dashed #dee2e6"}}>
|
||
|
|
<div className='py-2 h-100 d-flex align-items-center'>
|
||
|
|
<Form.Control type='file' accept="audio/*"
|
||
|
|
placeholder="Choose Audio"
|
||
|
|
aria-label="fullname"
|
||
|
|
aria-describedby="basic-addon1"
|
||
|
|
className='d-none'
|
||
|
|
name='AUDIO'
|
||
|
|
onChange={handleFormChangeMedia}
|
||
|
|
/>
|
||
|
|
<Button variant='light'
|
||
|
|
style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
|
||
|
|
onClick={(e) => {e.preventDefault();triggerFileInput(e)}}
|
||
|
|
>
|
||
|
|
<i className="fs-1 text-secondary bi bi-music-note-beamed"></i>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className='py-2 h-100 d-flex align-items-center'>
|
||
|
|
<Form.Control type='file' accept="image/*"
|
||
|
|
placeholder="Choose Image"
|
||
|
|
aria-label="fullname"
|
||
|
|
aria-describedby="basic-addon1"
|
||
|
|
className='d-none'
|
||
|
|
name='IMAGE'
|
||
|
|
onChange={handleFormChangeMedia}
|
||
|
|
/>
|
||
|
|
<Button variant='light'
|
||
|
|
style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
|
||
|
|
onClick={(e) => {e.preventDefault();triggerFileInput(e)}}
|
||
|
|
>
|
||
|
|
<i className="fs-1 text-secondary bi bi-image"></i>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className='py-2 h-100 d-flex align-items-center'>
|
||
|
|
<Button variant='light'
|
||
|
|
style={{aspectRatio:"4/2",width:"auto", height:"16vh"}}
|
||
|
|
onClick={handleShowUrlModal}
|
||
|
|
>
|
||
|
|
<i className="fs-1 text-secondary bi bi-youtube"></i>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
{formData.QUESTION_TYPE=== "TFQ"?(
|
||
|
|
<Row>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-key"></i></InputGroup.Text>
|
||
|
|
<Form.Select
|
||
|
|
required
|
||
|
|
name='IS_TRUE'
|
||
|
|
defaultValue={`${selectedQuestion ? formData.trueFalse[0].IS_TRUE : ""}`}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
>
|
||
|
|
<option value="" disabled hidden>Choose Answer Key</option>
|
||
|
|
<option value="0">false</option>
|
||
|
|
<option value="1">true</option>
|
||
|
|
</Form.Select>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
|
||
|
|
<Form.Control type='number' onWheel={() => document.activeElement.blur()} placeholder="Enter Weight"
|
||
|
|
required
|
||
|
|
min={0}
|
||
|
|
name='SCORE_WEIGHT'
|
||
|
|
defaultValue={formData.SCORE_WEIGHT || ''}
|
||
|
|
onChange={handleFormChange}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
</Row>
|
||
|
|
):(
|
||
|
|
formData.QUESTION_TYPE=== "MCQ"?(
|
||
|
|
<Row>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Option A<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control placeholder="Enter Option A"
|
||
|
|
required
|
||
|
|
name='OPTION_A'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.OPTION_A ? formData.multipleChoices[0].OPTION_A || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Option B<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control placeholder="Enter Option B"
|
||
|
|
required
|
||
|
|
name='OPTION_B'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.OPTION_B ? formData.multipleChoices[0].OPTION_B || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Option C<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control placeholder="Enter Option C"
|
||
|
|
required
|
||
|
|
name='OPTION_C'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.OPTION_C ? formData.multipleChoices[0].OPTION_C || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Option D<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control placeholder="Enter Option D"
|
||
|
|
required
|
||
|
|
name='OPTION_D'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.OPTION_D ? formData.multipleChoices[0].OPTION_D || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Option E (Optional)</Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control placeholder="Enter Option E"
|
||
|
|
name='OPTION_E'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.OPTION_E ? formData.multipleChoices[0].OPTION_E || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Col className='col-6 d-none d-sm-block d-lg-none'></Col>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
|
||
|
|
<Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text id="basic-addon1"><i className="bi bi-key"></i></InputGroup.Text>
|
||
|
|
<Form.Select
|
||
|
|
required
|
||
|
|
name='ANSWER_KEY'
|
||
|
|
defaultValue={formData.multipleChoices[0]?.ANSWER_KEY ? formData.multipleChoices[0].ANSWER_KEY || "" : ""}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
>
|
||
|
|
<option value="" disabled hidden>Choose Answer Key</option>
|
||
|
|
<option value="A"
|
||
|
|
hidden={formData.multipleChoices[0]?.OPTION_A ? false : true}
|
||
|
|
>
|
||
|
|
A
|
||
|
|
</option>
|
||
|
|
<option value="B"
|
||
|
|
hidden={formData.multipleChoices[0]?.OPTION_B ? false : true}
|
||
|
|
>
|
||
|
|
B
|
||
|
|
</option>
|
||
|
|
<option value="C"
|
||
|
|
hidden={formData.multipleChoices[0]?.OPTION_C ? false : true}
|
||
|
|
>
|
||
|
|
C
|
||
|
|
</option>
|
||
|
|
<option value="D"
|
||
|
|
hidden={formData.multipleChoices[0]?.OPTION_D ? false : true}
|
||
|
|
>
|
||
|
|
D
|
||
|
|
</option>
|
||
|
|
<option value="E"
|
||
|
|
hidden={formData.multipleChoices[0]?.OPTION_E ? false : true}
|
||
|
|
>
|
||
|
|
E
|
||
|
|
</option>
|
||
|
|
<option value="abced"
|
||
|
|
disabled
|
||
|
|
hidden={formData.multipleChoices[0] ? true : false}
|
||
|
|
>
|
||
|
|
Fill Option First
|
||
|
|
</option>
|
||
|
|
</Form.Select>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-6 col-lg-3'>
|
||
|
|
<Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
|
||
|
|
<Form.Control type='number' onWheel={() => document.activeElement.blur()} placeholder="Enter Weight"
|
||
|
|
required
|
||
|
|
min={0}
|
||
|
|
name='SCORE_WEIGHT'
|
||
|
|
defaultValue={formData.SCORE_WEIGHT || ''}
|
||
|
|
onChange={handleFormChange}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
</Row>
|
||
|
|
):(
|
||
|
|
formData.QUESTION_TYPE=== "MPQ"?(
|
||
|
|
<Row>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Left Pair<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[0]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Left Pair 1"
|
||
|
|
name='0_LEFT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[0]?.LEFT_PAIR ? formData.matchingPairs[0].LEFT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Right Pair<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[0]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Right Pair 1"
|
||
|
|
name='0_RIGHT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[0]?.RIGHT_PAIR ? formData.matchingPairs[0].RIGHT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[1]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Left Pair 2"
|
||
|
|
name='1_LEFT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[1]?.LEFT_PAIR ? formData.matchingPairs[1].LEFT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[1]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Right Pair 2"
|
||
|
|
name='1_RIGHT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[1]?.RIGHT_PAIR ? formData.matchingPairs[1].RIGHT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[2]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Left Pair 3"
|
||
|
|
name='2_LEFT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[2]?.LEFT_PAIR ? formData.matchingPairs[2].LEFT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[2]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Right Pair 3"
|
||
|
|
name='2_RIGHT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[2]?.RIGHT_PAIR ? formData.matchingPairs[2].RIGHT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[3]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Left Pair 4"
|
||
|
|
name='3_LEFT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[3]?.LEFT_PAIR ? formData.matchingPairs[3].LEFT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[3]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Right Pair 4"
|
||
|
|
name='3_RIGHT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[3]?.RIGHT_PAIR ? formData.matchingPairs[3].RIGHT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[4]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Left Pair 5"
|
||
|
|
name='4_LEFT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[4]?.LEFT_PAIR ? formData.matchingPairs[4].LEFT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text style={{backgroundColor: mpColors[4]}}><i className="text-white bi bi-question-circle"></i></InputGroup.Text>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Right Pair 5"
|
||
|
|
name='4_RIGHT_PAIR'
|
||
|
|
defaultValue={formData.matchingPairs[4]?.RIGHT_PAIR ? formData.matchingPairs[4].RIGHT_PAIR || '' : ''}
|
||
|
|
onChange={handleFormChangeAnswer}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
|
||
|
|
<Form.Group as={Col} className='mb-2 col-12 col-sm-6'>
|
||
|
|
<Form.Label>Weight<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<InputGroup className="mb-2 input-group-icon">
|
||
|
|
<InputGroup.Text><i className="bi bi-lightbulb"></i></InputGroup.Text>
|
||
|
|
<Form.Control type='number' onWheel={() => document.activeElement.blur()}
|
||
|
|
required
|
||
|
|
min={0}
|
||
|
|
placeholder="Enter Weight"
|
||
|
|
name='SCORE_WEIGHT'
|
||
|
|
value={formData.SCORE_WEIGHT || ''}
|
||
|
|
onChange={handleFormChange}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
</Form.Group>
|
||
|
|
</Row>
|
||
|
|
):(
|
||
|
|
<>
|
||
|
|
<Form.Label>Answer Key<sup className='text-red fw-bold'>*</sup></Form.Label>
|
||
|
|
<h3 className='text-center my-3'>Select Question Type</h3>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
)
|
||
|
|
)}
|
||
|
|
{/* <div className="py-4 bg-white d-flex justify-content-end">
|
||
|
|
<Button variant="blue" type="submit" className='ms-2 py-2 px-5 rounded-35'>
|
||
|
|
Update
|
||
|
|
</Button>
|
||
|
|
</div> */}
|
||
|
|
</Form>
|
||
|
|
</Modal.Body>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
<Modal show={showUrlModal} className='modal-admin' onHide={handleCloseUrlModal} centered style={{backgroundColor:"#00000099"}}>
|
||
|
|
<Modal.Header closeButton>
|
||
|
|
Video URL
|
||
|
|
</Modal.Header>
|
||
|
|
<Modal.Body>
|
||
|
|
<InputGroup>
|
||
|
|
<Form.Control
|
||
|
|
placeholder="Enter Video Url"
|
||
|
|
name='VIDEO'
|
||
|
|
onChange={handleUrlInput}
|
||
|
|
/>
|
||
|
|
{validUrl === "valid"?(
|
||
|
|
<Button variant="outline-success" className={`${validUrl === "valid" ? "d-block":"d-none"}`} onClick={handleSetVideoUrl}>
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
):(
|
||
|
|
<Button variant="outline-secondary" className={`${validUrl === "valid" ? "d-none":"d-block"}`} onClick={handleCheckUrl}>
|
||
|
|
Check
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</InputGroup>
|
||
|
|
<small className={`ms-1 ${validUrl === "invalid" ? "text-red" : validUrl === "valid" ? "text-success" : ""}`}>
|
||
|
|
{validUrl === "invalid" ? "This URL is invalid." : validUrl === "valid" ? "This URL is valid" : "The URL will be checked for validity before use."}
|
||
|
|
</small>
|
||
|
|
</Modal.Body>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
<ModalOperation
|
||
|
|
show={showLoader}
|
||
|
|
handleClose={handleCloseLoader}
|
||
|
|
title={loaderState.title}
|
||
|
|
description={loaderState.description}
|
||
|
|
loading={loaderState.loading}
|
||
|
|
successMessage={loaderState.successMessage}
|
||
|
|
confirmAction={loaderState.confirmAction}
|
||
|
|
handleConfirm={loaderState.handleConfirm}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UpdateExercises;
|