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(); | |
| }); | |
| }; |
@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/form with some http://mysite.com/success-page route capable of handling the data.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After clicking 'Submit', it throws File not found error in 'file:///success-page?answers%5B1%5D=B&answers%5B2%5D=C'