Project Euler Widget

Here’s a little widget I developed to show the ProjectEuler score on any web page, like the one seen on the right side of this page. To use it on your web page or blog, all you have to do is to insert the following snippet.

<script src="http://www.geekraj.com/euler/euler.js"
         type="text/javascript"> </script>
<script>
   var es = new EulerScore('rmadhuram');   // replace with your id.
</script>

How does it work?

The script first generates the HTML markup required for displaying the score (including the “loading..” image). After that, it communicates with my server (geekraj.com) to get the score for the specified id. Normally, browsers enforce Same Origin Policy, and hence would not be able to make a connection to my server. However, there are a few ways around it. I used a technique called dynamic script tag generation.

On the backend, I run a PHP script which logs into projecteuler.net and retrieves the score for the given id. To make it easy on their server, I also do some caching. So please note that the updates are delayed by 10 minutes.

Further Development

I’m planning to add more features like level display, style customization etc. The release timeline for this would depend on the spare time I have and how many people need it. Your feedback would be greatly appreciated!

6 Replies to “Project Euler Widget

  1. Wow… The sample questions on project Euler looks like msft interview questions to me :) only more tougher. I will see if i can solve at least 1 to begin with.

  2. Hi, thanks for the widget!

    I thought that it would be cool for it to show levels, so I created a simple modification which now shows a small image corresponding to your level next to the displayed score.

    You can see how it looks and works by going to http://houbysoft.com/en/about.php and scrolling down on the page, that is where my badge is displayed.

    To use it, just replace http://www.geekraj.com/euler/euler.js with http://houbysoft.com/scripts/euler.js in the original code, so you would write this:

    var es = new EulerScore('houbysoft'); // replace with your id.

    @rmadhuram : I am of course open to you adapting my patch and replacing your euler.js with mine, only please keep the note in the source and give me a small mention somewhere :) Thanks a lot for running the backend and making the original code!

    Feedback is welcome.

  3. Thanks Jan! It looks awesome. I had it on my roadmap, but you beat me on this one :) I can open up a repository in sourceforge or something so we can collaborate and have more nice additions.

    Regards,
    Raj

  4. Hi Tarsis, thanks for your feedback and sorry for the late reply.
    Here is the secret sauce – From a php script, I periodically login using my euler credentials and scrape the scores from profile page and store it in a file cache. When page renders, if the cache is expired, I re-scrape, otherwise display the one in cache.

    Thanks,
    Raj

Leave a Reply

Your email address will not be published. Required fields are marked *