ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Manage questionnaire from store

Browse Source
This commit is contained in:
rotimi-best
2021-06-26 22:38:48 +03:00
parent 445858f4bb
commit e14c84a1bf
5 changed files with 192 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lecture/Homework/EditMode.svelte
+12 -66
View File
@@ -1,4 +1,11 @@
<script>
import {
questionnaire,
handleAddOption,
handleAddQuestion,
handleRemoveOption,
handleRemoveQuestion,
} from "./store/index";
import Delete24 from "carbon-icons-svelte/lib/Delete24";
import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
@@ -14,72 +21,11 @@
import {
QUESTION_TYPE,
QUESTION_TYPES,
QUESTION_TEMPLATE,
} from "../../../../Question/constants";
// import EditContent from "../../../../EditContent/index.svelte";
// import readme from "../../readme.js";
// let value = readme;
let task = {
title: "",
description: null,
};
let questions = [];
function handleAddOption(questionId) {
return () => {
questions = questions.map((question) => {
if (question.id === questionId) {
return {
...question,
options: [
...question.options,
{
id: question.options.length + 1,
value: "",
},
],
};
}
return question;
});
};
}
function handleOptionRemove(questionId, optionId) {
return () => {
questions = questions.map((question) => {
if (question.id === questionId) {
return {
...question,
options: [
...question.options.filter((option) => option.id !== optionId),
],
};
}
return question;
});
};
}
function handleAddQuestion() {
questions = [
...questions,
{
...QUESTION_TEMPLATE,
id: questions.length + 1,
},
];
}
function handleRemoveQuestion(questionId) {
return () => {
questions = questions.filter((q) => q.id !== questionId);
};
}
</script>
<div class="root relative">
@@ -93,15 +39,15 @@
</div>
<QuestionContainer isTitle={true}>
<TextField placeholder="Title" bind:value={task.title} />
<TextField placeholder="Title" bind:value={$questionnaire.title} />
<TextArea
placeholder="Description and Rules"
bind:value={task.description}
bind:value={$questionnaire.description}
/>
</QuestionContainer>
{#each questions as question}
{#each $questionnaire.questions as question}
<QuestionContainer onClose={handleRemoveQuestion(question.id)}>
<div class="flex justify-between">
<div class="mr-2 w-3/5">
@@ -121,7 +67,7 @@
<div slot="iconbutton">
<IconButton
value={option.id}
onClick={handleOptionRemove(question.id, option.id)}
onClick={handleRemoveOption(question.id, option.id)}
>
<Delete24 class="carbon-icon" />
</IconButton>
@@ -138,7 +84,7 @@
<div slot="iconbutton">
<IconButton
value={option.id}
onClick={handleOptionRemove(question.id)}
onClick={handleRemoveOption(question.id)}
>
<Delete24 class="carbon-icon" />
</IconButton>
src/components/Course/components/Lecture/Homework/ViewMode.svelte
+6 -98
View File
@@ -1,4 +1,5 @@
<script>
import { questionnaire } from "./store/index";
import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
@@ -7,96 +8,7 @@
let currentQuestionIndex = 0;
let currentQuestion = {};
const questions = [
{
name: "react-founder",
type: "radio",
title: "Who is the creator of React.js",
options: [
{
label: "Dan Abrahmov",
value: "danabrahmov",
},
{
label: "Google",
value: "google",
},
{
label: "Facebook",
value: "Facebook",
},
{
label: "Traversy Media",
value: "traversymedia",
},
],
},
{
name: "vue-founder",
type: "radio",
title: "Who is the creator of Vue.js",
options: [
{
label: "Evan Vue",
value: "evan-vue",
},
{
label: "Mark Zukerberg",
value: "mark",
},
{
label: "Prince Charles",
value: "prince-charles",
},
{
label: "Bill Gates",
value: "gates-bill",
},
],
},
{
name: "svelte-founder",
type: "radio",
title: "Who is the creator of Svelte.js",
options: [
{
label: "Hillary Svelte",
value: "danabrahmov",
},
{
label: "Mircosoft",
value: "microsoft",
},
{
label: "Elevate",
value: "elevate",
},
{
label: "Coding Train",
value: "coding-train",
},
],
},
{
name: "angular-founder",
type: "radio",
title: "Who is the creator of Angular.js",
options: [
{
label: "Laryy page",
value: "larry-page",
},
{
label: "Google",
value: "google",
},
{
label: "Sales Force",
value: "sales-force",
},
],
},
];
const { questions, title, description } = $questionnaire;
function handleStart() {
currentQuestionIndex += 1;
@@ -131,12 +43,8 @@
{#if currentQuestionIndex === 0}
<div>
<h2>Home task 1</h2>
<p>
You will be to answer 10 questions, it isn't timed so you can take your
time to answer. You can also continue from where you left off, you don't
need to worry cause everything is automatically syncronized in the cloud.
</p>
<h2>{title}</h2>
<p>{description}</p>
<PrimaryButton
onClick={handleStart}
@@ -162,9 +70,9 @@
/> -->
<CheckboxQuestion
title={currentQuestionIndex + ". " + currentQuestion.title}
name={currentQuestion.name}
name={`${currentQuestion.id}`}
options={currentQuestion.options}
defaultValue={answers[currentQuestion.name] || []}
defaultValue={answers[currentQuestion.id] || []}
onSubmit={onCheckboxSubmit}
{onPrevious}
disablePreviousButton={currentQuestionIndex === 1}
src/components/Course/components/Lecture/Homework/store/index.js
+172
View File
@@ -0,0 +1,172 @@
import { writable } from "svelte/store";
import {
QUESTION_TEMPLATE,
QUESTION_TYPE,
} from "../../../../../Question/constants";
export const questionnaire = writable({
title: "Home task 1",
description:
"You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
questions: [
{
id: "react-founder",
type: QUESTION_TYPE.CHECKBOX,
title: "Who is the creator of React.js",
options: [
{
value: "Dan Abrahmov",
},
{
value: "Google",
},
{
value: "Facebook",
},
{
value: "Traversy Media",
},
],
},
{
id: "vue-founder",
type: QUESTION_TYPE.CHECKBOX,
title: "Who is the creator of Vue.js",
options: [
{
value: "Evan Vue",
},
{
value: "Mark Zukerberg",
},
{
value: "Prince Charles",
},
{
value: "Bill Gates",
},
],
},
{
id: "svelte-founder",
type: QUESTION_TYPE.CHECKBOX,
title: "Who is the creator of Svelte.js",
options: [
{
value: "Hillary Svelte",
},
{
value: "Mircosoft",
},
{
value: "Elevate",
},
{
value: "Coding Train",
},
],
},
{
id: "angular-founder",
type: QUESTION_TYPE.CHECKBOX,
title: "Who is the creator of Angular.js",
options: [
{
value: "Laryy page",
},
{
value: "Google",
},
{
value: "Sales Force",
},
],
},
],
});
export function handleAddQuestion() {
questionnaire.update((q) => {
const { questions } = q;
return {
...q,
questions: [
...questions,
{
...QUESTION_TEMPLATE,
id: questions.length + 1,
options: [
{
id: 1,
value: null,
},
],
},
],
};
});
}
export function handleAddOption(questionId) {
return () => {
questionnaire.update((_questionnaire) => {
const { questions } = _questionnaire;
return {
..._questionnaire,
questions: questions.map((question) => {
if (question.id === questionId) {
return {
...question,
options: [
...question.options,
{
id: question.options.length + 1,
value: "",
},
],
};
}
return question;
}),
};
});
};
}
export function handleRemoveOption(questionId, optionId) {
return () => {
questionnaire.update((q) => {
const { questions } = q;
return {
...q,
questions: questions.map((question) => {
if (question.id === questionId) {
return {
...question,
options: [
...question.options.filter((option) => option.id !== optionId),
],
};
}
return question;
}),
};
});
};
}
export function handleRemoveQuestion(questionId) {
return () => {
questionnaire.update((q) => {
const { questions } = q;
return {
...q,
questions: questions.filter((q) => q.id !== questionId),
};
});
};
}
src/components/Question/CheckboxQuestion/index.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
{name}
value={option.value}
checked={defaultValue.includes(option.value)}
label={option.label}
label={option.label || option.value}
/>
</div>
{/each}
src/components/Question/constants.js
+1 -1
View File
@@ -26,7 +26,7 @@ export const QUESTION_TEMPLATE = {
options: [
{
id: 1,
value: "",
value: null,
},
],
};