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

Add UI functionality of questionnaire builder

Browse Source
This commit is contained in:
rotimi-best
2021-06-21 19:21:43 +03:00
parent b24b87d6d1
commit 1ceb5442bc
20 changed files with 504 additions and 5599 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lecture/Homework/EditMode.svelte
+150
View File
@@ -0,0 +1,150 @@
<script>
import Delete24 from "carbon-icons-svelte/lib/Delete24";
import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
import TextField from "../../../../Form/TextField.svelte";
import Checkbox from "../../../../Form/Checkbox.svelte";
import RadioItem from "../../../../Form/RadioItem.svelte";
import IconButton from "../../../../IconButton/index.svelte";
import Select from "../../../../Form/Select.svelte";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
import {
QUESTION_TYPE,
QUESTION_TYPES,
} from "../../../../Question/constants";
// import EditContent from "../../../../EditContent/index.svelte";
// import readme from "../../readme.js";
// let value = readme;
let questions = [
{
id: 1,
title: "",
type: QUESTION_TYPE.RADIO,
options: [
{
id: 1,
value: "",
},
],
},
];
function handleAddOption(id) {
return () => {
questions = questions.map((question) => {
if (question.id === id) {
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,
{
id: questions.length + 1,
title: "",
type: QUESTION_TYPE.RADIO,
options: [
{
id: 1,
value: "",
},
],
},
];
}
</script>
{#each questions as question}
<div
class="border-2 border-gray border-r-2 rounded-md px-4 py-2 mb-4 w-3/5 inline-block"
>
<div class="flex">
<div class="mr-2">
<TextField placeholder="Question" bind:value={question.title} />
</div>
<Select bind:value={question.type} options={QUESTION_TYPES} />
</div>
<div class="flex flex-col">
{#each question.options as option}
{#if QUESTION_TYPE.RADIO === question.type}
<RadioItem
isEditable={true}
name={question.title || "radio-name"}
bind:label={option.value}
>
<div slot="iconbutton">
<IconButton
value={option.id}
onClick={handleOptionRemove(question.id, option.id)}
>
<Delete24 class="carbon-icon" />
</IconButton>
</div>
</RadioItem>
{/if}
{#if QUESTION_TYPE.CHECKBOX === question.type}
<Checkbox
isEditable={true}
name={question || "checkbox-name"}
bind:label={option.value}
>
<div slot="iconbutton">
<IconButton
value={option.id}
onClick={handleOptionRemove(question.id)}
>
<Delete24 class="carbon-icon" />
</IconButton>
</div>
</Checkbox>
{/if}
{/each}
</div>
<div class="flex items-center">
<IconButton onClick={handleAddOption(question.id)}>
<AddFilled24 class="carbon-icon" />
</IconButton>
<p class="italic">Add option</p>
</div>
</div>
{/each}
<div class="flex justify-end mt-2">
<PrimaryButton onClick={handleAddQuestion} label="Add Question" />
</div>
src/components/Course/components/Lecture/Homework.svelte → src/components/Course/components/Lecture/Homework/ViewMode.svelte
+25 -3
View File
@@ -1,6 +1,7 @@
<script>
import RadioQuestion from "../../../RadioQuestion/index.svelte";
import PrimaryButton from "../../../PrimaryButton/index.svelte";
import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
let answers = {};
let currentQuestionIndex = 0;
@@ -110,6 +111,17 @@
currentQuestionIndex += 1;
}
function onCheckboxSubmit(name, value) {
if (!value) return;
answers = {
...answers,
[name]: value,
};
currentQuestionIndex += 1;
}
$: currentQuestion = questions[currentQuestionIndex - 1];
function onPrevious() {
@@ -138,7 +150,7 @@
<code>{JSON.stringify(answers)}</code>
</pre>
{:else}
<RadioQuestion
<!-- <RadioQuestion
title={currentQuestionIndex + ". " + currentQuestion.title}
name={currentQuestion.name}
options={currentQuestion.options}
@@ -147,5 +159,15 @@
{onPrevious}
disablePreviousButton={currentQuestionIndex === 1}
isLast={currentQuestionIndex === questions.length}
/> -->
<CheckboxQuestion
title={currentQuestionIndex + ". " + currentQuestion.title}
name={currentQuestion.name}
options={currentQuestion.options}
defaultValue={answers[currentQuestion.name] || []}
onSubmit={onCheckboxSubmit}
{onPrevious}
disablePreviousButton={currentQuestionIndex === 1}
isLast={currentQuestionIndex === questions.length}
/>
{/if}
src/components/Course/components/Lecture/Homework/index.svelte
+13
View File
@@ -0,0 +1,13 @@
<script>
import MODES from "../../../../../utils/constants/mode.js";
import EditMode from "./EditMode.svelte";
import ViewMode from "./ViewMode.svelte";
export let mode = "";
</script>
{#if mode === MODES.edit}
<EditMode />
{:else}
<ViewMode />
{/if}
src/components/Course/components/Lecture/Readme/EditMode.svelte
+12 -4
View File
@@ -1,8 +1,16 @@
<script>
import EditContent from "../../../../EditContent/index.svelte";
import readme from "../../readme.js";
// import EditContent from "../../../../EditContent/index.svelte";
import TextField from "../../../../Form/TextField.svelte";
// import readme from "../../readme.js";
let value = readme;
// let value = readme;
</script>
<EditContent {value} placeholder="Start typing your lesson" />
<TextField label="Slide link" />
<TextField label="Youtube link" />
<!-- <EditContent
writeLabel="Lecture Note"
{value}
placeholder="Start typing your lesson"
/> -->
src/components/Course/components/Lecture/Readme/ViewMode.svelte
+58 -13
View File
@@ -1,17 +1,62 @@
<!--
import marked from "marked";
{@html marked(readme, { breaks: true, gfm: true })}
-->
<script>
import marked from "marked";
const activeClassName = "border-blue-700";
let slideLink = 'https://docs.google.com/presentation/d/e/2PACX-1vS7mulzY5v1X_D0Gz68M2sggq2zjHCuoyY5JI07hcsOA4svDV5rxhLD9V3ckO_Rz7TK1YniQJtu0CXM/embed?start=false&loop=false&delayms=3000';
let currentTab = 1;
const readme = `
# Introduction
Welcome to this course, we are glad you made it here
## What you'l learn
1. Build powerful, fast, user-friendly and reactive web apps.
2. Provide amazing user experiences by leveraging the power of JavaScript with ease.
3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.
4. Learn all about React Hooks and React Components.
`;
function handleTabClick(tab) {
return () => {
currentTab = tab;
}
}
</script>
{@html marked(readme, { breaks: true, gfm: true })}
<div class="flex mb-2">
<button
on:click={handleTabClick(1)}
class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 1 && `${activeClassName}`}"
>
Slide
</button>
<button
on:click={handleTabClick(2)}
class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 2 && `${activeClassName}`}"
>
Video
</button>
</div>
<div class="m-2 mb-0 p-0">
{#if currentTab === 1}
<iframe
title="Embeded Slides"
src={slideLink}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
>
</iframe>
{:else if currentTab === 2}
<iframe
width="100%"
height="569"
src="https://www.youtube.com/embed/luM5uobewhA"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
{/if}
</div>
<style>
button {
padding: 12px 12px 8px 12px;
}
</style>
src/components/Course/components/Lecture/Readme/index.svelte
-1
View File
@@ -4,7 +4,6 @@
import ViewMode from "./ViewMode.svelte";
export let mode = "";
$: console.log("mode", mode);
</script>
{#if mode === MODES.edit}
src/components/Course/components/Lecture/index.svelte
+40 -22
View File
@@ -1,7 +1,7 @@
<script>
import PageNav from "../../../PageNav/index.svelte";
import Classwork from "./Classwork.svelte";
import Homework from "./Homework.svelte";
import Homework from "./Homework/index.svelte";
import Readme from "./Readme/index.svelte";
import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
@@ -21,29 +21,47 @@
}
</script>
<div>
<PageNav
navItems={[
{
label: "README.md",
isActive: tab === "lectures",
href: `${path}?tab=lectures`,
},
{
label: "Class work",
isActive: tab === "classwork",
href: `${path}?tab=classwork`,
},
{
label: "Hometasks",
isActive: tab === "hometasks",
href: `${path}?tab=hometasks`,
},
]}
>
<div slot="widget">
<PrimaryContainedButton
label={modeLabel}
handleClick={handleModeChange}
/>
</div>
</PageNav>
<div class="course">
{#if tab === "lectures"}
<Readme {mode} />
{:else if tab === "classwork"}
<Classwork />
{:else if tab === "hometasks"}
<Homework {mode} />
{/if}
</div>
</div>
<style>
.course {
padding: 0 40px;
}
</style>
<div>
<PageNav
navItems={[{ label: 'README.md', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]}>
<div slot="widget">
<PrimaryContainedButton
label={modeLabel}
handleClick={handleModeChange} />
</div>
</PageNav>
<div class="course">
{#if tab === 'lectures'}
<Readme {mode} />
{:else if tab === 'classwork'}
<Classwork />
{:else if tab === 'hometasks'}
<Homework {mode} />
{/if}
</div>
</div>