mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init editable quiz
This commit is contained in:
swve
parent
a01a0afea7
commit
f93fd96bb5
3 changed files with 187 additions and 146 deletions
|
|
@ -6,7 +6,6 @@ import QuizBlockComponent from "./QuizBlockComponent";
|
|||
export default Node.create({
|
||||
name: "blockQuiz",
|
||||
group: "block",
|
||||
|
||||
atom: true,
|
||||
|
||||
addAttributes() {
|
||||
|
|
@ -14,6 +13,9 @@ export default Node.create({
|
|||
quizId: {
|
||||
value: null,
|
||||
},
|
||||
questions: {
|
||||
default: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,164 +1,203 @@
|
|||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { submitQuizBlock } from "@services/blocks/Quiz/quiz";
|
||||
import { BadgeHelp, Check, Minus, MoreVertical, Plus, X } from "lucide-react";
|
||||
|
||||
function ImageBlockComponent(props: any) {
|
||||
const [questions, setQuestions] = React.useState([]) as any;
|
||||
const [answers, setAnswers] = React.useState([]) as any;
|
||||
|
||||
function addSampleQuestion() {
|
||||
setQuestions([
|
||||
...questions,
|
||||
{
|
||||
question_id: "question_" + uuidv4(),
|
||||
question_value: "",
|
||||
options: [
|
||||
{
|
||||
option_id: "option_" + uuidv4(),
|
||||
option_data: "",
|
||||
option_type: "text",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
interface Answer {
|
||||
answer_id: string;
|
||||
answer: string;
|
||||
correct: boolean;
|
||||
}
|
||||
interface Question {
|
||||
question_id: string;
|
||||
question: string;
|
||||
type: "multiple_choice" | 'custom_answer'
|
||||
answers: Answer[];
|
||||
}
|
||||
|
||||
const deleteQuestion = (index: number) => {
|
||||
let modifiedQuestions = [...questions];
|
||||
modifiedQuestions.splice(index, 1);
|
||||
setQuestions(modifiedQuestions);
|
||||
function QuizBlockComponent(props: any) {
|
||||
const [questions, setQuestions] = React.useState(props.node.attrs.questions) as [Question[], any];
|
||||
const isEditable = props.extension.options.editable;
|
||||
|
||||
|
||||
// remove the answers from the answers array
|
||||
let modifiedAnswers = [...answers];
|
||||
modifiedAnswers = modifiedAnswers.filter((answer: any) => answer.question_id !== questions[index].question_id);
|
||||
setAnswers(modifiedAnswers);
|
||||
};
|
||||
|
||||
const onQuestionChange = (e: any, index: number) => {
|
||||
let modifiedQuestions = [...questions];
|
||||
modifiedQuestions[index].question_value = e.target.value;
|
||||
setQuestions(modifiedQuestions);
|
||||
};
|
||||
|
||||
const addOption = (question_id: string) => {
|
||||
// find the question index from the question_id and add the option to that question index
|
||||
let modifiedQuestions = [...questions];
|
||||
let questionIndex = modifiedQuestions.findIndex((question: any) => question.question_id === question_id);
|
||||
modifiedQuestions[questionIndex].options.push({
|
||||
option_id: "option_" + uuidv4(),
|
||||
option_data: "",
|
||||
option_type: "text",
|
||||
});
|
||||
setQuestions(modifiedQuestions);
|
||||
};
|
||||
|
||||
const deleteOption = (question_id: string, option_id: string) => {
|
||||
// find the option index from the option_id and delete the option from that option index
|
||||
let modifiedQuestions = [...questions];
|
||||
let questionIndex = modifiedQuestions.findIndex((question: any) => question.question_id === question_id);
|
||||
let optionIndex = modifiedQuestions[questionIndex].options.findIndex((option: any) => option.option_id === option_id);
|
||||
modifiedQuestions[questionIndex].options.splice(optionIndex, 1);
|
||||
setQuestions(modifiedQuestions);
|
||||
|
||||
// remove the answer from the answers array
|
||||
let answerIndex = answers.findIndex((answer: any) => answer.option_id === option_id);
|
||||
if (answerIndex !== -1) {
|
||||
let modifiedAnswers = [...answers];
|
||||
modifiedAnswers.splice(answerIndex, 1);
|
||||
setAnswers(modifiedAnswers);
|
||||
const getAlphabetFromIndex = (index: number) => {
|
||||
const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode('A'.charCodeAt(0) + i));
|
||||
return alphabet[index];
|
||||
}
|
||||
};
|
||||
|
||||
const markOptionAsCorrect = (question_id: string, option_id: string) => {
|
||||
// find the option index from the option_id and mark the option as correct
|
||||
let answer = {
|
||||
question_id: question_id,
|
||||
option_id: option_id,
|
||||
};
|
||||
setAnswers([...answers, answer]);
|
||||
|
||||
};
|
||||
|
||||
const saveQuiz = async () => {
|
||||
// save the questions and answers to the backend
|
||||
|
||||
|
||||
|
||||
try {
|
||||
let res = await submitQuizBlock(props.extension.options.activity.activity_id, {questions : questions , answers : answers})
|
||||
|
||||
const saveQuestions = (questions: any) => {
|
||||
props.updateAttributes({
|
||||
quizId: {
|
||||
value : res.block_id
|
||||
questions: questions,
|
||||
});
|
||||
setQuestions(questions);
|
||||
|
||||
};
|
||||
const addSampleQuestion = () => {
|
||||
const newQuestion = {
|
||||
question_id: uuidv4(),
|
||||
question: "",
|
||||
type: "multiple_choice",
|
||||
answers: [
|
||||
{
|
||||
answer_id: uuidv4(),
|
||||
answer: "",
|
||||
correct: false
|
||||
},
|
||||
]
|
||||
}
|
||||
setQuestions([...questions, newQuestion]);
|
||||
}
|
||||
|
||||
const addAnswer = (question_id: string) => {
|
||||
const newAnswer = {
|
||||
answer_id: uuidv4(),
|
||||
answer: "",
|
||||
correct: false
|
||||
}
|
||||
|
||||
// check if there is already more thqn 5 answers
|
||||
const question: any = questions.find((question: Question) => question.question_id === question_id);
|
||||
if (question.answers.length >= 5) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const newQuestions = questions.map((question: Question) => {
|
||||
if (question.question_id === question_id) {
|
||||
question.answers.push(newAnswer);
|
||||
}
|
||||
return question;
|
||||
});
|
||||
|
||||
}
|
||||
catch (error) {
|
||||
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
const changeAnswerValue = (question_id: string, answer_id: string, value: string) => {
|
||||
const newQuestions = questions.map((question: Question) => {
|
||||
if (question.question_id === question_id) {
|
||||
question.answers.map((answer: Answer) => {
|
||||
if (answer.answer_id === answer_id) {
|
||||
answer.answer = value;
|
||||
}
|
||||
return answer;
|
||||
});
|
||||
}
|
||||
return question;
|
||||
});
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
};
|
||||
const changeQuestionValue = (question_id: string, value: string) => {
|
||||
const newQuestions = questions.map((question: Question) => {
|
||||
if (question.question_id === question_id) {
|
||||
question.question = value;
|
||||
}
|
||||
return question;
|
||||
});
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
const onOptionChange = (e: any, questionIndex: number, optionIndex: number) => {
|
||||
let modifiedQuestions = [...questions];
|
||||
modifiedQuestions[questionIndex].options[optionIndex].option_data = e.target.value;
|
||||
setQuestions(modifiedQuestions);
|
||||
};
|
||||
const deleteQuestion = (question_id: string) => {
|
||||
const newQuestions = questions.filter((question: Question) => question.question_id !== question_id);
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
// fetch the questions and options from the backend
|
||||
const deleteAnswer = (question_id: string, answer_id: string) => {
|
||||
const newQuestions = questions.map((question: Question) => {
|
||||
if (question.question_id === question_id) {
|
||||
question.answers = question.answers.filter((answer: Answer) => answer.answer_id !== answer_id);
|
||||
}
|
||||
return question;
|
||||
});
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
const markAnswerCorrect = (question_id: string, answer_id: string) => {
|
||||
const newQuestions = questions.map((question: Question) => {
|
||||
if (question.question_id === question_id) {
|
||||
question.answers.map((answer: Answer) => {
|
||||
if (answer.answer_id === answer_id) {
|
||||
answer.correct = true;
|
||||
} else {
|
||||
answer.correct = false;
|
||||
}
|
||||
return answer;
|
||||
});
|
||||
}
|
||||
return question;
|
||||
});
|
||||
saveQuestions(newQuestions);
|
||||
}
|
||||
|
||||
|
||||
}, [questions, answers]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-quiz">
|
||||
<QuizBlockWrapper>
|
||||
Questions <button onClick={addSampleQuestion}>Add Question</button> <button onClick={() => saveQuiz()}>Save</button>
|
||||
<hr />
|
||||
{questions.map((question: any, qIndex: number) => (
|
||||
<>
|
||||
<div key={qIndex} style={{ marginTop: "10px" }}>
|
||||
Question : <input type="text" value={question.question} onChange={(e) => onQuestionChange(e, qIndex)} />
|
||||
<button onClick={() => deleteQuestion(qIndex)}>Delete</button>
|
||||
<div
|
||||
//style={{ background: "radial-gradient(152.15% 150.08% at 56.45% -6.67%, rgba(180, 255, 250, 0.10) 5.53%, rgba(202, 201, 255, 0.10) 66.76%)" }}
|
||||
className="rounded-xl px-5 py-2 bg-slate-100 transition-all ease-linear"
|
||||
>
|
||||
<div className="flex space-x-2 pt-1 items-center text-sm">
|
||||
<div className="grow flex space-x-2 items-center text-sm">
|
||||
<BadgeHelp className='text-slate-400' size={15} />
|
||||
<p className="uppercase tracking-widest text-xs font-bold py-1 text-slate-400">Quiz</p>
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={addSampleQuestion} className="bg-slate-200 hover:bg-slate-300 text-slate-800 font-bold py-1 px-2 rounded-lg text-xs">Add Question</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{questions.map((question: Question) => (
|
||||
<div key={question.question_id} className="pt-1 space-y-2">
|
||||
<div className="question">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex-grow">
|
||||
<input value={question.question} placeholder="Your Question" onChange={(e) => changeQuestionValue(question.question_id, e.target.value)} className="text-slate-800 bg-[#00008b00] border-2 border-gray-200 rounded-md border-dotted text-md font-bold w-full"></input>
|
||||
</div>
|
||||
<div className="w-[20px] flex-none flex items-center h-[20px] rounded-lg bg-red-600 hover:bg-red-700 text-sm transition-all ease-linear cursor-pointer">
|
||||
<Minus
|
||||
onClick={() => deleteQuestion(question.question_id)}
|
||||
className="mx-auto text-red-200" size={12} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="answers flex py-2 space-x-3">
|
||||
{question.answers.map((answer: Answer) => (
|
||||
<div key={answer.answer_id}
|
||||
className={`outline outline-3 pr-2 shadow w-full flex items-center space-x-2 h-[30px] ${answer.correct ? 'outline-green-200' : 'outline-white'} bg-opacity-50 hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm hover:scale-105 active:scale-110 duration-150 cursor-pointer ease-linear`}>
|
||||
<div className="bg-white font-bold text-neutral-900 text-base flex items-center h-full w-[40px] rounded-md">
|
||||
<p className="mx-auto">{getAlphabetFromIndex(question.answers.indexOf(answer))}</p>
|
||||
</div>
|
||||
<input value={answer.answer} onChange={(e) => changeAnswerValue(question.question_id, answer.answer_id, e.target.value)} placeholder="Answer" className="w-full mx-2 px-3 pr-6 text-neutral-600 bg-[#00008b00] border-2 border-gray-200 rounded-md border-dotted text-sm font-bold"></input>
|
||||
|
||||
<div className="flex space-x-1 items-center">
|
||||
<div
|
||||
onClick={() => markAnswerCorrect(question.question_id, answer.answer_id)}
|
||||
className="w-[20px] flex-none flex items-center h-[20px] rounded-lg bg-green-200 hover:bg-green-300 transition-all ease-linear text-sm cursor-pointer ">
|
||||
<Check
|
||||
className="mx-auto text-green-800" size={12} />
|
||||
</div>
|
||||
<MoreVertical className="text-slate-300" size={15} />
|
||||
<div
|
||||
onClick={() => deleteAnswer(question.question_id, answer.answer_id)}
|
||||
className="w-[20px] flex-none flex items-center h-[20px] rounded-lg bg-red-600 hover:bg-red-700 text-sm transition-all ease-linear cursor-pointer">
|
||||
<Minus
|
||||
className="mx-auto text-red-200" size={12} />
|
||||
</div>
|
||||
</div>
|
||||
Answers : <br />
|
||||
{question.options.map((option: any, oIndex: number) => (
|
||||
<>
|
||||
<div key={oIndex}>
|
||||
<input type="text" value={option.option_data} onChange={(e) => onOptionChange(e, qIndex, oIndex)} />
|
||||
|
||||
<button onClick={() => deleteOption(question.question_id, option.option_id)}>Delete</button>
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={(e) =>
|
||||
// check if checkbox is checked or not
|
||||
// if checked then add the answer to the answers array
|
||||
// if unchecked then remove the answer from the answers array
|
||||
e.target.checked ? markOptionAsCorrect(question.question_id, option.option_id) : null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
<button onClick={() => addOption(question.question_id)}>Add Option</button>
|
||||
</>
|
||||
<div onClick={() => addAnswer(question.question_id)} className="outline outline-3 shadow w-[30px] flex-none flex items-center h-[30px] outline-white hover:bg-opacity-100 hover:shadow-md rounded-lg bg-white text-sm hover:scale-105 active:scale-110 duration-150 cursor-pointer ease-linear">
|
||||
<Plus className="mx-auto text-slate-800" size={15} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</QuizBlockWrapper>
|
||||
|
||||
</div>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const QuizBlockWrapper = styled.div`
|
||||
background-color: #0000001d;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
`;
|
||||
export default ImageBlockComponent;
|
||||
|
||||
export default QuizBlockComponent;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import styled from "styled-components";
|
||||
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon, ListBulletIcon } from "@radix-ui/react-icons";
|
||||
import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react";
|
||||
import { AlertCircle, AlertTriangle, FileText, GraduationCap, HelpCircle, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react";
|
||||
import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
|
||||
|
||||
export const ToolbarButtons = ({ editor, props }: any) => {
|
||||
|
|
@ -136,7 +136,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
|
|||
<FileText size={15} />
|
||||
</ToolBtn>
|
||||
</ToolTip>
|
||||
{/* <ToolTip content={"Interactive Quiz"}>
|
||||
<ToolTip content={"Interactive Quiz"}>
|
||||
<ToolBtn
|
||||
onClick={() =>
|
||||
editor
|
||||
|
|
@ -148,9 +148,9 @@ export const ToolbarButtons = ({ editor, props }: any) => {
|
|||
.run()
|
||||
}
|
||||
>
|
||||
<GraduationCap size={15} />
|
||||
<HelpCircle size={15} />
|
||||
</ToolBtn>
|
||||
</ToolTip> */}
|
||||
</ToolTip>
|
||||
</ToolButtonsWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue