}content/uploads/files/pictures/${props.extension.options.lecture.lecture_id}/${fileObject.file_id}.${)
{
+ let modifiedQuestions = [...questions];
+ modifiedQuestions.splice(index, 1);
+ setQuestions(modifiedQuestions);
+ console.log(questions);
+
+ // 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 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]);
+ console.log(answers);
+ };
+
+ const saveQuiz = async () => {
+ // save the questions and answers to the backend
+ console.log("saving quiz");
+ console.log(questions);
+ console.log(answers);
+ try {
+ let res = await submitQuizBlock(props.extension.options.lecture.lecture_id, {questions : questions , answers : answers})
+ console.log(res.block_id);
+ props.updateAttributes({
+ quizId: {
+ value : res.block_id
+ },
+ });
+
+ }
+ catch (error) {
+ console.log(error);
+ }
+
+
+ };
+
+ const onOptionChange = (e: any, questionIndex: number, optionIndex: number) => {
+ let modifiedQuestions = [...questions];
+ modifiedQuestions[questionIndex].options[optionIndex].option_data = e.target.value;
+ setQuestions(modifiedQuestions);
+ };
+
+ React.useEffect(() => {
+ // fetch the questions and options from the backend
+ console.log("fetching questions");
+ console.log(questions);
+ console.log(answers);
+ }, [questions, answers]);
+
+ return (
+ + {questions.map((question: any, qIndex: number) => ( + <> +
+ Question : onQuestionChange(e, qIndex)} />
+
+
+ Answers : + {question.options.map((option: any, oIndex: number) => ( + <> +
+ onOptionChange(e, qIndex, oIndex)} />
+
+
+
+ // 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
+ }
+ />
+
+
+ ))}
+
+
+ ))}
+