Skip to content

Commit

Permalink
added explanation for options, UI enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
@ernestjx
ernestjx committed Aug 12, 2024
1 parent d7458cf commit f838be7
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 25 deletions.
67 changes: 47 additions & 20 deletions app/(main)/questions/edit/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const EditQuestion = () => {
const [addedOptions, setAddedOptions] = useState<Questions.Option[]>([]);
const [stem, setStem] = useState<string>('');
const [answer, setAnswer] = useState<string>('');
const [explanation, setExplanation] = useState<string>('');
const [isAnswer, setIsAnswer] = useState<boolean>(false);
const [listOfTopics, setListOfTopics] = useState<Questions.Topic[]>([]);
const [showOptionDialog, setShowOptionDialog] = useState<boolean>(false);
Expand Down Expand Up @@ -51,8 +52,15 @@ const EditQuestion = () => {

const optionsItemTemplate = (option: Questions.Option) => {
return(
<Editor readOnly value={option.text} showHeader={false}>
<>
<div style={{margin:'1em 0em 0.3em 0.1em', fontSize:'.9em'}}>option</div>
<Editor style={{marginBottom:'0.5em'}} readOnly value={option.text} showHeader={false}>
</Editor>
<div></div>
<div style={{margin:'1em 0em 0.3em 0.1em', fontSize:'.9em'}}>explanation</div>
<Editor readOnly value={option.explanation} showHeader={false}>
</Editor>
</>
)
}
const optionItemActionTemplate = (option: Questions.Option) => {
Expand Down Expand Up @@ -87,7 +95,8 @@ const EditQuestion = () => {
return {
no: index + 1,
text: option.text,
isAnswer: option.isAnswer
isAnswer: option.isAnswer,
explanation: option.explanation
}
})
setAddedOptions(reOrderedOptions);
Expand All @@ -100,7 +109,8 @@ const EditQuestion = () => {
return {
no: option.no,
text: option.text,
isAnswer: option.no === selectedNo
isAnswer: option.no === selectedNo,
explanation: option.explanation
}
})
}
Expand All @@ -116,17 +126,20 @@ const EditQuestion = () => {
return {
no: index + 1,
text: option.text,
isAnswer: option.isAnswer
isAnswer: option.isAnswer,
explanation: option.explanation
}
})
options.push({
no: options.length +1,
text: answer,
isAnswer: isAnswer
text: answer,
isAnswer: isAnswer,
explanation: explanation
})

setAddedOptions(options);
setAnswer("");
setExplanation("");
setIsAnswer(false);
setShowOptionDialog(false);
};
Expand Down Expand Up @@ -218,10 +231,10 @@ const EditQuestion = () => {
<label htmlFor="ms-skills">Skills</label>
</FloatLabel> */}
</div>
<div className="col-12">
Other information like publised date
</div>
<div className="col-12">
{/* <div className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(1)}}></Button>
</div> */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(1)}}></Button>
</div>
</div>
Expand All @@ -233,20 +246,28 @@ const EditQuestion = () => {
<Editor value={stem} onTextChange={(e: EditorTextChangeEvent) => setStem(e.htmlValue || '')} style={{ height: '320px' }} />
</div>
</div>
<div className="col-12">
{/* <div className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(2)}}></Button>
</div> */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(2)}}></Button>
</div>
</TabPanel>
<TabPanel header="Options">
<Dialog visible={showOptionDialog} style={{ width: '80vw' }} modal={false} position="bottom" onHide={() => {if (!showOptionDialog) return; setShowOptionDialog(false); }}>
<div className="grid">
<div className="col-10">Fill in the options of the question and indicate answer.</div>
<div className="col-2">
<Button label="Add" onClick={handleOnClickAdd} size="small"/>
</div>
<div className="col-10">Add an option for the question</div>

<div className="col-12">
<Editor value={answer} onTextChange={(e: EditorTextChangeEvent) => setAnswer(e.htmlValue || '')} style={{ height: '100px' }} />
</div>
<div className="col-10">Explain why this option is correct or wrong</div>
<div className="col-12">
<Editor value={explanation} onTextChange={(e: EditorTextChangeEvent) => setExplanation(e.htmlValue || '')} style={{ height: '100px' }} />
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
<Button label="Add" onClick={handleOnClickAdd} size="small"/>
</div>
<div className="col-10">
</div>
</div>
Expand All @@ -262,25 +283,31 @@ const EditQuestion = () => {
<Column style={{ width: '5%' }} body={optionItemActionTemplate}></Column>
</DataTable>
</div>
<div className="col-12">
{/* <div className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(3)}}></Button>
</div> */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
<Button label="Next" onClick={()=> {setActiveTab(3)}}></Button>
</div>
</div>
</div>
</TabPanel>
<TabPanel header="Review">
<div className="grid">
<div className="col-12">
<Editor readOnly value={stem} showHeader={false} style={{ height: '400px' }}>
<Editor readOnly value={stem} showHeader={false} style={{ height: '320px' }}>
</Editor>
</div>
<div className="col-12">
<DataTable value={addedOptions} emptyMessage="No options added">
<Column field="no" style={{ width: '5%' }}></Column>
<Column field="no" style={{ width: '5%'}}></Column>
<Column style={{ width: '90%' }} body={optionsItemTemplate}></Column>
</DataTable>
</div>
<div className="col-9 md:col-11">&nbsp;</div>
<div className="col-1">
{/* <div className="col-1">
<Button label="Done" onClick={handleOnClickDone}></Button>
</div> */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className="col-12">
<Button label="Done" onClick={handleOnClickDone}></Button>
</div>

Expand Down
4 changes: 2 additions & 2 deletions app/(main)/questions/searchlist/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ const QuestioSearchList = () => {
<div className="col-12 md:col-6"><label>Topics: </label>{topics}</div>
<div className="col-12 md:col-6"><label>Skills: </label>{skills}</div>
<div className="col-12 md:col-3"><label>Status: </label>{rowData.status}</div>
<div className="col-12 md:col-3"><label>Published on: </label>{formatDate(rowData.publishedOn)}</div>
<div className="col-12 md:col-6"><label>Published by: </label>{rowData.publishedBy}</div>
<div className="col-12 md:col-3"><label>Created on: </label>{formatDate(rowData.createdTs)}</div>
<div className="col-12 md:col-6"><label>Created by: </label>{rowData.createdBy}</div>
<div className="col-12 md:col-10">&nbsp;</div>
<div className="col-12 md:col-2">
<span></span>
Expand Down
7 changes: 4 additions & 3 deletions types/questions.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ declare namespace Questions {
status: string ;
publishedOn?: Date ;
publishedBy?: string ;
closedOn?: Date,
closedBy?: string,
createdOn?: Date,
archivedOn?: Date,
archivedBy?: string,
createdTs?: Date,
updatedTs?: Date,
createdBy?: string,
}

Expand Down

0 comments on commit f838be7

Please sign in to comment.