Sneed-Group/simple-captcha
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

randomize questions, add "correct" text, remove question/form on correct/incorrect

Browse source
This commit is contained in:
Arma-Damna-Dillo 2025-02-15 16:45:20 +00:00
parent 12db09dd7d
commit cedd74a9ff
1 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
captcha.html
View file

@ -35,6 +35,11 @@
font-size: 14px;
margin-bottom: 10px;
}
.success {
color: green;
font-size: 14px;
margin-bottom: 10px;
}
.button {
padding: 10px 20px;
background-color: #4CAF50;
@ -46,6 +51,25 @@
.button:hover {
background-color: #45a049;
}
#captcha-completion {
font-size: 16px;
margin-top: 20px;
}
#captcha-question, #captcha-answer, #submit-button {
display: block;
}
#captcha-completion.correct {
color: green;
font-weight: bold;
font-size: 18px;
}
#captcha-completion.error {
color: red;
font-size: 16px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
@ -55,6 +79,7 @@
<input type="text" id="captcha-answer" placeholder="Enter your answer here">
<div id="error-message" class="error"></div>
<button class="button" id="submit-button">Submit</button>
<div id="captcha-completion"></div>
</div>
<script>
@ -171,15 +196,20 @@
let strikeCount = 0;
function loadNewQuestion() {
if (currentQuestionIndex >= questions.length) {
alert("No more questions available.");
return;
}
// Randomize the question order
const randomIndex = Math.floor(Math.random() * questions.length);
const questionData = questions[randomIndex];
const questionData = questions[currentQuestionIndex];
// Display the new question
document.getElementById("captcha-question").textContent = questionData.question;
document.getElementById("captcha-answer").value = "";
document.getElementById("error-message").textContent = "";
document.getElementById("captcha-completion").textContent = "";
document.getElementById("captcha-question").style.display = 'block';
document.getElementById("captcha-answer").style.display = 'block';
document.getElementById("submit-button").style.display = 'block';
document.getElementById("captcha-completion").classList.remove("correct", "error");
currentQuestionIndex = randomIndex;
}
function checkAnswer() {
@ -187,25 +217,33 @@
const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase();
if (answer === correctAnswer) {
alert("CAPTCHA Passed!");
document.getElementById("captcha-completion").textContent = "Correct!";
document.getElementById("captcha-completion").classList.add("correct");
document.getElementById("captcha-question").style.display = 'none';
document.getElementById("captcha-answer").style.display = 'none';
document.getElementById("submit-button").style.display = 'none';
strikeCount = 0;
currentQuestionIndex++;
loadNewQuestion();
setTimeout(loadNewQuestion, 2000); // Wait before loading next question
} else {
strikeCount++;
if (strikeCount < 3) {
document.getElementById("error-message").textContent = "Incorrect answer. Try again.";
currentQuestionIndex++;
loadNewQuestion();
document.getElementById("captcha-completion").textContent = "";
document.getElementById("captcha-completion").classList.remove("correct", "error");
} else {
alert("Too many incorrect attempts. Please refresh the page.");
document.getElementById("error-message").textContent = "You have made too many incorrect attempts. Please refresh the page.";
document.getElementById("captcha-completion").textContent = "";
document.getElementById("captcha-completion").classList.remove("correct", "error");
document.getElementById("captcha-question").style.display = 'none';
document.getElementById("captcha-answer").style.display = 'none';
document.getElementById("submit-button").style.display = 'none';
}
}
}
document.getElementById("submit-button").addEventListener("click", checkAnswer);
loadNewQuestion();
loadNewQuestion(); // Load the first question when the page loads
</script>
</body>