大家好。
我再次需要你的建议(我等待有一天我可以说我可以自己解决我的编程问题)。我需要用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项目。
Gap可以有多个答案(所有智慧类.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-luka，以循环迭代仅与填空问题。但是@Spokey的方法似乎更好。
试试下面的
$('#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++; }
});
});
注意:当你点击按钮时，我也会重置分数。