文章中嵌入代码块

In my experience, supplementing study with practical exercises greatly improves my understanding of a topic. This is especially true when I can test my knowledge as I go and receive instant feedback for each question.

以我的经验，通过实践练习补充学习可以极大地提高我对某个主题的理解。 当我可以随时测试自己的知识并收到每个问题的即时反馈时，尤其如此。

The multiple choice quiz format is perfect for this. I developed a method to embed multiple choice questions in the math articles I write for freeCodeCamp, and I want to show other authors how to do the same.

多项选择测验格式是完美的选择。 我开发了一种方法，可以在为freeCodeCamp编写的数学文章中嵌入多项选择题，并且我想向其他作者展示如何做。

如何在文章中添加代码 (How to add code to your article)

The Ghost editor allows you to embed blocks of code throughout an article. The code editor can be accessed by clicking the round button with a plus sign (+) used for adding images, YouTube videos, and so on:

Ghost编辑器使您可以在整个文章中嵌入代码块。 可以通过单击带有加号(+)的圆形按钮来访问代码编辑器，该加号用于添加图像，YouTube视频等：

Click on the "HTML" button to add an editor to the article. The editor supports HTML, CSS, and even JavaScript.

单击“ HTML”按钮，将编辑器添加到文章。 该编辑器支持HTML，CSS甚至JavaScript。

Once you start adding code, click anywhere outside the editor frame to render the code and view your progress. Double click on the rendered output to reopen the editor window:

一旦开始添加代码，请在编辑器框架之外的任何位置单击以呈现代码并查看进度。 双击渲染的输出以重新打开编辑器窗口：

To test the functionality of your code, save the article by pressing Ctrl/⌘ + S, then click on the "View Preview" button that appears in the bottom left corner:

要测试代码的功能，请按Ctrl /⌘+ S保存文章，然后单击左下角出现的“查看预览”按钮：

Your article will open in a separate tab where you can see how your code will be rendered once your article is published. Take some time to check on the styling and functionality of your multiple choice quiz.

您的文章将在单独的标签中打开，您可以在其中看到发布文章后代码的呈现方式。 花一些时间检查选择题的样式和功能。

Boilerplate code for the multiple choice quiz is available in the next section. All you need to do is paste it into your own article and change the question and answers.

下一部分提供了用于多项选择测验的样板代码。 您需要做的就是将其粘贴到您自己的文章中，然后更改问题和答案。

多项选择测验如何运作 (How the multiple choice quiz works)

You can add as many different questions as you want. However, while your article might have multiple quizzes, they're all contained within a single HTML body behind the scenes. Each question element starts with the following code:

您可以根据需要添加任意多个不同的问题。 但是，尽管您的文章可能有多个测验，但它们都包含在幕后的单个HTML正文中 。 每个问题元素均以以下代码开头：

<div style='transform: scale(0.65); position: relative; top: -100px;'><h3>WRITE YOUR QUESTION HERE</h3><p>Choose 1 answer</p><hr />

Each of the following div elements contains a possible answer:

以下每个div元素均包含一个可能的答案：

...<div id='block-11' style='padding: 10px;'><label for='option-11' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />ANSWER 1</label><span id='result-11'></span></div><hr /><div id='block-12' style='padding: 10px;'><label for='option-12' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />ANSWER 2</label><span id='result-12'></span></div><hr />...

At the time of writing, Ghost's embedded code editor does not support template literals, so some things have to be hard coded.

在撰写本文时，Ghost的嵌入式代码编辑器不支持模板文字，因此某些事情必须进行硬编码。

Remember that all the questions are essentially loaded together behind the scenes, so the two digit numbers in each id represent the following:

请记住，所有问题实际上都是在后台加载的，因此每个id的两位数字表示以下内容：

• The first digit indicates the order of the multiple choice question in the article (1 is question one, 2 is question two, and so on)

  第一位数字表示文章中多项选择题的顺序(1是问题一，2是问题二，依此类推)

• The second digit indicates the order of each possible answer within its question block (1 is answer choice one, 2 is answer choice two, etc.)

  第二个数字指示其问题块中每个可能答案的顺序(1是答案选择一，2是答案选择二，依此类推)

For example, block-12 represents question 1/answer choice 2, while block-43 is question 4/answer choice 3.

例如， block-12代表问题 1 /答案选择2 ，而block-43 问题4 /答案选择3 。

This indexing convention is necessary for different question blocks to function independently from each other.

该索引约定对于不同的问题块彼此独立运行是必需的。

Similar logic applies to the function names responsible for interactivity. The code that handles user interaction is placed within <script> tags and consists of two parts. First part is the function that evaluates answers and displays results:

类似的逻辑适用于负责交互的功能名称。 处理用户交互的代码位于<script>标记内，并且由两部分组成。 第一部分是评估答案并显示结果的功能：

function displayAnswer1() {if (document.getElementById('option-11').checked) {document.getElementById('block-11').style.border = '3px solid limegreen'document.getElementById('result-11').style.color = 'limegreen'document.getElementById('result-11').innerHTML = 'Correct!'}if (document.getElementById('option-12').checked) {document.getElementById('block-12').style.border = '3px solid red'document.getElementById('result-12').style.color = 'red'document.getElementById('result-12').innerHTML = 'Incorrect!'showCorrectAnswer1()}if (document.getElementById('option-13').checked) {document.getElementById('block-13').style.border = '3px solid red'document.getElementById('result-13').style.color = 'red'document.getElementById('result-13').innerHTML = 'Incorrect!'showCorrectAnswer1()}if (document.getElementById('option-14').checked) {document.getElementById('block-14').style.border = '3px solid red'document.getElementById('result-14').style.color = 'red'document.getElementById('result-14').innerHTML = 'Incorrect!'showCorrectAnswer1()}}

Like the name suggests, the displayAnswer1 function handles the first question within an article. If there's a third question in your article, displayAnswer3 will handle it.

顾名思义， displayAnswer1函数处理文章中的第一个问题。 如果您的文章中还有第三个问题，则displayAnswer3将处理该问题。

In the example above, option-11 is the correct answer, and the styling in the first if block is updated to show the right answer was selected. If any of the other incorrect answers are selected, the styling is updated to reflect that.

在上面的示例中， option-11是正确的答案，并且第一个if块中的样式已更新为显示了正确的答案。 如果选择了其他任何不正确的答案，则会更新样式以反映出来。

Feel free to play with the displayAnswer_ functions in your own article. Just remember to attach the appropriate styling to the correct and incorrect answers.

随意在您自己的文章中使用displayAnswer_函数。 只要记住将正确的样式附加到正确和不正确的答案即可。

Here's the second part of the code that handles user interaction:

这是处理用户交互的代码的第二部分：

function showCorrectAnswer1() {let showAnswer1 = document.createElement('p')showAnswer1.innerHTML = 'Show Corrent Answer'showAnswer1.style.position = 'relative'showAnswer1.style.top = '-180px'showAnswer1.style.fontSize = '1.75rem'document.getElementById('showanswer1').appendChild(showAnswer1)showAnswer1.addEventListener('click', () => {document.getElementById('block-11').style.border = '3px solid limegreen'document.getElementById('result-11').style.color = 'limegreen'document.getElementById('result-11').innerHTML = 'Correct!'document.getElementById('showanswer1').removeChild(showAnswer1)})}

This function is called showCorrectAnswer1 because it handles the first multiple choice question in the article. You'll have to add showCorrectAnswer2, showCorrectAnswer3, and more if your article has more than one question.

该函数称为showCorrectAnswer1因为它处理了文章中的第一个多选问题。 如果您的文章有多个问题，则必须添加showCorrectAnswer2 ， showCorrectAnswer3以及更多内容。

Please play around with the styling and dimensions used throughout the code, and customize it to your taste. Also, I'm sure there are other ways to implement multiple choice quizzes, but this is mine, and I'm happy to share it with you.

请试用整个代码中使用的样式和尺寸，并根据自己的喜好对其进行自定义。 另外，我敢肯定还有其他方法可以实施多项选择测验，但这是我的，很高兴与您分享。

Here's the full code and a working example:

这是完整的代码和一个有效的示例：

<div style='transform: scale(0.65); position: relative; top: -100px;'><h3>What fraction of a day is 6 hours?</h3><p>Choose 1 answer</p><hr /><div id='block-11' style='padding: 10px;'><label for='option-11' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />6/24</label><span id='result-11'></span></div><hr /><div id='block-12' style='padding: 10px;'><label for='option-12' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />6</label><span id='result-12'></span></div><hr /><div id='block-13' style='padding: 10px;'><label for='option-13' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />1/3</label><span id='result-13'></span></div><hr /><div id='block-14' style='padding: 10px;'><label for='option-14' style=' padding: 5px; font-size: 2.5rem;'><input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />1/6</label><span id='result-14'></span></div><hr /><button type='button' onclick='displayAnswer1()' style='width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;'>Submit</button>
</div>
<a id='showanswer1'></a>
<script>//    The function evaluates the answer and displays resultfunction displayAnswer1() {if (document.getElementById('option-11').checked) {document.getElementById('block-11').style.border = '3px solid limegreen'document.getElementById('result-11').style.color = 'limegreen'document.getElementById('result-11').innerHTML = 'Correct!'}if (document.getElementById('option-12').checked) {document.getElementById('block-12').style.border = '3px solid red'document.getElementById('result-12').style.color = 'red'document.getElementById('result-12').innerHTML = 'Incorrect!'showCorrectAnswer1()}if (document.getElementById('option-13').checked) {document.getElementById('block-13').style.border = '3px solid red'document.getElementById('result-13').style.color = 'red'document.getElementById('result-13').innerHTML = 'Incorrect!'showCorrectAnswer1()}if (document.getElementById('option-14').checked) {document.getElementById('block-14').style.border = '3px solid red'document.getElementById('result-14').style.color = 'red'document.getElementById('result-14').innerHTML = 'Incorrect!'showCorrectAnswer1()}}// the functon displays the link to the correct answerfunction showCorrectAnswer1() {let showAnswer1 = document.createElement('p')showAnswer1.innerHTML = 'Show Corrent Answer'showAnswer1.style.position = 'relative'showAnswer1.style.top = '-180px'showAnswer1.style.fontSize = '1.75rem'document.getElementById('showanswer1').appendChild(showAnswer1)showAnswer1.addEventListener('click', () => {document.getElementById('block-11').style.border = '3px solid limegreen'document.getElementById('result-11').style.color = 'limegreen'document.getElementById('result-11').innerHTML = 'Correct!'document.getElementById('showanswer1').removeChild(showAnswer1)})}
</script>

You can also find the complete boilerplate code here on GitHub.

您还可以在GitHub上找到完整的样板代码。

翻译自: https://www.freecodecamp.org/news/multiple-choice-quiz-template/

文章中嵌入代码块