Merge styles + style task card on all exercises page
This commit is contained in:
Ibitoye Rotimi Best
@@ -1,14 +1,14 @@
|
||||
<script>
|
||||
import { questionnaire } from "./store/index";
|
||||
import { userQuestionniareAnswers } from "./store/answers";
|
||||
import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
|
||||
import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
|
||||
import TextareaQuestion from "../../../../Question/TextareaQuestion/index.svelte";
|
||||
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
|
||||
import Progress from "../../../../Progress/index.svelte";
|
||||
import { removeDuplicate } from "../../../../../utils/functions/removeDuplicate";
|
||||
import { QUESTION_TYPE } from "../../../../Question/constants";
|
||||
import { STATUS } from "./constants";
|
||||
import { questionnaire } from './store/index';
|
||||
import { userQuestionniareAnswers } from './store/answers';
|
||||
import RadioQuestion from '../../../../Question/RadioQuestion/index.svelte';
|
||||
import CheckboxQuestion from '../../../../Question/CheckboxQuestion/index.svelte';
|
||||
import TextareaQuestion from '../../../../Question/TextareaQuestion/index.svelte';
|
||||
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
|
||||
import Progress from '../../../../Progress/index.svelte';
|
||||
import { removeDuplicate } from '../../../../../utils/functions/removeDuplicate';
|
||||
import { QUESTION_TYPE } from '../../../../Question/constants';
|
||||
import { STATUS } from './constants';
|
||||
|
||||
export let preview;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
function onSubmit(id, value) {
|
||||
const prevAnswer = $userQuestionniareAnswers.answers[id] || [];
|
||||
const formattedAnswer =
|
||||
typeof value === "string"
|
||||
typeof value === 'string'
|
||||
? value
|
||||
: removeDuplicate([...prevAnswer, ...(value || [])]);
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
return true;
|
||||
}
|
||||
const answer = $userQuestionniareAnswers.answers[currentQuestion.id];
|
||||
const formattedAnswers = typeof answer === "string" ? [answer] : answer;
|
||||
const formattedAnswers = typeof answer === 'string' ? [answer] : answer;
|
||||
|
||||
isAnswerCorrect =
|
||||
formattedAnswers &&
|
||||
@@ -74,13 +74,13 @@
|
||||
const isOpenQuesiton = question.type === QUESTION_TYPE.TEXTAREA;
|
||||
|
||||
return {
|
||||
title: questionIndex + ". " + question.title,
|
||||
title: questionIndex + '. ' + question.title,
|
||||
name: `${question.id}`,
|
||||
options: question.options,
|
||||
answers: question.answers,
|
||||
code: question.code,
|
||||
defaultValue: isOpenQuesiton
|
||||
? answers[question.id] || ""
|
||||
? answers[question.id] || ''
|
||||
: answers[question.id] || [],
|
||||
onSubmit,
|
||||
onPrevious,
|
||||
@@ -93,22 +93,22 @@
|
||||
$userQuestionniareAnswers.isFinished,
|
||||
nextButtonProps: isLast
|
||||
? {
|
||||
label: "Finish",
|
||||
label: 'Finish',
|
||||
isActive: true,
|
||||
}
|
||||
: isOpenQuesiton
|
||||
? {
|
||||
label: "Next",
|
||||
label: 'Next',
|
||||
isActive: true,
|
||||
}
|
||||
: wasCorrectAnswerSelected(question)
|
||||
? {
|
||||
label: "Next",
|
||||
label: 'Next',
|
||||
isActive: true,
|
||||
disableOptionSelect: true,
|
||||
}
|
||||
: {
|
||||
label: "Check",
|
||||
label: 'Check',
|
||||
isActive: false,
|
||||
},
|
||||
};
|
||||
@@ -159,7 +159,7 @@
|
||||
|
||||
<!-- <svelte:window on:keydown={handleKeydown} /> -->
|
||||
|
||||
{#if !preview && !$userQuestionniareAnswers.isFinished}
|
||||
{#if !preview && questions.length && !$userQuestionniareAnswers.isFinished}
|
||||
<Progress value={$userQuestionniareAnswers.progressValue} />
|
||||
{/if}
|
||||
|
||||
@@ -191,6 +191,15 @@
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else if !questions.length}
|
||||
<div
|
||||
class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
|
||||
>
|
||||
<h3 class="text-2xl">
|
||||
No questions added. <br /> Click the
|
||||
<span class="text-blue-700">Edit</span> button to add.
|
||||
</h3>
|
||||
</div>
|
||||
{:else if $userQuestionniareAnswers.currentQuestionIndex === 0}
|
||||
<div>
|
||||
<h2 class="my-1">{title}</h2>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
import { STATUS } from "../constants";
|
||||
import { STATUS } from '../constants';
|
||||
|
||||
// export const userQuestionniareAnswers = writable({
|
||||
// answers: {},
|
||||
@@ -10,12 +10,13 @@ import { STATUS } from "../constants";
|
||||
// progressValue: 100,
|
||||
// status: STATUS.REVIEWED,
|
||||
// });
|
||||
|
||||
export const userQuestionniareAnswers = writable({
|
||||
const initAnswerState = {
|
||||
answers: {},
|
||||
scores: {},
|
||||
currentQuestionIndex: 0,
|
||||
isFinished: false,
|
||||
progressValue: 100,
|
||||
status: STATUS.IN_PROGRESS,
|
||||
});
|
||||
};
|
||||
|
||||
export const userQuestionniareAnswers = writable(initAnswerState);
|
||||
|
||||
@@ -1,98 +1,13 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { writable } from 'svelte/store';
|
||||
import {
|
||||
QUESTION_TEMPLATE,
|
||||
QUESTION_TYPE,
|
||||
} from "../../../../../Question/constants";
|
||||
} 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: [
|
||||
{
|
||||
id: "1",
|
||||
value: "Dan Abrahmov",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "Google",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Facebook",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "Traversy Media",
|
||||
},
|
||||
],
|
||||
answers: ['3'],
|
||||
},
|
||||
{
|
||||
id: "vue-founder",
|
||||
type: QUESTION_TYPE.CHECKBOX,
|
||||
title: "Who is the creator of Vue.js",
|
||||
code: `const name = 'Josh Perez';\nconst element = <h1>Hello, {name}</h1>;\n\nReactDOM.render(\n
|
||||
element,\,
|
||||
document.getElementById('root')
|
||||
)
|
||||
`,
|
||||
options: [
|
||||
{
|
||||
id: "1",
|
||||
value: "Evan Vue",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "Mark Zukerberg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Prince Charles",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "Bill Gates",
|
||||
},
|
||||
],
|
||||
answers: ['3'],
|
||||
},
|
||||
{
|
||||
id: "svelte-founder",
|
||||
type: QUESTION_TYPE.RADIO,
|
||||
title: "Who is the creator of Svelte.js",
|
||||
options: [
|
||||
{
|
||||
id: "1",
|
||||
value: "Hillary Svelte",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "Mircosoft",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "Elevate",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "Coding Train",
|
||||
},
|
||||
],
|
||||
answers: ["2"],
|
||||
},
|
||||
{
|
||||
id: "angular-founder",
|
||||
type: QUESTION_TYPE.TEXTAREA,
|
||||
title: "Who is the creator of Angular.js",
|
||||
value: "",
|
||||
},
|
||||
],
|
||||
title: '',
|
||||
description: '',
|
||||
questions: [],
|
||||
});
|
||||
|
||||
export function handleAddQuestion() {
|
||||
@@ -105,11 +20,11 @@ export function handleAddQuestion() {
|
||||
{
|
||||
...QUESTION_TEMPLATE,
|
||||
id: questions.length + 1,
|
||||
value: "",
|
||||
value: '',
|
||||
answers: [],
|
||||
options: [
|
||||
{
|
||||
id: "1",
|
||||
id: '1',
|
||||
value: null,
|
||||
},
|
||||
],
|
||||
@@ -133,7 +48,7 @@ export function handleAddOption(questionId) {
|
||||
...question.options,
|
||||
{
|
||||
id: question.options[question.options.length - 1].id + 1,
|
||||
value: "",
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -193,7 +108,7 @@ export function handleCode(questionId, shouldAdd = true) {
|
||||
if (question.id === questionId) {
|
||||
return {
|
||||
...question,
|
||||
code: shouldAdd ? (question.code || "") : undefined,
|
||||
code: shouldAdd ? question.code || '' : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -212,25 +127,26 @@ export function handleAnswerSelect(questionId, optionId) {
|
||||
...q,
|
||||
questions: questions.map((question) => {
|
||||
if (question.id === questionId) {
|
||||
const selectOption = question.options.find(option => option.id === optionId);
|
||||
const selectOption = question.options.find(
|
||||
(option) => option.id === optionId
|
||||
);
|
||||
const newAnswers = [];
|
||||
|
||||
if (question.type === QUESTION_TYPE.RADIO) {
|
||||
newAnswers.push(optionId)
|
||||
newAnswers.push(optionId);
|
||||
} else if (question.answers.includes(selectOption.id)) {
|
||||
newAnswers.push(
|
||||
...question.answers.filter(answer => answer !== selectOption.id)
|
||||
)
|
||||
...question.answers.filter(
|
||||
(answer) => answer !== selectOption.id
|
||||
)
|
||||
);
|
||||
} else {
|
||||
newAnswers.push(
|
||||
...question.answers,
|
||||
selectOption.id
|
||||
)
|
||||
newAnswers.push(...question.answers, selectOption.id);
|
||||
}
|
||||
|
||||
return {
|
||||
...question,
|
||||
answers: newAnswers
|
||||
answers: newAnswers,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -238,6 +154,5 @@ export function handleAnswerSelect(questionId, optionId) {
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
..._lesson.exercises,
|
||||
{
|
||||
...newExercise,
|
||||
link: `${path}/${_lesson.exercises.length + 1}`,
|
||||
id: _lesson.exercises.length + 1,
|
||||
},
|
||||
],
|
||||
}));
|
||||
@@ -76,7 +76,10 @@
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
{#each $lesson.exercises as exercise}
|
||||
<a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
|
||||
<a
|
||||
class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4"
|
||||
href="{path}/{exercise.id}"
|
||||
>
|
||||
<h3 class="text-xl">{exercise.title}</h3>
|
||||
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user