LearnDash Design & Tutorials

LearnDash Design & Tutorials

Build Custom Styles for LearnDash Quiz Questions

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

Have you ever wanted your answers displayed inline (next to each other) instead of stacked? How about using an actual blank line for fill-in-the-blank questions?

In this tutorial, I’ll explain how you can use custom CSS to design your quiz questions in various ways.

NOTE
It’s very difficult to actually edit the HTML <form> elements of a LearnDash quiz, so we are limited to only what CSS can do. But let’s get creative!

If you’re intimidated by CSS, or just want the easy way to do this, check out all 70+ options in the LearnDash Quiz Customizer plugin. Here’s a quick sample of a few question styles available in the plugin:

Inline Answers for Single/Multiple Choice Questions

For single & multiple choice questions, LearnDash stacks all answer choices one on top of the other. This might work fine for most people, but if you have really short answers, or only 2 or 3 choices, you might want your answers to appear side-by-side, or inline.

How to Handle Mobile Devices

Since mobile devices & smaller screens only have but so much room, we’re going to wrap all of our CSS in a media query. A media query is fancy way to say that we’re only going to apply this CSS on a particular screen size. In this case, I’m going to say 600px and higher.

The media query looks like this:

@media (min-width: 600px) {
	...CSS here...
}

Now our code will only apply to screens that are 600px wide or larger.

Forcing Questions Inline

LearnDash inline quiz answers

Now let’s bring all answers inline, next to each other. To do this, we’ll use a popular CSS property called Flexbox.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] {
	display: flex;
	flex-wrap: wrap;
}

Take note of the [data-type="single"] part of the code. This means it will be applied to single choice questions only.

If you want to apply it to multiple choice questions, simply replace single with multiple. In most cases, you’ll probably want to apply it to both, in which case you can combine them like this:

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"],
.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] {
	display: flex;
	flex-wrap: wrap;
}

We include the flex-wrap: wrap; in case your answers reach the edge of the container. We don’t want them to get cut off, so we need to tell CSS to make them wrap onto a new line.

LearnDash inline quiz answers new line wrap

Margin

By default, LearnDash only places a bottom margin on each answer. This is fine when they are stacked, but when we move them next to each other, we’ll also want some space in between them.

I like to use relative units (ems or rems), but feel free to adjust to pixels (px) if that’s more comfortable for you. You’ll see 4 values for margin in the code below. They apply to the 4 sides of each answer, in this order:

top right bottom left

So we’re adding a right and a bottom margin of 0.5em to each list item inside the list of answers.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem,
.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem {
	margin: 0 0.5em 0.5em 0;
}

Here’s the final code, applied to both single & multiple choice questions, including the media query. Feel free to adjust to something other than 600px to fit your needs.

@media (min-width: 600px) {
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"],
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] {
		display: flex;
		flex-wrap: wrap;
	}
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem,
	.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem {
		margin: 0 0.5em 0.5em 0;
	}
}

Blank Underlines for Fill-in-the-Blank Questions

LearnDash uses a light grey background color for answers within a fill-in-the-blank question. Wouldn’t it be nice to use an actual blank instead?

LearnDash underline fill-in-the-blank question

HTML Markup

Before we get into the CSS, it’s important to know how these questions are structured. Each fill-in-the-blank answer consists of a <span> tag with an <input> inside of it.

Reset CSS

LearnDash chose to apply some styling to the <span> tag, but I feel like applying styles to the <input> gives us more flexibility. So the first thing we’re going to do is get rid of all the styles on the <span>.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze {
	display: inline-block;
	margin: 0 .1875em;
	padding: 2px;
	background: none;
	border: 0;
	border-radius: 0;
}

This should wipe clear all the default LearnDash styles, and allow us to apply what we want to the <input>.

Create Underlines

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze input[type="text"] {
	height: auto;
	margin: 0;
	padding: 0.125em 0.25em;
	background: transparent;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}

I’ll briefly explain what this code is doing:

  • height: auto; ensures that the blank matches the height of the surrounding text
  • The padding adds small spaces to the left & right of the underline, as well as between the line and the text that a user enters
  • background: transparent; removes the default background color that is usually applied to other <input> fields on your site
  • border: 0; removes any border that might be applied to other <input>s
  • The border-bottom adds a 1px solid border (which creates the underline). The currentColor ensures the border matches the surrounding text color.
  • And the border-radius is set to 0 to make sure our line is perfectly straight and not curved at the ends

Dashed Underline

To use a dashed underline instead of a solid one, simply replace the border-bottom line with this (replacing “solid” with “dashed”):

border-bottom: 1px dashed currentColor;

Change Color on :focus

<input> elements have a :focus state, which is when they are currently in focus (or selected). This happens when the cursor is currently active inside the element. Thanks to CSS, we can apply a different style to indicate when the <input> is in focus.

In this example, I’ll change the color of the bottom border, as well as add an additional 1px box shadow that appears inside the <input>, giving the appearance that the underline grows to 2px thickness.

.learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze input[type="text"]:focus {
	background: transparent;
	border-color: #000;
	box-shadow: inset 0 -1px 0 0 #000;
}
  • I set the background to transparent in case other theme styles are adding background colors when an <input> is in focus
  • We then set the border-color. I used black (#000) but you can use any color you’d like.
  • And finally, we set an inset box-shadow with a -1px offset on the y-axis, and set it’s color to match the border color

That’s all for now, but as I come up with new ideas for LearnDash quiz question styles, I’ll add them to this post.

If you’ve come up with any of your own custom CSS for LearnDash quizzes, please share in the comments.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App β†’

Previous

Create a Dark Mode for LearnDash Focus Mode

Next

Hide Course and/or Topic Name in LearnDash Breadcrumbs

25 Comments

  1. Joe Zychik

    Could you please provide instruction on how to change the font size in the answer option for Learndash? Thanks.

    • Joe — I need more specifics on what you mean by the “answer option.” Are you referring to the answers displayed for single & multiple choice questions when the user is taking the quiz? Some part of the answer displayed after the quiz is over and the student is reviewing their answers?

      If you can provide a screenshot, that would be extremely helpful.

      Also, what theme are you using? Sometimes they can dictate font sizes and I might need to override a theme style.

  2. Greg

    Is there a way to control the width of the input, so they are all the same and don’t give a clue to the answer?

    • Hi Greg — I assume you’re referring to fill in the blank questions.

      Yes, you can add this CSS to the “Additional CSS” area of the Customizer. Adjust the width to your liking.

      .learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="cloze_answer"] .wpProQuiz_questionListItem .wpProQuiz_cloze input[type="text"] {
          width: 100px !important;
      }
  3. Greg

    This is great, thanks Dave. I just didn’t have the !important bit. I’ve also figured out that if you set the width to 100% and place the blank in a span with inline-block alignment, you can individually customise all of your blank widths by setting widths on the spans, which is great if you have tables with different column widths etc.

  4. Daryl Rogers

    I’ve got an issue where when doing my quiz on a mobile device the boxes (or circles) on the multiple choice questions are too small to see if they have been selected…

    Does anyone know how to change the size of the multiple choice boxes/circles when shown on a mobile….?

    • Here’s a fix for Chrome/Android browsers, but apparently it doesn’t work in Safari. It’s a known LearnDash bug that has been going on for months, with at least 5 people per week posting about it. 🀞 it gets addressed soon.

  5. Nigel Bailey

    Hi
    Thanks for the CSS to display single option answers inline.
    How do I make the answer boxes the same width? If the answer is one word, all is fine, but if the answers are two or more words, they wrap.

    • I haven’t tested this, but where you apply the margin in the CSS code, you would add another line for width. Example: width: 100px; The full code would look like this.

      .learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="single"] .wpProQuiz_questionListItem,
      .learndash .wpProQuiz_content .wpProQuiz_questionList[data-type="multiple"] .wpProQuiz_questionListItem {
      	margin: 0 0.5em 0.5em 0;
      	width: 100px;
      }
  6. Kene Nwosu

    Hi Dave, all!

    I’m wondering if it is possible to have multiple font sizes and color in Learndash questions, answers and feedback boxes?

    Would I be able to produce something like this for either of those three?
    https://imgur.com/a/VYSjaNA

    • Hi Kene,

      You can do something very similar to the image you posted, but it would require some basic HTML knowledge (basically, just how to use <span> tags), as well as some general CSS. You can do custom colors, font sizes, superscript & subscript and special characters. I don’t think you’d be able to do formulas that include denominators.

      Here’s an example that would render 3 to the tenth power in red with a font size of 10px.

      <span style="color:red; font-size:10px;">3<sup>10</sup></span>
    • Kene Nwosu

      Thank you so much! I thought html tags were not working for me because for a while none of my expressions were rendering or saving, hence the question.

      But I think I figured out that this was caused by my use of special greek characters e.g. (Ζ›, 𝒗) with the wrong encoding.

      For fractions, wordpress.org/plugins/simple-mathjax works in all quiz sections apart form the correct/incorrect section.

    • πŸ™ŒπŸΌ

  7. Andrew

    I’ve seen some great content on this website, really helpful information found no where else.

    I also got a strange issue, only on mobile on the quiz pages the buttons don’t have the same styling. They have rounded corners and a purple gradient.

    Any idea what to try to solve this issue?

    • Off the top of my head, no. Could be a number of different things, but likely your theme’s styling, or some custom styles that were added. If you have a quiz page that is public and can post a link, I can take a quick look.

  8. Lauren

    Hi Dave! Is it possible to change the color of the hover state of the quiz answers within a quiz in focus mode? Right now the hover color is just a lighter default learndash blue and I want to change it to more closely match my brand. Also, similarly, when I hover over lessons and topics in focus mode it’s the same blue and I want to change that also. Any help would be much appreciated!

    • Hi Lauren,

      Yes, it’s possible to change both of these things. I have two premium plugins that do what you’re looking for, in addition to over 100 other design options for LearnDash. The Quiz Customizer will address the quiz answer hover state, and our Design Upgrade Pro plugin will give you tons of options for the navigation in focus mode.

      It’s also possible to change these using your own custom CSS (which is essentially what those plugins do, they just make it easy for you to do without writing any code).

  9. tik tok

    LearnDash total of 8 types of questions:

    Single Choice
    Multiple Choice
    Free Choice
    Sorting Choice
    Matrix Sorting Choice (Matching)
    Fill-in-the-Blank
    Assessment (Survey)
    Essay / Open Answer
    However it’s half-way close to LMS biggies like Moodle (which provides around 16), and Blackboard (which provides 13 quiz question types).

    May I hire you to write other types of quiz questions
    I also purchased your Quiz Customizer for LearnDash plugin
    If you can add these options to that plugin then great
    Thank you

  10. Hi for essay question how can I adjust textarea length?

    • Hi Marwa — You would need to use custom CSS to do this. You can add your own CSS via Appearance > Customize, then go to “Additional CSS.” You’ll need to use your browser’s inspector to locate a class name or selector you can use, and then use the width property to adjust it. Or it’d be a 5 minute job for a CSS developer.

  11. Cristian

    hello very good,
    I have noticed that when correcting a questionnaire in learndash with multiple options, I get the correct answers (in green) and the incorrect answers (in red). So far good. The problem is that those questions that I have left blank also appear as incorrect and in red. What I want is that the ones I have left blank, eliminate the “wrong answer” label as well as change the background color to something other than red.

    Could such a function be done?

    Thanks a lot

    • Hi Cristian — This can probably only be achieved with custom development.

      Unfortunately, LearnDash only has 2 options for the message & color it displays with quiz questions. They are either correct or incorrect. There is no neutral option. And LearnDash considers blank answers to be incorrect.

  12. Good work Dave, please I would like to know if it is possible to hide the number in the review boxes so that it will only be boxes that are displaying.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén