PDA

View Full Version : Drag Drop Quiz



hemant1
24 Jun 2011, 3:41 AM
i want to create the quiz,
in a quiz type of questions are drag and drop , checkbox and radio field.
from these question types i m able to create checkbox and radio button type question but unable to create drag drop type question on quiz.
can anyone provide the guidance how can i create drag drop type question for quiz ?

thanks,

jmclem
24 Jun 2011, 5:24 AM
Hi,

there is a simple dragndrop example at sencha: http://dev.sencha.com/deploy/touch/examples/dragdrop/
You can see the source code for it at http://dev.sencha.com/deploy/touch/examples/dragdrop/index.js (have a look at the page source)

Jean-Marie.

hemant1
24 Jun 2011, 8:46 PM
Hi,

Thanks for the response

i already saw that example
but this is my code
how can i add that in my code



var PageCount = 1;

var question1 = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'What is the correct Answer from the following',
instructions: 'Please Choose the correct Answer.',
defaults: {
labelWidth: '35%'
},

items: [{
xtype: 'checkboxfield',
name: 'q1_answer',
label: 'Que1 Correct Answer 1',
value: 'Q1a'
}, {
xtype: 'checkboxfield',
name: 'q1_answer',
label: 'Que1 Incorrect Answer1',
value: 'Q1b'
}, {
xtype: 'checkboxfield',
name: 'q1_answer',
label: 'Que1 Incorrect Answer2',
value: 'Q1c'
}, {
xtype: 'checkboxfield',
name: 'q1_answer',
label: 'Que1 Correct Answer2',
value: 'Q1d'
}
]
}
]
});

var question2 = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'What is the correct Answer from the following',
instructions: 'Please Choose the correct Answer.',
defaults: {
labelWidth: '35%'
},

items: [{

xtype: 'checkboxfield',
name: 'q2_answer',
label: 'Que2 Correct Answer 1',
value: 'Q2a'
}, {
xtype: 'checkboxfield',
name: 'q2_answer',
label: 'Que2 Incorrect Answer1',
value: 'Q2b'
}, {
xtype: 'checkboxfield',
name: 'q2_answer',
label: 'Que2 Incorrect Answer2',
value: 'Q2c'
}, {
xtype: 'checkboxfield',
name: 'q2_answer',
label: 'Que2 Correct Answer2',
value: 'Q2d'
}
]
}
]
});

var question3 = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'What is the correct Answer from the following',
instructions: 'Please Choose the correct Answer.',
defaults: {
labelWidth: '35%'
},

items: [{

xtype: 'checkboxfield',
name: 'q3_answer',
label: 'Que3 Correct Answer 1',
value: 'Q3a'
}, {
xtype: 'checkboxfield',
name: 'q3_answer',
label: 'Que3 Incorrect Answer1',
value: 'Q3b'
}, {
xtype: 'checkboxfield',
name: 'q3_answer',
label: 'Que3 Incorrect Answer2',
value: 'Q3c'
}, {
xtype: 'checkboxfield',
name: 'q3_answer',
label: 'Que3 Correct Answer2',
value: 'Q3d'
}
]
}
]
});

var question4 = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'What is the correct Answer from the following',
instructions: 'Please Choose the correct Answer.',
defaults: {
labelWidth: '35%'
},

items: [{

xtype: 'checkboxfield',
name: 'q4_answer',
label: 'Que4 Correct Answer 1',
value: 'Q4a'

}, {
xtype: 'checkboxfield',
name: 'q4_answer',
label: 'Que4 Incorrect Answer1',
value: 'Q4b'
}, {
xtype: 'checkboxfield',
name: 'q4_answer',
label: 'Que4 Incorrect Answer2',
value: 'Q4c'
}, {
xtype: 'checkboxfield',
name: 'q4_answer',
label: 'Que4 Correct Answer2',
value: 'Q4d'
}
]
}
]
});

function IncrementPageCount(){
if (PageCount < 12){
PageCount++;
}
}

function DecrementPageCount(){
if (PageCount > 1){
PageCount--;
}
}

var questionToolbar = new Ext.Toolbar({
dock: 'bottom',

layout: {
pack: 'center'
},
defaults: {
iconMask: true
},
items: [{
iconCls: 'arrow_left',
handler: function () {
questionPanel.layout.prev({
type: 'slide',
direction: 'right',
handler: DecrementPageCount()
});
}
}, {
text: 'Submit',
ui: 'confirm',
handler: function () {
if (PageCount == 1) {
var valuesQ1 = question1.getValues(),
answerQ1 = valuesQ1.q1_answer;

if (answerQ1 == "Q1a") {
Ext.Msg.alert("Well Done!", "You selected the right answer.");
question2.show();
IncrementPageCount();
addPoint();
} else {
Ext.Msg.alert("Incorrect", "You selected the wrong answer.");
question2.show();
IncrementPageCount();
}
} else if (PageCount == 2) {
var valuesQ2 = question2.getValues(),
answerQ2 = valuesQ2.q2_answer;
if (answerQ2 == "Q2a") {
Ext.Msg.alert("Well Done!", "You selected the right answer.");
question3.show();
IncrementPageCount();
addPoint();
} else {
Ext.Msg.alert("Incorrect", "You selected the wrong answer.");
//questionPanel.setActiveItem(question3, 'slide');
question3.show();
IncrementPageCount();
}
} else if (PageCount == 3) {
var valuesQ3 = question3.getValues(),
answerQ3 = valuesQ3.q3_answer;
if (answerQ3 == "Q3a") {
Ext.Msg.alert("Well Done!", "You selected the right answer.");
question4.show();
IncrementPageCount();
addPoint();
} else {
Ext.Msg.alert("Incorrect", "You selected the wrong answer.");
question4.show();
IncrementPageCount();
}
} else if (PageCount == 4) {
var valuesQ4 = question4.getValues(),
answerQ4 = valuesQ4.q4_answer;
if (answerQ4 == "Q4a") {
Ext.Msg.alert("Well Done!", "You selected the right answer.");
IncrementPageCount();
addPoint();
} else {
Ext.Msg.alert("Incorrect", "You selected the wrong answer.");
IncrementPageCount();
}
alert("Quiz is finished Your Total Score is "+ totalScore);
}
}
}, {
iconCls: 'arrow_right',
handler: function () {
questionPanel.layout.next({
type: 'slide',
direction: 'left',
handler: IncrementPageCount()
});
}
}]

});
var totalScore = 0;

function addPoint(){
totalScore++;
}
demos.Forms = new Ext.Panel({
id: 'questionPanel',
cls: 'card',
iconCls:'more',
title: 'Questionnaire',
layout: 'card',
items: [
question1,
question2,
question3,
question4

],
dockedItems: [
questionToolbar
]
});

jmclem
25 Jun 2011, 2:10 AM
I've never done this before, but look at the source code I linked to. It seems you just need to issue some
new Ext.util.Droppable(...)
new Ext.util.Dragable(...)


Jean-Marie.

hemant1
25 Jun 2011, 2:25 AM
ya but i have to assign this function OR its value in my any question Panel how is it possible?


thanks,