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; font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.success {
color: green;
font-size: 14px;
margin-bottom: 10px;
}
.button { .button {
padding: 10px 20px; padding: 10px 20px;
background-color: #4CAF50; background-color: #4CAF50;
@ -46,6 +51,25 @@
.button:hover { .button:hover {
background-color: #45a049; 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> </style>
</head> </head>
<body> <body>
@ -55,6 +79,7 @@
<input type="text" id="captcha-answer" placeholder="Enter your answer here"> <input type="text" id="captcha-answer" placeholder="Enter your answer here">
<div id="error-message" class="error"></div> <div id="error-message" class="error"></div>
<button class="button" id="submit-button">Submit</button> <button class="button" id="submit-button">Submit</button>
<div id="captcha-completion"></div>
</div> </div>
<script> <script>
@ -171,15 +196,20 @@
let strikeCount = 0; let strikeCount = 0;
function loadNewQuestion() { function loadNewQuestion() {
if (currentQuestionIndex >= questions.length) { // Randomize the question order
alert("No more questions available."); const randomIndex = Math.floor(Math.random() * questions.length);
return; const questionData = questions[randomIndex];
}
const questionData = questions[currentQuestionIndex]; // Display the new question
document.getElementById("captcha-question").textContent = questionData.question; document.getElementById("captcha-question").textContent = questionData.question;
document.getElementById("captcha-answer").value = ""; document.getElementById("captcha-answer").value = "";
document.getElementById("error-message").textContent = ""; 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() { function checkAnswer() {
@ -187,25 +217,33 @@
const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase(); const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase();
if (answer === correctAnswer) { 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; strikeCount = 0;
currentQuestionIndex++; setTimeout(loadNewQuestion, 2000); // Wait before loading next question
loadNewQuestion();
} else { } else {
strikeCount++; strikeCount++;
if (strikeCount < 3) { if (strikeCount < 3) {
document.getElementById("error-message").textContent = "Incorrect answer. Try again."; document.getElementById("error-message").textContent = "Incorrect answer. Try again.";
currentQuestionIndex++; document.getElementById("captcha-completion").textContent = "";
loadNewQuestion(); document.getElementById("captcha-completion").classList.remove("correct", "error");
} else { } 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); document.getElementById("submit-button").addEventListener("click", checkAnswer);
loadNewQuestion(); loadNewQuestion(); // Load the first question when the page loads
</script> </script>
</body> </body>