Monacaのサンプルから派生
あらかじめデータベース内に
質問 答え
が入っている。
答えは
"はい、いいえ、わからない"
とか
"ある、ない"
などいろいろあるので、事前にボタンの数も決まってはいない。
// 問い合わせ成功時のコールバック
//
function querySuccess(tx, results) {
var len = results.rows.length;
window.alert("データベースには " + len + " 行あります。");
//ボタンにシリアルナンバーつける。ccとする。
var cc = 0;
for (var i=0; i
//質問をまず記入
$("#add").append(results.rows.item(i).QUESTION + "
");
//データが0文字の場合にエラーが起きるので回避 二つ以上答えがあるデータを選ぶ
var s = results.rows.item(i).ANSWER
var pos = results.rows.item(i).ANSWER.search("、")
if(pos>0){
var ss = s.split("、");
for (j in ss) {
var bt = "button" + cc
var bt2 = "#button" + cc
$('#add').append($(''));
//イベントをバインド。変数が$()の中に入ってるのがミソ
//あとでどのボタンが押されたか、valueをセットしておかないとわからない。重要
//このevent.data.valueもここで使う分にはエラーが起きないようだ
$(bt2).on("click", { value : bt }, function(event) {
alert(event.data.value);
$('#add').append( event.data.value );
});
cc++
}
$("#add").append("
")
}
}
}
これでデータベースから質問、答えを動的に生成できて、かつどのボタンが押されたかがわかった。
ここにいろいろコードを付加していけば、自由に拡張が出来る問診票が作成できる。
データベースの例はこんな感じ。
function executeQuery(tx) {
//質問が入ったテーブル構造です。
tx.executeSql('DROP TABLE IF EXISTS QuestionnaireTable');
tx.executeSql('CREATE TABLE IF NOT EXISTS QuestionnaireTable (QUESTION_CODE unique, QUESTION, ANSWER, DESCRIPTION)');
//定義完了
tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N716","既往歴１（脳血管疾患）","1:はい、2:いいえ","")');
tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N721","既往歴２（心血管疾患）","1:はい、2:いいえ","")');
tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N726","既往歴３（腎不全・人工透析）","1:はい、2:いいえ","")');
tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N731","貧血といわれたことがある","1:はい、2:いいえ","")');
tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N736","現在、たばこを習慣的に吸っている","1:はい、2:いいえ","")');
}
