文章中嵌入代碼塊_如何在您的文章中嵌入多項選擇測驗問題

文章中嵌入代碼塊

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>