diff --git a/src/components/Apps/components/Poll/components/Poll.svelte b/src/components/Apps/components/Poll/components/Poll.svelte index 2a8180a0..2060b8ea 100644 --- a/src/components/Apps/components/Poll/components/Poll.svelte +++ b/src/components/Apps/components/Poll/components/Poll.svelte @@ -45,7 +45,6 @@ hasUserVoted = poll.options.some((option) => option.selectedBy.find((u) => u.value === currentUserId) ); - console.log("hasUserVoted", hasUserVoted, currentUserId); } diff --git a/src/components/Apps/components/QandA/index.svelte b/src/components/Apps/components/QandA/index.svelte index 7d617ec6..5ed76e38 100644 --- a/src/components/Apps/components/QandA/index.svelte +++ b/src/components/Apps/components/QandA/index.svelte @@ -69,7 +69,6 @@ function handleMarkAnswered(id) { return () => { - console.log(`id`, id); questions = questions .map((question) => { if (question.id === id) { diff --git a/src/components/Apps/index.svelte b/src/components/Apps/index.svelte index 7572ef66..c8ff24cb 100644 --- a/src/components/Apps/index.svelte +++ b/src/components/Apps/index.svelte @@ -28,19 +28,19 @@ } onMount(() => { - hotkeys("ctrl+1,ctrl+2,ctrl+3,ctrl+4", function (event, handler) { + hotkeys("A+1,A+2,A+3,A+4", function (event, handler) { event.preventDefault(); switch (handler.key) { - case "ctrl+1": + case "A+1": handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT); break; - case "ctrl+2": + case "A+2": handleAppClick(APPS_CONSTANTS.APPS.QANDA); break; - case "ctrl+3": + case "A+3": handleAppClick(APPS_CONSTANTS.APPS.NOTES); break; - case "ctrl+4": + case "A+4": handleAppClick(APPS_CONSTANTS.APPS.POLL); break; } @@ -51,7 +51,7 @@
diff --git a/src/components/Course/components/CourseNav.svelte b/src/components/Course/components/CourseNav.svelte index 8e229343..ef038895 100644 --- a/src/components/Course/components/CourseNav.svelte +++ b/src/components/Course/components/CourseNav.svelte @@ -83,10 +83,10 @@ ]; onMount(() => { - hotkeys("ctrl+b", function (event, handler) { + hotkeys("b", function (event, handler) { event.preventDefault(); switch (handler.key) { - case "ctrl+b": + case "b": show = !show; break; } @@ -128,7 +128,7 @@ onClick={() => (show = !show)} toolTipProps={{ title: "Toggle sidebar", - hotkeys: ["Ctrl", "B"], + hotkeys: ["B"], direction: "right", }} > diff --git a/src/components/Course/components/Lecture/Homework/ViewMode.svelte b/src/components/Course/components/Lecture/Homework/ViewMode.svelte index db5cd0b7..7e589010 100644 --- a/src/components/Course/components/Lecture/Homework/ViewMode.svelte +++ b/src/components/Course/components/Lecture/Homework/ViewMode.svelte @@ -5,7 +5,7 @@ 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"; export let preview; @@ -15,6 +15,8 @@ let currentQuestion = {}; let renderProps = {}; let progressValue = 0; + let isAnswerCorrect; + let isFinished; const { questions, title, description } = $questionnaire; @@ -22,39 +24,98 @@ currentQuestionIndex += 1; } - function onSubmit(name, value) { - // if (!value) return; + function onSubmit(id, value) { + const prevAnswer = answers[id] || []; + const formattedAnswer = + typeof value === "string" + ? value + : removeDuplicate([...prevAnswer, ...(value || [])]); + answers = { ...answers, - [name]: value, + [id]: formattedAnswer, }; - currentQuestionIndex += 1; + + if (isAnswerCorrect) { + currentQuestionIndex += 1; + } } function onPrevious() { currentQuestionIndex -= 1; } - function getRenderProps(question, questionIndex) { + function wasCorrectAnswerSelected(currentQuestion) { + const isOpenQuesiton = currentQuestion.type === QUESTION_TYPE.TEXTAREA; + + if (isOpenQuesiton) { + isAnswerCorrect = true; + return true; + } + const answer = answers[currentQuestion.id]; + const formattedAnswers = typeof answer === "string" ? [answer] : answer; + const options = currentQuestion.options; + + isAnswerCorrect = + formattedAnswers && + formattedAnswers.some((answer) => { + if ( + !currentQuestion.answers?.length || + currentQuestion.answers.includes(answer) + ) { + return true; + } + + return false; + }); + + return isAnswerCorrect; + } + + function getRenderProps(question, questionIndex, answers) { + const isLast = questionIndex === questions.length; + const isOpenQuesiton = question.type === QUESTION_TYPE.TEXTAREA; + return { title: questionIndex + ". " + question.title, name: `${question.id}`, options: question.options, + answers: question.answers, code: question.code, - defaultValue: - question.type === QUESTION_TYPE.TEXTAREA - ? question.value || "" - : answers[question.id] || [], + defaultValue: isOpenQuesiton + ? answers[question.id] || "" + : answers[question.id] || [], onSubmit, onPrevious, disablePreviousButton: questionIndex === 1, - isLast: questionIndex === questions.length, - isPreview: preview, + isLast, + isPreview: preview || isFinished, + disabled: wasCorrectAnswerSelected(question) && isFinished, + nextButtonProps: isLast + ? { + label: "Finish", + isActive: true, + } + : isOpenQuesiton + ? { + label: "Next", + isActive: true, + } + : wasCorrectAnswerSelected(question) + ? { + label: "Next", + isActive: true, + disableOptionSelect: true, + } + : { + label: "Check", + isActive: false, + }, }; } function getProgressValue(currentQuestionIndex) { - if (!currentQuestion) { + if (isFinished) { return 100; } @@ -65,9 +126,16 @@ $: { currentQuestion = questions[currentQuestionIndex - 1]; + if (currentQuestionIndex > 0 && !currentQuestion) { + isFinished = true; + } if (currentQuestion) { - renderProps = getRenderProps(currentQuestion, currentQuestionIndex); + renderProps = getRenderProps( + currentQuestion, + currentQuestionIndex, + answers + ); } } @@ -82,26 +150,17 @@ {#if preview} {#each questions as currentQuestion, currentQuestionIndex} - {#if currentQuestionIndex === 0} -
-

{title}

-

{description}

-
- {:else if !currentQuestion} -
-      {JSON.stringify(answers)}
-    
- {:else if QUESTION_TYPE.RADIO === currentQuestion.type} + {#if QUESTION_TYPE.RADIO === currentQuestion.type} {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type} {:else if QUESTION_TYPE.TEXTAREA === currentQuestion.type} {/if} {/each} @@ -117,10 +176,23 @@ type="button" />
-{:else if !currentQuestion} -
-    {JSON.stringify(answers)}
-  
+{:else if isFinished} +

Congratulations you have completed your task

+ {#each questions as currentQuestion, currentQuestionIndex} + {#if QUESTION_TYPE.RADIO === currentQuestion.type} + + {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type} + + {:else if QUESTION_TYPE.TEXTAREA === currentQuestion.type} + + {/if} + {/each} {:else if QUESTION_TYPE.RADIO === currentQuestion.type} {:else if QUESTION_TYPE.CHECKBOX === currentQuestion.type} diff --git a/src/components/Course/components/Lecture/Homework/store/index.js b/src/components/Course/components/Lecture/Homework/store/index.js index 939028a0..daf3ad91 100644 --- a/src/components/Course/components/Lecture/Homework/store/index.js +++ b/src/components/Course/components/Lecture/Homework/store/index.js @@ -11,27 +11,27 @@ export const questionnaire = writable({ questions: [ { id: "react-founder", - type: QUESTION_TYPE.RADIO, + type: QUESTION_TYPE.CHECKBOX, title: "Who is the creator of React.js", options: [ { - id: 1, + id: "1", value: "Dan Abrahmov", }, { - id: 2, + id: "2", value: "Google", }, { - id: 3, + id: "3", value: "Facebook", }, { - id: 4, + id: "4", value: "Traversy Media", }, ], - answers: [], + answers: ['3'], }, { id: "vue-founder", @@ -44,47 +44,47 @@ export const questionnaire = writable({ `, options: [ { - id: 1, + id: "1", value: "Evan Vue", }, { - id: 2, + id: "2", value: "Mark Zukerberg", }, { - id: 3, + id: "3", value: "Prince Charles", }, { - id: 4, + id: "4", value: "Bill Gates", }, ], - answers: [], + answers: ['3'], }, { id: "svelte-founder", - type: QUESTION_TYPE.CHECKBOX, + type: QUESTION_TYPE.RADIO, title: "Who is the creator of Svelte.js", options: [ { - id: 1, + id: "1", value: "Hillary Svelte", }, { - id: 2, + id: "2", value: "Mircosoft", }, { - id: 3, + id: "3", value: "Elevate", }, { - id: 4, + id: "4", value: "Coding Train", }, ], - answers: [2], + answers: ["2"], }, { id: "angular-founder", @@ -109,7 +109,7 @@ export function handleAddQuestion() { answers: [], options: [ { - id: 1, + id: "1", value: null, }, ], @@ -215,7 +215,9 @@ export function handleAnswerSelect(questionId, optionId) { const selectOption = question.options.find(option => option.id === optionId); const newAnswers = []; - if (question.answers.includes(selectOption.id)) { + if (question.type === QUESTION_TYPE.RADIO) { + newAnswers.push(optionId) + } else if (question.answers.includes(selectOption.id)) { newAnswers.push( ...question.answers.filter(answer => answer !== selectOption.id) ) diff --git a/src/components/Course/components/Lecture/index.svelte b/src/components/Course/components/Lecture/index.svelte index fce486bb..fabc2292 100644 --- a/src/components/Course/components/Lecture/index.svelte +++ b/src/components/Course/components/Lecture/index.svelte @@ -1,5 +1,4 @@ {#if showLectureHome} diff --git a/src/components/Course/components/Lecture/store/index.js b/src/components/Course/components/Lecture/store/index.js deleted file mode 100644 index 6c532628..00000000 --- a/src/components/Course/components/Lecture/store/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import { writable } from "svelte/store"; - diff --git a/src/components/Dropdown/index.svelte b/src/components/Dropdown/index.svelte index 8f93abca..528e90ee 100644 --- a/src/components/Dropdown/index.svelte +++ b/src/components/Dropdown/index.svelte @@ -9,7 +9,6 @@ function onClick(optionIndex) { return () => { open = !open; - console.log("onClick", optionIndex); handleOptionClick(optionIndex); }; } diff --git a/src/components/Form/Checkbox.svelte b/src/components/Form/Checkbox.svelte index 0e61a982..b8f8cd63 100644 --- a/src/components/Form/Checkbox.svelte +++ b/src/components/Form/Checkbox.svelte @@ -4,15 +4,20 @@ export let checked; export let name; export let isEditable = false; + export let disabled = false; -
diff --git a/src/components/Question/RadioQuestion/index.svelte b/src/components/Question/RadioQuestion/index.svelte index 5270b335..5789bf43 100644 --- a/src/components/Question/RadioQuestion/index.svelte +++ b/src/components/Question/RadioQuestion/index.svelte @@ -8,12 +8,13 @@ export let code; export let name = ""; export let options = []; + export let answers = []; export let onSubmit = () => {}; export let onPrevious = () => {}; export let defaultValue = ""; export let disablePreviousButton = false; - export let isLast = false; export let isPreview = false; + export let nextButtonProps = {}; function getRadioVal(form, name) { let val; @@ -31,14 +32,26 @@ function handleFormSubmit(event) { if (isPreview) return; const value = getRadioVal(event.target, name); - onSubmit(name, value); - event.target.reset(); + onSubmit(name, [value]); + // event.target.reset(); } function handlePrevious(event) { event.preventDefault(); onPrevious(); } + + function getValidationClassName(option) { + if (defaultValue.includes(option.id)) { + if (answers.includes(option.id)) { + return "border-green-700"; + } else { + return "border-red-700"; + } + } + + return ""; + } @@ -51,14 +64,18 @@
{#each options as option} {/each} @@ -73,9 +90,11 @@ variant={VARIANTS.OUTLINED} />
diff --git a/src/components/Question/TextareaQuestion/index.svelte b/src/components/Question/TextareaQuestion/index.svelte index c2a4a0a6..4a891b37 100644 --- a/src/components/Question/TextareaQuestion/index.svelte +++ b/src/components/Question/TextareaQuestion/index.svelte @@ -13,12 +13,13 @@ export let disablePreviousButton = false; export let isLast = false; export let isPreview = false; + export let disabled = false; function handleFormSubmit(event) { if (isPreview) return; onSubmit(name, defaultValue); - event.target.reset(); + // event.target.reset(); } function handlePrevious(event) { @@ -35,11 +36,15 @@ {/if}
-