jQuery.noSpamQuiz.js

A simple jQuery plugin to prevent spammers.

About

This jQuery plugin is based on a Wordpress plugin I stumbled upon, named NRKbeta Know2Comment. It tries to prevent visitors leave comments without actually reading the article first. The idea is very simple but I believe it could be quite powerful.

Before exposing the comment form at the end of the article, it renders a number of pre-defined questions specific to the article it's displayed on. If the visitor answers all the questions correctly, the quiz form would be replaced with the hidden form.

Any user interaction could be bundled with this plugin to ensure participants actually reads the content before they interact with the website.

Usage

The plugin options can also be defined using the data-nospamquiz attribute.

<div id="comment-form-quiz"
  data-nospamquiz='{
    "prize": "#comment-form",
    "questions": [
      {
        "question": "What is the name of the Wordpress plugin author inspired from?",
        "choices": [
          "Disqus",
          "Know2Comment",
          "Gutenberg"
        ],
        "correctAnswer": 1
      },
      {
        "question": "What is the radius of Earth?",
        "choices": [
          "6,371 kilometers",
          "371 kilometers",
          "200 kilometers"
        ],
        "correctAnswer": 0
      }
    ]
  }'></div>
<hr> <!-- this immediate element cannot be used -->
<hr>
<div id="comment-form"><!-- i.e. Comment form --></div>

$('#comment-form-quiz').nospamquiz({
  headlineMarkup: '<h2 class="h4"></h2>',
  headline: 'Jeopardy',
  intro: 'Please answer the following questions to enable the comment form for this post.',
  onComplete: function() {
    alert('Thank you for all the correct answers. Now you can use the comment form.');
  }
});

Options

Option	Type	Default	Description
headlineMarkup	string	<h2></h2>	The quiz header is wrapped with this markup.
headline	string	Quiz	The quiz header text.
introMarkup	string	<p></p>	Introduction text wrapping markup.
intro	string	Please answer the following questions to enable the form.	Introduction text explaining what the quiz is about.
questions	object	[]	Required. JSON object containing the questions.
failureMarkup	string	<p></p>	Failure message wrapping markup.
failure	string	You must answer all questions correctly.	Failure message text
prize	mixed (jQuery selector / jQuery object)	this.$el.next()	The DOM element to be shown upon successful completion. Default is the immediate element in the DOM tree.
onComplete	function	null	Callback function.