How to create a TRUE or FALSE quiz question using JavaScript

How to Build a True/False Quiz for Your LMS with HTML, CSS, and JavaScript

Hi everyone, I’m Chris Richter — welcome back!
Today, we’re diving into another simple, yet powerful interactive activity you can easily add to your educational content: a True/False quiz built with HTML, CSS, and JavaScript.

This interactive quiz allows students to answer a series of True/False questions pulled from a hidden array. Students simply click the checkmark or the cross to indicate their answer and receive immediate feedback based on their choice. After reviewing their response, they can move on to the next question. It’s lightweight, customizable, and perfect for integrating into your Learning Management System (LMS).

Let’s walk through how it’s made!

What the Quiz Looks Like

The activity starts by presenting a simple instruction and a question, such as:

“Was Chris Richter Prime Minister of Australia?”

Students click on either the ✔️ (True) or ❌ (False) icon. Based on their selection, they receive instant feedback — for example:

“You chose False. The answer is False because Richter is not the Prime Minister (yet or ever!)”

Then, a “Next Question” button appears. Students can move through the entire collection of questions, and at the end, a “Restart” button lets them try again from the beginning.

How It’s Built

The structure behind the quiz is straightforward, relying mainly on HTML, CSS, and JavaScript.

HTML Layout

The HTML includes:

  • A heading (<h2>) for instructions
  • A question container (<div> with ID question-box)
  • A separate text container for the actual question (<div> with ID question-text)
  • Two FontAwesome icons: a checkmark for True and a cross for False
  • A hidden response section that appears after answering
  • “Next Question” and “Restart” buttons (hidden by default)

Using FontAwesome makes it super easy to add polished, scalable icons without having to create custom graphics.

CSS Classes

We use simple CSS classes like:

  • .ri-hide: display: none — to hide or show elements as needed
  • .ri-correct: Adds a green border for correct answers
  • .ri-incorrect: Adds a red border for incorrect answers

JavaScript Logic

This is where the magic happens:

  • A questions array holds all the questions, their correct answers, and response feedback.
  • When the page loads, a reset function initializes everything — hiding responses, hiding buttons, and loading the first question.
  • Event listeners are attached to the True and False icons. When a student clicks an icon:
    • The code checks if the answer matches the correct one.
    • It displays the corresponding feedback.
    • It shows the “Next Question” button.
  • Clicking “Next” moves to the following question, resets the feedback display, and updates the question text.
  • When students finish all questions, the “Restart” button appears, letting them start over.

Why This Approach Works

This format is simple but very effective for:

  • Immediate feedback: Students know right away whether they got it right or wrong.
  • Scalability: You can easily add more questions just by updating the array in the JavaScript.
  • Flexibility: You can style it any way you want using CSS.
  • Easy LMS Integration: Once the activity is built, you just embed it into your LMS using an iframe — quick and clean!

To embed it:

  • Click on Embed.
  • Choose the iframe option.
  • Copy the code.
  • Paste it into your LMS’s HTML settings.
  • Save and display — done!

Final Thoughts

This simple True/False quiz is a great way to make your educational content more interactive and engaging without needing any complicated tools. Plus, it’s fully customizable — you can swap out questions, tweak styles, and even expand it with extra features like scoring if you want.

Keep an eye out for more tutorials in this series — we’ll keep adding new activities and ideas to help you build better, more interactive learning experiences!

👉 Don’t forget to subscribe to stay updated on the next video and blog post!