Can you please help to save state of the radiofield already selected using sencha touch. actully i am developing one app for multiple choice question. for ex:
There will be 10 questions. i will select 1st,3rd,4th questions radiofield, total answered question is 3 and now i will go back for the 2nd question which i have not selected. so how to maintain total answered question. if i go previous or next. can you please write sample code for the same.
var db = openDatabase('QA.sqlite', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
var results_sql;
var len_sql;
var main_ques = [];
var ans1 = [];
var ans2 = [];
var ans3 = [];
var ans4 = [];
var qImg = [];
var qId = [];
db.transaction(function (tx) {
tx.executeSql('DROP TABLE IF EXISTS Question');
tx.executeSql('CREATE TABLE IF NOT EXISTS Question(qID, qImg, Question, Ans1, Ans2, Ans3, Ans4)');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (1, "img/ques1.jpg", "What the hell is this language", "Java script", "Java", "Ajax", "Sencha Touch");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (2, "img/ques2.jpg", "What is your first company?", "Exilant", "Hcl", "Infosys", "TCS");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (3, "img/ques3.jpg", "Which was the 1st non Test playing country to beat India in an international match?", "Canada", "Sri Lanka", "Zimbabwe", "East Africa");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (4, "img/ques4.jpg", "Which county did Ravi Shastri play for?", "Glamorgan", "Leicestershire", "Gloucestershire", "Lancashire");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (5, "img/ques5.jpg", "Who is the first Indian woman to win an Asian Games gold in 400m run?", "M.L.Valsamma", "P.T.Usha", "Kamaljit Sandhu", "K.Malleshwari");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (6, "img/ques6.jpg", "In which year did Milkha Singh win the first National title in the 400 m race?", "1955", "1956", "1957", "1970");');
tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (7, "img/ques7.jpg", "The Dronacharya Award is given to...?", "Sportsmen", "Coaches", "Umpires", "Sports Editors");');
});
var select = db.transaction(function (tx) {
tx.executeSql('SELECT * FROM Question', [], function (tx, results) {
len_sql = results.rows.length, i;
for (var i = 0; i < len_sql; i++){
qId[i] = results.rows.item(i).qID;
main_ques[i] = results.rows.item(i).Question;
ans1[i] = results.rows.item(i).Ans1;
ans2[i] = results.rows.item(i).Ans2;
ans3[i] = results.rows.item(i).Ans3;
ans4[i] = results.rows.item(i).Ans4;
qImg[i] = results.rows.item(i).qImg;
}
}, null);
});
Ext.application({
launch: function () {
var logo = Ext.create('Ext.Img', {
src: 'img/qans.jpg',
layout:{
type:'vbox',
align:'middle'
},
id: 'logo',
mode: 'element',
height: 200
}); // create()
var titleb = Ext.create('Ext.TitleBar', {
id: 'titlebar',
docked: 'top',
ui: 'light',
// border: 3,
// style: 'border-color: red; border-style: solid;'
});
var i=0;
var j=0;
var k=0;
var flag=0;
var flag1=0;
var result="";
var checked = "tested";
var resultArray = [];
var setOption;
var without;
var withoutNo = [];
var separate;
var numi = [];
var quesManage = [];
var qnext = [];
var answered = [];
var contactForm = Ext.create('Ext.form.FormPanel', {
extend: 'Ext.Container',
fullscreen: true,
renderTo: document.body,
scrollable: false,
// scrollable : {
// direction : 'horizontal',
// directionLock : true
//},
// layout:'fit',
listeners: {
activate: function(){
Ext.Function.createDelayed( function(){
if(i < len_sql){
document.getElementById('ansl1').innerText = ans1[0];
Ext.getCmp('ans1').setValue(ans1[0]);
document.getElementById('ansl2').innerText = ans2[0];
Ext.getCmp('ans2').setValue(ans2[0]);
document.getElementById('ansl3').innerText = ans3[0];
Ext.getCmp('ans3').setValue(ans3[0]);
document.getElementById('ansl4').innerText = ans4[0];
Ext.getCmp('ans4').setValue(ans4[0]);
document.getElementById('titlebar').innerText = 'Questions:' + len_sql;// + 'Answered:' + (j);
document.getElementById('que').innerText = (i+1) + '.' + main_ques[0];
logo.setSrc(qImg[0]);
}
},1000,this)();
}
},
items: [
titleb,
logo,
{
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'label',
id: 'que'
},
{
xtype: 'hiddenfield',
id: 'qId'
}
]
}, {
xtype: 'fieldset',
items: [{
xtype: 'radiofield',
id: 'ans1',
name: 'answer',
label: '<label id="ansl1"></label>',
listeners : {
check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
alert("Label one:")
}
}
}
}, {
xtype: 'radiofield',
id: 'ans2',
name: 'answer',
label: '<label id="ansl2"></label>',
listeners : {
check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
alert("Label two:")
}
}
}
},{
xtype: 'radiofield',
id: 'ans3',
name: 'answer',
label: '<label id="ansl3"></label>',
listeners : {
check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
alert("Label three:")
}
}
}
},{
xtype: 'radiofield',
id: 'ans4',
name: 'answer',
label: '<label id="ansl4"></label>',
listeners : {
check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
alert("Label four:")
}
}
}
}
] // items
}, {
xtype: 'toolbar',
cls: 'expand-panel',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Prev',
id: 'prev',
cls: 'prevButton',
ui: 'back',
handler: function (btn, evt) {
Ext.getCmp('next').removeCls('nextButton');
if(i>1){
Ext.getCmp('prev').removeCls('prevButton');
}else{
Ext.getCmp('prev').addCls('prevButton');
}
if(i <= len_sql){
var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
without = ans[0].getGroupValue();
withoutNo[i] = without;
if(withoutNo[i] != null) {
var str = checked+i;
var istr = ""+i+"";
alert("Value of str:" +str);
alert("Value of istr:" +istr);
if((quesManage[i] == checked) || (str.indexOf(istr) >= 0)) {
alert("Tested!!!!!");
} else {
quesManage[j] = checked+i;
alert("Else loop: " +quesManage[j]);
j++;
}
} else {
alert("Value is null:");
}
// document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + quesManage.length;
result = qId[i] +":" + ans[0].getGroupValue();
// result = ans[0].getGroupValue();
resultArray[i] = result;
i = i-1;
document.getElementById('ansl1').innerText = ans1[i];
Ext.getCmp('ans1').setValue(ans1[i]);
document.getElementById('ansl2').innerText = ans2[i];
Ext.getCmp('ans2').setValue(ans2[i]);
document.getElementById('ansl3').innerText = ans3[i];
Ext.getCmp('ans3').setValue(ans3[i]);
document.getElementById('ansl4').innerText = ans4[i];
Ext.getCmp('ans4').setValue(ans4[i]);
document.getElementById('que').innerText = (i+1) + '.' + main_ques[i];
// document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
logo.setSrc(qImg[i]);
}
contactForm.reset();
setOption = resultArray[i].split(':');
ans[0].setGroupValue(setOption[1]);
} // handler
},
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function (btn, evt) {
var answers = Ext.ComponentQuery.query('radiofield[name=answer]');
Ext.Msg.alert('Radiofield Vallue: ', answers[0].getGroupValue());
} // handler
},{
xtype: 'button',
text: 'Save',
ui: 'action',
handler: function (btn, evt) {
var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
//result = qId[i] +":"+ ans[0].getGroupValue();
result = ans[0].getGroupValue();
resultArray[i] = result;
for(var r=0; r < resultArray.length; r++){
if(resultArray[r] != null) {
// answered = resultArray[r];
} else {
alert("Null value:")
}
alert(resultArray[r]);
}
// document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + answered.length;
Ext.Msg.alert('Saved');
} // handler
}, {
xtype: 'button',
text: 'Next',
id: 'next',
cls: 'nextButton',
ui: 'forward',
handler: function (btn, evt) {
Ext.getCmp('prev').removeCls('prevButton');
if(i == len_sql-2){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(i < len_sql){
var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
without = ans[0].getGroupValue();
withoutNo[i] = without;
result = qId[i] +":"+ ans[0].getGroupValue();
// result = ans[0].getGroupValue();
resultArray[i] = result;
if(withoutNo[i] != null) {
for(var t=0; t<withoutNo.length; t++) {
// quesManage[t] = i;
alert("Inside for loop:" +withoutNo[t]);
alert("value of quesManage:" +quesManage[t]);
}
document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
}
// if(ans[0].getGroupValue() != null){
i = i+1;
document.getElementById('ansl1').innerText = ans1[i];
Ext.getCmp('ans1').setValue(ans1[i]);
document.getElementById('ansl2').innerText = ans2[i];
Ext.getCmp('ans2').setValue(ans2[i]);
document.getElementById('ansl3').innerText = ans3[i];
Ext.getCmp('ans3').setValue(ans3[i]);
document.getElementById('ansl4').innerText = ans4[i];
Ext.getCmp('ans4').setValue(ans4[i]);
document.getElementById('que').innerText = (i+1) + "." + main_ques[i];
// document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
if(qImg[i]==""){
logo.setSrc("");
}else{
logo.setSrc(qImg[i]);
}
// }else{
// Ext.Msg.alert('Select any option.');
// }
}
contactForm.reset();
setOption = resultArray[i].split(':');
ans[0].setGroupValue(setOption[1]);
} // handler
}] // items (toolbar)
}] // items (formpanel)
}); // create()
} // launch
}); // application()