CODEWITHSUNDEEP
jquerydom
Glorifind
Glorifind

Reputation: 402

Select all elements by class in one div

Hello all good people.

I need your advice once again (i wait for day when i could say i can solve my programming problems by myself). I need to write a simple quiz with JavaScript or jQuery. I have done simple questions like ABCD but still i cant crack fill gap questions. Here's my code:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <link type="text/css" href="../css/nexto.css" rel="stylesheet" />
  </head>
  <body>
    <div class="pytanie">
      <p class="tresc">1. Ile ksiezyców ma ziemia?</p>
      <p class="odpowiedz poprawna">A) 1</p>
      <p class="odpowiedz">A) 2</p>
    </div>
    <div class="pytanie">
      <p class="tresc">1. Ile ksiezyców ma ziemia?</p>
      <p class="odpowiedz poprawna">A) 1</p>
      <p class="odpowiedz">A) 2</p>
    </div>
    <div class="pytanie">
      <p class="tresc">Excuse me, how <span contenteditable="true" class="luka-odpowiedz"></span> I get to the nearest underground station?</p>
      <p class="luka-prawidlowa">can </p>
    </div>
    <span class="btn-sprawdz" id="btn-sprawdz-1">Sprawdz</span>
    <script>
      $(document).ready(function() {
        var score;
        score=0;
        // Mechanizm zaznaczania odpowiedzi wielokrotnego wyboru
        $('.odpowiedz').click(function() {
          // Najpierw zdejmij kolor
          $(this).closest('.pytanie').find('p').css('background-color','transparent');
          // Zdejmij selecta
          $(this).closest('.pytanie').find('p').removeClass('selected');
          // Zaznacz tę odpowiedź
          $(this).css('background-color','blue');
          // Oznacz ją jako zaznaczoną
          $(this).addClass('selected');
        });
        ////////////////////////////////////////////////////////////
        //Mechanizm sprawdzania odpowiedzi wielokrotnego wyboru
        $('#btn-sprawdz-1').click(function() {
          // Iteruje po odpowiedziach i pobieram class
          $('.odpowiedz').each(function() {
            var wartosc_odpowiedzi = $(this).attr('class');
            // Jeśli selected i poprawna + punkt
            if (wartosc_odpowiedzi == "odpowiedz poprawna selected") {
              score++;
            }
          });
        ////////////////////////////////////////////////////////////
        // Mechanizm sprawdzania luk
        $('.luka-odpowiedz').each(function() {
          // Pobieramy odpowiedź użytkownika
          var wartosc_odpowiedzi = $(this).text();
          var wzorzec_odpowiedzi = $(this).closest('.luka-prawidlowa').text;
          alert(wzorzec_odpowiedzi);
          });
        });
      });
    </script>
  </body>
</html>

here is JSFIDDLE project.

Gap can have multiple answers (all wits class .luka-prawidlowa i tried to take all paragraps in loop, and compare user answer to .luka-prawidlowa But i get some trash instead. Anyone can help me?

------- EDIT -------- Answer of @Spokey works great - in meantime i do it other way. Diffrence was in .each loop. before it was 

$('.luka-odpowiedz').each(function() {
              // Pobieramy odpowiedź użytkownika
              var wartosc_odpowiedzi = $(this).text();
              var wzorzec_odpowiedzi = $(this).closest('.luka-prawidlowa').text;
              alert(wzorzec_odpowiedzi);
              });

but I go one step up to .pytanie and do it like:

$('.pytanie-luka').each(function() {
          // Pobieramy odpowiedź użytkownika
          var wartosc_odpowiedzi = $(this).find('.luka-odpowiedz').text();
          var wzorzec_odpowiedzi = $(this).find('.luka-prawidlowa').text();

          });

I must change .pytanie to .pytanie-luka for loop iterate only with fill a gap questions. But still @Spokey approach seems better one.

Upvotes: 0

Views: 313

Answers (1)

Spokey
Spokey

Reputation: 10994

Try the following

  $('#btn-sprawdz-1').click(function () {
        // Iteruje po odpowiedziach i pobieram class
        $('.odpowiedz').each(function () {
            var wartosc_odpowiedzi = $(this).attr('class');
            // Jeśli selected i poprawna + punkt
            if (wartosc_odpowiedzi == "odpowiedz poprawna selected") {
                score++;
            }
        });
        ////////////////////////////////////////////////////////////
        // Mechanizm sprawdzania luk
        var fill = $('.luka-odpowiedz').text(); // save span text on click 

        $('.luka-prawidlowa').each(function () { 
          // for each paragraph 
          //your mistake here was to use for each span instead of paragraph

            if (fill === $(this).text()) { // if span text is like paragraph
                alert('ok');  // do something
            }
        });
    });

FIDDLE

New script (I did not see that you are using the same class everywhere).

I suggest that you add another class to .pytanie (in my example .gap-fill). It's not necessary to add a new class, but it is better for performance. (each won't have to browse every div that is not a gap filling question)

$('.gap-fill').each(function () {
      var th = $(this);
      var text = th.find('.luka-odpowiedz').text();

      th.find('.luka-prawidlowa').each(function(){
          if(text === $(this).text()){ score++; }
      });
});

http://jsfiddle.net/k8KC7/9/

NOTE: I also reseted score when you click the button.

Upvotes: 2

Related Questions