2025-02-15 16:33:26 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Simple CAPTCHA</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
|
}
|
|
|
|
|
.captcha-container {
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
width: 300px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
.question {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
input[type="text"] {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.error {
|
|
|
|
|
color: red;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
2025-02-15 16:45:20 +00:00
|
|
|
.success {
|
|
|
|
|
color: green;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
2025-02-15 16:33:26 +00:00
|
|
|
.button {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
background-color: #4CAF50;
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.button:hover {
|
|
|
|
|
background-color: #45a049;
|
|
|
|
|
}
|
2025-02-15 16:45:20 +00:00
|
|
|
#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;
|
|
|
|
|
}
|
2025-02-15 16:33:26 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="captcha-container">
|
|
|
|
|
<div id="captcha-question" class="question"></div>
|
|
|
|
|
<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>
|
2025-02-15 16:45:20 +00:00
|
|
|
<div id="captcha-completion"></div>
|
2025-02-15 16:33:26 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const questions = [
|
|
|
|
|
{ question: "What is 1 + 1?", answer: "2" },
|
|
|
|
|
{ question: "What is 2 + 3?", answer: "5" },
|
|
|
|
|
{ question: "What color is the sky?", answer: "blue" },
|
|
|
|
|
{ question: "Is 3 greater than 1? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What shape has 4 sides?", answer: "square" },
|
|
|
|
|
{ question: "How many legs do humans have?", answer: "2" },
|
|
|
|
|
{ question: "Is the sun hot? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What color is grass?", answer: "green" },
|
|
|
|
|
{ question: "What animal barks?", answer: "dog" },
|
|
|
|
|
{ question: "What is 5 + 5?", answer: "10" },
|
|
|
|
|
{ question: "What is 2 + 2?", answer: "4" },
|
|
|
|
|
{ question: "Is 10 less than 15? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many fingers do you have?", answer: "10" },
|
|
|
|
|
{ question: "What color is a banana?", answer: "yellow" },
|
|
|
|
|
{ question: "How many wheels does a bicycle have?", answer: "2" },
|
|
|
|
|
{ question: "What is 3 + 3?", answer: "6" },
|
|
|
|
|
{ question: "Is 5 an odd number? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is the color of the sun?", answer: "yellow" },
|
|
|
|
|
{ question: "Is 2 a prime number? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 10 - 5?", answer: "5" },
|
|
|
|
|
{ question: "How many months are there in a year?", answer: "12" },
|
|
|
|
|
{ question: "Is a cat a mammal? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many days are in a week?", answer: "7" },
|
|
|
|
|
{ question: "What is 4 + 4?", answer: "8" },
|
|
|
|
|
{ question: "What is the opposite of up?", answer: "down" },
|
|
|
|
|
{ question: "What color is an apple?", answer: "red" },
|
|
|
|
|
{ question: "How many eyes do humans have?", answer: "2" },
|
|
|
|
|
{ question: "What is the first month of the year?", answer: "january" },
|
|
|
|
|
{ question: "How many days are in a year?", answer: "365" },
|
|
|
|
|
{ question: "What animal meows?", answer: "cat" },
|
|
|
|
|
{ question: "How many sides does a triangle have?", answer: "3" },
|
|
|
|
|
{ question: "What is 1 + 9?", answer: "10" },
|
|
|
|
|
{ question: "Is 6 an even number? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What color is the sun?", answer: "yellow" },
|
|
|
|
|
{ question: "Is a lion a wild animal? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 7 + 2?", answer: "9" },
|
|
|
|
|
{ question: "What color is a stop sign?", answer: "red" },
|
|
|
|
|
{ question: "How many letters are in the word 'dog'?", answer: "3" },
|
|
|
|
|
{ question: "Is 3 an odd number? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Does a giraffe have a long neck? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is 8 greater than 4? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 2 + 5?", answer: "7" },
|
|
|
|
|
{ question: "Is the moon shiny? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many days are in a weekend?", answer: "2" },
|
|
|
|
|
{ question: "What is 10 - 3?", answer: "7" },
|
|
|
|
|
{ question: "Can a bird fly? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many legs do spiders have?", answer: "8" },
|
|
|
|
|
{ question: "What is 1 + 4?", answer: "5" },
|
|
|
|
|
{ question: "Is 7 less than 10? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 3 + 2?", answer: "5" },
|
|
|
|
|
{ question: "What color is an orange?", answer: "orange" },
|
|
|
|
|
{ question: "How many hands do humans have?", answer: "2" },
|
|
|
|
|
{ question: "What shape is a ball?", answer: "circle" },
|
|
|
|
|
{ question: "Is the ocean salty? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many months have 31 days?", answer: "7" },
|
|
|
|
|
{ question: "What is 5 + 3?", answer: "8" },
|
|
|
|
|
{ question: "Is a fish a mammal? (yes/no)", answer: "no" },
|
|
|
|
|
{ question: "What is 2 x 2?", answer: "4" },
|
|
|
|
|
{ question: "What is 9 - 3?", answer: "6" },
|
|
|
|
|
{ question: "Can a rabbit hop? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is 4 an even number? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Are there many stars in the sky? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 6 + 4?", answer: "10" },
|
|
|
|
|
{ question: "What color is a strawberry?", answer: "red" },
|
|
|
|
|
{ question: "How many ears do humans have?", answer: "2" },
|
|
|
|
|
{ question: "Is 10 greater than 5? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is small the opposite of big? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 5 + 7?", answer: "12" },
|
|
|
|
|
{ question: "Is a bear a mammal? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Does an elephant have a trunk? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many letters are in the word 'apple'?", answer: "5" },
|
|
|
|
|
{ question: "How many colors are in a rainbow?", answer: "7" },
|
|
|
|
|
{ question: "What color is a lemon?", answer: "yellow" },
|
|
|
|
|
{ question: "What is 2 + 4?", answer: "6" },
|
|
|
|
|
{ question: "Is the grass green? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 3 x 2?", answer: "6" },
|
|
|
|
|
{ question: "Are there many animals in a zoo? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 7 - 4?", answer: "3" },
|
|
|
|
|
{ question: "Is 4 less than 6? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 2 + 6?", answer: "8" },
|
|
|
|
|
{ question: "What color is a pumpkin?", answer: "orange" },
|
|
|
|
|
{ question: "How many legs do ants have?", answer: "6" },
|
|
|
|
|
{ question: "What is 8 - 3?", answer: "5" },
|
|
|
|
|
{ question: "Can a kangaroo hop? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is hot the opposite of cold? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 4 x 2?", answer: "8" },
|
|
|
|
|
{ question: "Does Earth have one moon? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is the brake light of a car red? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is a circle a shape with no sides? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is sad the opposite of happy? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many months are in a year?", answer: "12" },
|
|
|
|
|
{ question: "What color is an apple?", answer: "red" },
|
|
|
|
|
{ question: "Is 4 greater than 2? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Does a month have 30 or 31 days? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 10 x 2?", answer: "20" },
|
|
|
|
|
{ question: "Does a bee make honey? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is right the opposite of left? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "What is 9 + 1?", answer: "10" },
|
|
|
|
|
{ question: "What is 10 - 2?", answer: "8" },
|
|
|
|
|
{ question: "How many teeth do humans have?", answer: "32" },
|
|
|
|
|
{ question: "What is 5 x 3?", answer: "15" },
|
|
|
|
|
{ question: "Is the grass green? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "Is 6 greater than 3? (yes/no)", answer: "yes" },
|
|
|
|
|
{ question: "How many hours are in a day?", answer: "24" },
|
|
|
|
|
{ question: "What is 2 + 3?", answer: "5" },
|
|
|
|
|
{ question: "What animal barks?", answer: "dog" }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
let currentQuestionIndex = 0;
|
|
|
|
|
let strikeCount = 0;
|
|
|
|
|
|
|
|
|
|
function loadNewQuestion() {
|
2025-02-15 16:45:20 +00:00
|
|
|
// Randomize the question order
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * questions.length);
|
|
|
|
|
const questionData = questions[randomIndex];
|
2025-02-15 16:33:26 +00:00
|
|
|
|
2025-02-15 16:45:20 +00:00
|
|
|
// Display the new question
|
2025-02-15 16:33:26 +00:00
|
|
|
document.getElementById("captcha-question").textContent = questionData.question;
|
|
|
|
|
document.getElementById("captcha-answer").value = "";
|
|
|
|
|
document.getElementById("error-message").textContent = "";
|
2025-02-15 16:45:20 +00:00
|
|
|
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;
|
2025-02-15 16:33:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkAnswer() {
|
|
|
|
|
const answer = document.getElementById("captcha-answer").value.trim().toLowerCase();
|
|
|
|
|
const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase();
|
|
|
|
|
|
|
|
|
|
if (answer === correctAnswer) {
|
2025-02-15 16:45:20 +00:00
|
|
|
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';
|
2025-02-15 16:33:26 +00:00
|
|
|
strikeCount = 0;
|
2025-02-15 16:45:20 +00:00
|
|
|
setTimeout(loadNewQuestion, 2000); // Wait before loading next question
|
2025-02-15 16:33:26 +00:00
|
|
|
} else {
|
|
|
|
|
strikeCount++;
|
|
|
|
|
if (strikeCount < 3) {
|
|
|
|
|
document.getElementById("error-message").textContent = "Incorrect answer. Try again.";
|
2025-02-15 16:45:20 +00:00
|
|
|
document.getElementById("captcha-completion").textContent = "";
|
|
|
|
|
document.getElementById("captcha-completion").classList.remove("correct", "error");
|
2025-02-15 16:33:26 +00:00
|
|
|
} else {
|
2025-02-15 16:45:20 +00:00
|
|
|
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';
|
2025-02-15 16:33:26 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.getElementById("submit-button").addEventListener("click", checkAnswer);
|
|
|
|
|
|
2025-02-15 16:45:20 +00:00
|
|
|
loadNewQuestion(); // Load the first question when the page loads
|
2025-02-15 16:33:26 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
