Add drag and drop + all exercise page

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
@@ -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">
@@ -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">
@@ -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>