Building Quizzes and Assessments with BricksMembers

The Quiz module in BricksMembers lets you add full assessments to your membership and course site with complete design freedom in Bricks Builder. You can use pre-built quiz elements with multiple layout presets, or build fully custom quiz experiences using query loops, dynamic tags, and dedicated quiz elements.

This guide covers everything from basic setup to advanced custom implementations.

What You Can Build

• Graded quizzes with 7 different question types
• Timed assessments with auto-submit
• Multiple attempt tracking with best score records
• Pass/fail outcomes with customizable thresholds
• Quizzes assigned to lessons that block completion until passed
• Question banks for randomized assessments
• Manual grading workflows for essays and short answers
• Custom quiz UIs with any Bricks design

Before You Start

• WordPress is running with BricksMembers active
• Bricks Builder is installed and active
• You have at least one membership level configured
• For progress integration: at least one lesson or content post to assign quizzes to

Part 1: Admin Setup

Step 1: Enable the Quiz Module

1. Go to BricksMembers → Settings
2. In the Learning & Progress section, find the Quizzes card
3. Toggle it on and save settings
4. Confirm a new Quizzes submenu appears under BricksMembers

When enabled, BricksMembers automatically registers the quiz post type, database tables, Bricks elements, query types, dynamic tags, conditions, and AJAX handlers.

Step 2: Create Your First Quiz

1. Go to BricksMembers → Quizzes
2. Click New Quiz or Create Your First Quiz
3. Enter a title (e.g., “Module 1 Knowledge Check”)
4. Optionally set initial passing score and time limit
5. Click Create Quiz

You’ll be taken to the quiz detail page with tabs for Questions, Settings, Attempts, and Analytics.

Step 3: Add Questions

In the Questions tab, click Add Question and choose from these types:

Choice

What it is: The classic multiple-choice question. You show learners a question and several possible answers. They click to select their answer(s).

How to set it up:

• Write your question (e.g., “What is the capital of France?”)
• Add answer options (e.g., “Paris”, “London”, “Berlin”, “Madrid”)
• Mark which answer(s) are correct by checking the “Correct” box
• Choose if learners can select only one answer (single choice) or multiple answers (enable “Allow multiple answers”)
• Optionally add an image to each answer option for visual choices

How learners see it: They see your question with clickable options below. If single choice, they see radio buttons (circles). If multiple choice, they see checkboxes (squares). They click their selection(s).

How it’s graded: Automatically. The system checks if they selected the correct answer(s). For multiple choice, they must select ALL correct answers and NO incorrect answers to get points.

Example:
Question: “Which of these are programming languages? (Select all that apply)”
Options: Python ✓, JavaScript ✓, HTML, Photoshop
Correct answer: Python and JavaScript

Image-based choices: You can add images to any answer option to create visual quizzes. For example, show 4 logo images and ask “Which logo belongs to WordPress?” The student clicks the image instead of text. This works with both single and multiple choice questions.

---

True/False

What it is: A simple yes/no question. Learners choose between “True” or “False” as the answer to a statement.

How to set it up:

• Write a statement (e.g., “The Earth is flat”)
• Mark whether “True” or “False” is the correct answer

How learners see it: They see your statement with two buttons: “True” and “False”. They click one.

How it’s graded: Automatically. The system checks if they picked the correct option.

Example:
Statement: “WordPress was first released in 2003”
Correct answer: True

---

Fill in the Blank

What it is: A sentence or paragraph with missing words. Learners type the missing word(s) into blank spaces within the text.

How to set it up:

• Write your sentence with blanks where words are missing (e.g., “WordPress is written in the ___ programming language”)
• Click “Insert Blank” where you want each blank to appear
• For each blank, type the correct answer(s). You can add multiple acceptable answers (e.g., “PHP” or “php” or “Php”)
• The system ignores capitalization by default, so “PHP” and “php” are treated as the same

How learners see it: They see your sentence with empty text boxes where the blanks are. They type their answer into each box.

How it’s graded: Automatically. The system checks if what they typed matches any of your accepted answers. If there are multiple blanks, they get partial credit for each correct blank (e.g., 2 out of 3 blanks correct = 66% of the points).

Example:
Question: “The ___ tag in HTML creates a paragraph, and the ___ tag creates a line break.”
Correct answers: Blank 1: “p” or “<p>”, Blank 2: “br” or “<br>”

---

Short Answer

What it is: An open-ended question where learners type a brief answer (a few words or a sentence). Similar to “Fill in the Blank” but without the sentence structure. Just a question and a text box.

How to set it up:

• Write your question (e.g., “What color is the sun?”)
• Add acceptable keywords or phrases (e.g., “yellow”, “orange”, “white”)
• Choose the matching mode:
  • “Any”: If the learner’s answer contains ANY of your keywords, it’s correct (e.g., they type “yellow” and that’s one of your keywords = correct)
  • “All”: The learner must include ALL of your keywords in their answer (e.g., you require “yellow” AND “star” = they must type both)
• Optionally enable manual grading if you want to review answers yourself instead of using keyword matching

How learners see it: They see your question with a single-line text box below it. They type their answer.

How it’s graded: Two options:

• Automatic (keyword matching): The system checks if their answer contains your keywords. Capitalization doesn’t matter (“Yellow” = “yellow”).
• Manual: You review each answer yourself and assign points. Use this when answers need human judgment.

Example (auto-graded):
Question: “What does CSS stand for?”
Accepted keywords: “Cascading Style Sheets” or “Cascading” AND “Style” AND “Sheets”
Learner types: “cascading style sheets” → Correct

Example (manual grading):
Question: “Describe one benefit of using WordPress”
Grading: You read their answer and decide if it’s correct

---

Essay

What it is: A long-form written response. Learners write multiple sentences or paragraphs to answer your question. Think of it like a mini essay or written assignment.

How to set it up:

• Write your question (e.g., “Explain the difference between WordPress.com and WordPress.org”)
• That’s it! No answer options needed because you’ll grade it manually

How learners see it: They see your question with a large text area (multi-line text box) below it. They type their essay-length answer.

How it’s graded: Always manual. After they submit, you read their answer and assign points based on quality, accuracy, and completeness. You can also leave feedback comments.

Example:
Question: “Describe three ways to improve website performance and explain why each method works.”
Grading: You read their essay and award points (e.g., 8 out of 10 points) based on their explanation

---

Matching

What it is: A drag-and-drop game where learners connect items from one column to matching items in another column. Like drawing lines between related things.

How to set it up:

• Write your question (e.g., “Match each country to its capital city”)
• Create pairs of items:
  • Left side: The item to drag (e.g., “France”)
  • Right side: The matching target (e.g., “Paris”)
• Add as many pairs as you want (e.g., France→Paris, Spain→Madrid, Italy→Rome)
• Optionally add images to either side of each pair for visual matching

How learners see it: They see two columns. The left column has draggable items. The right column has drop zones (targets). They drag each item from the left and drop it onto the matching target on the right.

How it’s graded: Automatically. The system checks if each item was dropped on its correct match. They get partial credit for each correct match (e.g., 3 out of 5 correct = 60% of the points).

Example:
Question: “Match each HTML tag to its purpose”
Left side (draggable): <h1>, <p>, <img>
Right side (targets): “Heading”, “Paragraph”, “Image”
Correct matches: <h1>→Heading, <p>→Paragraph, <img>→Image

---

Ordering/Sorting

What it is: A drag-and-drop activity where learners arrange items in the correct order or sequence. Like sorting a shuffled deck of cards.

How to set it up:

• Write your question (e.g., “Arrange these steps in the correct order to install WordPress”)
• Add items in the correct order (e.g., “1. Download WordPress”, “2. Upload files to server”, “3. Create database”, “4. Run installer”)
• The system will shuffle these items for the learner
• Optionally add an image to each item for visual ordering tasks

How learners see it: They see your items displayed in random order. They drag items up or down to rearrange them into the correct sequence.

How it’s graded: Automatically. The system checks if each item is in the correct position. They get partial credit for each item in the right spot (e.g., 3 out of 4 items correctly positioned = 75% of the points).

Example:
Question: “Put these historical events in chronological order”
Items (correct order): 1. WordPress founded (2003), 2. iPhone released (2007), 3. Instagram launched (2010), 4. ChatGPT released (2022)
Learner sees: Items shuffled randomly, must drag to correct order

For each question, you can configure:

• Question text – The prompt shown to learners
• Points – Value for scoring (default: 1)
• Answers – Options with correct answer(s) marked, each answer can have an optional image
• Explanation – Feedback shown after submission (optional)
• Question Image – Attach an image to the question (optional)

Images for Answers, Pairs, and Items

In addition to the question-level image, you can add images to individual answer options, matching pairs, and ordering items. This enables rich visual quiz experiences like image-based choice questions, visual matching games, and picture ordering tasks.

• Choice answers: Click the image icon next to any answer option to attach an image from the Media Library
• Matching pairs: Each side of a pair (left and right) can have its own image. Click the image icon on either side to attach.
• Ordering items: Each item in an ordering/sorting question can have an image

These images are available through dynamic tags in your Bricks templates (see Dynamic Tags section below).

Question Builder Tips

• Drag questions to reorder them
• Click the collapse icon to minimize questions while editing
• Use Duplicate to quickly create similar questions
• For short answers, add multiple acceptable keywords separated by the keyword chips
• For fill-in-the-blank, use the Insert Blank button to add blank markers
• Click Add Image below any question to attach a question-level image (available via the {brm_quiz_q:media} dynamic tag)
• For image-based choices, click the image icon on individual answer options to add answer images (available via {brm_quiz_a:image})
• For matching questions, add images to pairs using the image icons on each side (available via {brm_quiz_pair:left_image} and {brm_quiz_pair:right_image})
• For ordering questions, add images to each item (available via {brm_quiz_item:image})

Step 4: Configure Quiz Settings

In the Settings tab, configure how the quiz behaves:

Scoring Settings

• Passing Score – Minimum percentage to pass (e.g., 70%)
• Grading Mode – Auto (instant) or Manual (requires review)
• Allow Negative Scoring – Deduct points for wrong answers

Attempt Settings

• Max Attempts – Limit retries (0 = unlimited)
• Allow Retake After Pass – Let learners retry even after passing

Display Settings

• Display Mode – All questions at once, or one at a time
• Show Correct Answers – After submit, after pass, or never
• Time Limit – Minutes allowed (0 = no limit)
• Randomize Questions – Shuffle question order
• Randomize Answers – Shuffle answer options

Question Pool Settings

• Question Pool – Draw questions from a reusable pool instead of inline questions
• Questions to Show – Limit how many questions from the pool (0 = all)

Progress Integration

• Auto-Complete on Pass – When enabled, passing the quiz automatically marks assigned posts as complete (same as the Progress Checkbox element). Only applies when the quiz is assigned to posts on the progress tracking level (e.g. lessons in your structure).

Step 5: Assign Quiz to Content

There are three ways to assign a quiz to content:

Method 1: From the Quiz Admin (Assign Multiple Posts)

In the Settings tab, scroll to the Assigned Posts section to link your quiz to lessons or other content.

1. Use the search box to find a post
2. Click the post to assign it to this quiz
3. Assigned posts appear in the list below
4. Click the remove button to unassign

Method 2: From the Post Editor Meta Box

When editing any post, page, or lesson in the WordPress editor, you’ll find an Assigned Quiz field in the BricksMembers meta box:

1. Edit the post where you want to require a quiz
2. Scroll down to the BricksMembers meta box
3. In the Assigned Quiz field, search for and select a quiz
4. Save the post

Method 3: From the Structure Interface (Quick Edit)

In the BricksMembers Structure interface, you can quickly assign quizzes using the Quick Edit modal:

1. Navigate to BricksMembers → Structures
2. Click on a lesson or content item to open the Quick Edit modal
3. In the Assigned Quiz field, search for and select a quiz
4. Click Save

How assignment works: When a quiz is assigned to a post, the quiz becomes “required” for that post. If progress tracking is enabled:

• The post cannot be marked complete until the quiz is passed
• Navigation can redirect learners to the quiz when they try to proceed
• Passing the quiz can auto-complete the assigned post

Step 6: Question Banks (Optional)

Question banks let you create reusable question pools that multiple quizzes can draw from.

1. In the Quiz admin, click the Question Bank tab
2. Click Create Pool
3. Enter a name (e.g., “Math Fundamentals Pool”)
4. Click Manage to open the pool and add questions
5. In your quiz settings, select the pool and optionally limit the question count

Benefits of question pools:

• Same questions across multiple quizzes
• Random selection for varied assessments
• Update once, reflect everywhere

Part 2: Building Quiz Experiences in Bricks

BricksMembers offers multiple ways to display quizzes, from simple pre-built elements to fully custom designs.

Option A: Quick Start with the BRM Quiz Element

The fastest way to add a quiz to your page:

1. In Bricks, add a BRM Quiz element
2. Set the Quiz ID (use {post_id} if building a quiz template)
3. Choose a Preset for the overall style
4. Configure timer, navigation, and feedback settings
5. Customize colors and styling in the element controls

Available Presets

Preset	Description	Display Mode
Classic	Traditional vertical list, all questions visible	All at once
Wizard	Step-by-step with clear navigation	One at a time
Typeform	Conversational style, centered with animations	One at a time
Exam	Formal exam layout with question navigator sidebar	Configurable
Card Deck	Card-based layout with transitions	One at a time
Minimal	Clean, distraction-free design	Configurable
Gamified	Bold colors, animations, progress indicators	Configurable
Accessibility First	High contrast, large text, ARIA-optimized	Configurable

Quiz Element Controls

Quiz Settings:

• Quiz ID – Specific quiz or {post_id} for current page
• Display Mode – Override quiz settings (auto/all at once/one at a time)
• Show Question Numbers – Display 1/5, 2/5 etc.

Navigation:

• Show Progress Bar – Visual progress indicator
• Show Navigation Buttons – Prev/Next/Submit buttons
• Show Question Navigator – Jump-to-question sidebar

Timer:

• Show Timer – Display countdown (if quiz has time limit)
• Timer Format – mm:ss, hh:mm:ss, or countdown text
• Warning Threshold – Seconds before visual warning
• Auto-Submit on Timeout – Automatically submit when time expires

Feedback:

• Instant Feedback – Show correct/incorrect immediately
• Show Explanations – Display explanations after each answer
• Pass Redirect URL – Where to go on pass
• Fail Redirect URL – Where to go on fail
• Refresh Mode – Partial (AJAX) or full page reload

Option B: Custom Quiz with Query Loops

For complete design control, build your quiz using Bricks query loops and dedicated quiz elements. This approach requires understanding the full quiz workflow.

Understanding the Quiz Workflow

Before building your custom quiz, understand how the quiz lifecycle works:

1. Quiz Trigger – The quiz can be triggered in three ways:
   • Progress Checkbox – When a user clicks “Complete” on a lesson with a required quiz, the system triggers the quiz automatically
   • Direct Link – User navigates to the quiz page or popup directly
   • Start Button – User clicks a “Start Quiz” button you’ve placed
2. Display Mode – The quiz can display in three modes (configurable per assignment rule):
   • Popup – Opens in a Bricks popup template (recommended for lesson-embedded quizzes)
   • Redirect – Navigates to a dedicated quiz page
   • Inline – Shows within the current page (scrolls to quiz)
3. Quiz Start – The brmQuizActions.startQuiz() function creates a new attempt
4. Answer Collection – User answers are collected via inputs or the Answer Selector element
5. Quiz Submit – The brmQuizActions.submitQuiz() function submits answers for grading
6. Results Display – Use Bricks Conditions to show pass/fail states

Critical Requirement: The Quiz Root Container

Every custom quiz uses a root container (the BRM Quiz element adds it automatically).

Quiz context is auto-resolved: on a singular post or page with an assigned quiz, the system uses the current page; on a singular quiz post, it uses that quiz. No manual quiz ID is required. The root is marked with data-brm-quiz-root.

Optional attributes for quiz state (set by element or for custom wrappers):
  data-brm-quiz-state="not_started"  (not_started | in_progress | passed | failed)
  data-brm-quiz-display-mode="all_at_once"  (all_at_once | one_at_a_time)
  data-brm-quiz-time-limit="600"  (seconds, 0 for no limit)
  data-brm-quiz-attempt-id=""  (populated when quiz starts)

Complete Working Example: Quiz in a Popup

This example shows a complete quiz that opens in a popup when triggered from a lesson’s progress checkbox.

Step 1: Create the Popup Template

1. Go to Bricks → Templates → Add New
2. Name it “Quiz Popup”
3. Set Type to Popup
4. Under Template Settings → Conditions, add Include → Entire Website
5. Edit the popup with Bricks

Step 2: Build the Quiz Structure Inside the Popup

[Section - Popup Content]
└── [Div - Quiz Root] ← data-brm-quiz-root, data-brm-quiz-popup="{post_id}"
    ├── [Div - Quiz Header]
    │   ├── [Heading - Quiz Title: {brm_quiz_title}]
    │   ├── [Div - Timer] ← data-brm-quiz-timer (optional)
    │   └── [Button - Close] ← Icon button with close popup interaction
    │
    ├── [Div - Quiz Body - Condition: Quiz State = not_started]
    │   ├── [Text - Instructions]
    │   └── [Button - Start Quiz] ← Interaction: brmQuizActions.startQuiz
    │
    ├── [Slider (Nestable) - Questions - Query: brm_quiz_questions - Condition: Quiz State = in_progress]
    │   └── [Slide - Question Card]
    │       ├── [Text - Question {brm_quiz_q:index} of {brm_quiz_q:count}]
    │       ├── [Heading - {brm_quiz_q:text}]
    │       ├── [Image - {brm_quiz_q:media}] ← Condition: Question Has Image
    │       │
    │       ├── [Div - Answers Container - Query: brm_quiz_answers - Condition: Question Type = choice]
    │       │   └── [BRM Quiz Answer Selector]
    │       │       └── [Div - Answer Card]
    │       │           ├── [Image - {brm_quiz_a:image}] ← if answer has image
    │       │           └── [Text - {brm_quiz_a:text}]
    │       │
    │       └── [BRM Quiz Answer Input] ← Automatically renders based on question type
    │
    ├── [Div - Navigation - Condition: Quiz State = in_progress]
    │   ├── [Button - Previous] ← Interaction: brmQuizActions.goToPreviousQuestion
    │   ├── [Button - Next] ← Interaction: brmQuizActions.advanceToNextQuestion
    │   └── [Button - Submit] ← Interaction: brmQuizActions.submitQuiz (show on last question)
    │
    ├── [Div - Results Passed - Condition: Quiz State = passed]
    │   ├── [Icon - Checkmark]
    │   ├── [Heading - Congratulations!]
    │   └── [Text - Score: {brm_quiz_score}%]
    │
    └── [Div - Results Failed - Condition: Quiz State = failed]
        ├── [Icon - X]
        ├── [Heading - Try Again]
        └── [Text - Score: {brm_quiz_score}%. You need {brm_quiz_pass_percent}% to pass.]

Step 3: Set the Data Attributes on the Quiz Root

1. Select the outermost Div (Quiz Root)
2. Go to Style → Attributes
3. Add: data-brm-quiz-popup = {post_id} (marks this popup for quiz trigger targeting)
4. Add: data-brm-quiz-state = not_started (initial state)

Step 4: Assign the Quiz to Content

1. In admin, go to the quiz’s Settings tab
2. Scroll to the Assigned Posts section
3. Search for your lesson and click to assign it

Step 5: Configure Popup Triggering

To make the popup open when a user clicks “Complete” on the lesson, configure a Bricks interaction on your Progress Checkbox element:

1. Edit your lesson template in Bricks
2. Select the BRM Progress Checkbox element
3. Add an interaction: Click → Show/Hide Popup
4. Select your “Quiz Popup” template

The quiz system will detect the popup via the data-brm-quiz-popup attribute and initialize accordingly.

One-at-a-Time Display with Bricks Slider

To show one question at a time with smooth transitions, use the Slider (Nestable) element:

1. Add a Slider (Nestable) element
2. Enable Query Loop on the slider
3. Set Query Type to BRM: Quiz Questions
4. Configure slider settings:
   • Slides per View: 1
   • Autoplay: Off
   • Arrows: Off (use custom navigation buttons)
   • Pagination: Off or Dots
   • Draggable: Off (optional – prevents accidental swipes)
5. Inside the slide, build your question layout

The quiz JavaScript automatically syncs with Splide (Bricks’ slider library) when you use brmQuizActions.advanceToNextQuestion() or brmQuizActions.goToPreviousQuestion().

All-at-Once Display (Simple Layout)

For showing all questions at once, use a simple Container with query loop:

1. Add a Container element
2. Enable Query Loop
3. Set Query Type to BRM: Quiz Questions
4. Set Quiz ID (or {post_id} for templates)

Handling Mixed Question Types

When your quiz has different question types (choice, essay, matching, etc.), use Bricks Conditions to show the appropriate input for each:

[Container - Question]
├── [Text - {brm_quiz_q:text}]
│
├── [Container - Choice Answers]
│   ├── Condition: brm_quiz_q_type = choice
│   └── [Query: brm_quiz_answers]
│       └── [BRM Quiz Answer Selector] → [Answer Card]
│
├── [Container - True/False Answers]
│   ├── Condition: brm_quiz_q_type = true_false
│   └── [Query: brm_quiz_answers]
│       └── [BRM Quiz Answer Selector] → [True/False Button]
│
├── [Textarea - Essay Input]
│   └── Condition: brm_quiz_q_type = essay
│
├── [Text Input - Short Answer]
│   └── Condition: brm_quiz_q_type = short_answer
│
├── [Container - Matching]
│   ├── Condition: brm_quiz_q_type = matching
│   └── [BRM Quiz Answer Input] ← Renders drag-drop matching
│
└── [Container - Ordering]
    ├── Condition: brm_quiz_q_type = ordering OR sorting
    └── [BRM Quiz Answer Input] ← Renders sortable list

Alternatively, use the BRM Quiz Answer Input element which automatically detects the question type and renders the appropriate input control.

Basic Query Loop Structure

[Container - Quiz Wrapper] ← data-brm-quiz-root (quiz context auto-resolved)
├── [Text - Quiz Title: {brm_quiz_title}]
├── [Container - Query: brm_quiz_questions]
│   ├── [Heading - Question: {brm_quiz_q:index}. {brm_quiz_q:text}]
│   ├── [Container - Query: brm_quiz_answers]
│   │   └── [BRM Quiz Answer Selector]
│   │       └── [Your Custom Card Design]
│   │           └── [Text: {brm_quiz_a:text}]
│   └── [BRM Quiz Answer Input] (for text/matching/ordering questions)
└── [Button - Submit Quiz] ← Interaction: brmQuizActions.submitQuiz

Step-by-Step: Basic Setup

1. Create the Quiz Root:

• Add a Container element
• Quiz root is identified by data-brm-quiz-root (BRM Quiz element adds this automatically; context is auto-resolved)
• Add attribute: data-brm-quiz-state = not_started

2. Create the Questions Loop:

• Inside the root, add a Container element
• Enable Query Loop
• Set Query Type to BRM: Quiz Questions
• Set Quiz ID (or {post_id} for templates)

3. Add Question Content:

• Inside the loop, add text elements with question tags
• Use {brm_quiz_q:text} for the question prompt
• Use {brm_quiz_q:index} for question number
• Add {brm_quiz_q:media} if questions have images

4. Create the Answers Loop:

• Inside the questions loop, add another Container
• Enable Query Loop
• Set Query Type to BRM: Quiz Answers (nested)
• This automatically reads answers from the parent question

5. Add the Answer Selector:

• Inside the answers loop, add a BRM Quiz Answer Selector
• Set Answer Source to Loop Context
• Add your custom card/button design as children
• Use {brm_quiz_a:text} for answer text

6. Add Text Answer Input (for essay/short answer/matching/ordering):

• After the answers loop (still inside questions loop), add a BRM Quiz Answer Input
• It automatically detects the question type and renders the appropriate control
• For choice questions: renders nothing (use Answer Selector instead)
• For text questions: renders input or textarea
• For matching: renders drag-drop matching interface
• For ordering: renders sortable list

7. Add Submit Button:

• Outside the questions loop (but inside quiz root), add a Button
• Add Interaction: Trigger = Click, Action = JavaScript (Function)
• Function name: brmQuizActions.submitQuiz

The BRM Quiz Answer Selector Element

This is the key to building custom quiz UIs. It’s a smart click-capture wrapper that can contain ANY design and register it as an answer selection.

How It Works

1. Place inside a brm_quiz_answers query loop (or use manual mode)
2. Add your custom card, button, or image design as child elements
3. The wrapper automatically captures clicks and registers selections
4. Style the selected state using the configurable CSS class

Answer Selector Controls

• Answer Source – Loop Context (automatic) or Manual (specify IDs)
• Selection Mode – Auto (detects from question), Single, or Multiple
• Click Action – Select, Select & Auto-advance, or Toggle
• Selected Class – CSS class added when selected (default: brm-answer-selected)
• Feedback Mode – None, Highlight, or Correct/Incorrect

Styling Selected Answers

Add CSS to style the selected state:

.brm-answer-selected {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: scale(1.02);
}

/* For correct/incorrect feedback */
.brm-answer-correct {
    background: #d4edda;
    border-color: #28a745;
}

.brm-answer-incorrect {
    background: #f8d7da;
    border-color: #dc3545;
}

The BRM Quiz Text Answer Element

Use for questions requiring text input (short answer, essay, fill-in-the-blank).

Text Answer Controls

• Source – Loop Context or Manual
• Input Type – Auto (detects from question), Single Line, or Textarea
• Placeholder – Placeholder text
• Rows – Textarea height (2-20)
• Auto-grow – Textarea expands with content
• Max/Min Length – Character validation
• Show Character Count – Display remaining characters

Bricks Interactions for Quiz Navigation

All quiz navigation, actions, and dynamic behaviors are built using native Bricks Interactions. BricksMembers provides global JavaScript functions that you call through Bricks’ “JavaScript (Function)” action.

How Bricks Interactions Work

Every interaction in Bricks has three components:

1. Trigger – The event that starts the interaction (click, hover, content loaded, etc.)
2. Action – What happens when triggered (call a function, show/hide element, toggle class, etc.)
3. Target – Which element is affected (self, CSS selector, popup)

Available Quiz Functions

BricksMembers exposes these functions in the global brmQuizActions object for use with Bricks Interactions:

Function	Purpose	Use Case
brmQuizActions.startQuiz	Start a new quiz attempt	“Start Quiz” button
brmQuizActions.submitQuiz	Submit the current attempt	“Submit” button
brmQuizActions.advanceToNextQuestion	Go to next question	“Next” button (one-at-a-time mode)
brmQuizActions.goToPreviousQuestion	Go to previous question	“Previous” button (one-at-a-time mode)
brmQuizActions.goToQuestion	Jump to specific question (pass index as argument)	Question navigator
brmQuizActions.setAnswer	Programmatically set an answer	Custom answer inputs
brmQuizActions.getQuizState	Get current quiz state	Custom UI logic
brmQuizActions.openPopup	Open a quiz popup	Manual quiz popup trigger
brmQuizActions.closePopup	Close the current quiz popup	Close button or after submission

Automatic Quiz Trigger from Progress Checkbox

When a quiz is assigned to a lesson with “Required for Completion” enabled, clicking the progress checkbox automatically:

1. Checks if the user has already passed the quiz
2. If not passed, prevents the completion and dispatches the brm:quiz:trigger event
3. Based on the assignment rule’s display mode:
   • Popup: Opens the configured popup template using bricksOpenPopup()
   • Redirect: Navigates to the quiz URL
   • Inline: Scrolls to the quiz on the page and dispatches brm:quiz:required

You don’t need to wire this up manually – it happens automatically when the quiz module is configured.

Step-by-Step: Creating a “Next Question” Button

1. Add a Button element to your quiz template
2. Select the button and click the Interactions icon in the panel header (lightning bolt)
3. Click + to add a new interaction
4. Configure the interaction:
   • Trigger: Click
   • Action: JavaScript (Function)
   • Function name: brmQuizActions.advanceToNextQuestion
5. Save and preview on the frontend (interactions don’t run in the builder)

Step-by-Step: Creating a “Submit Quiz” Button

1. Add a Button element
2. Open Interactions panel
3. Add interaction:
   • Trigger: Click
   • Action: JavaScript (Function)
   • Function name: brmQuizActions.submitQuiz

Step-by-Step: Creating a Question Navigator

For a clickable question number that jumps to that question:

1. Inside a query loop of questions, add a clickable element (Button, Div, etc.)
2. Display the question number using {brm_quiz_q:index}
3. Add an interaction:
   • Trigger: Click
   • Action: JavaScript (Function)
   • Function name: brmQuizActions.goToQuestion
   • Arguments: Add an argument with value {brm_quiz_q:index}

Using Toggle Class for Visual States

Use Bricks’ “Set attribute” or “Toggle attribute” actions to create visual feedback:

Example: Highlight selected answer card

1. Trigger: Click
2. Action: Set attribute
3. Target: Self (or CSS selector for the card)
4. Attribute: class
5. Value: brm-answer-selected

Listening to Quiz Events

The quiz system dispatches custom events you can listen to for advanced integrations:

Event	When Fired	Detail Properties
brm:quiz:started	Quiz attempt started	quizId, attemptId
brm:quiz:submitted	Quiz submitted	quizId, attemptId, passed, score
brm:quiz:answer:selected	Answer selected	questionId, answerId, selected, selections
brm:quiz:answer:deselected	Answer deselected	questionId, answerId, selected, selections
brm:quiz:question:changed	Question navigation	quizId, fromIndex, toIndex
brm:quiz:timer:warning	Timer warning threshold	quizId, timeRemaining
brm:quiz:timer:expired	Timer reached zero	quizId

Example: Run a custom function when an answer is selected:

document.addEventListener('brm:quiz:answer:selected', function(event) {
  const { questionId, answerId, selections } = event.detail;
  console.log('Answer selected:', answerId, 'for question:', questionId);
});

Button Quiz Controls (Alternative)

BricksMembers also adds direct quiz controls to native Bricks Button elements as an alternative to interactions:

• Enable Quiz Submit – Make this button submit the quiz (no interaction needed)
• Confirm Message – Show confirmation dialog before submit
• Pass Redirect URL – Redirect on successful pass
• Fail Redirect URL – Redirect on fail

Timer Display

Add a timer to any Div element with these controls:

• Enable Quiz Timer – Display the countdown
• Timer Format – mm:ss, hh:mm:ss, or countdown text
• Warning Threshold – Seconds before warning state
• Auto-Submit on Timeout – Automatically submit when time expires

Part 3: Query Loop Types

BricksMembers provides four query loop types for building custom quiz interfaces. They work as nested loops where inner loops get data from the current parent loop item.

Available Query Loop Types

Query Type	Purpose	Must Be Nested In
brm_quiz_questions	Loops through all questions in a quiz	None (outer loop)
brm_quiz_answers	Loops through answer options for choice/multiple-choice/true-false questions	brm_quiz_questions
brm_quiz_pairs	Loops through left/right pairs for matching questions	brm_quiz_questions
brm_quiz_items	Loops through sortable items for ordering questions	brm_quiz_questions

Nesting Pattern

[Container - Quiz Root - data-brm-quiz-root]
└── [Query Loop - Type: brm_quiz_questions] ← OUTER LOOP
    │
    ├── For choice/true-false questions:
    │   └── [Query Loop - Type: brm_quiz_answers] ← INNER LOOP
    │       └── Dynamic tags: {brm_quiz_a:id}, {brm_quiz_a:text}, {brm_quiz_a:image}
    │
    ├── For matching questions:
    │   └── [Query Loop - Type: brm_quiz_pairs] ← INNER LOOP
    │       └── Dynamic tags: {brm_quiz_pair:left}, {brm_quiz_pair:right}, {brm_quiz_pair:left_id}
    │
    └── For ordering questions:
        └── [Query Loop - Type: brm_quiz_items] ← INNER LOOP
            └── Dynamic tags: {brm_quiz_item:id}, {brm_quiz_item:text}, {brm_quiz_item:image}

The inner loops automatically read from the current question in the parent loop. No additional configuration needed. Just set the correct Query Type.

Complete Example with All Question Types

[Container - Quiz Root]
│   Attributes: data-brm-quiz-root (context auto-resolved)
│
└── [Query Loop - Type: brm_quiz_questions]
    │
    ├── [Heading - {brm_quiz_q:index}. {brm_quiz_q:text}]
    │
    ├── [Container - Choice Questions]
    │   │   Condition: brm_quiz_q_type is choice
    │   └── [Query Loop - Type: brm_quiz_answers]
    │       └── [BRM Quiz Answer Selector]
    │           └── [Div - Answer Card]
    │               ├── [Image - {brm_quiz_a:image}] (if has image)
    │               └── [Text - {brm_quiz_a:text}]
    │
    ├── [Container - Matching Questions]
    │   │   Condition: brm_quiz_q_type is matching
    │   ├── [Div - Class: brm-quiz-matching-left]
    │   │   └── [Query Loop - Type: brm_quiz_pairs]
    │   │       └── [Div - Class: brm-quiz-drag-item, draggable: true, data-item-id: {brm_quiz_pair:left_id}]
    │   │           ├── [Image - {brm_quiz_pair:left_image}]
    │   │           └── [Text - {brm_quiz_pair:left}]
    │   │
    │   └── [Div - Class: brm-quiz-matching-right]
    │       └── [Query Loop - Type: brm_quiz_pairs]
    │           └── [Div - Class: brm-quiz-drop-zone, data-question-id: {brm_quiz_q:id}, data-target-id: {brm_quiz_pair:right_id}]
    │               ├── [Image - {brm_quiz_pair:right_image}]
    │               └── [Text - {brm_quiz_pair:right}]
    │
    └── [Container - Ordering Questions]
        │   Condition: brm_quiz_q_type is ordering
        └── [Div - Class: brm-quiz-sorting-container, data-question-id: {brm_quiz_q:id}]
            └── [Query Loop - Type: brm_quiz_items]
                └── [Div - Class: brm-quiz-drag-item, draggable: true, data-item-id: {brm_quiz_item:id}]
                    ├── [Image - {brm_quiz_item:image}]
                    └── [Text - {brm_quiz_item:text}]

Part 4: Dynamic Tags Reference

Quiz-Level Tags

Use anywhere on a quiz page or template:

Tag	Description
{brm_quiz_title}	Quiz title
{brm_quiz_time_limit}	Time limit in seconds
{brm_quiz_passing_score}	Required passing percentage
{brm_quiz_max_attempts}	Maximum attempts allowed
{brm_quiz_question_count}	Total number of questions
{brm_quiz_score_percent}	User’s best score percentage
{brm_quiz_best_score}	User’s best raw score
{brm_quiz_last_score}	User’s most recent score
{brm_quiz_passed}	1 if passed, 0 if not
{brm_quiz_pass_fail}	“passed”, “failed”, or “not_attempted”
{brm_quiz_status}	Current status string
{brm_quiz_attempts_count}	Number of attempts made
{brm_quiz_attempts_remaining}	Remaining attempts (-1 if unlimited)
{brm_quiz_current_question_index}	Current question position (for one-at-a-time)

Question Loop Tags

Use inside a brm_quiz_questions query loop:

Tag	Description
{brm_quiz_q:id}	Question ID
{brm_quiz_q:text}	Question text/prompt
{brm_quiz_q:type}	Question type
{brm_quiz_q:points}	Points value
{brm_quiz_q:media}	Attached media URL
{brm_quiz_q:index}	1-based position
{brm_quiz_q:total}	Total questions
{brm_quiz_q:explanation}	Answer explanation
{brm_quiz_q:answer_count}	Number of answer options
{brm_quiz_q:is_multiple}	“yes” if multiple answers allowed
{brm_quiz_q:is_text_input}	“yes” if text input required
{brm_quiz_q:input_type}	HTML input type (radio/checkbox/text/textarea/special)

Answer Loop Tags

Use inside a brm_quiz_answers nested query loop:

Tag	Description
{brm_quiz_a:id}	Answer ID
{brm_quiz_a:text}	Answer text/label
{brm_quiz_a:index}	1-based position
{brm_quiz_a:total}	Total answers for this question
{brm_quiz_a:question_id}	Parent question ID
{brm_quiz_a:input_name}	Form input name for submission
{brm_quiz_a:input_value}	Form input value for submission
{brm_quiz_a:input_type}	HTML input type
{brm_quiz_a:match_target}	For matching questions, the target text
{brm_quiz_a:image}	Answer image URL (if set)
{brm_quiz_a:image_id}	Answer image attachment ID

Pair Tags (Matching Questions)

Use inside a brm_quiz_pairs nested query loop for matching questions:

Tag	Description
{brm_quiz_pair:left}	Left side text
{brm_quiz_pair:left_id}	Left side ID (for drag/drop)
{brm_quiz_pair:left_image}	Left side image URL (if set)
{brm_quiz_pair:left_image_id}	Left side image attachment ID
{brm_quiz_pair:right}	Right side text
{brm_quiz_pair:right_id}	Right side ID (for drag/drop)
{brm_quiz_pair:right_image}	Right side image URL (if set)
{brm_quiz_pair:right_image_id}	Right side image attachment ID
{brm_quiz_pair:index}	1-based position
{brm_quiz_pair:total}	Total pairs

Item Tags (Ordering Questions)

Use inside a brm_quiz_items nested query loop for ordering/sorting questions:

Tag	Description
{brm_quiz_item:id}	Item ID (for drag/drop)
{brm_quiz_item:text}	Item text
{brm_quiz_item:image}	Item image URL (if set)
{brm_quiz_item:image_id}	Item image attachment ID
{brm_quiz_item:index}	1-based position
{brm_quiz_item:total}	Total items

Part 4: Bricks Conditions

BricksMembers registers custom conditions that integrate with Bricks Builder’s native conditions system. Use these to show or hide any element based on quiz state. No custom elements required.

How to Use Bricks Conditions

1. Select any element (Section, Div, Text, etc.)
2. Click the Conditions icon in the panel header (toggle icon)
3. Click + to add a condition set
4. Find BricksMembers conditions under the BricksMembers group
5. Configure the condition (key, comparison, value)

Elements with conditions are only rendered when those conditions are met. The element HTML is completely removed from the page source for non-matching users. Perfect for access control.

Quiz Status Conditions (Page-Level)

These conditions evaluate the current user’s quiz status. They work on any quiz page or pages with assigned quizzes:

Condition	Options	Use Case
brm_quiz_passed	Yes / No	Show content only for passed users
brm_quiz_can_take	Yes / No	Show quiz only if user can take it
brm_quiz_status	not_started, in_progress, pending_review, passed, failed, exhausted	Show different content per state
brm_quiz_score_above	Number (percentage)	Show content if score exceeds threshold
brm_quiz_score	Number comparisons	Exact score matching
brm_quiz_attempted	Yes / No	Show content after first attempt

Example: State-Based Layout

Create separate sections for each quiz state using the brm_quiz_status condition:

[Section - Condition: brm_quiz_status is not_started]
└── Welcome text + Start Quiz button

[Section - Condition: brm_quiz_status is in_progress]  
└── Questions + Submit button

[Section - Condition: brm_quiz_status is passed]
└── Success message + Continue button

[Section - Condition: brm_quiz_status is failed]
└── Failure message + Retry button

[Section - Condition: brm_quiz_status is exhausted]
└── Contact support message

Question-Level Conditions (Query Loop)

These conditions work inside a brm_quiz_questions query loop to conditionally show elements based on the current question:

Condition	Options	Use Case
brm_quiz_q_type	choice, true_false, fill_blank, short_answer, essay, matching, ordering, sorting, image_choice	Show different UI per question type
brm_quiz_q_is_multiple	Yes / No	Show checkboxes vs radios
brm_quiz_q_is_text	Yes / No	Show text inputs for essay/fill-blank
brm_quiz_q_input_type	radio, checkbox, text, textarea, special	Fine-grained input type matching

Example: Type-Specific Question UI

Inside a questions query loop, use conditions to show the right input for each question type:

[Query Loop - Type: brm_quiz_questions]
├── [Div - Question wrapper]
│   ├── [Text - {brm_quiz_q:text}]
│   │
│   ├── [Div - Condition: brm_quiz_q_input_type is radio]
│   │   └── [Query Loop - Type: brm_quiz_answers]
│   │       └── [Radio input with {brm_quiz_a:text}]
│   │
│   ├── [Div - Condition: brm_quiz_q_input_type is checkbox]
│   │   └── [Query Loop - Type: brm_quiz_answers]
│   │       └── [Checkbox input with {brm_quiz_a:text}]
│   │
│   ├── [Div - Condition: brm_quiz_q_input_type is text]
│   │   └── [Text input]
│   │
│   ├── [Div - Condition: brm_quiz_q_input_type is textarea]
│   │   └── [Textarea]
│   │
│   └── [Div - Condition: brm_quiz_q_input_type is special]
│       └── [BRM Quiz Answer Input element]

This approach gives you complete design control while letting BricksMembers handle the logic.

Example: Image-Based Choice Questions

Create visually rich quizzes where learners select from image answers:

[Query Loop - Type: brm_quiz_questions]
├── [Div - Question wrapper]
│   ├── [Text - {brm_quiz_q:text}]
│   │
│   ├── [Div - Condition: brm_quiz_q_type is choice]
│   │   └── [Query Loop - Type: brm_quiz_answers]
│   │       └── [BRM Quiz Answer Selector]
│   │           └── [Div - Answer card]
│   │               ├── [Image - src: {brm_quiz_a:image}] (if answer has image)
│   │               └── [Text - {brm_quiz_a:text}]

Use native Bricks conditions with {brm_quiz_a:image} not empty to show images only when they exist.

Example: Visual Matching Game

Build a matching question with images on both sides. Important: Use the correct CSS classes and attributes for drag-drop to work:

[Query Loop - Type: brm_quiz_questions]
├── [Div - Condition: brm_quiz_q_type is matching]
│   ├── [Div - Class: brm-quiz-matching-left]
│   │   └── [Query Loop - Type: brm_quiz_pairs]
│   │       └── [Div - Class: brm-quiz-drag-item]
│   │           Attributes:
│   │             draggable: true
│   │             data-item-id: {brm_quiz_pair:left_id}
│   │           Content:
│   │           ├── [Image - src: {brm_quiz_pair:left_image}]
│   │           └── [Text - {brm_quiz_pair:left}]
│   │
│   └── [Div - Class: brm-quiz-matching-right]
│       └── [Query Loop - Type: brm_quiz_pairs]
│           └── [Div - Class: brm-quiz-drop-zone]
│               Attributes:
│                 data-question-id: {brm_quiz_q:id}
│                 data-target-id: {brm_quiz_pair:right_id}
│               Content:
│               ├── [Image - src: {brm_quiz_pair:right_image}]
│               └── [Text - {brm_quiz_pair:right}]

Required CSS classes:

• brm-quiz-drag-item – Makes the item draggable (add draggable="true" attribute)
• brm-quiz-drop-zone – Makes the area a drop target
• brm-quiz-matching-left and brm-quiz-matching-right – Container classes for the two columns

Example: Picture Ordering

Create a sorting question with images. Important: Use the correct CSS classes and attributes for drag-drop to work:

[Query Loop - Type: brm_quiz_questions]
├── [Div - Condition: brm_quiz_q_type is ordering]
│   └── [Div - Class: brm-quiz-sorting-container]
│       Attributes:
│         data-question-id: {brm_quiz_q:id}
│       └── [Query Loop - Type: brm_quiz_items]
│           └── [Div - Class: brm-quiz-drag-item]
│               Attributes:
│                 draggable: true
│                 data-item-id: {brm_quiz_item:id}
│               Content:
│               ├── [Image - src: {brm_quiz_item:image}]
│               └── [Text - {brm_quiz_item:text}]

Required CSS classes:

• brm-quiz-sorting-container – Container that holds the sortable items (needs data-question-id)
• brm-quiz-drag-item – Each draggable item (add draggable="true" and data-item-id)

Styling Drag-Drop States

Add these CSS rules (in Bricks → Settings → Custom CSS or page CSS) to style drag-drop states:

/* Item being dragged */
.brm-quiz-drag-item--dragging {
    opacity: 0.5;
    transform: scale(1.05);
}

/* Drop zone highlight when item hovers over */
.brm-quiz-drop-zone--over {
    outline: 2px dashed var(--bricks-color-primary, #0073aa);
    background: rgba(0, 115, 170, 0.1);
}

/* Ordering item highlight as drop target */
.brm-quiz-drag-item--drop-target {
    border-top: 2px solid var(--bricks-color-primary, #0073aa);
}

/* Item that has been matched/placed */
.brm-quiz-drag-item--placed {
    opacity: 0.4;
    pointer-events: none;
}

/* Placed item clone inside drop zone */
.brm-quiz-placed-item {
    display: block;
    margin-top: 0.5em;
    padding: 0.25em 0.5em;
    background: var(--bricks-color-primary, #0073aa);
    color: #fff;
    border-radius: 4px;
}

Part 5: Form Action Integration

For form-based quiz submissions, use the Bricks Form element with the quiz action.

Setup

1. Add a Bricks Form element
2. Add form fields for each question (ID prefix: q_)
3. Add action: Submit Quiz (BRM)
4. Configure settings:
   • Quiz ID – The quiz to submit
   • Attempt Field – Hidden field with attempt ID (optional)
   • Answers Field – JSON field with all answers (optional)

If no explicit answers field is configured, the form action automatically collects values from fields prefixed with q_ (e.g., q_abc123).

Part 6: Managing Attempts and Analytics

Attempts Tab

In the quiz admin, the Attempts tab shows all learner attempts with:

• User information
• Score and pass/fail status
• Submission time
• Grading status (for manual grading)

Actions available:

• View Details – See all answers and results
• Grade – For pending manual grading items
• Delete – Remove individual attempt
• Reset User Attempts – Clear all attempts for a user

Manual Grading Workflow

For essay and manually-graded short answer questions:

1. Filter attempts by “Pending Review” status
2. Click Grade on an attempt
3. Review the learner’s answer
4. Enter points earned (0 to max)
5. Add optional feedback
6. Save grade

Once all pending questions are graded, the system automatically calculates the final score and determines pass/fail status.

Analytics Tab

View quiz performance metrics:

• Total Attempts – Number of submissions
• Pass Rate – Percentage of passing attempts
• Average Score – Mean score across all attempts
• Per-Question Stats – Difficulty and correct rate for each question

Part 7: Troubleshooting

Quiz Not Appearing

• Confirm the Quiz module is enabled in BricksMembers Settings
• Check the quiz post is published
• Verify the Quiz ID in your template is correct

No Questions Rendering

• Confirm query type is BRM: Quiz Questions
• Check Quiz ID setting (use {post_id} for templates)
• Verify the quiz has questions added

Submit Button Not Working

• Check button has quiz submit control enabled
• Use the BRM Quiz element so the quiz root has data-brm-quiz-root; context is auto-resolved
• Verify frontend JavaScript is loading (check console for errors)
• Confirm user is logged in

Cannot Start Quiz

• Check max attempts hasn’t been reached
• Verify “Allow Retake After Pass” if user already passed
• If quiz is assigned to posts, ensure user has access to at least one assigned post

Conditional Elements Not Showing

• Use Bricks native conditions (panel header → Conditions icon) with BricksMembers conditions like brm_quiz_status
• Verify the condition value matches the expected status (e.g., “not_started”, “in_progress”)
• Check that the user is logged in (quiz conditions require authentication)
• For question-level conditions in query loops, ensure you’re inside a brm_quiz_questions loop

Answers Not Being Captured

• Ensure BRM Quiz Answer Selector is inside the answers loop
• Check Answer Source is set correctly
• Verify the selector wrapper is properly containing the clickable content

Launch Checklist

1. Quiz module enabled and settings saved
2. Quiz created with questions and settings configured
3. Bricks template built with quiz elements
4. Submit button configured
5. Conditional states for different outcomes (passed, failed, etc.)
6. Quiz assigned to content if using progress integration
7. Tested as a non-admin user
8. Pass and fail behavior verified
9. Attempt limits tested
10. Analytics recording confirmed

Related Documentation

• Quizzes Module Reference
• Quizzes API Reference (Developer)