Mighty Optical Illusions

Random Illusion Hack!

You probably noticed a strange ribbon at the top of the page, in the left upper corner, that says “Random Illusion!”. Well, I think it is wonderful add-on for Mighty Optical Illusions. If you click that button, it will take you to one random illusion from our archives of over 1000 illusion articles.

What is so interesting about it, is that you never know what to expect! I couldn’t stop clicking it, and every time the page loaded, I was surprised seeing illusion I forgot I already posted :) I tried this so many times to see if some articles will re-appear twice, but I never managed. Go ahead, test it and if you get some articles re-appear twice, post in comments. I believe this add-on works in all web browsers. I tested it with Firefox and with Internet Explorer, but just in case I would appreciate if you commented your experience with different resolutions and different browsers. Also, I’m interested in your opinion, if the button is too intrusive. I believe all of you will adore it, but if for some reason many of you dislike this option, I shall remove it.

If you also use blogger platform for blogging, and want to implement “Random post” hack, you can do it easily by following these instructions (continued inside this article)…


1.) First, add the following javascript to your page’s header between head and /head tags. (Template -> Edit HTML):

<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "https://www.moillusions.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>

Make sure to replace the _yourBlogUrl variable with your blog’s URL, and just add the following link anywhere in your page:

<a href="javascript:randomPost();">View Random Post</a>

Since this uses JSON feed callbacks, you’ll need to make sure that you (at the very least) have summary feeds enabled for your blog. Many thanks goes to Janek37 for inspiring me to do this, and providing helpful tutorial.

Exit mobile version