講義録をBLOGの形で、ページに掲載するのを、この10年ほど続けているけど、 準備が不十分な場合には、授業で過去の記事をプロジェクタで表示しながら説明… という場合もある。

しかし、過去の記事で丁寧に書いてありすぎると、問題の答えまでモロに記事に 書いておくと、記事を読んでいる学生さんが、何も考えないまま…に なってしまう場合が多い。そこで、BLOGのJavaScriptに、 クリック表示/非表示を切り替えられるようなものを埋め込んおくようにした。

// BLOGパーツのJavaScriptに以下を追加
function hint_switch( hs_this ) {
   // 指定ブロック内の末尾ブロックをinline表示/none非表示をスイッチ
   if ( hs_this.lastElementChild.style.display == "none" ) {
      hs_this.lastElementChild.style.display = "inline" ;
   } else {
      hs_this.lastElementChild.style.display = "none" ;
   }
}

そして、一時的に非表示にしたい部分には、以下のHTMLを埋め込む。

<div onclick="hint_switch(this)">
  <p>
    // 常に表示しておく部分(ここをクリック)
  </p>
  <div style="display: none">
    // 一時的に、非表示にしておきたい部分
  </div>
</div>