How to display LearnDash Quiz Questions in 2 Columns

Recently someone posted a question in the Learndash Tips and Tricks Group and asked if it was possible to display LearnDash Quiz Questions in 2 columns? This is achievable by using the HTML layout already provided by LearnDash and some custom CSS. When talking to my partner, he instantly asked: “is this global, or on per quiz or on per question bases”?

The global (all quizzes and all questions) solution does not seem to be very practical. I thought of making this available on per quiz, per question answer type or on per individual bases.

Before we go into details about how to achieve this. It’s import to understand the context. For their particular use case they have a comprehension test. The students are required to read a very long passage and then answer some questions about the passage. As it is a long passage it requires a fare amount of scrolling up and down the screen. So it makes perfect sense to show the passage in 2 columns. The 1st column displays the passage and the 2nd column displays the questions. I do assume you do have basic knowledge how to create and/or modify CSS/JS files for the theme you site is using.

And so here we go:

PER QUIZ ID

We use a QuizPro ID, you can find it in admin menu (backend): LearnDash LMS > Quizzes
Look in the ‘Shortcode’ column for  entry where ‘nn’ is the QuizPro ID.

E.g.: the quiz you want to style has shortcode [LDAdvQuiz 21], its ID is 21, therefore the CSS selector for quiz content is ‘#wpProQuiz_21‘. Add following to your site theme (usually child), styles.css:

/* 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

Following are CSS selectors for question answer type:

  • 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%;
    }
}
Shopping Cart
  • Your cart is empty.