Wiki3 採点付き検定機能の作り方2（× CSS）

•  Top
• 小技・テクニック集
• ムズ
• 採点付き検定機能
• ▶解答欄の作り方２

---

 

前回までのあらすじ

　前回では解答欄の基盤を作りました。

 

 

 解答１

 解答１

 解答１

 解答１

 

 

<div class="Q_1 uk-text-center">
<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>
</div>

 

　ここからボタンをポチポチできるようにソースコードを加筆していきます。
 

 

ボタンが一つだけ押された状態を作る

　Q_1をベースに、ボタンが一つ押された状態の解答欄を作ります。具体的には、一か所を uk-icon-circle-o から uk-icon-dot-circle-o に変更したものを4つ用意するだけです。
 

 

Q_1_a

 

 解答１

 解答１

 解答１

 解答１

 

<div class="Q_1_a uk-text-center">
<p><span class="uk-icon uk-icon-dot-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>

<p><span class="uk-icon uk-icon-circle-o">&nbsp;解答１</span></p>
</div>

 

　一問目の一番上のボタンが押された状態のことを Q_1_a と名づけました。

　同様にして、Q_1_b, Q_1_c, Q_1_d も作ります。

 

 

 

 

＞＞NEXT