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

Questionnaire in app + editable readme

Browse Source
This commit is contained in:
Ibitoye Rotimi Best
2021-05-14 08:04:35 +03:00
parent 618644b663
commit c614e691ed
11 changed files with 2639 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lecture/Homework.svelte
+151 -1
View File
@@ -1 +1,151 @@
<div>Home workl</div>
<script>
import RadioQuestion from "../../../RadioQuestion/index.svelte";
import PrimaryButton from "../../../PrimaryButton/index.svelte";
let answers = {};
let currentQuestionIndex = 0;
let currentQuestion = {};
const questions = [
{
name: "react-founder",
type: "radio",
title: "Who is the creator of React.js",
options: [
{
label: "Dan Abrahmov",
value: "danabrahmov",
},
{
label: "Google",
value: "google",
},
{
label: "Facebook",
value: "Facebook",
},
{
label: "Traversy Media",
value: "traversymedia",
},
],
},
{
name: "vue-founder",
type: "radio",
title: "Who is the creator of Vue.js",
options: [
{
label: "Evan Vue",
value: "evan-vue",
},
{
label: "Mark Zukerberg",
value: "mark",
},
{
label: "Prince Charles",
value: "prince-charles",
},
{
label: "Bill Gates",
value: "gates-bill",
},
],
},
{
name: "svelte-founder",
type: "radio",
title: "Who is the creator of Svelte.js",
options: [
{
label: "Hillary Svelte",
value: "danabrahmov",
},
{
label: "Mircosoft",
value: "microsoft",
},
{
label: "Elevate",
value: "elevate",
},
{
label: "Coding Train",
value: "coding-train",
},
],
},
{
name: "angular-founder",
type: "radio",
title: "Who is the creator of Angular.js",
options: [
{
label: "Laryy page",
value: "larry-page",
},
{
label: "Google",
value: "google",
},
{
label: "Sales Force",
value: "sales-force",
},
],
},
];
function handleStart() {
currentQuestionIndex += 1;
}
function onSubmit(name, value) {
if (!value) return;
answers = {
...answers,
[name]: value,
};
currentQuestionIndex += 1;
}
$: currentQuestion = questions[currentQuestionIndex - 1];
function onPrevious() {
currentQuestionIndex -= 1;
}
</script>
{#if currentQuestionIndex === 0}
<div>
<h2>Home task 1</h2>
<p>
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.
</p>
<PrimaryButton
onClick={handleStart}
label="Start"
className="my-5"
type="button"
/>
</div>
{:else if !currentQuestion}
<pre>
<code>{JSON.stringify(answers)}</code>
</pre>
{:else}
<RadioQuestion
title={currentQuestionIndex + ". " + currentQuestion.title}
name={currentQuestion.name}
options={currentQuestion.options}
defaultValue={answers[currentQuestion.name] || false}
{onSubmit}
{onPrevious}
disablePreviousButton={currentQuestionIndex === 1}
isLast={currentQuestionIndex === questions.length}
/>
{/if}
src/components/Course/components/Lecture/Readme.svelte
+84 -9
View File
@@ -1,19 +1,94 @@
<script>
import marked from "marked";
import PrimaryButton from "../../../PrimaryButton/index.svelte";
import readme from "../readme.js";
let isWriteMode = true;
export let value = readme;
export let placeholder = ``;
const activeClassName = "border-b-2 border-blue-700";
const handleTabClick = (tab) => (event) => {
isWriteMode = tab === 1;
};
</script>
<div class="root">
<div class="flex justify-center">
<button
on:click={handleTabClick(1)}
class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
>
Write
</button>
<button
on:click={handleTabClick(2)}
class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
>
Preview
</button>
</div>
<div class="m-2 mb-0 p-0">
{#if isWriteMode}
<textarea
bind:value
{placeholder}
class="border border-gray rounded-md p-2"
/>
{:else}
<article class="preview prose prose-sm sm:prose p-2">
{@html marked(value)}
</article>
{/if}
</div>
{#if !isWriteMode}
<hr />
{/if}
<div class="flex justify-between items-center px-2 pb-1">
<div class="flex items-center text-sm">
<svg
class="octicon mr-2"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
/>
</svg>
<span>Styling with Markdown is supported</span>
</div>
<PrimaryButton label="Answer" />
</div>
</div>
<!-- {@html marked(readme, {
breaks: true,
gfm: true,
})} -->
<style>
.root {
width: 100%;
min-height: 200px;
}
<iframe
title="Lecture"
src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true" />
textarea {
width: 100%;
height: 500px;
}
.preview {
min-height: 150px;
}
.octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}
</style>
src/components/Course/components/Lecture/Readme/EditMode.svelte
+94
View File
@@ -0,0 +1,94 @@
<script>
import marked from "marked";
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
import readme from "../../readme.js";
let isWriteMode = true;
export let value = readme;
export let placeholder = ``;
const activeClassName = "border-b-2 border-blue-700";
const handleTabClick = (tab) => (event) => {
isWriteMode = tab === 1;
};
</script>
<div class="root">
<div class="flex justify-center">
<button
on:click={handleTabClick(1)}
class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
>
Write
</button>
<button
on:click={handleTabClick(2)}
class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
>
Preview
</button>
</div>
<div class="m-2 mb-0 p-0">
{#if isWriteMode}
<textarea
bind:value
{placeholder}
class="border border-gray rounded-md p-2"
/>
{:else}
<article class="preview prose prose-sm sm:prose p-2">
{@html marked(value)}
</article>
{/if}
</div>
{#if !isWriteMode}
<hr />
{/if}
<div class="flex justify-between items-center px-2 pb-1">
<div class="flex items-center text-sm">
<svg
class="octicon mr-2"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
/>
</svg>
<span>Styling with Markdown is supported</span>
</div>
<PrimaryButton label="Answer" />
</div>
</div>
<!-- {@html marked(readme, {
breaks: true,
gfm: true,
})} -->
<style>
.root {
width: 100%;
min-height: 200px;
}
textarea {
width: 100%;
height: 500px;
}
.preview {
min-height: 150px;
}
.octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}
</style>
src/components/Course/components/Lecture/Readme/ViewMode.svelte
+29
View File
@@ -0,0 +1,29 @@
<script>
import marked from "marked";
import PageNav from "../../PageNav/index.svelte";
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.
`;
</script>
<PageNav title="Overview" disableSticky={true} />
<div class="body">
{@html marked(readme, { breaks: true, gfm: true })}
</div>
<style>
.body {
max-width: 1000px;
margin: 10px;
}
</style>
src/components/Course/components/Lecture/index.svelte
+9 -3
View File
@@ -2,7 +2,9 @@
import PageNav from "../../../PageNav/index.svelte";
import Classwork from "./Classwork.svelte";
import Homework from "./Homework.svelte";
import Readme from "./Readme.svelte";
// import Readme from "./Readme.svelte";
import ReadmeInEditMode from "./Readme/EditMode.svelte";
import Switcher from "../../../Switcher/index.svelte";
export let path;
export let tab;
@@ -29,11 +31,15 @@
href: `${path}?tab=hometasks`,
},
]}
/>
>
<div slot="widget">
<Switcher />
</div>
</PageNav>
<div class="course">
{#if tab === "lectures"}
<Readme />
<ReadmeInEditMode />
{:else if tab === "classwork"}
<Classwork />
{:else if tab === "hometasks"}
src/components/Course/components/readme.js
+21 -16
View File
@@ -1,22 +1,27 @@
export default `
<p align="center">
<a href="https://nextjs.org">
<img src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png" height="128">
<h1 align="center">React.js</h1>
</a>
</p>
export default `# 1. Soft Skills
## Getting Started
## Notes
Here I can write some notes to my students
Visit <a aria-label="next.js learn" href="https://nextjs.org/learn">https://nextjs.org/learn</a> to get started with Next.js.
## Slide
<iframe
title="Lecture"
src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"></iframe>
## Documentation
Visit [https://nextjs.org/docs](https://nextjs.org/docs) to view the full documentation.
## Who is using Next.js?
Next.js is used by the world's leading companies. Check out the [Next.js Showcase](https://nextjs.org/showcase) to learn more.
## Video
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/8pLZkbN9h_s"
title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
webkitallowfullscreen="true"></iframe>
## Community