How to CLEAN UP the formatting of quiz questions using HTML in MOODLE

How to Fix Formatting Issues in Quiz Questions

When building online quizzes, you might occasionally notice that the formatting of the questions or answers looks a bit… off. Maybe there’s strange spacing, misaligned text, or unexpected bullet points. It’s a common issue — but the good news is, it’s usually an easy fix! Let’s walk through why this happens and how to clean it up quickly.

Common Cause: Hidden HTML Code

One major reason formatting issues pop up is because of hidden HTML code that sneaks in when you copy and paste content — or even when you type directly into the editor. Elements like extra paragraph tags (<p>), line breaks (<br>), and lists can cause the display to look messy.

Real Example: A Multiple-Choice Question

Imagine you’re setting up a multiple-choice question like this:

Question:
Which software product is used primarily for vector graphics?

  • Adobe Illustrator
  • Lightroom
  • Premiere
  • Photoshop

Pretty straightforward, right? But sometimes when you preview the question, the answers are spaced out unevenly, some look indented weirdly, and everything feels inconsistent.

Let’s see how we can fix that!

Step 1: Inspect the Code

First, open the quiz question and look at the individual answer choices. Most quiz editors have an option to view the HTML or “source” code. When you do, you might see things like this:

<code><p>Adobe Illustrator</p><br><br>
<p>Lightroom</p><br>
<p>Premiere</p><br>
<p>Photoshop</p></code>Code language: HTML, XML (xml)

Notice all those <br> tags? They’re creating unnecessary space between the answers. There might also be empty paragraph tags or other leftover formatting.

Step 2: Clean Up the HTML

Start cleaning it up by:

  • Removing unnecessary <br> (line breaks).
  • Deleting empty <p> (paragraph) tags.
  • Ensuring consistency — if you use <p> tags, make sure they are used the same way for all answers.

After tidying, your code should look something like:

<code><p>Adobe Illustrator</p>
<p>Lightroom</p>
<p>Premiere</p>
<p>Photoshop</p></code>Code language: HTML, XML (xml)

Clean, simple, and consistent!

Step 3: Special Cases – Bullet Points and Extra Formatting

Sometimes content pasted from Word documents, websites, or other rich-text editors can carry over hidden formatting like:

  • Bullet lists
  • Text direction settings (dir="ltr")
  • Styled fonts or sizes

In these cases:

  • Highlight the text, cut it out, and use “Paste without formatting” (Ctrl+Shift+V on Windows or Command+Shift+V on Mac).
  • Manually remove any remaining strange tags or styles inside the HTML editor.

This process strips out all that messy hidden code and gives you a clean slate to work with.

Step 4: Final Check

After cleaning up:

  1. Save your changes.
  2. Preview the question again.
  3. Check if all answer choices are evenly spaced and consistently formatted.

If something still looks off, inspect the HTML for that specific answer — there’s probably a leftover tag you missed.

In the example we walked through, everything looked great except for one answer (“Adobe Premiere Pro”), which still had extra spacing. A quick dive back into the code revealed more hidden tags, and after cleaning those up, everything displayed perfectly.

Bonus Tip: Learn a Little HTML

Knowing some very basic HTML — like how paragraph tags and line breaks work — can make troubleshooting these issues much faster and easier. You don’t need to be a coding expert to make your quizzes look polished and professional!

Wrapping Up

Formatting issues in quiz questions are super common, but with a little detective work and some basic HTML cleanup, you can have everything looking clean and consistent in no time. Next time your quiz looks a little “off,” dive into the code view — you’ll probably find and fix the problem in minutes!

Happy quiz building!