SharePoint Jquery Poll Webpart

First of all full credits to Deepak Virdi here:

http://www.deepakvirdi.com/2016/poll-webpart-using-rest-and-angularjs-in-sharepoint-2013/

I am merely trying to rejig this to create a non Angular alternative to this. You can blindly follow the below steps without asking questions to achieve the result (Questioning my authority will be met by a brutal end – kidding)

Create Two lists –

1. Poll Questions
2. PollLogs

Poll Questions should be configured like this:

And PollLogs

Now add a Content Editor Webpart on the page you want your poll on and link to a text file (SCUKPoll.txt) that contains the following html content (Download the js files online)

 

 

And now the JS file (change just the xxx to your url):

 

$(document).ready(function() {

var url = _spPageContextInfo.webServerRelativeUrl;
$.ajax({
url: “https://xxx.sharepoint.com” + url + “/_api/web/lists/getbytitle(‘Poll%20Questions’)/items?$Select=ID,Title,Answer1,Answer2,Answer3,Answer4,Answer5,CountAnswer1,CountAnswer2,CountAnswer3,CountAnswer4,CountAnswer5&$orderby=ID%20desc&$Top=1”, // ur site url goes here
type: “GET”,
headers: {
“Accept”: “application/json;odata=verbose”
},
success: function(data, textStatus, xhr) {
$.each(data.d.results, function(index, item) {

var pollquestion = item.Title;
//function to check if the user has already voted
CheckVoteExists(pollquestion);

//Display the latest question from the Poll Questions List
$(“p#idname”).text(item.Title);

var Count1 = item.CountAnswer1;
var Count2 = item.CountAnswer2;
var Count3 = item.CountAnswer3;
var Count4 = item.CountAnswer4;
var Count5 = item.CountAnswer5;

var Answer1 = item.Answer1
var Answer2 = item.Answer2
var Answer3 = item.Answer3
var Answer4 = item.Answer4
var Answer5 = item.Answer5
if(Answer1 == null) {
$(“#opt1”).css(“display”,”none”);
$(“#option1”).css(“display”,”none”);
}
else {
$(“label#option1”).text(Answer1);
$(“#opt1”).val(Answer1);
}

if(Answer2 == null) {
$(“#opt2”).css(“display”,”none”);
$(“#option2”).css(“display”,”none”);
}
else {
$(“label#option2”).text(Answer2);
$(“#opt2”).val(Answer2);
}

if(Answer3 == null) {
$(“#opt3”).css(“display”,”none”);
$(“#option3”).css(“display”,”none”);
}
else {
$(“label#option3”).text(Answer3);
$(“#opt3”).val(Answer3);
}

if(Answer4 == null) {
$(“#opt4”).css(“display”,”none”);
$(“#option4”).css(“display”,”none”);
}
else {
$(“label#option4”).text(Answer4);
$(“#opt4”).val(Answer4);
}

if(item.Answer5 == null) {
$(“#opt5”).css(“display”,”none”);
$(“#option5”).css(“display”,”none”);
}
else {
$(“label#option5”).text(Answer5);
$(“#opt5”).val(Answer5);
}

LoadChart(Count1, Count2, Count3, Count4, Count5, Answer1, Answer2, Answer3, Answer4, Answer5);

})
},
error: function r(xhr, textStatus, errorThrown) {
alert(“error:” + JSON.stringify(xhr));
}

});

 

//Function on Clicking the Vote submit button
$(function() {
$(“#submit”).click(function() {

var selection = $(‘input[name=”poll”]:checked’).attr(‘id’);
var userName = $().SPServices.SPGetCurrentUser();
var question = $(“p#idname”).text();

var key = question + “-” + userName;
if (selection == null){
alert(“Please select an option”);
return false;
}
else{
RegisterUserVote(key);
CountNumberOfVotes(selection);
}

});

});
});

//Function to count the number of votes for each poll

function CountNumberOfVotes(SelectionField){

var CurrentURL = _spPageContextInfo.webServerRelativeUrl;
var UpdateAnswerCount = 0;
var UpdateCountColumn;

$.ajax({
url: “https://xxx.sharepoint.com” + CurrentURL + “/_api/web/lists/getbytitle(‘Poll%20Questions’)/items?$Select=ID,Title,Answer1,Answer2,Answer3,Answer4,Answer5,CountAnswer1,CountAnswer2,CountAnswer3,CountAnswer4,CountAnswer5&$orderby=ID%20desc&$Top=1”, // ur site url goes here
type: “GET”,
headers: {
“Accept”: “application/json;odata=verbose”
},
success: function(data, textStatus, xhr) {
$.each(data.d.results, function(index, item) {

var ID = item.ID;

if (SelectionField === “opt1”){
UpdateCountColumn = “CountAnswer1”;
UpdateAnswerCount = item.CountAnswer1;
UpdateAnswerCount = UpdateAnswerCount + 1;
}
else if (SelectionField === “opt2”){
UpdateCountColumn = “CountAnswer2”;
UpdateAnswerCount = item.CountAnswer2;
UpdateAnswerCount = UpdateAnswerCount + 1;

}
else if (SelectionField === “opt3”){
UpdateCountColumn = “CountAnswer3”;
UpdateAnswerCount = item.CountAnswer3;
UpdateAnswerCount = UpdateAnswerCount + 1;

}
else if (SelectionField === “opt4”){
UpdateCountColumn = “CountAnswer4”;
UpdateAnswerCount = item.CountAnswer4;
UpdateAnswerCount = UpdateAnswerCount + 1;

}
else if (SelectionField === “opt5”){
UpdateCountColumn = “CountAnswer5”;
UpdateAnswerCount = item.CountAnswer5;
UpdateAnswerCount = UpdateAnswerCount + 1;

}

$().SPServices({
operation: “UpdateListItems”,
async: false,
batchCmd: “Update”,
listName: “Poll Questions”,
ID: ID,
valuepairs: [[UpdateCountColumn ,UpdateAnswerCount]],
completefunc: function  (xData, Status) {
}
});

})
},
error: function r(xhr, textStatus, errorThrown) {
alert(“error:” + JSON.stringify(xhr));
}
});

}

// Function to Register the user’s vote. The key used is a combination of Question + username

function RegisterUserVote(KeyField) {

$().SPServices({
operation: “UpdateListItems”,
async: false,
batchCmd: “New”,
listName: “PollLogs”,
valuepairs: [[“Title”, KeyField]],
completefunc: function (xData, Status) {
alert(“Thanks for your vote!”);
}
});
}

//Function to load chart

function LoadChart(CountField1, CountField2, CountField3, CountField4, CountField5, AnswerField1, AnswerField2, AnswerField3, AnswerField4, AnswerField5){
// Load google charts
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);

if (AnswerField1 != null){var xAxis1 = AnswerField1.toString();} else {xAxis1 =””;}
if (AnswerField2 != null){var xAxis2 = AnswerField2.toString();} else {xAxis2 =””;}
if (AnswerField3 != null){var xAxis3 = AnswerField3.toString();} else {xAxis3 =””;}
if (AnswerField4 != null){var xAxis4 = AnswerField4.toString();} else {xAxis4 =””;}
if (AnswerField5 != null){var xAxis5 = AnswerField5.toString();} else {xAxis5 =””;}

 

// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Answer’, ‘Vote Count’],
[xAxis1, CountField1],
[xAxis2, CountField2],
[xAxis3, CountField3],
[xAxis4, CountField4],
[xAxis5, CountField5]
]);

// Optional; add a title and set the width and height of the chart
var options = {‘width’:300, ‘height’:250, backgroundColor: ‘#E1D9CB’, legend: {position: ‘none’}};

// Display the chart inside the <div> element with id=”piechart”
var chart = new google.visualization.PieChart(document.getElementById(‘piechart’));
chart.draw(data, options);
}
}

 

//Function to check if the user has already voted for this question, if yes hide the poll and show chart

function CheckVoteExists(QuestionField){

var PolledUser = $().SPServices.SPGetCurrentUser();
var Validate = QuestionField + “-” + PolledUser;

$().SPServices({
operation: “GetListItems”,
async: false,
listName: “PollLogs”,
CAMLViewFields: “<ViewFields><FieldRef Name=’Title’ /></ViewFields>”,
completefunc: function (xData, Status){
$(xData.responseXML).SPFilterNode(“z:row”).each(function(){
var title = ($(this).attr(“ows_Title”));

if(title === Validate) {

$(“#poll-container”).css(“display”,”none”);
$(“#piechart”).css(“display”,”block”);
return false;
}

});
}
});
}

That’s it! You might need some cool css to make it look good. Apart from that it should all be good