【教學】問題勾選 + 按鈕開合

範例一： 問題勾選（多選題）

<div class="QA_BTN_CB">
<ul class="btn_list" data-widthratio="100" data-sp-w="100">
<li><label><input class="radio-input" name="radio_3" type="checkbox" value="0" /><span class="input_text">選項一</span></label></li>
<li><label><input class="radio-input" name="radio_3" type="checkbox" value="0" /><span class="input_text">選項二</span></label></li>
<li><label><input class="radio-input" name="radio_3" type="checkbox" value="0" /><span class="input_text">選項三</span></label></li>
</ul>
</div>

請複製以上程式碼，並參考底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容）

範例二：單選按鈕

<div class="QA_BTN_CB">
<ul class="btn_list" data-widthratio="100" data-sp-w="100">
<li><label><input class="radio-input" name="radio_3" type="radio" value="0" /><span class="input_text">選項一</span></label></li>
<li><label><input class="radio-input" name="radio_3" type="radio" value="0" /><span class="input_text">選項二</span></label></li>
<li><label><input class="radio-input" name="radio_3" type="radio" value="0" /><span class="input_text">選項三</span></label></li>
</ul>
</div>

請複製以上程式碼，並參考底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容）

※若是要將原本的多選內容改為單選的話，請將程式碼中的「type」修改為「radio」，並且讓同一個問題內的讓各個選項的「name」的值（radio_3），都保持在相同的內容，程式才有辦法辨識三個選項會是同一個問題的項目。

（※若在同一篇記事內，有使用不只一組的單選按鈕的話，請將第二組開始的name值，修改為其他名稱，例如radio_4）

範例三： 按鈕開合→點擊展開解答

<div class="toggleZone">
<div class="btnFrame">
<a id="answerBtn_1" class="answerBtn">送出</a>
</div>
<div id="answerZone_1" class="answerZone">
<p>我是解答，請將要填入的文字放於此</p>
</div>
</div>

※若在同一篇記事內，有使用不只一組的按鈕開合的話，請將第二組開始的程式碼，找到上方兩處「黃色背景的數字」依序加1，例如：第一組因為不用修改，所以皆為1（「answerBtn_1」和「answerZone_1」），而第二組開始：「answerBtn_2」和「answerZone_2」、第三組：「answerBtn_3」和「answerZone_3」，依序以此類推。

請複製以上程式碼，並參考頂部和底部的說明，進行區塊的新增和內容的修改

（上方黑色粗體的文字，為可替換的內容；有顏色背景的英文字，則為可替換的變數）

使用方式說明：

「傳統編輯器」和「區塊編輯器」有各自的加入方式，請擇一即可

並且勾選指定的模組，嵌入相對應的輔助程式碼

「區塊編輯器」：

．請於左側的區塊工具欄中，選擇「自訂HTML」， 來新增上方欲使用的範例程式碼

「傳統編輯器」：

．請選擇「編輯HTML程式碼」， 來新增上方欲使用的範例程式碼

．接著，請在編輯畫面的右側下方的TAG模組中（如下圖），找到「問答按鈕組合（單選多選）｜核取方塊｜按鈕開合」，並勾選它，才會將輔助上述功能的程式碼完全嵌入。

以上即可完成相關設定。若有遇到問題，請洽Kuroha。