Part 1: Building my peer review skills survey

Screen Shot 2014-02-03 at 7.01.14 PM

 

Okay, so I knew this wasn’t going to be easy…

 

But I had no idea of the adventures in coding that I would be subjected too!

For the record, I don’t consider myself to be a web-programmer. But I am tenacious and enjoy a good challenge.

 

The goals of my project:

 

  • Create a simple extensible web-based survey form that can be easily modified in the future
    Connect the resulting database to my website using an API
    Display the results in the the meter gauges on my website
    Allow a user to enter a password to access the survey form 

 

Sounds simple right? Well before I give you an account of my adventure, you’d better pour yourself a coffee and settle in…

 

First, I needed to find a commercial web-based survey system that would allow me to design a web survey for people. It needs to include a simple form based web-design interface to construct the survey form, and automatically build the resulting database to store the results. It also needs an application programming interface (API) to allow me to fetch the results for display in my web site. And it needs to be free!

 

After playing with a few tools, I settled on Wufoo which was acquired a couple of years ago by Survey Monkey. I liked the ease with which I could design a form and it includes an API for external access.

 

Screen Shot 2014-02-03 at 7.13.14 PM

 

Next, I needed to build the survey form. This involves a fair amount of research into the skills I have selected. I won’t digress right now into why I selected these specific skills, but I will write another Blog post devoted to the issue. Once I decided on a brief description, I needed to figure out the best way to have users enter a rating. I settled on a 10 point Likert scale.

 

I created the form in no time at all. This is the advantage of using a commercial system instead of building a custom form from scratch and populating a database with the results. One of the goals was to be able to easily customize the system in the future, so Wufoo seemed like the best option.

 

I’d only been on the project for a few hours and I was thrilled with what I had accomplished! The next step was to dive into the API and figure out how to extract the results. This is where things started to get a bit more complex. The documentation on the Wufoo site used examples written in PHP. So I decided to roll up my sleeves and delve into PHP.

 

The principle works like this: Connect to the API from my site and call a function to retrieve the database results. These results can be stored in a variable that I define, and then I can parse through the variable to extract data. With Wufoo, you have the choice of returning data as either XML or JSON. I chose XML because there are a lot of examples on the web of XML parsing using PHP. I figured this would come in handy.

 

The PHP code to connect to the database looks like this:

 

<?php $curl = curl_init(‘https://conorhearn.wufoo.com/api/v3/forms/z1sa59ug0sji3px/entries.xml’); 

curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_USERPWD, ‘APIKEY:footastic’);
curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_USERAGENT, ‘Wufoo Sample Code’);

$wufoodata = curl_exec($curl);
$resultStatus = curl_getinfo($curl);

 

The first thing we see here is the curl_init() function that allows us to authenticate ourselves and call a function. In this case we are calling “entries.xml”. The curl_setopt() lines set all of the parameters that the call will need to connect and return the data successfully.

 

Next I create a variable $wufoodata and call the curl_exec($curl) function. I pass the connection string from above in the $curl variable as an argument. I also define $resultStatus variable to get the success status of the function by calling the function curl_getinfo($curl).

 

That’s it! I now have a variable ($wufoodata) that holds the results from all of the surveys. When I display the contents of the variable on the screen this is what it contains:

 

<Entries>

    <Entry>

        <EntryId>2</EntryId>

        <Field412>90%</Field412>

        <Field712>70%</Field712>

        <Field612>80%</Field612>

        <Field512>100%</Field512>

        <DateCreated>2014-01-29 18:11:39</DateCreated>

        <CreatedBy>public</CreatedBy>

        <DateUpdated/>

        <UpdatedBy/>

    </Entry>

    <Entry>

        <EntryId>3</EntryId>

        <Field412>90%</Field412>

        <Field712>70%</Field712>

        <Field612>90%</Field612>

        <Field512>100%</Field512>

        <DateCreated>2014-01-29 18:14:26</DateCreated>

        <CreatedBy>public</CreatedBy>

        <DateUpdated/>

        <UpdatedBy/>

    </Entry>

    <Entry>

        <EntryId>4</EntryId>

        <Field412>60%</Field412>

        <Field712>70%</Field712>

        <Field612>80%</Field612>

        <Field512>90%</Field512>

        <DateCreated>2014-01-29 19:43:59</DateCreated>

        <CreatedBy>public</CreatedBy>

        <DateUpdated/>

        <UpdatedBy/>

    </Entry>

 

Basically, The Entry tag is like a database record and Fieldxxx tags hold the actual data. So next, things get a bit more tricky. Basically, I need to parse through the XML and extract all of the values on a field by field basis. I need to assign the numeric integer portion of these results to an array and then sum the array. You’ll notice that each entry above includes the % sign. This will complicate things when I need to do the math because it will be treated as a string value instead of an integer.

 

To make things efficient, I decide the best way to do this is to create a function and then pass in the field name I want to get data from. It will pass back a variable with the average of the results held in field.

 

The first part of this is to use a plugin component to help parse the data. So I create a new variable $xml to store the results of the SimpleXMLElement() function. Then I define my function GetMySkills() and pass in the name of the field I want to query and the $xml variable.

 

$xml = new SimpleXMLElement ($wufoodata);

function GetMySkills($arg1,$xml){
    $myresults = array();
    foreach ($xml->Entry as $Entry){array_push($myresults,(int)$Entry->$arg1);}
    $FieldVal = (int) (array_sum($myresults) / count($xml->children()));
    return $FieldVal;

}

 

Inside the function the first thing I do is define the array(). This is where I will store the results of each record. Next, I create a loop using the foreach() construct. This will allow me to loop through the XML iteratively and assign the integer portion to the array. I use the (int) function to convert the results from a string to an integer.

 

Finally, I need to call the function array_sum() and pass in my array. This will return the total number for all the results added together. I then divide using the count() function and request a count of the children nodes in the XML which is the total number of records database. I assign this to a new variable called $FieldVal. The last line of the function tells the function to return the contents of the variable $FieldVal when the function is called.

 

Now that I have my function GetMySkills() I can insert it into the HTML in my web site. In fact, all of this code is in the page “About Me” on my site. It takes a total of 15 lines at the top of the page. The code to set the actual meter values is as follows:

 

Screen Shot 2014-02-03 at 7.06.33 PM

 

Normally, the Shortcode is followed by a number which allows it to create a nice gauge. In my case, I’m inserting my php function GetMySkills() and passing in the name of the field I want to get the data for. The piece that eluded me for a long time was the echo command that gets the output. Without it the code doesn’t return a value. But once I figured it out, I succeeded in providing a live result of the average from each database field.

 

Screen Shot 2014-02-03 at 6.38.34 PM 

Okay, simple right? Well how’s working to 4am two nights straight and pulling out giant clumps of hair? I can’t tell you how much reading, testing, failing, more reading, more testing, more failing… was involved. But at the end I had the excitement and satisfaction that I had accomplished it!

 

But in reality, this was just the start! Things were about to become much more hairy!!!

 

Click here to join me in Part 2 for a look at the Modal survey form.

 

 

 

 

 

Leave a comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>