Ajax and javascript issues when trying to count labels
I have a problem with my javascript. I am trying to count the marks for each correct selected answer that is determined from the db. If the answer is wrong, then the marks are "0", otherwise the mark depends on the mark of the answer in the db.
But I have javascript problems:
First of all, where it says connect.php
it just navigates to the page where it connects to the db, but is that correct or I suppose to link to the page that it will run the request on, looking for the response tags?
Second, it says that I have undefined response
in my code and I don't want this to be called.
My question is if I can clarify above. I am trying to use ajax and javascript and would appreciate it if a strong programmer can solve this problem I have and be able to tweak the code correctly so that it can read every correct answer.
I have a jsfiddle that I am trying to follow, but if someone can edit the fiddle to have a dummy version that works for counting labels, and then can provide a code snippet indicating what the correct code should be, then this helps me a lot ...
The moment jsfiddle determines if the answers are correct or not, the fiddle is here: http://jsfiddle.net/bWthd/3/
Actual code:
PHP / HTML:
$qandaquery = "SELECT q.QuestionId, Answer, AnswerMarks, OptionType
FROM Question q
INNER JOIN Answer an ON q.QuestionId = an.QuestionId
INNER JOIN Option_Table o ON q.OptionId = o.OptionId
WHERE SessionId = ?
GROUP BY q.QuestionId
ORDER BY RAND()";
...
$qandaqrystmt->bind_result($qandaQuestionId,$qandaAnswer,$qandaAnswerMarks,$OptionType);
$arrQuestionId = array();
while ($qandaqrystmt->fetch()) {
$arrQuestionId[ $qandaQuestionId ] = $qandaQuestionId;
}
foreach ($arrQuestionId as $key=>$question) {
?>
<div class="queWrap" data-q_id="<?php echo $key; ?>">
$options = explode('-', $arrOptionType[$key]);
if(count($options) > 1) {
$start = array_shift($options);
$end = array_shift($options);
do {
$options[] = $start;
}while(++$start <= $end);
}
else{
$options = explode(' or ', $option);
}
if($arrReplyType[$key] == 'Single'){
foreach($options as $indivOption) {
echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="radio"
name="options_<?php echo $key; ?>[]" id="option-' . $indivOption . '" value="' .
$indivOption . '" /><span>' . $indivOption . '</span></label></div>';
}
}else if($arrReplyType[$key] == 'Multiple'){
foreach($options as $indivOption) {
echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
}
}
<p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>
}
JAVASCRIPT / AJAX:
$(function() {
$('.queWrap .ck-button').change(function() {
var $ch_box = $(this),
$qwrap=$ch_box.closest('.queWrap')
q_id = $qwrap.data('q_id'),
val = $ch_box.val();
var dataToServer = {
q_id: q_id,
valueSelected: val
}
$.post('connect.php', dataToServer,function(){
var status=response.status
$qwrap.find('.status').text( status).addClass(status);
if( status=='correct'){
updateScore( response.points)
}
})
})
function updateScore( newScore){
var score= $points.data('score')+newScore;
$points.data('score',score).text( 'Score: '+score)
}
});
UPDATE:
Current code:
function update() {
var score = 0;
$('.queWrap').each(function(element) {
var $qwrap = $(element),
q_id = $qwrap.data('q_id'),
val = $qwrap.find('input:checked').val();
var dataToServer = {
q_id: q_id,
valueSelected: val
}
$.post('connect.php', dataToServer,function(response){
var status = response.status
$qwrap.find('.status').text(status).addClass(status);
if (status == 'correct'){
score += response.points;
$points.data('score', score).text('Score: ' + score);
}
})
});
}
...
//HTML
<div class="status"> </div>
Ok, no errors, but no labels that appear and are calculated. This is due connect.php
to the javascript included in the function. Do I need to navigate to the page that connects to the db connect.php
, or navigate to the page that makes a request to find the response labels for each selected answer? I'm running out of time, so you can implement the code for me as soon as possible, because I have to finish this. I want the following:
-
Check the boxes for each selected answer, if the wrong answer is selected, then the value
0
for these answers, if the correct answer, then it is determined from the database. How can I get each correct answer button to contain its own answerId? -
To determine the answerId, we can use the questionId displayed in the text input (see the PHP / HTML snippet above) and then, based on the values of each answer button, extract the answerid corresponding to the answer values for each question.
Below is a sample database showing Answer Table
AnswerId (auto PK) QuestionId Answer AnswerMarks
1 72 A 2
2 72 C 1
3 73 B 2
4 73 C 2
5 73 E 1
source to share
The updateScore function is not working correctly. You must store the points for each question in the item, and in the updateScore () function you must add all of this and put the sum in the $ points item. Something like that:
$(function() {
$('.queWrap .ck-button').change(function() {
update();
});
function update() {
var score = 0;
$('.queWrap').each(function(element) {
var $qwrap = $(element);
var q_id = $qwrap.data('q_id');
var val = $qwrap.find('input:checked').val();
var dataToServer = {
q_id: q_id,
valueSelected: val
};
$.post('connect.php', dataToServer, function(response){
var status = response.status
$qwrap.find('.status').text(status).addClass(status);
if(status == 'correct'){
score += response.points;
$points.data('score', score).text('Score: ' + score);
}
});
});
}
}
And this function should be called whenever the answers change. (I'm not sure if this is just an example).
source to share