Building a Quiz Generator Plugin for WordPress

Posted on 15th June 2023

In this article, we’re going to be building a quiz generator plugin for WordPress. This plugin will allow you to create quizzes and embed them into your WordPress posts and pages.

Getting Started

The first thing you’ll need to do is install and activate the plugin. You can do this by downloading the plugin files from the WordPress Plugin Directory and uploading them to your WordPress site.

Once the plugin is activated, you’ll need to create a quiz. To do this, go to the Quizzes page in the WordPress admin area and click the “Add New” button.

Creating a Quiz

Creating a quiz is easy. Simply enter a title for your quiz, and then start adding questions.

For each question, you’ll need to enter a question text, and then provide a list of answers. You can also add an image to each question, if you’d like.

When you’re done, click the “Publish” button to publish your quiz.

Embedding a Quiz in a Post or Page

Once you’ve created a quiz, you can embed it in any post or page on your WordPress site. To do this, simply copy the quiz’s shortcode and paste it into the post or page where you want the quiz to appear.

Conclusion

That’s all there is to creating and embedding quizzes in WordPress! With this plugin, you can easily add quizzes to your WordPress site to engage your visitors and get them interacting with your content.

In this part, we’ll be creating the front-end of our plugin. We’ll start by creating a shortcode that we can use to insert the quiz into any post or page on our WordPress site.

Creating the [quiz] Shortcode

We’ll start by creating a new file in our plugin’s directory called quiz-shortcode.php . In this file, we’ll write a function that outputs the HTML for our quiz. This function will take two arguments:

$atts: an array of attributes that can be passed to the shortcode.
We’ll use this to specify the number of questions to include in the quiz (we’ll default to 10 if no value is specified).
$content: the content that is enclosed by the opening and closing [quiz] tags.
We’ll use this to specify the title of the quiz (if no title is specified, we’ll just use the default “Quiz”).

Here’s the code for our function:

function quiz_shortcode( $atts, $content = null ) {
// extract attributes into variables
extract( shortcode_atts(
array(
‘num_questions’ => 10
),
$atts
) );

// set up variables we’ll need in the view
$questions = get_questions( $num_questions );
$answers = get_answers();

// load the view
ob_start();
include plugin_dir_path( __FILE__ ) . ‘views/quiz.php’;
return ob_get_clean();
}
add_shortcode( ‘quiz’, ‘quiz_shortcode’ );

As you can see, our function does three things:

Extracts the attributes passed to the shortcode.
Gets the questions and answers from the database.
Loads the quiz.php view file and returns the output.

We’ll go into more detail on each of these steps below.

Extracting the Shortcode Attributes

The first thing our function does is extract the attributes passed to the shortcode. We do this using the extract() function, which takes two arguments:

$atts: an array of attributes that can be passed to the shortcode.
$atts: an array of default values for those attributes.

In our case, we’re only expecting one attribute: num_questions , which specifies the number of questions to include in the quiz. If no value is specified, we’ll just use the default of 10.

Getting the Questions and Answers

Next, we need to get the questions and answers from the database. We’ll do this using two helper functions that we’ll define in a separate file:

get_questions() : This function will take the number of questions as a parameter and return an array of question objects.
get_answers() : This function will return an array of answer objects.

We’ll put these functions in a file called quiz-helpers.php and include it at the top of our quiz-shortcode.php file:

10
),
$atts
) );

// set up variables we’ll need in the view
$questions = get_questions( $num_questions );
$answers = get_answers();

// load the view
ob_start();
include plugin_dir_path( __FILE__ ) . ‘views/quiz.php’;
return ob_get_clean();
}
add_shortcode( ‘quiz’, ‘quiz_shortcode’ );

The get_questions() function will take the number of questions as a parameter and return an array of question objects. Each question object will have the following properties:

id: the question’s id
text: the question text
answers: an array of answer objects

The get_answers() function will return an array of answer objects. Each answer object will have the following properties:

id: the answer’s id
text: the answer text
is_correct: a boolean value indicating whether or not the answer is correct

Here’s the code for our helper functions:

function get_questions( $num_questions ) {
// generate an array of random question ids
$question_ids = range( 1, $num_questions );
shuffle( $question_ids );

// get the questions from the database
global $wpdb;
$questions = $wpdb->get_results(
$wpdb->prepare(
“SELECT id, text FROM {$wpdb->prefix}quiz_questions WHERE id IN (” . implode( ‘,’, $question_ids ) . “)”
)
);

// add the answers to each question
foreach ( $questions as $question ) {
$question->answers = get_answers( $question->id );
}

return $questions;
}

function get_answers( $question_id ) {
global $wpdb;
return $wpdb->get_results(
$wpdb->prepare(
“SELECT id, text, is_correct FROM {$wpdb->prefix}quiz_answers WHERE question_id = %d”,
$question_id
)
);
}

As you can see, the get_questions() function first generates an array of random question ids. It then uses the WordPress database functions to get the questions from the database, adding the answers to each question as it goes.

The get_answers() function is simpler, just using the WordPress database functions to get all the answers for a given question.

Loading the View

Now that we have the questions and answers, we just need to load the view and return the output. We’ll do this using the WordPress functions ob_start() and ob_get_clean() :

function quiz_shortcode( $atts, $content = null ) {
// extract attributes into variables
extract( shortcode_atts(
array(
‘num_questions’ => 10
),
$atts
) );

// set up variables we’ll need in the view
$questions = get_questions( $num_questions );
$answers = get_answers();

// load the view
ob_start();
include plugin_dir_path( __FILE__ ) . ‘views/quiz.php’;
return ob_get_clean();
}
add_shortcode( ‘quiz’, ‘quiz_shortcode’ );

The ob_start() function turns on output buffering, which means that anything that would normally be output to the screen is instead stored in a buffer.

The include statement includes the quiz.php view file, which outputs the HTML for our quiz.

Finally, the ob_get_clean() function gets the contents of the buffer and clears it, returning the contents as a string. This string is then returned by our quiz_shortcode() function.

Creating the quiz.php View File

Now that we have the function that outputs the HTML for our quiz, we just need to create the quiz.php view file. This file will take the questions and answers that we got from the database and output them as a list.

Here’s the code for our quiz.php view file:

text ); ?>
- text ); ?>

As you can see, we’re just looping through the questions and answers and outputting them as a list. We’re also using the WordPress function esc_html() to escape any HTML tags that might be in the question or answer text.

That’s it! Now we have a working quiz plugin. In the next part, we’ll add some styling to make our quiz look nicer.

Previous Post - How to Create Input Masks in Microsoft Access on Windows 11

Next Post - How to Create a Clipping Mask in Adobe Photoshop