Elevate Your LearnDash Quizzes with a Two-Column Layout for Questions

LearnDash quizzes are a powerful tool for online learning, but their default single-column layout can feel clunky—especially when students need to refer to a passage, image, or diagram while answering questions. Constant scrolling disrupts focus and slows progress. A two-column layout solves this by splitting the screen: one column for reference content (like a reading passage) and another for the questions. It’s a game-changer for comprehension tests, image-based quizzes, or any scenario where context matters.

In this guide, we’ll walk you through three methods to create a two-column layout for LearnDash quizzes:

1. Per Quiz ID: Apply the layout to all questions in a specific quiz.
2. Per Answer Type: Target questions based on their type (e.g., multiple choice or fill-in-the-blank).
3. Per Individual Question: Customize the layout for specific questions within a quiz.

Each method uses custom CSS (and a bit of JavaScript for the third option) added to your WordPress child theme. We’ll provide step-by-step instructions, explain the code, suggest visual aids, and share troubleshooting tips. Let’s make your quizzes more user-friendly and professional!

Why Switch to a Two-Column Layout?

A two-column layout mimics the feel of traditional paper-based tests, where reference material sits alongside questions. Here’s why it’s worth the effort:

• Less Scrolling: Students can see the passage and questions at once, reducing frustration.
• Better Focus: Side-by-side content keeps learners engaged with the material.
• Enhanced Usability: Ideal for comprehension quizzes, image-based questions, or detailed instructions.

Before You Begin: Key Prep Steps

To implement these changes safely and effectively:

• Use a Child Theme: Add code to a child theme’s files so updates to your main theme don’t wipe out your work. No child theme yet? Set one up.
• Know the Basics: You’ll need a beginner-level grasp of CSS (and for Method 3, JavaScript). Don’t worry—we’ll explain every line!
• Test First: Use a staging site to preview changes before going live. This keeps your active quizzes running smoothly.
• Back Up: Save copies of your theme files before editing. Better safe than sorry!

Method 1: Two-Column Layout Per Quiz ID

This method applies the two-column layout to every question in a specific quiz, using its unique QuizPro ID.

Step 1: Find Your QuizPro ID

1. Log in to your WordPress dashboard.
2. Go to LearnDash LMS > Quizzes.
3. Locate your quiz and check the Shortcode column. You’ll see something like [LDAdvQuiz 21]. The number (e.g., 21) is your QuizPro ID.

Step 2: Add CSS to Your Child Theme

1. Navigate to Appearance > Theme Editor.
2. Open your child theme’s styles.css file.
3. Paste this CSS, swapping 21 for your quiz’s ID:

/* Two-column layout for Quiz ID 21 */
@media (min-width: 992px) { /* Only applies on desktop-sized screens */
    #wpProQuiz_21 .wpProQuiz_question .wpProQuiz_question_text {
        max-height: 20em; /* Caps height to avoid overlap */
        padding-right: 1em; /* Adds breathing room */
        overflow-y: scroll; /* Scrollbar for long passages */
        position: absolute; /* Fixes passage to the left */
        width: 50%; /* Half the screen */
    }

    #wpProQuiz_21 .wpProQuiz_listItem .wpProQuiz_question > * + * {
        border-left: transparent solid 1em; /* Space between columns */
        left: 50%; /* Shifts answers to the right */
        position: relative; /* Aligns with parent */
        width: 50%; /* Other half of the screen */
    }
}

Code Breakdown

• @media (min-width: 992px): Ensures the layout only kicks in on screens wider than 992px (desktops, not mobiles).
• .wpProQuiz_question_text: Styles the passage or question text, pinning it to the left with a scrollbar for overflow.
• > * + *: Targets the answer options, moving them to the right column.

Step 3: Save and Test

• Hit save, then load your quiz on a page. Check that the passage sits on the left and questions on the right.

Method 2: Two-Column Layout Per Answer Type

This approach targets questions based on their answer type—like multiple choice or fill-in-the-blank—across all quizzes.

Step 1: Pick an Answer Type

LearnDash supports these types:

• single: Single choice
• multiple: Multiple choice
• free_answer: Free text
• sort_answer: Sorting
• matrix_sort_answer: Matrix sorting
• cloze_answer: Fill-in-the-blank
• assessment_answer: Assessment
• essay: Essay / Open answer

Choose one (e.g., cloze_answer for fill-in-the-blank).

Step 2: Add CSS to Your Child Theme

1. Go to Appearance > Theme Editor.
2. Open styles.css in your child theme.
3. Add this CSS, replacing cloze_answer with your type:

/* Two columns for fill-in-the-blank questions */
@media (min-width: 992px) {
    .wpProQuiz_listItem[data-type="cloze_answer"] .wpProQuiz_question .wpProQuiz_question_text {
        max-height: 20em;
        padding-right: 1em;
        overflow-y: scroll;
        position: absolute;
        width: 50%;
    }

    .wpProQuiz_listItem[data-type="cloze_answer"] .wpProQuiz_question > * + * {
        border-left: transparent solid 1em;
        left: 50%;
        position: relative;
        width: 50%;
    }
}

Code Breakdown

• [data-type="cloze_answer"]: Targets only questions of the specified type.
• The rest mirrors Method 1, splitting the passage and answers into columns.

Step 3: Save and Test

• Save the file, then preview a quiz with your chosen answer type. Confirm the layout works as expected.

Method 3: Two-Column Layout Per Individual Question

Want control over specific questions? This method uses a marker in the question text and JavaScript to apply the layout selectively.

Step 1: Tag the Question

1. Edit your quiz in LearnDash.
2. Open the question you want to split.
3. Add this HTML above the question text:

<span class="col-1"></span>

Step 2: Add JavaScript

1. In your child theme’s folder, create a file named two-col-question.js.
2. Add this code:

jQuery(".wpProQuiz_question_text .col-1").each(function () {
    jQuery(this).closest(".wpProQuiz_question").addClass("columns-2");
});

• What It Does: Finds the <span class="col-1"> tag and adds a columns-2 class to the question container.

Step 3: Enqueue the Script

1. Open your child theme’s functions.php.
2. Add this PHP code:

add_action('wp_enqueue_scripts', 'enqueue_two_col_question');

function enqueue_two_col_question() {
    $post_types = array('sfwd-courses', 'sfwd-lessons', 'sfwd-topic', 'sfwd-quiz');
    if (is_singular($post_types)) {
        $src_uri = get_theme_file_uri('/two-col-question.js');
        $src_ver = filemtime(get_theme_file_path('/two-col-question.js'));
        wp_enqueue_script('two-col-question', $src_uri, array('jquery'), $src_ver, true);
    }
}

• What It Does: Loads the script only on LearnDash pages, ensuring efficiency.

Step 4: Add CSS

1. In styles.css, add:

/* Two columns for tagged questions */
@media (min-width: 992px) {
    .wpProQuiz_question.columns-2 .wpProQuiz_question_text {
        max-height: 20em;
        overflow-y: scroll;
        padding-right: 1em;
        position: absolute;
        width: 50%;
    }

    .wpProQuiz_listItem .wpProQuiz_question.columns-2 > * + * {
        border-left: transparent solid 1em;
        left: 50%;
        position: relative;
        width: 50%;
    }
}

How It Works

• <span>: Marks the question.
• JavaScript: Adds the columns-2 class.
• CSS: Styles only questions with that class.

Step 5: Save and Test

• Save all files, then preview your quiz. Only tagged questions should show the two-column layout.

Troubleshooting Tips

• Layout Not Splitting?
• Double-check your QuizPro ID, answer type, or <span> tag.
• Ensure your screen is wider than 992px (resize your browser to test).
• Text Overlapping?
• Increase max-height (e.g., to 25em) for longer passages.
• JavaScript Not Working?
• Confirm the script is in the right folder and enqueued in functions.php.
• Check for jQuery errors in your browser’s console (F12).

Pro Tip: Use your browser’s developer tools (F12) to inspect the quiz and verify CSS classes are applied.

Extra Tips for Success

• Accessibility: Test with a screen reader to ensure logical flow. Add ARIA labels if needed (e.g., role="region").
• Mobile: The CSS targets desktops (>992px). Smaller screens revert to single-column automatically.
• Updates: Retest after LearnDash or WordPress updates—custom code can break. Keep backups handy!

Wrap-Up

A two-column layout can transform your LearnDash quizzes from clunky to sleek, boosting student engagement and comprehension. Whether you apply it to an entire quiz (Method 1), specific question types (Method 2), or hand-picked questions (Method 3), you’ve got the tools to make it happen.