Google SpreadSheet がなんか素敵

javascript

よくイベントの登録にも使われてますね。
集計が簡単にできるし、対応するフォームも簡単に作れる、何よりこれらが仕組みとして結合されてるのが素敵。

ボタンクリックで要素を追加しながらごにょごにょするものが作りたくなったので、入口だけ作ってました。
まだ裏側がないので、どうしようもないですが。
アンケート作成専用のアプリでも作ろうかな。

<html>
<head>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/jquery.flydom-3.1.1.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.accordion.js"></script>
  <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
  <script type="text/javascript" src="js/ui/ui.dialog.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="js/ui/ui.droppable.js"></script>
  <script type="text/javascript" src="js/ui/ui.progressbar.js"></script>
  <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="js/ui/ui.selectable.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <script type="text/javascript" src="js/ui/ui.sortable.js"></script>
  <script type="text/javascript" src="js/ui/ui.tabs.js"></script>
  <script type="text/javascript" src="js/ui/effects.core.js"></script>
  <script type="text/javascript" src="js/ui/effects.blind.js"></script>
  <script type="text/javascript" src="js/ui/effects.bounce.js"></script>
  <script type="text/javascript" src="js/ui/effects.clip.js"></script>
  <script type="text/javascript" src="js/ui/effects.drop.js"></script>
  <script type="text/javascript" src="js/ui/effects.explode.js"></script>
  <script type="text/javascript" src="js/ui/effects.fold.js"></script>
  <script type="text/javascript" src="js/ui/effects.highlight.js"></script>
  <script type="text/javascript" src="js/ui/effects.pulsate.js"></script>
  <script type="text/javascript" src="js/ui/effects.scale.js"></script>
  <script type="text/javascript" src="js/ui/effects.shake.js"></script>
  <script type="text/javascript" src="js/ui/effects.slide.js"></script>
  <script type="text/javascript" src="js/ui/effects.transfer.js"></script>
  <script type="text/javascript"><!--
function createItem(index) {
  var optionHandle = {
    'text': {
      display: '1 行コメント',
      handler: function(id) {
        $('#a-' + id).empty();
        $('#a-' + id).createAppend(
          'div', {}, [
            'input', { name: '#a-answer-' + id, type: 'text', size: 40, value: 'answer' }, '',
            'input', { name: '#a-required-' + id, type: 'checkbox', checked: false }, '',
            'span', { className: 'required' }, 'required?'
          ]
        );
      }
    },
    'paragraph': {
      display: 'コメント',
      handler: function(id) {
        $('#a-' + id).empty();
        $('#a-' + id).createAppend(
          'div', {}, [
            'textarea', { name: '#a-answer-' + id, rows: 4, cols: 40, value: 'answer' }, '',
            'input', { name: '#a-required-' + id, type: 'checkbox', checked: false }, '',
            'span', { className: 'required' }, 'required?'
          ]
        );
      }
    },
  };

  var ex = new RegExp(".*([0-9]+)");

  $("#questions").createAppend(
    'div', { className: 'item', id: 'item-' + index }, [
      'div', { className: 'q', id: 'q-' + index }, [
        'span', { className: 'inline' }, "question title",
        'br', {}, null,
        'input', { name: 'q-title-' + index, id: 'q-title-' + index, type: 'text', size: '40'}, 'title',
        'br', {}, null,
        'span', { className: 'inline' }, "question help text",
        'br', {}, null,
        'input', { name: 'q-help-' + index, id: 'q-help-' + index, type: 'text', size: '40' }, 'help',
        'br', {}, null,
        'span', { className: 'inline' }, "question type",
        'br', {}, null,
        'select', { name: 'q-select-' + index, id: 'q-select-' + index }, [
          'option', { value: 'text', selected: 'selected' }, optionHandle['text']['display'],
          'option', { value: 'paragraph' }, optionHandle['paragraph']['display'],
        ],
      ],
      'div', { className: 'a', id: 'a-' + index }, [
      ],
      'div', { className: 'tool' }, [
        'input', { className: 'button', id: 'save-' + index, type: 'button', value: 'save' }, 'save',
        'span', { className: 'add', id: 'add-' + index }, '[+]',
        'span', { className: 'del', id: 'del-' + index }, '[-]',
      ]
    ]
  );

  var addItem = function() {
    if (this.id.match(ex)) {
      var id = 1 + parseInt(RegExp.$1);
      console.log("create " + id);
      createItem(id);
    }
  };
  
  var removeItem = function() {
    if (this.id.match(ex) && RegExp.$1 != '0') {
      var id = '#item-' + RegExp.$1;
      console.log("remove " + id);
      $(id).remove();
    }
  };
  
  var saveItem = function() {
    $("#questions > .item > .q > *").each(function(){
      
    });
  };
  
  var switchQuestionType = function() {
    console.log("switchQuestionType: " + this.id + " option:selected");
    var selected = $("#" + this.id + " option:selected")[0];
    if (this.id.match(ex)) {
      var id = RegExp.$1;
      optionHandle[selected.value]['handler'](id);
    }
  };
  
  $("#add-" + index).click(addItem);
  $("#del-" + index).click(removeItem);
  $("#del-" + index).click(saveItem);
  $("#q-select-" + index).change(switchQuestionType);
  $("#q-select-" + index).change();
}

$(document).ready(function(){
  var index = 0;
  createItem(index);
});
// --></script>
</head>
<body>
<div id="main">
  <div id="head">
    <span>title</span><br/>
    <input type="text" id="title" name="title" size="40"></input><br/>
    <span>note</span><br/>
    <textarea id="note" name="note" rows="5" cols="40"></textarea><br/>
  </div>
  <div id="questions">
  </div>
  <div id="foot">
  </div>
</div>
</body>
</html>