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

/ Blog / By

Someone recently asked in the Learndash Tips and Tricks Group if it’s possible to display LearnDash Quiz Questions in two columns. The good news is that this can be done by using the HTML layout provided by LearnDash and adding some custom CSS. However, my partner immediately asked a question that is worth considering: is this change global or specific to a quiz or question? It’s important to think about this because the amount of work required to implement the change depends on the answer. Overall, using the existing LearnDash HTML layout and custom CSS is a fairly simple way to achieve this outcome.”

After considering the options, a global solution (applying the change to all quizzes and questions) doesn’t seem very practical. Instead, we thought it might be more useful to offer the change on a per quiz basis, per question answer type, or even on an individual basis. This way, users can choose the level of customization that works best for their needs.

Before we dive into the specifics of how to implement this change, it’s important to understand the context. In this particular case, the students are taking a comprehension test that involves reading a long passage and answering questions about it. To make the process easier, the idea is to display the passage in one column and the questions in another, so that the student doesn’t have to scroll up and down the screen as much. It’s important to note that this solution assumes that you have some basic knowledge of how to create and modify CSS/JS files for your site’s theme. With that said, let’s move on to the details of how to implement this change.

And so here we go:

PER QUIZ ID

To style a LearnDash quiz, you’ll need to use its QuizPro ID. You can find this ID in the backend of your site, under the LearnDash LMS > Quizzes menu. Look for the ‘Shortcode’ column, and find the entry that looks like [LDAdvQuiz nn], where ‘nn’ is the QuizPro ID. For example, if the shortcode for your quiz is [[LDAdvQuiz 21]], then the ID is 21, and the CSS selector for the quiz content will be ‘#wpProQuiz_21’. To use this selector, add the following code to your site’s theme (usually a child theme), in the styles.css file:

/* Apply two columns by quiz ID e.g.: wpProQuiz_21 */
@media (min-width: 992px) {
    #wpProQuiz_21 .wpProQuiz_question .wpProQuiz_question_text {
        max-height: 20em;
        padding-right: 1em;
        overflow-y: scroll;
        position: absolute;
        width: 50%;
    }

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

PER ANSWER TYPE

Here are the CSS selectors for the various question answer types:

  • single Single choice
  • multiple Multiple choice
  • free_answer “Free” choice
  • sort_answer “Sorting” choice
  • matrix_sort_answer “Matrix Sorting” choice
  • cloze_answer Fill in the blank
  • assessment_answer Assessment
  • essay Essay / Open Answer

Add following to your site theme (usually child), styles.css:

/* Apply two columns by answer type e.g.: cloze_answer (Fill in the Blanks) */
@media (min-width: 992px) {
    .wpProQuiz_listItem[data-type="cloze_answer"] .wpProQuiz_question .wpProQuiz_question_text {
        width: 50%;
        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%;
    }
}

PER INDIVIDUAL QUESTION

In this case when you edit the question you insert above the question text:

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

Create new javascript file in your theme (child theme) folder e.g.: two-col-question.js The content:

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

Add following to your site theme (usually child), functions.php:

add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_two_col_question' );

function your_theme_enqueue_two_col_question () {
  // The script will load only for listed post types.
  $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_path = get_theme_file_path('/two-col-question.js');
    $src_ver = date( "ymd-Gis", filemtime( $src_path ) );
    wp_enqueue_script( 'two-col-question', $src_uri , array(), $src_ver, true );
  }

}

Finally add following to your site theme (usually child), styles.css:

/* columns-2 class added by js */
@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 .wpProQuiz_questionList {
        border-left: transparent solid 1em;
    }

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