Work on Video Challenges

A video challenge is a small section of a full-length video course on a particular topic. A video challenge page embeds a YouTube video. Each challenge page has a single multiple-choice question related to the video. A user must answer the question correctly before moving on to the next video challenge in the course.

The video challenge pages are created by members of the freeCodeCamp team. YouTube videos are also uploaded by members of the freeCodeCamp team.

Creating a Video Challenge

To add a video challenge to an existing block, change to the block’s directory and run:

cd curriculum/challenges/english/blocks/<block>
pnpm run create-next-challenge

Select video when prompted for the challenge type, then enter the challenge’s dashed name and title.

The script generates an id, creates the challenge file with challengeType: 11, and appends it to challengeOrder in curriculum/structure/blocks/<block>.json.

In the generated file, replace the videoId placeholder with the YouTube video id and fill in the description, question, answers, and solution number.

Challenge Template

Below is a template of what the challenge markdown files look like.

---
id: Unique identifier (alphanumerical, MongoDB_id)
title: Challenge Title
challengeType: 11
videoId: 'YouTube videoId for video challenge'
---

# --description--

Challenge description text, in markdown

```html
<div>example code</div>
```

# --transcript--

Transcript of the video.

# --question--

These fields are currently used for the multiple-choice Python challenges.

## --text--

The question text goes here.

## --answers--

Answer 1

---

Answer 2

---

More answers

## --video-solution--

The number for the correct answer goes here.

Creating Questions for Video Challenges

First, find the videoId.

For example, in the following code from the header of a video challenge markdown file, the videoId is “nVAaxZ34khk”. On GitHub, the information should be laid out in a table format.

---
id: 5e9a093a74c4063ca6f7c14d
title: Data Analysis Example A
challengeType: 11
videoId: nVAaxZ34khk
---

Next, access the YouTube video with that videoId. The URL for the video will be: https://www.youtube.com/watch?v=[videoId] (replace videoId in the URL with the video’s ID - without square brackets)

In the example above, the URL is https://www.youtube.com/watch?v=nVAaxZ34khk

Skim the YouTube video with that videoId and think of a multiple-choice question based on the content of the video.

Question examples

# --question--

## --text--

What does this JavaScript code log to the console?

```js
console.log('hello world');
```

## --answers--

hello _world_

---

**hello** world

---

hello world

---

## --video-solution--

3

# --question--

## --text--

What will print out after running this code:

```py
width = 15
height = 12.0
print(height/3)
```

## --answers--

39

---

4

---

4.0

---

5.0

---

5

## --video-solution--

3