Take a Chance with This HTML: Random Messages & Links
I’ve been experimenting with coding web pages that display random text or redirect you to a random webpage. In reality, the text and websites aren’t entirely random. The HTML randomly selects from a list of text messages or a list of URLs. In this post I hope to give you (or your savvy students) some starting points and ideas for making your own HTML that changes each time it’s loaded, clicked, or scanned as a QR code.
Instead of business cards, I give out compliment stickers. Each time you scan the sticker or type in the link it displays one of over 100 different compliments. The compliments I’ve included are really fun or silly. By the way, I print these stickers using my trusty Brother QL-700 Professional Label Printer. It comes with P-Touch Editor software for designing stickers. It’s great that P-Touch Editor has QR code generation built in. If you ever use P-Touch Editor, you can download this file that has my page layout for stickers.
Similar to my compliment stickers, I’ve created a QR code that points to an HTML file that displays one of about 30 different reflection questions. These questions are great for discussions and exit tickets. Read Reflection Facilitated by QR Codes.
Another sticker I like to give out has a QR code that links to an HTML file. That file will redirect you to a random educational app in Apple's App Store. Read more about my random app link.
Similarly, I created a link the redirects to a randomly selected life hack.
The HTML code I use does not require a database–all potential items that might be randomly selected are contained within the HTML code itself.
There are two different kinds of codes I’ll share. The first displays a random message (like a compliment or a reflection question) and the second redirects to a random web address.
Display a Random Message
Not only does this HTML display a random message, it also picks a random color for the background. By changing the text in the sample code, you can create an .html file that displays one of the messages you’ve input.
I’m providing the code in a variety of ways, depending on how you want to work with it.
- Click this link to view, select, and copy the HTML code. Paste into a text editor app and save as .html.
- Download this .html file and open in a text editor.
- Or, you can edit the HTML on CodePen. Follow the link, click Fork, and edit the HTML. After editing you can download an .html file from the Share menu. CodePen can actually host your HTML web page if you create a free CodePen account. After logging in save your forked version of the HTML to your account. You can change the view from Editor to Full Page. Copy and use this Full Page link with others. You can even paste it into a QR code generator for maximum random fun!
If you use a method where you end up with a saved .html file, you have to have this hosted as a webpage online with a web address. (Note: Dropbox is discontinuing the ability to host HTML from your public folder. Dropbox was where I used to host my HTML.)
A free hosting option for HTML is Neocities. After creating a site at Neocities, click to edit the index.html file. Delete the sample text and paste your HTML code. You can add new files and host multiple HTML pages from your one free account.
Neocities DashBoard
After you have a public link, you can paste that link into a QR code generator like goqr.me.
Potential uses for displaying randomly selected text
- Give a random story starter or writing prompt.
- Provide a basic sentence for students to modify with adjectives and adverbs.
- Display a vocabulary word to use in a sentence.
- Show a random question about the topic or lesson as a preview or review.
- Gives parents some questions to ask their students about what they are learning.
Redirect to a Random Web Link
By changing the URLs that are listed in the sample code, you can create an .html file that redirects to one of the links you’ve provided.
I’m providing the code in a variety of ways, depending on how you want to work with it.
- Click this link to view, select, and copy the HTML code. Paste into a text editor app and save as .html.
- Download this .html file and open in a text editor.
- Or, you can edit the HTML on CodePen. Follow the link, click Fork, and edit the HTML. After editing you can download an .html file from the Share menu. CodePen can actually host your HTML web page if you create a free CodePen account. After logging in save your forked version of the HTML to your account. You can change the view from Editor to Full Page. Copy and use this Full Page link with others. You can even paste it into a QR code generator for maximum random fun!
If you use a method where you end up with a saved .html file, you have to have this hosted as a webpage online with a web address. If you have a Public folder in your Dropbox, you can simply place the .html file there and share the file’s public link.
A free hosting option for HTML is Neocities. After creating a site at Neocities, click to edit the index.html file. Delete the sample text and paste your HTML code. You can add new files and host multiple HTML pages from your one free account.
After you have a public link, you can paste that link into a QR code generator like goqr.me.
Potential uses for random links
- Open to a creative app for students to use to show what they know about a topic.
- Link to images that can serve as writing prompts.
- Link to a random slide inside of a Google Slides presentation.
- Have the links go to audio that you’ve recorded! Vocaroo.com is a great place to record audio and get URLs to paste into the HTML file. (Note that Vocaroo stores recording for about 4 months and then automatically deleted them.)
- Have the links go to a random educational video.
- Direct students to a random piece of art and identify art elements, styles, etc.
- Go to a random conference participant’s Twitter page and connect with that individual. Here’s one for Miami Device 2014.
Tips For Making Your Own
- Try using the Editey add-on for Google Drive to edit and save HTML.
- Buy a clever domain name and point it to your hosted .html file URL.
- Don’t want to spend money on a domain name? At least use a custom URL shortener like TinyURL.com or Bitly.com to make the web address easy to type and say. I happen to have my own URL shortener, tonyv.me. Wesley Fryer has a great post about setting up your own URL shortener.
- Feel free to experiment with the code. I'd love to hear about improvements. For example, I'd like the page to adjust to different screen sizes.
- The most common reason the HTML won't work correctly is because of smart quotation marks (those are the ones the curve). The HTML requires quotation marks that are straight, not curved. Be sure the text editor you use does not try to use the smart ones.
- Since it is computer code, be aware that one missing, different, or extra character can cause the whole thing not to work.
- Is modifying HTML and putting it online too technical for you? An option to using code is starting a blog on Tumblr. Make each blog entry have text, an image, or link. To create a URL from a Tumblr blog that will redirect to a random post, add /random to the end of the blog’s web address. For example, deeplifequotes.tumblr.com/random will display a random post from the Deep Life Quotes blog.
- Instead of using HTML or Tumblr, you could try using a Google Sheet to display randomly selected text or links. It can be done, but I don't have a good template for it. The closest I could find is this Random Group Generator.
- GetCoffee.at is another option for selecting from a list of random messages. It's designed as a random name chooser, but instead of names, you can input anything. GetCoffee.at displays all possible selections before you click the Who? button, so it may not be an ideal choice for your purpose. Here's an example.
- Want to learn more about scanning, creating, and printing QR codes? Read my post.
