Creating an Instant Poll

Say you are writing a blog article and would like to poll your readership about a topic. Here is a quick way of creating a poll on your blog.

Would you consider using <angular/> on you next project?

{{ {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100 }}

Here is the explanation on how to do it in your Blog.

First, sign up with <angular/> http://www.getangular.com

Second, create a library and a database where to store your data on <angular/>. In our case the library is “angular” and the database is “blogdb”. (If you do view source on this page than you will be able to see the script tag)

Third, enter this text in you blog or on any place where you can host HTML.

<script type="text/javascript"
  src="http://angular.getangular.com/angular-1.0a.js#database=blogdb">
</script>
<div ng-entity="Poll:{yes:0, no:0}">
<div ng-entity="Poll:{yes:0, no:0}"> Would you consider using <a href="http://www.getangular.com">&lt;angular/&gt;</a> on you next project? <div ng-hide="poll"> <ul> <li> <a href="" ng-action="Poll.loadOrCreate('useAngular', {:$.yes=$.yes+1;$.$save({:$root.poll=$})})"> Yes </a> </li> <li> <a href="" ng-action="Poll.loadOrCreate('useAngular', {:$.no=$.no+1;$.$save({:$root.poll=$})})"> No </a> </li> </ul> </div> <div ng-show="poll"> {{ {series:[{label:['Yes','No'], values:[poll.yes,poll.no]}]} | chart.pie3d:200:100 }} </div> </div>

Here is an explanation of how it works

  • ng-entity=”Poll:{yes:0, no:0}”: declares an entity ‘Poll’ in the database. A new entity will have a yes and no fields both initialized to 0.
  • ng-hide=”poll”/ng-show=”poll”: At first the variable poll is not defined so the first half of the page is displayed.  After the user votes the result of the vote is stored in poll variable which causes the question to hide and the poll result to show.
  • ng-action=”Poll.loadOrCreate(’useAngular’, {: $.yes=$.yes+1; $.$save({:$root.poll=$})})”: Clicking on the Yes/No will load (or create) a document with id “useAngular”. Once the document is loaded it will increment the yes/no property and save the document. Upon successful save the
  • {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100: Display a 3D pie chart with yes and no ratio

Leave a Reply