TFA Interactive Quizzes

WordPress plugin for interactive quizzes with score tiers and social sharing

by Texas Football Analytics · github.com/brandonfricke/tfa-quizzes · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/brandonfricke/tfa-quizzes/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/brandonfricke/tfa-quizzes ↗

A WordPress plugin providing interactive quiz functionality with score tiers, explanations, and social sharing.

Features

Custom Post Type for quizzes
[tfa_quiz] shortcode for embedding quizzes
Multiple choice questions with 4 options each
Per-question explanations
Score tiers with Texas Longhorns theme
Social sharing via Web Share API or clipboard
Retry functionality
Progress tracking
Accessible ARIA markup
Dark mode support
Mobile-responsive design

Requirements

WordPress 6.0+
PHP 7.4+

Installation

Download the plugin
Upload to /wp-content/plugins/tfa-quizzes/
Activate the plugin in WordPress Admin > Plugins
Configure settings in Settings > TFA Quizzes

Usage

Creating a Quiz

Go to Quizzes > Add New in WordPress Admin
Enter your quiz title
Add a description (optional)
Add questions:
- Enter the question text
- Add 4 answer options
- Select the correct answer (radio button)
- Add an explanation (shown after answering)
Publish the quiz

Embedding a Quiz

Use the shortcode in any post or page:

[tfa_quiz id="123"]

Replace 123 with your quiz ID (shown in the Quiz settings sidebar).

Score Tiers

Score	Tier	Emoji
90-100%	Longhorn Legend	🏆
70-89%	True Fan	🤘
50-69%	Casual Observer	👀
0-49%	Keep Learning	📚

Styling

The plugin includes CSS with CSS custom properties that integrate with themes using the following tokens:

--color-surface - Background color
--color-border - Border color
--color-text - Text color
--color-primary - Primary accent color (default: #bf5700)
--radius-md - Border radius
--space-* - Spacing scale

Color States

Correct answers: Green (#059669)
Incorrect answers: Red (#dc2626)

Dark mode is supported via the .tfa-dark-mode body class.

JavaScript API

The quiz state is managed client-side. Key functions (exported as ES modules):

calculateScore(correct, total) - Calculate score percentage
getScoreTier(percentage, tiers) - Get tier for score
createQuizState(totalQuestions) - Initialize quiz state
answerQuestion(state, index, isCorrect) - Update state after answer
nextQuestion(state) - Move to next question
resetQuiz(totalQuestions) - Reset to initial state
shareResult(text, url) - Share via Web Share API or clipboard