[JS] Quiz i możliwość sprawdzenia poszczególnego pytania

Debestes · 24 Luty 2015 17:30

Witam!

Stworzyłem sobie skrypt Quizu/Testu i wszystko działa jak należy, ale potrzebuję jeszcze aby mieć dodatkowy przycisk pod każdym pytaniem który po kliknięciu w niego uruchamiałby funkcję sprawdzającą poprawną odpowiedź tylko w tym jednym pytaniu i wyświetlajacą alert z wynikiem czy dobrze czy źle. Nie mam pojęcia jak się do tego odnieść bo dopiero teraz taka potrzeba wynikła z postępem czasu, a wcześniej nastawiałem się tylko na sprawdzanie całości dlatego też zastosowałem rozwiązanie klucza odpowiedzi - problem że nie wiem jak się teraz do tego odnieść w funkcji sprawdzającej pojedyńcze pytanie. Proszę o pomoc.

Oto dotychczasowy skrypt:

<html>
<head>
<script type="text/javascript">
var iloscpytan = 20;
var wynik = 0;
var wynikpokaz = 0;
var pytania = new Array(iloscpytan);
var klucz = new Array('1','2','2','2','2','2','2','2','2','2','2','2','2','2','2','2','2','2','2','2');

function pobierz() { 
for(i=1; i <=iloscpytan; i++)
{ 
for (j=0; j<3; j++) {
if(eval("document.getElementById(\"test\").pytanie"+i+"["+j+"].checked == true"))
{
pytania[i] = eval("document.getElementById(\"test\").pytanie"+i+"["+j+"].value");
break;
}}}}

function sprawdz() {
for( i=1; i <=iloscpytan; i++)
{ 
if ( pytania[i] == klucz[i-1] )
wynik++;
}}

function main() {
pobierz();
sprawdz();
wynikpokaz = Math.round((wynik / iloscpytan)*100); 
alert(wynikpokaz + " % (" + wynik + " odpowiedzi poprawnych)");
wynik = 0;
wynikpokaz = 0;
}
</script>
</head>

<body>
<form name="test" id="test" action="javascript:void(0);" onsubmit="main();">
<p><b>Pytanie 1</b></p>
<input name="pytanie1" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie1" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie1" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie1" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 2</b></p>
<input name="pytanie2" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie2" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie2" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie2" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 3</b></p>
<input name="pytanie3" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie3" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie3" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie3" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 4</b></p>
<input name="pytanie4" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie4" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie4" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie4" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 5</b></p>
<input name="pytanie5" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie5" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie5" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie5" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 6</b></p>
<input name="pytanie6" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie6" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie6" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie6" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 7</b></p>
<input name="pytanie7" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie7" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie7" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie7" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 8</b></p>
<input name="pytanie8" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie8" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie8" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie8" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 9</b></p>
<input name="pytanie9" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie9" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie9" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie9" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 10</b></p>
<input name="pytanie10" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie10" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie10" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie10" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 11</b></p>
<input name="pytanie11" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie11" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie11" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie11" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 12</b></p>
<input name="pytanie12" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie12" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie12" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie12" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 13</b></p>
<input name="pytanie13" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie13" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie13" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie13" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 14</b></p>
<input name="pytanie14" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie14" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie14" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie14" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 15</b></p>
<input name="pytanie15" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie15" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie15" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie15" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 16</b></p>
<input name="pytanie16" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie16" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie16" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie16" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 17</b></p>
<input name="pytanie17" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie17" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie17" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie17" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 18</b></p>
<input name="pytanie18" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie18" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie18" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie18" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 19</b></p>
<input name="pytanie19" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie19" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie19" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie19" value="3" type="checkbox">Odpowiedź trzecia
<p><b>Pytanie 20</b></p>
<input name="pytanie20" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie20" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie20" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie20" value="3" type="checkbox">Odpowiedź trzecia
<br>
<br>
<input type="submit" value="Sprawdź cały test!">

</body>
</html>

slepcu · 25 Luty 2015 20:14

Hej.

Po pierwsze opakuj sobie każde pytanie w kontener, będzie łatwiej nie tylko w przypadku kodu JS.

<div class="question" question-index="1">

<p><b>Pytanie 1</b></p>
<input name="pytanie1" value="0" type="checkbox">Odpowiedź pierwsza
<input name="pytanie1" value="1" type="checkbox">Odpowiedź druga
<input name="pytanie1" value="2" type="checkbox">Odpowiedź trzecia
<input name="pytanie1" value="3" type="checkbox">Odpowiedź trzecia

<input type="button" value="Check!" onclick="CheckQuestion(1)"/>
</div>

a w JS:

function CheckQuestion(qIndex){
   var checkedIndex = jQuery(".question[question-index='"+qIndex+"']:checked").val();
   if (klucz[qIndex] === checkedIndex){
    alert("poprawna odpowiedz");
   }
   else alert("bledna odpowiedz");
}

zaznajom się z jQuery.