2010-12-16 29 views
5

Czy ktoś ma przykład quizu wykonanego z jQuery, bez przetwarzania wyników po stronie serwera? Po udzieleniu odpowiedzi na pytania wynik pojawia się natychmiast. :)Tworzenie quizu za pomocą jQuery

+2

Wyobrażam sobie, że o wiele łatwiej byłoby uzyskać prawidłowe odpowiedzi, jeśli odpowiedź zostanie uwzględniona po stronie klienta. Wszystko, co musiałby zrobić użytkownik, to View Source. –

+1

To nie jest egzamin, tylko mały quiz bez żadnego wyzwania jako celu. – SAC

+0

woreczek, możesz to zrobić z div, ukryty zakres hiddens podejście prawo? – kobe

Odpowiedz

1

To niby co @gov mówił o, ale w zasadzie to po prostu uchwycić przedstawić w postaci:

<form id="myform" onsubmit="return mySubmitHandler()"> 

Następnie mają funkcję do obsługi wniosków:

function mySubmitHandler() 
{ 
    // the following are just examples of what you could do 
    var q1val = jQuery('#q1').val(); 
    var q2val = jQuery('#q2').val(); 
    if(q1val + q2val > 5) 
     jQuery('#success').show(); 
    else 
     jQuery('#fail').show(); 
    // end example 
    return false; // this keeps the form from doing a postback 
} 
2

Oto przykład ułatwiający dodawanie kolejnych pytań po początkowym javascript:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("p").hide(); 
    }); 
}); 

$(document).ready(function(){ 
    var a = $(".question"); 
    a.each(function(index) { 
    var flip = $(this).find(".flip"); 
    var panel = $(this).find(".panel"); 
    flip.click(function(){ 
     panel.slideDown("slow"); 
    }); 
    }); 
}); 
</script> 
<style type="text/css"> 
div.panel,div.flip 
{ 
    margin:0px; 
    padding:5px; 
    text-align:center; 
    background:#e5eecc; 
    border:solid 1px #c3c3c3; 
    width:140px; 
} 

div.panel 
{ 
    display:none; 
} 
div.question 
{ 
    float:left; 
} 
div.questions 
{ 
    height: 80px; 
} 
</style> 
<title>Javascript sample</title> 
</head> 

<body> 

<p>1) How many bits are in a byte?</p> 
<div class="questions"> 

<div class="question"> 
<div class="panel">Wrong</div> 
<div class="flip">7</div> 
</div> 

<div class="question"> 
<div class="panel">Right</div> 
<div class="flip">8</div> 
</div> 

</div> 

</body> 
</html> 
+0

Jednym dużym problemem jest to, że odpowiedzi są bardzo łatwe do wykrycia. Jeśli były zaszyfrowane lub załadowane z pliku zewnętrznego w jakiś sposób ... – fiacobelli

-3

Hej, jeśli szukasz gotowego skryptu, możesz skorzystać z tego linku: www.thetutlage.com/downloads .. stąd możesz pobrać skrypt quizu. Działa na php, ajax i jquery, a także posiada panel administracyjny, w którym możesz tworzyć wiele quizów.

kocham i wierzę, że ci się spodoba to aswell

+0

Link jest zbyt szeroki, quiz wydaje się już nie być dostępny, albo zaktualizuj link lub usuń wpis. W tej chwili wygląda jak wpis spamu łączący się z witryną. – iOS

+0

Prawda, bezużyteczne w tej chwili, daj mi znać, jeśli wpis został zaktualizowany. –

+0

To jest martwy link. Tak więc ta odpowiedź nie jest zbyt pomocna. –

2

Sprawdź ten link do tworzenia Jquery quiz using Google Docs. Samodzielne obliczanie wyników, które natychmiast wyświetla wynik użytkownikom. Trochę animowane również.