Stopping Comment Spam In Your Webpage - jQuery noSpamQuiz.js

File Size: 20.8 KB
Views Total: 1205
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stopping Comment Spam In Your Webpage - jQuery noSpamQuiz.js

noSpamQuiz.js is a jQuery plugin to stop comment spam in your website that automatically hides and reveals the comment form depending on whether the visitor answered the correct question(s). Similar to the Captcha Verification.

The plugin also has the ability to store the user input into local storage and directly display the comment form on next visit.

How to use it:

1. Put the minified version of the jQuery noSpamQuiz.js plugin after you've loaded the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.nospamquiz.min.js"></script>

2. Define your own questions, options and correst answers as follows:

<div id="comment-form-quiz"
      data-nospamquiz='{
        "prize": "#comment-form",
        "questions": [
          {
            "question": "Question 1",
            "choices": [
              "Option 1.1",
              "Option 1.2",
              "Option 1.3"
            ],
            "correctAnswer": 2
          },
          {
            "question": "Question 2",
            "choices": [
              "Option 2.1",
              "Option 2.2",
              "Option 2.3"
            ],
            "correctAnswer": 0
          }
        ]
      }
'></div>

3. Embed your comment form into a container.

<div id="comment-form">Comment Form Here</div>

4. Enable the plugin and done.

$('#comment-form-quiz').nospamquiz();

5. All default confiuration options.

$('#comment-form-quiz').nospamquiz({
  headlineMarkup: "<h2></h2>",
  headline: "Quiz",
  introMarkup: "<p></p>",
  intro: "Please answer the following questions to enable the form.",
  questions: [], // questions here
  failureMarkup: "<p></p>",
  failure: "You must answer all questions correctly.",
  prize: this.$el.next(),
  onComplete: null // executed when you typed correct answers
});

This awesome jQuery plugin is developed by gormus. For more Advanced Usages, please check the demo page or visit the official website.