Script for Online Survey with set of question with options
We need jQuery user interface to get the questions slide from left side to right, however we have used google CDN to link to jQuery library and jQury user interface.
We will display question and the four options, each option is associated with one label. While changing the questions we will change the labels for the options.
First time while loading the page we will read the first question from database and show them the user. Once the user gives the choice by clicking one of the option we will carry the data to backend script.
Here backend script will store the user selected choice along with question number in database and then collect the next question and options to send them back to main script to display to user.
Each question is posted using jquery user interface by sliding from left to right.
We used post method to send data to backend script. We send two pairs of parameter with value to backend script. One is the option or the user choice and the other one is question id ( qst_id ) to identify the question.
First question of the survey will come directly from database, we mean directly because we have collected the first question while the page is loading. Subsequent question are collected from backend script surveyck.php
This is how the first question and its options are collected ( Php script )
After displaying the first question we will wait for the user to give its choice by clicking the radio button. We will fire the jQuery click event of any radio button and will send two parameters to backend script.
One is the question id (qst_id ) and other one is the choice of the user ( opt) .
Now our survey.php page will wait to receive data from backend surveyck.php page. After receiving the data it will fist check if previous question was the last question. If there is no question to display then it will show one Thank You message.
Otherwise it will collect the next question and display. Change the label of all four radio buttons as options as received from backend script.
if(return_data.next=='T'){
$('#q1').html(return_data.data.q1);
$('label[for=opt1]').html(return_data.data.opt1);
$('label[for=opt2]').html(return_data.data.opt2);
$('label[for=opt3]').html(return_data.data.opt3);
$('label[for=opt4]').html(return_data.data.opt4);
$("#qst_id").val(return_data.data.qst_id);
}
else{$('#maindiv').html("Thanks for your views");}
},"json");
Before showing the new question with options it will reset the form so the previous question choice is not remained in checked condition.
$("#f1")[0].reset();
Backend Script surveyck.php
This script receives data from front end script. It gets the question id ( qst_id ) and user selection as opt .
$qst_id=$_POST['qst_id'];
$opt=$_POST['opt']; // User choice
It appends the result to our result table ( poll_answer )
$sql=$dbo->prepare("insert into poll_answer(email,qst_id,opt) values('$_SESSION[email]',$qst_id,:opt)");
$sql->bindParam(':opt',$opt,PDO::PARAM_STR, 50);
$sql->execute();
It increments the variable $qst_id by one and then checks how many numbers of questions are available in database table. If question id ( after incrementing by one ) is set to more than the number of questions then it is time to return thank you message by setting the flag $next='F';
Otherwise let us collect next question from table by using incremented question id and return the same.
$qst_id=$qst_id+1;
$no_questions = $dbo->query("select count(qst_id) from poll_qst")->fetchColumn();
if($qst_id > $no_questions){
$next='F'; // Flag is set to display thank you message
}else{
$next='T'; // Flag is set to display next question
$count=$dbo->prepare("select * from poll_qst where qst_id=$qst_id");
if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);
}
}
Here we assumed that all question id are in incremental order. If it is not the case then you have to check next question from table and based on its availability set the flag to True of False.
The next question with options are posted using JSON data format to our main script ( survey.php )
Result Page : Displaying survey result
We are storing the user choice in a table poll_answer. We can collect the result by grouping them along with options. Here is the sql part to display answer.
select opt, count(ans_id) as no, opt1,opt2,opt3,opt4,qst from poll_answer left join poll_qst on poll_qst.qst_id=poll_answer.qst_id where poll_answer.qst_id=$i group by opt
In the above query $i is the variable which takes values from 1 to 10. We will be showing question id =1 first and then continue till question id =10. To change the value of $i we have used one for loop which starts from $i=1 till $i=10, you can change this number based on the number of questions you have.
for($i=1;$i<=10;$i++){ // loop for 10 questions
...
}
By using a switch statement we are collecting the matching option ( text part ) of each question and storing the number in a variable to add them. This is required to show the total number of choice ( answers )the question collected.
switch ($row['opt']){
case 'option1':
$opt1=$row['opt1'];
$no1=$row['no'];
break;
case 'option2':
$opt2=$row['opt2'];
$no2=$row['no'];
break;
case 'option3':
$opt3=$row['opt3'];
$no3=$row['no'];
break;
case 'option4':
$opt4=$row['opt4'];
$no4=$row['no'];
break;
}
While showing the option it is better to show number along with percentage of total poll to give a better understanding of the answers.
Add skip option so user can go to next question without answering
Above query can be made attractive by adding bootstrap design / style
You may verify the email address before staring the survey. A confirmation mail will be posted to user email address and the user can start the survey only after clicking ( visiting ) the link given in the mail.
Once only survey will be visible for the email id.
User can return and complete the balance questions.
Add category to the questions so one set of questions of a category can be shown in a survey.
Result page can be made attractive by adding bootstrap design / style
How to install and run the survey script
Download the zip file at the end of this page.
Connecting to Database
Open config.php file and update your login and database details. Read here to know more about config.php and pdo connection
Database and Questions,
We have two tables one is to store question (poll_qst) and other one is to store results (poll_answer). Ten sample questions are kept in poll_qst table. Using sql_dump.txt file create your table with sample question.
We kept one registration.php file for user to enter its email address before starting the survey but this is optional. You can open survey.php file and start the survey.
We kept ten questions under one category ( cat_id ) , you can keep different questions under different categories so one set of questions for one survey can be displayed at a time.
JQuery Video Tutorials