fix(docs): emphasize use of Markdown in challenges (#38986)
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
da166363eb
commit
6d879e3439
@ -86,74 +86,58 @@ If a question has not yet been added to a particular video challenge, it will ha
|
||||
|
||||
```yml
|
||||
question:
|
||||
text: Question
|
||||
text: |
|
||||
Question
|
||||
answers:
|
||||
- one
|
||||
- two
|
||||
- three
|
||||
- |
|
||||
one
|
||||
- |
|
||||
two
|
||||
- |
|
||||
three
|
||||
solution: 3
|
||||
```
|
||||
|
||||
Update the word “Question” with your question. Update the “one”, “two”, and “three” with the possible answers. Make sure to update the solution number with which answer is correct. You can add more possible answers using the same format. The question and answers can be surrounded with quotation marks.
|
||||
|
||||
Questions and answers can contain certain HTML tags like `<br>` for a new line. Surround code with `<pre></pre>` You will need to add a `<br>` at the end of each line of code.
|
||||
|
||||
#### Use markdown to format your question
|
||||
|
||||
You can also use markdown in your question as well as HTML. The simplest way to ensure that it is formatted correctly is to start the question with `text: |`, like this:
|
||||
The text in the question is parsed as markdown. The simplest way to ensure that it is formatted correctly is to start the question with `text: |`, like this:
|
||||
|
||||
```yml
|
||||
question:
|
||||
text: |
|
||||
Question
|
||||
```
|
||||
|
||||
Then you need to make sure that your question is on a new line and indented one level more than `text: |`.
|
||||
|
||||
The same approach can be used for the answers, so the entire question becomes
|
||||
|
||||
```yml
|
||||
question:
|
||||
text: |
|
||||
Question
|
||||
answers:
|
||||
- one
|
||||
- two
|
||||
- three
|
||||
solution: 3
|
||||
- |
|
||||
First answer
|
||||
- |
|
||||
Second
|
||||
- |
|
||||
Third
|
||||
solution: 2
|
||||
```
|
||||
|
||||
Then you need to make sure that your question is on a new line and indented one level more than `text: |`.
|
||||
|
||||
Make sure each answer is plausible but there is only one correct answer.
|
||||
|
||||
## Question examples
|
||||
#### Use of HTML
|
||||
|
||||
#### Here are a few examples with HTML:
|
||||
```yml
|
||||
question:
|
||||
text: 'What will print out after running this code:<pre>width = 15<br>height = 12.0<br>print(height/3)</pre>'
|
||||
answers:
|
||||
- '39'
|
||||
- '4'
|
||||
- '4.0'
|
||||
- '5.0'
|
||||
- '5'
|
||||
solution: 3
|
||||
```
|
||||
Questions and answers can contain certain HTML tags like `<br>` for a new line. HTML tags should be used sparingly, when questions cannot be expressed without them.
|
||||
|
||||
```yml
|
||||
question:
|
||||
text: 'Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?
|
||||
<pre>
|
||||
1|smallest = None<br>
|
||||
2|print("Before:", smallest)<br>
|
||||
3|for itervar in [3, 41, 12, 9, 74, 15]:<br>
|
||||
4| if smallest is None or itervar ⋖ smallest:<br>
|
||||
5| smallest = itervar<br>
|
||||
6| break<br>
|
||||
7| print("Loop:", itervar, smallest)<br>
|
||||
8|print("Smallest:", smallest)<br>
|
||||
</pre>'
|
||||
answers:
|
||||
- '3'
|
||||
- '4'
|
||||
- '6'
|
||||
- '7'
|
||||
solution: 3
|
||||
```
|
||||
### Question examples
|
||||
|
||||
#### Examples without HTML
|
||||
|
||||
#### Example with markdown:
|
||||
````yml
|
||||
question:
|
||||
text: |
|
||||
@ -162,14 +146,63 @@ question:
|
||||
console.log('hello world');
|
||||
```
|
||||
|
||||
New paragraph after an empty line.
|
||||
Select an answer!
|
||||
answers:
|
||||
- hello *world*
|
||||
- '**hello** world' # the string cannot start with a *, hence the quotes.
|
||||
- hello world
|
||||
- |
|
||||
hello *world*
|
||||
- |
|
||||
**hello** world
|
||||
- |
|
||||
hello world
|
||||
solution: 3
|
||||
````
|
||||
|
||||
````yml
|
||||
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
|
||||
solution: 3
|
||||
````
|
||||
|
||||
#### Example with HTML
|
||||
|
||||
```yml
|
||||
question:
|
||||
text: |
|
||||
What will print out after running this code:
|
||||
<pre><code>width = 15<br>height = 12.0<br>print(height/3)<code></pre>
|
||||
answers:
|
||||
- |
|
||||
39
|
||||
- |
|
||||
4
|
||||
- |
|
||||
4.0
|
||||
- |
|
||||
5.0
|
||||
- |
|
||||
5
|
||||
solution: 3
|
||||
```
|
||||
|
||||
The final example demonstrates that HTML can be used, but that it is not as readable as the version without it.
|
||||
|
||||
For more examples, you can look at the markdown files for the following video course. All the challenges already have questions: [Python for Everybody Course](https://github.com/freeCodeCamp/freeCodeCamp/tree/next-python-projects/curriculum/challenges/english/07-scientific-computing-with-python/python-for-everybody)
|
||||
|
||||
## Open a pull request
|
||||
|
||||
Reference in New Issue
Block a user