const addCard = document.getElementById("add");
const subCard = document.getElementById("subtract");
const multiplyCard = document.getElementById("multiply");
const divideCard = document.getElementById("divide");
const dialog = document.querySelector("dialog");
const operator = document.getElementById("operator");
let selectedCard = "";
let flashcardCounter = 0;
function identifyCard() {
generateFlashcard();
}
addCard.addEventListener("click", function () {
dialog.classList.add("open")
selectedCard = "add"
operator.innerHTML = "+"
dialog.showModal()
dialog.style.display = "flex"
identifyCard()
})
subCard.addEventListener("click", function () {
dialog.classList.add("open")
selectedCard = "subtract"
operator.innerHTML = "-"
identifyCard()
dialog.showModal()
dialog.style.display = "flex"
})
multiplyCard.addEventListener("click", function () {
dialog.classList.add("open")
selectedCard = "multiply"
operator.innerHTML = "*"
dialog.showModal()
identifyCard()
dialog.style.display = "flex"
})
divideCard.addEventListener("click", function () {
dialog.classList.add("open")
dialog.showModal()
selectedCard = "divide"
operator.innerHTML = "/"
identifyCard()
dialog.style.display = "flex"
})
function generateFlashcard() {
const num1 = Math.floor(Math.random() * 10) + 1;
const num2 = Math.floor(Math.random() * 10) + 1;
document.getElementById('num1').textContent = num1;
document.getElementById('num2').textContent = num2;
}
function getCorrectAnswer(num1, num2) {
if (selectedCard == "add") {
return num1 + num2;
}
else if (selectedCard == "subtract") {
return num1 - num2;
}
else if (selectedCard == "multiply") {
return num1 * num2;
}
else {
var result = 0;
result = (num1 / num2).toFixed(1);
return parseFloat(result)
}
}
function checkAnswer() {
const num1 = parseInt(
document.getElementById('num1').textContent);
const num2 = parseInt(
document.getElementById('num2').textContent);
const userAnswer = parseFloat(
document.getElementById('answer').value);
const correctAnswer = getCorrectAnswer(num1, num2);
const resultDiv = document.getElementById('result');
if (userAnswer === correctAnswer) {
resultDiv.textContent = 'Correct! Well done!';
resultDiv.style.color = 'green';
} else {
resultDiv.textContent = 'Incorrect answer!';
resultDiv.style.color = 'red';
}
setTimeout(() => {
generateFlashcard();
resultDiv.textContent = '';
document.getElementById('answer').value = '';
}, 1000);
}
function closeDialog() {
dialog.close();
dialog.style.display = "none";
}