Bike Race Fortunes Randomizer

A screenshot of the VCU Bike Race Fortune Webpage

Richmond is going to host this bike international bike race in a few months. The more interesting part, for me anyway, is going to be 25 one credit courses each using the energy and activity of the bike race to power a particular disciplinary/interdisciplinary exploration. In the meantime, we wanted to make a coming soon page and I thought it might be amusing to randomly generate some cycling-related fortunes that could be sent out via Twitter if the person was sufficiently amused.

That’s not a difficult task but it might help someone to see it laid out. The twttr.widgets.load(); was something it took me a bit to realize. You can see it in the script without it the Twitter button didn’t look right.

<body onload="myFunction();"> <!-- This triggers the script when the page loads -->
  <div class="wheel">
    <div class="bg-svg">
    <div id="fortune">
    <!-- The content here is created/added by the script.  -->
<button onclick="myFunction()">Re-spin my fortune</button> <!-- This button lets the user manually re-fire the function -->
<script src='fortune.js'></script> <!-- This is the script where the stuff is done (see lower on this page) -->

The javascript . . .

function myFunction() {
//I erased a number of the fortunes below to make it easier to read. I'll make this data external at some point.
var selectFortune = ["Aerodynamics is important but lycra has limits.",
"The world is round so you don't have to stop pedaling.",
"Selecting a bike is similar to eating turkey: you need a good fork.",
"Get a grip! (On your handlebars.)",
"In a pinch a sprocket can also be used as a ninja star."
//This counts the number of fortunes in the list above 
var fortunes = selectFortune.length;
//This choose a number between 0 and the number of fortunes found
var todaysFortune = selectFortune[Math.floor(Math.random() * fortunes)];
//Here is where the button and fortune display is built using the Twitter API
    var twitterURL = '' + encodeURI(todaysFortune);
    var wrapper = '<div class="large red ribbon"> ' + todaysFortune + '<br/></div><div class="twitter-button"><a href="' + twitterURL + '" class="twitter-hashtag-button" data-size="large" data-related="vcualtlab" data-url="">Tweet It!</a></div>';
    document.getElementById("fortune").innerHTML = wrapper;
    twttr.widgets.load(); //The Twitter button was failing to look like a Twitter button but this fixed it
//This is the default stuff from Twitter        
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

Sources for various elements

Emma made the background image for the page and the wheel.
Dan and Enoch submitted fortunes.
Twitter button fix

Trackbacks and Pingbacks on this post

  1. […] one of our newest staff members, artist/animator Emma Gauthier. Then, there are the Bike Fortunes, a Tom Woodward production. Go ahead, try it. See what bike fortune you […]