Add captcha.html
This commit is contained in:
parent
a21dc7b5ba
commit
12db09dd7d
1 changed files with 212 additions and 0 deletions
212
captcha.html
Normal file
212
captcha.html
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<!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;
|
||||
}
|
||||
.button {
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
</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>
|
||||
</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() {
|
||||
if (currentQuestionIndex >= questions.length) {
|
||||
alert("No more questions available.");
|
||||
return;
|
||||
}
|
||||
|
||||
const questionData = questions[currentQuestionIndex];
|
||||
document.getElementById("captcha-question").textContent = questionData.question;
|
||||
document.getElementById("captcha-answer").value = "";
|
||||
document.getElementById("error-message").textContent = "";
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
const answer = document.getElementById("captcha-answer").value.trim().toLowerCase();
|
||||
const correctAnswer = questions[currentQuestionIndex].answer.toLowerCase();
|
||||
|
||||
if (answer === correctAnswer) {
|
||||
alert("CAPTCHA Passed!");
|
||||
strikeCount = 0;
|
||||
currentQuestionIndex++;
|
||||
loadNewQuestion();
|
||||
} else {
|
||||
strikeCount++;
|
||||
if (strikeCount < 3) {
|
||||
document.getElementById("error-message").textContent = "Incorrect answer. Try again.";
|
||||
currentQuestionIndex++;
|
||||
loadNewQuestion();
|
||||
} else {
|
||||
alert("Too many incorrect attempts. Please refresh the page.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("submit-button").addEventListener("click", checkAnswer);
|
||||
|
||||
loadNewQuestion();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue