Load a different Riddle on your website every day

Introduction

Some of our community had a great idea – around Christmas, they wanted to display a quiz advent calendar, that shows a different quiz from their Riddle account every day.

And our devs never back down from a fun challenge – so they’ve created a small snippet library that lets you define which riddle you want to display on day X and day Y.

Installation

To install this library on your own blog/webpage simply drop the following archive into any directory you choose. If you’re using WordPress we highly recommend the File Manager plugin to make uploading files to blogs easier.

Start by extracting this archive. You should now have the following four files inside your directory:

For this example, we upload this library inside our wordpress root directory under a sub directory called ‘wp-includes/calendar-riddle’.

The next step is to run the PHP script. If you’re running this library on your own custom page it’s as easy as requiring/including a PHP file.

// via require (..)
require 'PATH_TO_FILE/calendar.php';

// OR via include(..)
include 'PATH_TO_FILE/calendar.php';

If you’re running this library on a WP blog we suggest to install the PHP Code for Posts Plugin. Be warned that this plugin could possibly be used to do harm to your site if unwanted users break into your WP dashboard.

After installing the plugin, create a new snippet and add the following lines:

That’s how our setup now looks like:

Our snippet setup inside the “PHP Code for Posts” Plugin

To use this calendar on a page now, you have to insert the shortcode on any of your WordPress pages.

Congratulations! Now you’re all set up to load any of your riddles on any given day on your page.

Adding new riddles

To configure this setup, we have to take a closer look at the file riddle-config.txt:

# syntax: [date] [riddleId]
# date in dd-mm-YYYY format
# e.g. 01-12-2020 123

default 1234567
27-10-2020 123456

Let’s add another riddle to that config. Here’s the link to the riddle I’m going to add: https://www.riddle.com/showcase/129253/quiz

I want this riddle to display on my website on December, 1st 2020. To accomplish that, I simply add the following line to this config:

01-12-2020 129253

That’s it. Here’s the final config:

# syntax: [date] [riddleId]
# date in dd-mm-YYYY format
# e.g. 01-12-2020 123

default 1234567
27-10-2020 123456

Note: You can also use the ‘default’ option instead of a fixed date. This riddle will display whenever there’s no other option available and therefore prevents your page from displaying nothing.