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

Add drag and drop + all exercise page

Browse Source
This commit is contained in:
rotimi-best
2021-07-17 22:29:12 +03:00
parent f84bbc6016
commit f976b81202
14 changed files with 277 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lesson/Exercises/index.svelte
+10 -9
View File
@@ -1,7 +1,7 @@
<script>
import { Modal } from 'carbon-components-svelte';
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
import PageBody from '../../../../PageBody/index.svelte';
import Modal from '../../../../Modal/index.svelte';
import TextField from '../../../../Form/TextField.svelte';
import Exercise from '../Exercise/index.svelte';
@@ -46,22 +46,23 @@
<Exercise {exerciseId} />
{:else}
<Modal
size="xs"
onClose={handleCancelAddExercise}
bind:open
modalHeading="Create an Exercise"
primaryButtonText="Confirm"
secondaryButtonText="Cancel"
on:click:button--primary={handleAddExercise}
on:click:button--secondary={handleCancelAddExercise}
on:open
on:close
on:submit
>
<TextField
bind:value={newExercise.title}
autofocus={true}
placeholder="Exercise name"
/>
<div class="mt-5 flex items-center">
<PrimaryButton
className="px-6 py-2"
label="Submit"
onClick={handleAddExercise}
/>
</div>
</Modal>
<PageBody width="w-11/12 m-auto">
src/components/Course/components/Lesson/Materials/EditMode.svelte
+30 -11
View File
@@ -1,28 +1,47 @@
<script>
import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
import Tabs from '../../../../Tabs/index.svelte';
import TabContent from '../../../../Tabs/index.svelte';
import EditContent from '../../../../EditContent/index.svelte';
import TextField from '../../../../Form/TextField.svelte';
import { lesson } from '../store/lessons';
const tabs = [
{
label: 'Note',
value: 1,
},
{
label: 'Slide',
value: 2,
},
{
label: 'Video',
value: 3,
},
];
let currentTab = tabs[0].value;
function onChange(tabValue) {
return () => {
currentTab = tabValue;
};
}
</script>
<Tabs class="flex justify-center" type="container">
<Tab label="Note" />
<Tab label="Slide" />
<Tab label="Video" />
<div slot="content">
<TabContent>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<EditContent
writeLabel="Note"
bind:value={$lesson.materials.note}
placeholder="Start typing your lesson"
/>
</TabContent>
<TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
<TextField label="Slide link" bind:value={$lesson.materials.slide} />
</TabContent>
<TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
<TextField label="Youtube link" bind:value={$lesson.materials.video} />
</TabContent>
</div>
</slot:fragment>
</Tabs>
src/components/Course/components/Lesson/Materials/ViewMode.svelte
+30 -67
View File
@@ -1,19 +1,38 @@
<script>
import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
import Tabs from '../../../../Tabs/index.svelte';
import TabContent from '../../../../Tabs/index.svelte';
import MarkdownRender from '../../../../MarkdownRender/index.svelte';
import { lesson } from '../store/lessons';
const tabs = [
{
label: 'Note',
value: 1,
},
{
label: 'Slide',
value: 2,
},
{
label: 'Video',
value: 3,
},
];
let currentTab = tabs[0].value;
function onChange(tabValue) {
return () => {
currentTab = tabValue;
};
}
</script>
<Tabs class="flex justify-center" type="container">
<Tab label="Note" />
<Tab label="Slide" />
<Tab label="Video" />
<div slot="content">
<TabContent>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<MarkdownRender content={$lesson.materials.note} />
</TabContent>
<TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
<iframe
title="Embeded Slides"
src={$lesson.materials.slide}
@@ -25,7 +44,7 @@
webkitallowfullscreen="true"
/>
</TabContent>
<TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
<iframe
width="100%"
height="569"
@@ -36,61 +55,5 @@
allowfullscreen
/>
</TabContent>
</div>
</slot:fragment>
</Tabs>
<!-- <div class="flex mb-2">
<button
on:click={handleTabClick(0)}
class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab ===
0 && `${activeClassName}`}"
>
Note
</button>
<button
on:click={handleTabClick(1)}
class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab ===
1 && `${activeClassName}`}"
>
</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 === 0}
<MarkdownRender content={$lesson.materials.note} />
{:else if currentTab === 1}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else if currentTab === 2}
<iframe
width="100%"
height="569"
src={$lesson.materials.video}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
{/if}
</div> -->
<style>
button {
padding: 12px 12px 8px 12px;
}
</style>
src/components/Modal/index.svelte
+31
View File
@@ -0,0 +1,31 @@
<script>
import CloseButton from '../Buttons/Close/index.svelte';
export let open;
export let onClose;
export let modalHeading;
</script>
{#if open}
<div
class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
>
<div aria-hidden="true" class="backdrop" />
<div class="bg-white mx-auto w-3xl shadow-lg p-5 pt-2 rounded-md">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl m-0">
{modalHeading}
</h3>
<CloseButton onClick={onClose} contained={true} />
</div>
<slot />
</div>
</div>
{/if}
<style>
.dialog {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
src/components/Question/CheckboxQuestion/index.svelte
+10 -10
View File
@@ -1,12 +1,12 @@
<script>
import { CodeSnippet } from "carbon-components-svelte";
import PrimaryButton from "../../PrimaryButton/index.svelte";
import { VARIANTS } from "../../PrimaryButton/constants";
import Checkbox from "../../Form/Checkbox.svelte";
import CodeSnippet from '../../CodeSnippet/index.svelte';
import PrimaryButton from '../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../PrimaryButton/constants';
import Checkbox from '../../Form/Checkbox.svelte';
export let title = "";
export let title = '';
export let code;
export let name = "";
export let name = '';
export let options = [];
export let answers = [];
export let onSubmit = () => {};
@@ -45,13 +45,13 @@
function getValidationClassName(option) {
if (defaultValue.includes(option.id)) {
if (answers.includes(option.id)) {
return "border-green-700";
return 'border-green-700';
} else {
return "border-red-700";
return 'border-red-700';
}
}
return "";
return '';
}
</script>
@@ -59,7 +59,7 @@
<h2>{title}</h2>
{#if code}
<CodeSnippet {code} type="multi" />
<CodeSnippet {code} />
{/if}
<div class="ml-4">
src/components/Question/RadioQuestion/index.svelte
+11 -11
View File
@@ -1,17 +1,17 @@
<script>
import { CodeSnippet } from "carbon-components-svelte";
import PrimaryButton from "../../PrimaryButton/index.svelte";
import { VARIANTS } from "../../PrimaryButton/constants";
import RadioItem from "../../Form/RadioItem.svelte";
import CodeSnippet from '../../CodeSnippet/index.svelte';
import PrimaryButton from '../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../PrimaryButton/constants';
import RadioItem from '../../Form/RadioItem.svelte';
export let title = "";
export let title = '';
export let code;
export let name = "";
export let name = '';
export let options = [];
export let answers = [];
export let onSubmit = () => {};
export let onPrevious = () => {};
export let defaultValue = "";
export let defaultValue = '';
export let disablePreviousButton = false;
export let disabled = false;
export let isPreview = false;
@@ -45,13 +45,13 @@
function getValidationClassName(option) {
if (defaultValue.includes(option.id)) {
if (answers.includes(option.id)) {
return "border-green-700";
return 'border-green-700';
} else {
return "border-red-700";
return 'border-red-700';
}
}
return "";
return '';
}
</script>
@@ -59,7 +59,7 @@
<h2>{title}</h2>
{#if code}
<CodeSnippet {code} type="multi" />
<CodeSnippet {code} />
{/if}
<div class="ml-4">
src/components/Question/TextareaQuestion/index.svelte
+10 -10
View File
@@ -1,16 +1,16 @@
<script>
import { CodeSnippet } from "carbon-components-svelte";
import marked from "marked";
import PrimaryButton from "../../PrimaryButton/index.svelte";
import { VARIANTS } from "../../PrimaryButton/constants";
import TextArea from "../../Form/TextArea.svelte";
import CodeSnippet from '../../CodeSnippet/index.svelte';
import marked from 'marked';
import PrimaryButton from '../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../PrimaryButton/constants';
import TextArea from '../../Form/TextArea.svelte';
export let title = "";
export let title = '';
export let code;
export let name = "";
export let name = '';
export let onSubmit = () => {};
export let onPrevious = () => {};
export let defaultValue = "";
export let defaultValue = '';
export let disablePreviousButton = false;
export let isLast = false;
export let isPreview = false;
@@ -33,7 +33,7 @@
<h2>{title}</h2>
{#if code}
<CodeSnippet {code} type="multi" />
<CodeSnippet {code} />
{/if}
<div class="ml-4">
@@ -61,7 +61,7 @@
<PrimaryButton
variant={VARIANTS.OUTLINED}
type="submit"
label={isLast ? "Finish" : "Next"}
label={isLast ? 'Finish' : 'Next'}
{name}
/>
</div>
src/components/TabContent/index.svelte
+8
View File
@@ -0,0 +1,8 @@
<script>
export let value;
export let index;
</script>
{#if value === index}
<slot />
{/if}
src/components/Tabs/index.svelte
+27
View File
@@ -0,0 +1,27 @@
<script>
export let tabs = [];
export let currentTab;
export let onChange;
</script>
<div class="w-full flex justify-center">
<div class="flex items-center">
{#each tabs as tab}
<button
class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
tab.value
? 'text-black font-bold bg-gray-100'
: 'bg-gray-200 text-gray'} focus:outline-none w-40 text-left p-3"
on:click={onChange(tab.value)}
>
{tab.label}
{#if currentTab === tab.value}
<span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
{/if}
</button>
{/each}
</div>
<slot name="content" />
</div>
src/components/Tailwindcss.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
}
*::-webkit-scrollbar {
width: 11px;
width: 5px;
}
*::-webkit-scrollbar-track {