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 -->
<figure>
  <div class="wheel">
    <div class="bg-svg">
    <center>
    <div id="fortune">
    <!-- The content here is created/added by the script.  -->
  </div>
<button onclick="myFunction()">Re-spin my fortune</button> <!-- This button lets the user manually re-fire the function -->
  </div>
  </center>
</figure>
  
<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 = 'https://twitter.com/intent/tweet?button_hashtag=vcubrb&text=' + 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="http://greatvcubikeracebook.net">Tweet It!</a></div>';
    document.getElementById("fortune").innerHTML = wrapper;
    //console.log(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.id=id;js.src=p+'://platform.twitter.com/widgets.js';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

One thought on “Bike Race Fortunes Randomizer

Comments are closed.