クイズジェネレータ プラグインサンプル「サイドバーに表示」

クイズジェネレータ プラグインを使用したカスタマイズ例です。

PCやタブレットの場合、右サイドバーに。スマホの場合は下段に表示されています。

サイドバーで表示できるようにCSSをカスタマイズしています。
これなら訪問者が簡単に遊ぶ事ができると思います。

横幅は300、縦幅は380です。

個別スタイルシートは次のようにしました。皆さんも使ってみてください。

/* クイズ出題ボックスの設定 */
#quiz_box{
  background: #ffe4c4;
  font-size: 14px;
  letter-spacing: 2px;
}
/* クイズタイトル */
#quiz_title{
  margin: 10px auto;
  width: 250px;
  height: 20px;
  font-size: 16px;
  line-height: 20px;
  border: 1px solid #339;
}
/* オープニング　メッセージ */
#quiz_msg{
  margin: 15px auto;
  width: 250px;
  height: 200px;
  font-size: 12px;
  line-height: 18px;
 text-align:left;
}
/* エンディング 得点表示 */
span.msg_tokuten{
  color: red;
  font-size: 16px;
}
/*--   正解・不正解画像の表示    表示位置(top,left,width)は自由に変えてください --*/
#dsp0, #dsp1 {
  top: 80px;
  left: 0px;
  width: 100%;
  margin: 0; padding: 0;
  text-align: center;
}
/* 問題文　変更可 */
#quiz_question {
  width: 250px;
  height: 5em;
  padding: 10px 0;
  text-align: left;
  font-size: 16px;
  line-height: 18px;
}
/* クイズスタートボタン */
#quiz_start{
  margin: 20px auto;
  width: 250px;
  height: 20px;
  border: 2px outset #ccc;
  font-size: 16px;
  line-height: 16px;
  padding: 5px 0;
  background: #369;
}
/* クイズスタートボタン マウスを乗せた状態 */
#quiz_start:hover{
  border: 2px inset #ccc;
}
/* クイズ問題枠*/
#quiz_wrap{
  width: 250px;
}
/* クイズ回答群 */
#quiz_answer {
  margin: 0px auto;
  width: 250px;
}
/* 回答ボタン */
#quiz_answer .qan_list {
  text-align: center;
  width: 200px;
  background: #cfc;
  margin-top: 5px;
  padding: 10px 0;
  border: 2px outset #6c6;
  font-size: 16px;
  font-weight: normal;
}
/* 回答ボタン マウスを乗せた状態 */
#quiz_answer .qan_list:hover {
  background: #FFE;
  border: 2px inset #eee;
  font-weight: bold;
}