Advertise here with BSA

In this tutorial, we'll be creating an Ajax Poll Script that displays the results with colored and animated lines using PHP, MySQL and jQuery.

The script has a pretty easy logic and can be implemented into any website quickly by simply calling a php function like getPoll(2) which brings the second poll.

The code has 3 parts: HTML, JavaScript (jQuery) and PHP. Let's start with the easiest one:

HTML

The HTML for the poll is generated within the PHP function which is usually nice as it is only a 1-line-code and doesn't create a visual pollution in the overall HTML.

<div id="pollWrap">
    <form name="pollForm" method="post" action="inc/functions.php?action=vote">
        <h3>Poll Question 1</h3>
        <ul>
            <li>
                <input name="pollAnswerID" id="pollRadioButton1" value="1" type="radio">
                Answer1 for Poll1
                <span id="pollAnswer1"></span>
			</li>
            <li class="pollChart pollChart1"></li>
            <li>
                <input name="pollAnswerID" id="pollRadioButton2" value="2" type="radio">
                Answer2 for Poll1
                <span id="pollAnswer2"></span>
            </li>
            <li class="pollChart pollChart2"></li>
        </ul>
        <input name="pollSubmit" id="pollSubmit" value="Vote" type="submit">
        <span id="pollMessage"></span>
        <img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader">
    </form>
</div>

There is nothing original here. In one of the list items, we mention the answer and provide a unique ID for it which matches that answer's answerID in the database. For the other list item, we reserve it for the colored line, again by giving it the unique ID.

PHP

We first include our db connection file and handle the posted items from the Ajax requests

require("db.php");
//GETTING VARIABLES START
$action 		= mysql_real_escape_string($_POST['action']);
$pollAnswerID	= mysql_real_escape_string($_POST['pollAnswerID']);
//GETTING VARIABLES END

After that, create the function getPoll which simply loops through the database and creates the HTML for the poll mentioned above.

function getPoll($pollID){
	$query  = "SELECT * FROM polls LEFT JOIN pollAnswers ON polls.pollID = pollAnswers.pollID WHERE polls.pollID = " . $pollID . " ORDER By pollAnswerListing ASC";
	$result = mysql_query($query);
	//echo $query;jquery

	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		$pollQuestion 		= $row['pollQuestion'];
		$pollAnswerID 		= $row['pollAnswerID'];
		$pollAnswerValue	= $row['pollAnswerValue'];

		if ($pollStartHtml == '') {
			$pollStartHtml 	= '<div id="pollWrap"><form name="pollForm" method="post" action="inc/functions.php?action=vote"><h3>' . $pollQuestion .'</h3><ul>';
			$pollEndHtml 	= '</ul><input type="submit" name="pollSubmit" id="pollSubmit" value="Vote" /> <span id="pollMessage"></span><img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader" /></form></div>';
		}
		$pollAnswersHtml	= $pollAnswersHtml . '<li><input name="pollAnswerID" id="pollRadioButton' . $pollAnswerID . '" type="radio" value="' . $pollAnswerID . '" /> ' . $pollAnswerValue .'<span id="pollAnswer' . $pollAnswerID . '"></span></li>';
		$pollAnswersHtml	= $pollAnswersHtml . '<li class="pollChart pollChart' . $pollAnswerID . '"></li>';
	}
	echo $pollStartHtml . $pollAnswersHtml . $pollEndHtml;
}

This getPollID function below is for easily getting the ID of the related polls by providing an answerID:

function getPollID($pollAnswerID){
	$query  = "SELECT pollID FROM pollAnswers WHERE pollAnswerID = ".$pollAnswerID." LIMIT 1";
	$result = mysql_query($query);
	$row = mysql_fetch_array($result);

	return $row['pollID'];
}

And, the getPollResults function which is kinda tricky but not that much.

When ran, it returns a string like: 1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's animated line.

The last number is the sum of all points for easily calculating percentages.

The string is parsed in the JavaScript side later on.

function getPollResults($pollID){
	$colorArray = array(1 => "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099", "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099");
	$colorCounter = 1;
	$query  = "SELECT pollAnswerID, pollAnswerPoints FROM pollAnswers WHERE pollID = ".$pollID."";
	$result = mysql_query($query);
	while($row = mysql_fetch_array($result))
	{
		if ($pollResults == "") {
			$pollResults = $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
		} else {
			$pollResults = $pollResults . "-" . $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
		}
		$colorCounter = $colorCounter + 1;
	}
	$query  = "SELECT SUM(pollAnswerPoints) FROM pollAnswers WHERE pollID = ".$pollID."";
	$result = mysql_query($query);
	$row = mysql_fetch_array( $result );
	$pollResults = $pollResults . "-" . $row['SUM(pollAnswerPoints)'];
	echo $pollResults;
}

The last PHP code is the voting part which also sets a cookie:

if ($action == "vote"){

	if (isset($_COOKIE["poll" . getPollID($pollAnswerID)])) {
		echo "voted";
	} else {
		$query  = "UPDATE pollAnswers SET pollAnswerPoints = pollAnswerPoints + 1 WHERE pollAnswerID = ".$pollAnswerID."";
		mysql_query($query) or die('Error, insert query failed');
		setcookie("poll" . getPollID($pollAnswerID), 1, time()+259200, "/", ".webresourcesdepot.com");
		getPollResults(1);
	}
}

jQuery (JavaScript)

It is only an Ajax request that posts the selected answer to the PHP code, gets the string in return, parses it and makes some show/hide tricks for displaying and hiding the messages or loaders.

Here it is:

$(document).ready(function() {   

	$("#pollAjaxLoader").hide(); //hide the ajax loader
	$("#pollMessage").hide(); //hide the ajax loader
	$("#pollSubmit").click(function() {
		var pollAnswerVal = $('input:radio[name=pollAnswerID]:checked').val();//Getting the value of a selected radio element.
		if ($('input:radio[name=pollAnswerID]:checked').length) {
			$("#pollAjaxLoader").show(); //show the ajax loader
			$.ajax({
				type: "POST",
				url: "inc/functions.php",
				data: { pollAnswerID: pollAnswerVal, action: "vote" },
				success: function(theResponse) {
					//the functions.php returns a response like "1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's graph. The last number is the sum of all points for easilt calculating percentages.
					if (theResponse == "voted") {
						$("#pollAjaxLoader").hide(); //hide the ajax loader
						$("#pollMessage").html("sorry, you already voted.").fadeTo("slow", 1);
					} else {
						var numberOfAnswers 		= (theResponse).split("-").length-2;//calculate the number of answers
						var splittedResponse 		= (theResponse).split("-");
						var pollAnswerTotalPoints 	= splittedResponse[numberOfAnswers+1];

						for (i=0;i<=numberOfAnswers;i++)
						{
							var splittedAnswer 		= (splittedResponse[i]).split("|");
							var pollAnswerID 		= (splittedAnswer[0]);
							var pollAnswerPoints 	= (splittedAnswer[1]);
							var pollAnswerColor 	= (splittedAnswer[2]);
							var pollPercentage		= (100 * pollAnswerPoints / pollAnswerTotalPoints);
							$(".pollChart" + pollAnswerID).css("background-color",pollAnswerColor);
							$(".pollChart" + pollAnswerID).animate({width:pollPercentage + "%"});
							$("#pollAnswer" + pollAnswerID).html(" (" + Math.round(pollPercentage) + "% - " + pollAnswerPoints + " votes)");
							$("#pollRadioButton" + pollAnswerID).attr("disabled", "disabled"); //disable the radio buttons
						}
						$("#pollAjaxLoader").hide(); //hide the ajax loader again
						$("#pollSubmit").attr("disabled", "disabled"); //disable the submit button
					}
				}
			});
			return false; 

		} else {
			$("#pollMessage").html("please select an answer.").fadeTo("slow", 1, function(){
				setTimeout(function() {
					$("#pollMessage").fadeOut("slow");
				}, 3000);
			});
			return false;
		}

	});

});

The JavaScript code is well-commented and is pretty self-explanatory. Don't let the number of lines afraid you, most of them are just the make-up.

That's all.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

quizzy is an open source PHP-Ajax library for creating online multiple-choice quizzes.

It uses XML files for configuring the questions/answers of every quiz where each question and answer can have a true/false or a point value.

All data is loaded via Ajax which makes it impossible to view the future questions or answers of them inside the source.

Questions can have an explanation text once an answer is submitted. And also, images can be used within questions and answers.

After the quiz is completed, it displays your calculated score and grade (optionally, with an image for every grade).

There is also an online quizzy builder, an online form which helps you creating the XML files easily.

quizzy uses jQuery and the jQuery loader plugin for notifying users in every Ajax request.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Flabell is presenting another handy resource for creating Flash-XML based survey with multiple questions.

An unlimited number of questions & a variable number of answers can be added by simply editing the XML file.

When users select an answer, they can pass to the next question & all answers are stored inside the XML file for visualizing them later (not included within the code).

P.S. Download requires a free membership.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

XML Flash Voting Poll is a free component for creating nice looking Flash-based polls.

It is built with AS3 & supports one active poll with an unlimited number of answers.

Many variables can be controlled in the XML files like:

• the question’s height, text, color, size
• background colors used
• distances between items
• messages displayed after voting & more

The download package includes images (.AI & .PDF) & fonts used.

P.S. Free membership is required for downloading the component.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Dracon Ajax Poll is a free PHP-MySQL-Ajax poll script which is simply beautiful.

The script is totally skinnable, has multi-language support & can also use XML as the data source rather than MySQL.

Once an option is voted, total votes are displayed with a charming effect.

It records the IPs used in order to prevent repeated-votes as a security measure.

At the backend, there is again a totally Ajaxed admin interface which is easy to use.

It is possible to add unlimited polls & unlimited options to any poll, edit & delete them.

P.S. The script is free once a backlink is kept.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Zoki Poll is a free PHP – Ajax poll script that stores data in a XML file.

It has flexible display options for integrating the poll in limited spaces like horizontal scrolling long question & answers or vertical scrolling of answers.

Vote results are displayed with a nice, animated percentage bar & the look of the poll can be easily changed via CSS.

To prevent duplicate voting, Zoki Poll has a cookie-based protection system.

This Ajax poll script does not have an administration interface & it is a nice piece of code if you’re ready to integrate it yourself.

P.S. Downloading the script requires free registration.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

LimeSurvey is an open source PHP survey application which has almost every feature you may need.

It enables you to create conditional (questions change depending on the previous answers), open/close group surveys with e-mail invitations, reminders & more.

This PHP survey application is completely multilingual and currently supports 46 languages. Any survey can be created to support more than 1 language.

Templates can be created and any survey can be choosen to work with that template to match the design of the websites.

Some features of LimeSurvey:

• Unlimited number of surveys at the same time
• Unlimited number of questions in a survey
• Unlimited number of participants to a survey
• Multi-Lingual Surveys
• User-Management
• 20 different question types with more to come
• WYSIWYG HTML Editor
• Quotas Management
• Integration of pictures and movies into a survey
• Creation of a printable survey version
• Option for participants to buffer answers to continue survey at a later time
• Survey expiry dates for automation
• Enhanced import and export functions to text, CSV, PDF, SPSS, queXML and MS Excel format
• Basic statistical and graphical analysis with export facility
• Screen Reader Accessiblity
• W3C compliance

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

AskPeople is a free PHP survey application that is simple but functional.

It supports most of the entry options with checkboxes, radio buttons, textboxes, textareas &  dropdowns. Using AskPeople, a complicated survey can be created in minutes.

AskPeople has a template system where a new design can be implemented for the surveys to match the look of your website.

Some features of this free PHP survey application:

• Secure, multi-user admin interface.
• Unlimited, completely flexible templates.
• Built in file manager.
• Multipage surveys using pagebreaks between groups of questions.
• Make any question ‘required’ to ensure respondents complete it.
• Optional cookie-based protection against repeated submission of forms.
• Plain-text questionnaire export.
• Raw data editor.
• One-click project backup.

This is a handy application for creating & managing a job application form or making a market research & more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)