Skip to content

Commit 3a4ff59

Browse files
mehulmptmehulmpt
committed
Add video tutorials
1 parent 37fecb9 commit 3a4ff59

7 files changed

Lines changed: 212 additions & 2 deletions

File tree

‎docs/_components/LabChallenges.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
Next step is to setup challenges and evaluation for your lab. This is the part where your learners can learn the most because they will have to pass certain challenges.
22

3+
:::tip
4+
It is highly recommended for you to watch the video below to understand the architecture
5+
:::
6+
7+
<div
8+
style={{
9+
position: 'relative',
10+
width: '100%',
11+
height: 0,
12+
paddingTop: '56.25%',
13+
}}
14+
>
15+
<iframe
16+
src="https://www.youtube.com/embed/SXep-fuTtmk?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
17+
title="YouTube video player"
18+
frameborder="0"
19+
style={{
20+
position: 'absolute',
21+
top: 0,
22+
left: 0,
23+
width: '100%',
24+
height: '100%',
25+
}}
26+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
27+
allowfullscreen
28+
></iframe>
29+
</div>
30+
331
This is the biggest advantage of using codedamn for hosting your course too - to make them truly interactive and hands-on for your users.
432

533
Let's start by setting up challenges.

‎docs/_components/LabVerifiedSolution.mdx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,28 @@ Once you do that, your lab would be marked a lab having verified solution. It al
66

77
![](/images/html-css/playground-verified-solution.png)
88

9-
At this point, your lab is complete. You can now link this lab in your course, ready to be served to thousands of students :)
9+
At this point, your lab is complete. You can now link this lab in your course, ready to be served to thousands of students :) Watch the video tutorial below to understand:
10+
11+
<div
12+
style={{
13+
position: 'relative',
14+
width: '100%',
15+
height: 0,
16+
paddingTop: '56.25%',
17+
}}
18+
>
19+
<iframe
20+
src="https://www.youtube.com/embed/5CzF46WtuH8?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
21+
title="YouTube video player"
22+
frameborder="0"
23+
style={{
24+
position: 'absolute',
25+
top: 0,
26+
left: 0,
27+
width: '100%',
28+
height: '100%',
29+
}}
30+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
31+
allowfullscreen
32+
></iframe>
33+
</div>

‎docs/instructor-guides/add-quiz.mdx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
sidebar_position: 3
3+
sidebar_label: How to add quizzes?
4+
---
5+
6+
# How to add quizzes?
7+
8+
<div
9+
style={{
10+
position: 'relative',
11+
width: '100%',
12+
height: 0,
13+
paddingTop: '56.25%',
14+
}}
15+
>
16+
<iframe
17+
src="https://www.youtube.com/embed/LWEufJ6v_Vs?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
18+
title="YouTube video player"
19+
frameborder="0"
20+
style={{
21+
position: 'absolute',
22+
top: 0,
23+
left: 0,
24+
width: '100%',
25+
height: '100%',
26+
}}
27+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
28+
allowfullscreen
29+
></iframe>
30+
</div>

‎docs/instructor-guides/quiz-mode-in-lab.mdx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
sidebar_position: 3
3-
sidebar_label: Quiz Mode
3+
sidebar_label: Quiz Mode Inside Lab
44
---
55

66
# Quiz mode
@@ -13,6 +13,30 @@ Take a look at how this lab would be rendered:
1313

1414
## Setting up
1515

16+
<div
17+
style={{
18+
position: 'relative',
19+
width: '100%',
20+
height: 0,
21+
paddingTop: '56.25%',
22+
}}
23+
>
24+
<iframe
25+
src="https://www.youtube.com/embed/FUgOD-6vrC4?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
26+
title="YouTube video player"
27+
frameborder="0"
28+
style={{
29+
position: 'absolute',
30+
top: 0,
31+
left: 0,
32+
width: '100%',
33+
height: '100%',
34+
}}
35+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
36+
allowfullscreen
37+
></iframe>
38+
</div>
39+
1640
Setting up quiz mode is easy. Follow the following steps:
1741

1842
- Go to your curriculum builder inside the course page.

‎docs/instructor-guides/setup-course.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,34 @@ sidebar_label: How to setup a course?
77

88
This document will highlight everything you need to do to setup your interactive coding course on codedamn.
99

10+
:::tip
11+
Watch the video below to start your codedamn instructor journey.
12+
:::
13+
14+
<div
15+
style={{
16+
position: 'relative',
17+
width: '100%',
18+
height: 0,
19+
paddingTop: '56.25%',
20+
}}
21+
>
22+
<iframe
23+
src="https://www.youtube.com/embed/jwO28JdhncM?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
24+
title="YouTube video player"
25+
frameborder="0"
26+
style={{
27+
position: 'absolute',
28+
top: 0,
29+
left: 0,
30+
width: '100%',
31+
height: '100%',
32+
}}
33+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
34+
allowfullscreen
35+
></iframe>
36+
</div>
37+
1038
## What is an interactive course?
1139

1240
An interactive course is a hands-on programming course. Your students learn by practicing through exercises, complete challenges within browser window that boots up a full virtual compute environment for them - managed by codedamn.
@@ -30,6 +58,30 @@ You set the problems users have to solve, we handle the infrastructure.
3058

3159
## How to setup a course on codedamn?
3260

61+
<div
62+
style={{
63+
position: 'relative',
64+
width: '100%',
65+
height: 0,
66+
paddingTop: '56.25%',
67+
}}
68+
>
69+
<iframe
70+
src="https://www.youtube.com/embed/PUcf3CEI4HQ?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
71+
title="YouTube video player"
72+
frameborder="0"
73+
style={{
74+
position: 'absolute',
75+
top: 0,
76+
left: 0,
77+
width: '100%',
78+
height: '100%',
79+
}}
80+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
81+
allowfullscreen
82+
></iframe>
83+
</div>
84+
3385
If you're an existing content creator on Udemy/YouTube, etc. it is relatively easier to move to codedamn. This is what we suggest:
3486

3587
- Move your full video course on codedamn

‎docs/technologies/index.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,30 @@ This section lists down all the supported technologies on codedamn currently. No
88

99
However, if you want to run a technology for which an official testing guide is missing, it might be difficult to setup a lab.
1010

11+
<div
12+
style={{
13+
position: 'relative',
14+
width: '100%',
15+
height: 0,
16+
paddingTop: '56.25%',
17+
}}
18+
>
19+
<iframe
20+
src="https://www.youtube.com/embed/aBddZmWt0Sc?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
21+
title="YouTube video player"
22+
frameborder="0"
23+
style={{
24+
position: 'absolute',
25+
top: 0,
26+
left: 0,
27+
width: '100%',
28+
height: '100%',
29+
}}
30+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
31+
allowfullscreen
32+
></iframe>
33+
</div>
34+
1135
Supported technologies (as visible on the left sidebar menu):
1236

1337
- [HTML/CSS](/docs/technologies/html-css)

‎docs/technologies/node.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,34 @@ You will find a `.cdmrc` file in the repository given to you above. It is highly
8282

8383
## Step 4 - Evaluation Script
8484

85+
:::tip
86+
HIGHLY recommended to watch the video before you read the documentation:
87+
:::
88+
89+
<div
90+
style={{
91+
position: 'relative',
92+
width: '100%',
93+
height: 0,
94+
paddingTop: '56.25%',
95+
}}
96+
>
97+
<iframe
98+
src="https://www.youtube.com/embed/1Ze0Js6XFKk?list=PLYxzS__5yYQnoUg4MCS2sew_tOZsgrUeH"
99+
title="YouTube video player"
100+
frameborder="0"
101+
style={{
102+
position: 'absolute',
103+
top: 0,
104+
left: 0,
105+
width: '100%',
106+
height: '100%',
107+
}}
108+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
109+
allowfullscreen
110+
></iframe>
111+
</div>
112+
85113
Evaluation script is actually what runs when the user on the codedamn playground clicks on "Run Tests" button.
86114

87115
![](/images/common/lab-run-tests.png)

0 commit comments

Comments
 (0)