Deactivate part of page on click

Question

I'm trying to create a quiz in the style of Buzzfeed. Is there a way to deactivate a part of the page when the user clicks on an answer, so that users can no longer click on alternative options of the same question and thus distort the final score of the test.

I've found some similar topics here and here but I don't want to add overlays and I'm not using inputs in my code so I was wondering if there is an alternative route.

I created a codepen here http://codepen.io/kkoutoup/pen/ByGEoQ

$(document).ready(function(){
//create an array to store correct answers
var totalCorrect = [];

$('li').click(function(){

    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');
    //check for .correct class
        //if yes
        if($(this).hasClass('correct')){
            //add .correctAnswer class
            $(this).addClass('correctAnswer');
            //find next span and change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of siblings
            $(this).siblings().addClass('fade');
            //show answerText
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.show();
            $toShowFalse.remove();
            //add 1 to total correct array
            totalCorrect+=1;
            //get array's length
            var $finalScore = totalCorrect.length;
            console.log($finalScore);
        }else{
            //add .wrongAnswer class
            $(this).addClass('wrongAnswer').addClass('fade');
            //change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of its siblings
            $(this).siblings().addClass('fade');
            //show wrong Message
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.remove();
            $toShowFalse.show();
            //locate correct and add respective class
            $parent.find('.correct').addClass('correctAnswer');

        };
});
});//end dom ready

Any ideas?

Thanks

So, when any one of the CB's (actually fake CB's) is selected, you'd want to disable the rest for that question no matter what the answer is? — lshettyl, Mar 18 '15 at 11:21
@LShetty The correct answer is highlighted when the user clicks on any answer, whether right or wrong, so I want to prevent users from being able to click again on any of the

Gulfaraz Rahman · Accepted Answer · 2015-03-18T13:08:25.017

What we're doing is removing the click function from the click event of the selected set of options - in this case, all the children of the elements parent. Thus when the user tries to click again, the click function would not be called on the click event.

Add the following line in click function because we want to trigger the disable as soon as any option is clicked on

$(this).parent().find('li').off("click");

Here is the updated codepen

Be aware of one thing - .off('click') removes all event listeners of type click from the element. If you want remove just this function, assign the function to a variable and then use the variable in the on and off calls. Like below:

event_fce = function(event) {
    //do stuff here
    $(this).off('click', event_fce);
}

$('li').on('click', event_fce);

score 0 · Answer 2 · answered Mar 18 '15 at 11:28

0

You could turn off click as soon as one option is selected (right/wrong), like below:

Codepen updated

$(this).siblings().off("click"); //add this to where appropriate, such as either in `if` or `else` or both.

answered Mar 18 '15 at 11:28

lshettyl

8,166
4
25
31

Deactivate part of page on click

2 Answers2