CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1752759
user1752759

Reputation: 635

disable and enable click events with a counter and transition effects

I have the following lines of code in my web page - demo/example.

HTML:

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer" class="answer-display-hidden">answer</p>

<div class="incorrect">
    <span>Incorrect:</span>
    <p>0</p>
</div>

<div class="correct">
    <span>Correct:</span>
    <p>0</p>
</div>

CSS:

.answer-display-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

.answer-display-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.incorrect, .correct {float: left; padding-right: 20px}

JS:

var incorrectCalls = 0;
var correctCalls = 0;

function showResult(b) {
  var res = document.getElementById('answer');

  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';

    correctCalls++;
        var cor = $('.correct > p:first');
        cor[0].innerHTML = correctCalls;
  } 

  else {
    res.innerHTML = '<span class="wrong">wrong</span>';

    incorrectCalls++;
    var incor = $('.incorrect > p:first');
    incor[0].innerHTML = incorrectCalls;
  }

  res.classList.remove("answer-display-hidden");
  res.classList.add("answer-display-visible");

  setTimeout(function() {
        res.classList.add("answer-display-hidden");
  }, 2000);
}

How can I de-activate the right-answer counter during the fade-in and wait effect on the text, and then re-activate afterwards? This is so that the user can't manipulate the counter (click on the button quickly before the text is displayed).

Upvotes: 3

Views: 972

Answers (2)

Burak Koray Balcı
Burak Koray Balcı

Reputation: 167

You can use setTimeout function when button clicked.

Live Demo

Code Block:

function showResult(b) {
 .
 .
 .
  $(".right-answer").prop("disabled", true);
  $(".wrong-answer").prop("disabled", true);
  setTimeout(function() {
    $(".right-answer").prop("disabled", false);
    $(".wrong-answer").prop("disabled", false);
  }, 2600);
}

Upvotes: 1

Hemal
Hemal

Reputation: 3760

This is my solution

WORKING DEMO

Removed CSS code and following is the jQuery code.

$(document).ready(function(){

    $(".wrong-answer").click(function(){
        $(".right-answer").attr("disabled","disabled");
        $("#answer").text("WRONG").fadeIn(5000,function(){

            $(this).fadeOut(5000,function(){
                $(".right-answer").removeAttr("disabled");
            });
        })

    });

});

Upvotes: 0

Related Questions