projects.wikidot.com: polls.wikidot.com

Hide all comments | Unfold all | Fold all

fold

Refined Code

James Kanjo 1254469693|%e %b %Y, %H:%M %Z|agohover

The problem with Polls @ Wikidot is that it was built directly from a proof-of-concept.

I'm talking about the javascript. I wrote the javascript in a way to produce the quickest possible working solution.

I had the URL structured like so:
/local--code/javascript-file###option-title#option-full-page-name##option2-title#option2-page##poll-question

Frankly, that's a poor programming design.

Because the poll question is more important than the options, it should come first. And having three #s is ridiculous for the first necessary URL appendment.
/local--code/javascript-file#poll-question##option-title#option-page

Also, why would we have the option titles come before the page we're importing? It's more important to import a page than to know its title.
/local--code/javascript-file#poll-question##option-page#option-title

So now the URL is nicely organised, using less characters, better programming and making the URL (more) human-readable.

But there's one more problem: The polls are not customisable — you can't choose the colours or the format of anything.

At first, I thought that this would be achievable by manually specifying elements in the URL:
/local--code/javascript-file#poll-question##option-page#option-title#question-color:red#option-font:ariel

This means frightening programming, specifying options for font styles, decoration, border colours, background colors etc, etc. But then I realised there is a much simpler way: CSS
/local--code/javascript-file#poll-question##option-page#option-title#CSS_URL

So I did that. Here is the default poll CSS, if none is specified in the URL:

body.poll .question {font-size: 190%;}
 
body.poll table {margin: 1em;}
 
body.poll .index {font-weight: bold;}
 
body.poll .option {font-style:italic;}
 
body.poll .votes iframe {padding-bottom: -5px; height: 18px; width: 200px;}
 
body.poll .footer img {margin-bottom: -3px; height: 17px;}

Tragically, however, I was stupid. I went to all this effort to make the poll's CSS customisable, only to realise one thing at the very end: you can't specify the custom CSS when embedding polls. You have permission to laugh.

λ James Kanjo | blog | photos | contact

reply | options

unfold Refined Code by

James Kanjo, 1254469693|%e %b %Y, %H:%M %Z|agohover

fold

Custom CSS... at last!!!!

James Kanjo 1255877675|%e %b %Y, %H:%M %Z|agohover

HOORAY!

I finally got around to fixing the one thing that we all wanted to fix… CUSTOM CSS on POLLS!
…
!!!!!!!

To do this, I had to upgrade the embed code… so if you want to use this extra CSS functionality, then you need to go to the poll you created and copy/paste the updated embed code.

The new embed code allows for appending the URL location of custom CSS for your poll. The appended URL must begin with a hash symbol (#).

body.poll {text-align: center;}
body.poll table {margin: 1em auto;}
body.poll .question {color: #FF0;}

We can use the above CSS code to extend the CSS of our embedded poll like so:

[[embed]]
<iframe src="http://polls.wdfiles.com/local--code/poll:_javascript#poll:best-comedy-ever#http://forum.wikidot.com/local--code/thread:polls-wikidot" scrolling="no" frameborder="0" width="80%" height="260px" style="border-width: 1px; border-style: dotted; border-color: #800; background-color: #55F;"></iframe>
[[/embed]]

To produce this result:

λ James Kanjo | blog | photos | contact

last edited on 1255877935|%e %b %Y, %H:%M %Z|agohover by James Kanjo + show more

reply | options

unfold Custom CSS... at last!!!! by

James Kanjo, 1255877675|%e %b %Y, %H:%M %Z|agohover

fold

Polls @ Wikidot

James Kanjo 1257080992|%e %b %Y, %H:%M %Z|agohover

Finally, we have closure. Voting closure, that is :D

Just tag your poll with _closed, and suddenly voting is disabled in your poll.

I will also take this opportunity to remind you that the ability to "lock" the voting options. So if you remove the _unlocked tag, you essentially disable the ability to add more options to your poll. (Note: closing a poll will also lock the voting options, just as you would expect it to)

λ James Kanjo | blog | photos | contact

reply | options

unfold Polls @ Wikidot by

James Kanjo, 1257080992|%e %b %Y, %H:%M %Z|agohover

fold

Polls @ Wikidot

James Kanjo 1257430226|%e %b %Y, %H:%M %Z|agohover

Today I pushed forward a major bugfix with the Poll application. As it seems, when I last updated the code, I forgot to cater for polls that were already being embedded (i.e. backward compatibility). As off today, both polls from the new embed framework and the old embed framework will display seamlessly. The difference between the two embed codes is that the new code caters for your own custom Poll CSS.

Here is an example of a closed poll. In future, graphed results may be feasible.

λ James Kanjo | blog | photos | contact

reply | options

unfold Polls @ Wikidot by

James Kanjo, 1257430226|%e %b %Y, %H:%M %Z|agohover

Add a new comment

projects.wikidot.com

Wikidot Projects Forum

Watchers

Comments: 4