はてなブログで簡単にクイズを作る方法 | 迫佑樹オフィシャルブログ

はてなブログ内でクイズを設置してみたくなったのでそれのメモ．

これをすると，誰でも簡単にはてなブログ上でクイズを作ることが出来ます．

形式は，よくテストとかで出る穴埋め形式のクイズです．

こんな感じのクイズができます．

問題　ブログ運営者のTwitterは@yuki_99_sである．

カーソルを載せると答えが出ます．

マークダウン記法にする

はてなブログは，「見たまま」と「はてな記法」と「Markdown記法」の3つから記法を選べます．

f:id:McG:20160527181210p:plain

とりあえず，Markdown記法を選びましょう．

Markdown記法ってなんぞ？って人はこちらを．

kojika17.com

クイズを書いていく．

では実際にクイズを書いていきましょう．

そして，答えにしたいところを”_“と”_“(アンダースコア2つ)で囲みます．

こんな感じですね．

f:id:McG:20160527182124p:plain

プレビューで見てみると以下のように表示されているはずです．

f:id:McG:20160527192020p:plain

“__”と”__“で囲んだところは，実際の表記では太字になります．

この太字のところが解答なのでこれを隠していきましょう．

jQueryを使って隠す

記事の一番下にこれを貼り付けます．

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('strong').css('color','white');
$('strong').css('border-bottom','dashed 1px #000000');
});
$('strong').hover(function(){
$(this).css('color','red');
},function(){
$('strong').css('color','white');
$('strong').css('border-bottom','dashed 1px #000000');
});
</script>

1行目で，jQueryを読み込みます．

で，その下で文字色を変えたり，マウスが乗っかったら赤色で表示させる処理を書いています．