main.js

index.html

style.css

Run

const flashcards = [
  {
    question: "What does HTML stand for?",
    answer: "HyperText Markup Language"
  },
  {
    question: "What keyword is used to declare a variable in JavaScript?",
    answer: "let"
  },
  {
    question: "What is the capital of Japan?",
    answer: "Tokyo"
  },
  {
    question: "What symbol starts a comment in JavaScript?",
    answer: "//"
  },
  {
    question: "What data type is used for true/false values?",
    answer: "boolean"
  }
];

let currentIndex = 0;

const questionText = document.getElementById("questionText");
const answerInput = document.getElementById("answerInput");
const submitBtn = document.getElementById("submitBtn");
const feedback = document.getElementById("feedback");
const nextBtn = document.getElementById("nextBtn");

function showQuestion() {
  questionText.textContent = flashcards[currentIndex].question;
  answerInput.value = "";
  feedback.textContent = "";
}

submitBtn.onclick = function () {
  const userAnswer = answerInput.value.trim().toLowerCase();
  const correctAnswer = flashcards[currentIndex].answer.toLowerCase();

if (userAnswer === correctAnswer) {
    feedback.textContent = "✅ Correct!";
    feedback.style.color = "lightgreen";
  } else {
    feedback.textContent = "❌ Try again.";
    feedback.style.color = "salmon";
  }
};

nextBtn.onclick = function () {
  currentIndex = (currentIndex + 1) % flashcards.length;
  showQuestion();
};

showQuestion();

Console

Click RUN to execute project