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"
;
}