IT:programing

2013年06月11日

jQueryを活用して、
動的表現のあるクイズを作成してみる.

銀豚クイズページにて.

銀豚クイズ

クイズにはずれると、
「はずれ!」とPOP UP表示され、

当たると、、
銀豚クイズ2

↑「正解!」というPOP UP!

作成方法は・・・

head内に下記コードを入力

<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>クイズ</title>
<script>
$(function() {
  $('input').click(function() {
    if ($(this).val() == 2) alert('正解!');
    else alert('はずれ!');
  });
});
</script> 

さらに、
body内に下記コードを入力

<p>あなたの好きな食べ物は?</p>
  <p>
    <input type="radio" name="food" value="1">まつりぶんたろう
    <input type="radio" name="food" value="2">さいもんだろう
    <input type="radio" name="food" value="3">さいぶんたろう
  </p>

以上.

POINTは、下記コードで、

 if ($(this).val() == 2) alert('正解!');
    else alert('はずれ!');

「2」を選んだら、「正解!」とPOP UPされ、
それ以外を選んだら、「はずれ!」とPOP UPされるように
司令を出している. 


shun699 at 16:52|PermalinkComments(0)TrackBack(0) このエントリーをはてなブックマークに追加
WEB SITEで動的な表現をしたい場合、
jQuery(ジェイクエリー)が便利.

たとえば、
銀豚スケジュールページに、

蜃気楼

↑蜃気楼と文字を入れてみる.

で、
CLICKすると・・・

蜃気楼2

↑消える!という演出

方法は・・・

head内に下記コードを入力

<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>蜃気楼</title>
<script>
$(function() {
  $('p').click(function() {$(this).fadeOut('slow');});
});
</script> 

さらに、
body内に下記コードを入力

<p>おばけー</p>

実にカンタン! 

shun699 at 16:32|PermalinkComments(0)TrackBack(0) このエントリーをはてなブックマークに追加

2013年06月10日

design3


「お問い合わせフォーム」の件、
先日、オリジナルで作ってみたものの、
もっとカンタンな方法があることを発見!

Google Drive(グーグルドライブ)のアンケート機能を
使えばイイ.

↑早速、作成してみた.

方法は、
Access to Google Drive.

そして、
新規作成 > フォーム

googledrive

で、
drive66
↑デザインをSELECTし、


googledrive4

↑回答項目をどんどん入れていくだけ.

なお、
回答内容は、

googledrive5

↑テキスト、
ラジオボタン、
チェックボックス等、
選べる.

単一回答の場合、ラジオボタン、
複数回答の場合、チェックボックス
を選べばOK!

回答データは、
Google Drive内にEXCEL形式で自動的に整理されて表示される.

データの書き出しも可能.

以前にMailで集めたこともあったけど、
このまとめる作業がすごく大変だったが、
この方法なら便利. 

shun699 at 15:26|PermalinkComments(0)TrackBack(0) このエントリーをはてなブックマークに追加