0

你好所有的好人。

我再次需要你的建议（我等着有一天我可以说我可以自己解决我的编程问题）。我需要用 JavaScript 或 jQuery 编写一个简单的测验。我已经完成了 ABCD 之类的简单问题，但我仍然无法填补空白问题。这是我的代码：

    <?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>

这是JSFIDDLE项目。

差距可以有多个答案（所有智慧类.luka-prawidlowa我都试图循环使用所有段落，并比较用户答案.luka-prawidlowa但我得到了一些垃圾。任何人都可以帮助我吗？

------- 编辑 -------- @Spokey 的回答效果很好 - 同时我以其他方式做。差异在.each循环中。之前

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

但我更上一层楼.pytanie并这样做：

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

          });

我必须更改.pytanie为.pytanie-lukafor 循环迭代，仅填空问题。但是@Spokey 方法似乎更好。

4

1 回答 1

2

尝试以下

  $('#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
            }
        });
    });

小提琴

新脚本（我没有看到您在任何地方都使用相同的类）。

我建议您添加另一个类.pytanie（在我的示例中.gap-fill）。没有必要添加一个新的类，但它对性能更好。（每个人都不必浏览不是填空问题的每个 div）

$('.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/

注意：当您单击按钮时，我还重置了分数。

于 2013-05-23T12:44:14.030 回答