Created
September 26, 2013 00:43
-
-
Save Aupajo/6708312 to your computer and use it in GitHub Desktop.
Simple jQuery multiple-choice quiz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Simple Quiz</title> | |
| </head> | |
| <body> | |
| <form action="/success-page" class="simple-quiz"> | |
| <h3>Question 1</h3> | |
| <label> | |
| <input type="radio" name="answers[1]" value="A"> | |
| Answer A | |
| </label> | |
| <label> | |
| <input type="radio" name="answers[1]" value="B"> | |
| Answer B | |
| </label> | |
| <label> | |
| <input type="radio" name="answers[1]" value="C" data-correct> | |
| Answer C | |
| </label> | |
| <h3>Question 2</h3> | |
| <label> | |
| <input type="radio" name="answers[2]" value="A"> | |
| Answer A | |
| </label> | |
| <label> | |
| <input type="radio" name="answers[2]" value="B" data-correct> | |
| Answer B | |
| </label> | |
| <label> | |
| <input type="radio" name="answers[2]" value="C"> | |
| Answer C | |
| </label> | |
| <input type="submit"> | |
| <form> | |
| <script src="jquery.js" type="text/javascript"></script> | |
| <script src="jquery.simpleQuiz.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| $('.simple-quiz').simpleQuiz(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $.fn.every = function(callback) { | |
| var numElements = this.length; | |
| return this.filter(callback).length == numElements; | |
| }; | |
| $.fn.simpleQuiz = function(options) { | |
| if(!this.length) { return; }; | |
| this.each(function() { | |
| var form = $(this); | |
| var submitButton = form.find(':submit'); | |
| var questions = form.find('.question'); | |
| var choices = form.find(':radio'); | |
| var init = function() { | |
| choices.on('change', answerChanged); | |
| form.on('submit', answersSubmitted); | |
| answerChanged(); | |
| }; | |
| var answersSubmitted = function(event) { | |
| if(!hasPassed()) { | |
| event.preventDefault(); | |
| alert('Please try again.'); | |
| } | |
| }; | |
| var score = function() { | |
| return form.find(':checked[data-correct]').length; | |
| }; | |
| var hasPassed = function() { | |
| return score() == questions.length; | |
| }; | |
| var hasCheckedElement = function() { | |
| return $(this).has(':checked').length; | |
| }; | |
| var allQuestionsAnswered = function() { | |
| return questions.every(hasCheckedElement); | |
| }; | |
| var answerChanged = function() { | |
| if(allQuestionsAnswered()) { | |
| submitButton.removeAttr('disabled'); | |
| } else { | |
| submitButton.attr('disabled', 'disabled'); | |
| } | |
| }; | |
| init(); | |
| }); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@xbbnq7k That'll be because you're running the page in a browser (e.g. the URL is
file://). This script assumes you're running on an HTTP server (e.g.http://mysite.com/formwith somehttp://mysite.com/success-pageroute capable of handling the data.