In general, throughout all user-facing pages generated by LearnDash, including Course, Lesson, Topic, Assignment and Quiz pages – the plugin utilises its own cascading style sheet rules in order to control how various visual elements are displayed to the user.
There can however be occasions where certain elements just don’t look the way that you would expect. This is because every WordPress site is different! In that for each site there may be a particular theme running under the hood, or perhaps a system critical plugin which itself is trying to control all HTML elements sharing a particular tag or class name on any page – such as form elements like input tags.
Sometimes this can have a knock-on effect with how your LearnDash pages look to your user. This is why it is always recommended to take a look at each page that you design within your course, from the viewpoint of a learner account. This can make sure that the user experience is always as you intend. (Tools like User Switching can help you check out any page on your WordPress site from the viewpoint of any learner account in seconds!)
Recently we were working for a client who were consulting with us during the process of migrating their existing LMS system to LearnDash. In doing so, we needed to rely heavily on the in-built quizzing capabilities of LearnDash for their formal qualification examinations, forming a key components of their online course library.
We were pleased to see that the client utilised a variety of question types in their online course quizzes. This is important in order to provide variety, interest, and varying levels of complexity for the questions being asked. (LearnDash Essay type questions are a great way of asking learners to provide the rationale behind their concluding answer to the question).
When we tried to create a specific type of question within the quiz, we saw that certain on-screen elements were not displaying as expected:
Perhaps you have seen a similar behaviour with ‘Fill In The Blank’ style questions on your LearnDash site?
It is in this situation where we would need to rely on custom CSS styling code in order to correct the issue. In this case we would recommend applying the following custom CSS styling rules, either into your site’s child theme CSS file, or perhaps your theme provides a way to directly inject the code from within WP-Admin.
Here is what we used in this particular situation:
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem span.wpProQuiz_cloze {max-width:150px;}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_listItem[data-type=cloze_answer] .wpProQuiz_questionListItem {overflow:hidden;}
li.wpProQuiz_questionListItem p {padding-bottom:12px;}
The results had an immediate impact! We saw that input boxes were now properly appearing in-line with the sentence that the users had to complete during the quiz:
CSS is a powerful tool when it comes to improving the visual experience of LearnDash. If you are facing styling or layout issues with any part of your LearnDash site, be sure to get in touch with us as we’d be happy to look into the problem and provide any help and development support that we can.
Hello
I have an issue with fill in the blanks quiz question on learndash.
I want to type same number of letters in every fill in the blank questions.
For example, if the answer is of 10 letters like “management” then I can type only 10 letters.
But if the answer is 15 letters then I can type only 15 letters.
I want to have same number of letters.
I will appreciate if you can help to solve this issue.
Applying a maxLength attribute to each input field should help you to achieve this.
https://www.w3schools.com/tags/att_input_maxlength.asp