Question

I am having an issue with my javascript. I am trying to count marks for each correct chosen answer which is determined from db. If incorrect answer then marks is ‘0’, else mark is dependent on answer’s mark in db.

But I am having issues with the javascript:

First of all where it says connect.php, this just simply navigates to page where it connects to db, but is this correct or am I suppose to link to page where it will run query looking up answer’s marks?

Second it says I have undefined response in my code and I do not what this should be called.

My question is can I have clarification for the above 2. I am trying to use ajax and javascript and will appreciate if a strong programmer can tackle this issue I am having and be able to correctly set up the code so that it is able to count each correct answer marks.

I have a jsfiddle which I am trying to follow but if somebody can edit fiddle to have a dummy version working for counting marks and then be able to provide code snippet stating what the proper code should be, then this will help me very much.

At moment the jsfiddle determines if answers selected are correct or incorrect and 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">&nbsp;</div>

Ok there is no errors but there is no marks appearing and calculating. Is it because of the connect.php I included in the javascript function. Do I need to navigate to page which connects to db connect.php or navigate to a page where it runs a query on finding answer marks for each selected answer? I am running out of time so can you please implement the code for me asap because I have to get this finished. I want the following to happen:

• Count marks for each answer selected, if incorrect answer selected then value is 0 for those answers, if correct answer then it’s marks are determined from database. Howcan I get each correct answer button to contain it’s own answerId?

• To determine answerId we can use the questionId displayed in text input (See PHP/HTML code snippet at top) and then depending on values of each answer button, retrieve the answerid matching the answer values for each question.

Below is example 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

Answer 1

Your updateScore function works wrong. You should store the points for each question in a data element, and in the updateScore() function you should add all these up, and put the sum into the $points element. Something like this:

$(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 invoked on every change of the answers. (I am not sure this works just an example).