The Taskerly Blog

Master Your Online Business Tech

Hiding Correct Answers in Teachable Quizzes

Heads up! This post may contain affiliate links. That means if you click on a link and then make a purchase, we might make a small commission. But rest assured, we ONLY recommend tools that we know, love and use in our own business.

When your students answer a question in a Teachable quiz, they get immediate feedback as to which is the correct answer. That format doesn’t suit every course, especially those using graded quizzes.

In some situations, you’ll want students to complete the quiz, get their grade, and then retake the quiz without knowing exactly which questions they got wrong. That way, you can be sure they’re mastering the content rather than just learning how to pass the quiz.

Fortunately, there’s a quick way to hide the feedback that tells students which answer was correct or incorrect.

We’ll use some custom code to remove the green and red styling that shows up after your students have submitted their answer.

One caveat… this solution will change the styling but it won’t remove the¬†step that shows them the answer. That means that when they submit their answer, they’ll just need to click Next again in order to move on to the next question.

How to Hide the Correct Answer in Teachable Quizzes

Step 1: Grab the custom code

Highlight and copy the following code to your clipboard, ready to paste into Teachable:

/* HIDE CORRECT QUIZ ANSWERS */

span[aria-live="polite"],
i.quiz-answer-icon-incorrect.fa.fa-times,
i.quiz-answer-icon-correct.fa.fa-check {
    display: none !important;
}

.quiz-wrapper .quiz.answered .quiz-answer-container.selected.incorrect .quiz-answer,
.quiz-wrapper .quiz.answered .quiz-answer-container.correct .quiz-answer,
.quiz-wrapper .quiz .quiz-answer-container .quiz-answer {
    background-color: white !important;
    border: 1px solid #eee !important;
    color: #818181 !important;
}

How It Works

If you want to customise the code, here’s how it works.

First, we’re targeting and hiding the elements that show the correct/incorrect answer:

  • The line of text that appears above the answers and says “correct” or “incorrect.
  • The red cross that appears next to the incorrect answer.
  • The green tick that appears next to the correct answer.

Next, we’re making sure that all of the answers retain the same background colour, font colour and border colour:

  • The box showing the incorrect answer (shown with red styling, by default).
  • The box showing the correct answer (shown with green styling, by default).
  • The box showing any answers that weren’t selected and aren’t the correct answer either.

Step 2: Installing your custom code

This is the easy part!

  1. Copy the code to your clipboard.
  2. Open up your Teachable dashboard.
  3. Head to Site > Code Snippets.
  4. Paste your code into the CSS section.
  5. Click Save.

That’s it! Your students will now be unable to see the feedback that tells them whether the answer they just submitted was correct or not. They’ll still be able to see their score at the end of the quiz, but now they won’t know which answers, in particular, were incorrect.

Our Favourite Tools
Heads up! Some of these are affiliate links so we may earn a commission if you sign up.

FREE

The Ultimate Teachable Set-Up Checklist

This checklist will give you a comprehensive rundown of every essential setting in Teachable, including best practices for sales pages, affiliate programs, curriculum structure and much more. Don’t launch without this list!

FREE

SERVICES

Work With Us

Fed up of fiddling with tech? Not enough time to do the things you should really be doing? We can help.

Need Hands-On Support?

Why struggle through on your own when you can have an expert handle it for you? Stay focused on the big picture and let us handle the legwork.