CODEWITHSUNDEEP
javascripthtml
Anakin
Anakin

Reputation: 1291

How to know that user clicks on the same element?

I am making a quiz. It has two questions with four answers each. I want to hide the submit button until user answers all question.

My code:

var answered = 0;
function checkAllAns(){
  ++answered;
  if (answered >= 10)
  {
    document.getElementById("stop-btn").style.display = "inline-block";
    document.getElementById("stop-btn").style.opacity = "1";
  }
}

It works only when user answers one time each question, but what if user makes a mistake? Say user answers the same question for 10 times, the submit button appear although all question haven't been answered yet.

I replace it with this:

function checkAllAns(index){

  var checkedIndex = [];

  if ( ansAll[index] == false){
    ansAll[index] = true;
  }

  for (i = 0; i < ansAll.length; ++i) {
    if (ansAll[i] == true){
      var checked = 0;
      for (j = 0; j < checkedIndex.length; ++j){
        if ( checkedIndex[j] == ansAll[i] ){
          checked = 1;
        }
        else{
          checkedIndex.push( ansAll[i] );
        }
      }
      if (checked == 0){
        ++answered;
      }
    }
  }

  if (answered >= 10){
    document.getElementById("stop-btn").style.display = "inline-block";
    document.getElementById("stop-btn").style.opacity = "1";
  }
}

It does not work (if it is working I won't answer it here...)

What is wrong with my code? If you've find another way to accomplish this, you can suggest me.

Thanks,

My complete code is here: http://codepen.io/anon/pen/EjYWWx

Upvotes: 2

Views: 72

Answers (4)

joshbooks
joshbooks

Reputation: 489

It seems like you have the right idea, but you're working too hard, you can just use one array and iterate through that (unless you're worried about a timing attack) like so:

function checkAllAns(index)
{
 ansAll[index] = true;

 for (i = 0; i < ansAll.length; ++i)
 {
  if (ansAll[i] != true)
  {
    break;
  }
  if (i == ansAll.length-1)
  {
   document.getElementById("stop-btn").style.display = "inline-block";
   document.getElementById("stop-btn").style.opacity = "1";
  }
 }
}

Upvotes: 2

Francisco Presencia
Francisco Presencia

Reputation: 8851

I would suggest trying to go for simpler code and try to integrate it in a single solution. Something like this (untested):

function answered(){
  return document.querySelectAll('.question.answered').length;
  }

var answers = document.querySelectAll('.question .answer');
for (var i = 0; i < answers.length; i++) {
  answers[i].onclick = function(e){

    // This should be the question
    e.target.parentNode.classList.add('answered');

    // Check how many questions are answered
    if (answered() > 10) {
      // DO SOMETHING
      }
    }
  }

Not tested, but in this way it's much easier. If you also used jQuery or a similar library, it would be much much more easy (as Bradley Wilson's answer point out).

Upvotes: 1

HBP
HBP

Reputation: 16033

Here is a method. Keep an array answered and add the question index to it unless that question has already been answered. Whene the array length is 10 then all questions have been answered

var answered = [];
function checkAllAns (index) {
   if (answered.indexOf (index) >= 0)
      answered.push (index);

   if (answered.length == 10)
   {
      document.getElementById("stop-btn").style.display = "inline-block";
      document.getElementById("stop-btn").style.opacity = "1";
   }
}

Upvotes: 1

BradleyIW
BradleyIW

Reputation: 1358

Here's a JSFiddle for you: http://jsfiddle.net/soyn0xag/6/

Instead of using complex nesting of iterations and loops, use JQuery.

This checks whether the key has left the text area (aka complete)

 $("input[type='text'], textarea").on("keyup", function(){
        if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
            $("input[type='submit']").removeAttr("disabled");
        }
    });

This check whether the check box has been selected or changed.

$("input[name='category']").on("change", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    }
});

This checks if the element is checked, when everything is check change the submit to show. This is just a snippet, you will need to expand.

Upvotes: 2

Related Questions