Match function
Text box 1 and text box2 when button value same then match else not match and textbox3 and 4 buttons value match then match
<!DOCTYPE html>
<html>
<head>
<title>Text Box Matching Game</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.game-section {
margin: 30px 0;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #fafafa;
}
.game-section h3 {
margin-top: 0;
color: #555;
}
.input-group {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px;
width: 150px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.check-btn {
background-color: #4CAF50;
color: white;
}
.check-btn:hover {
background-color: #45a049;
}
.value-btn {
background-color: #2196F3;
color: white;
margin: 0 5px;
}
.value-btn:hover {
background-color: #1976D2;
}
.result {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
font-weight: bold;
text-align: center;
}
.match {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.no-match {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.clear-btn {
background-color: #ff6b6b;
color: white;
margin-top: 20px;
}
.clear-btn:hover {
background-color: #ee5a5a;
}
.instructions {
background-color: #e7f3ff;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
border-left: 4px solid #2196F3;
}
</style>
</head>
<body>
<div class="container">
<h1>Text Box Matching Game</h1>
<div class="instructions">
<strong>How to play:</strong><br>
• Enter values in text boxes manually OR click buttons to fill them<br>
• Click "Check Match" to see if the values match<br>
• Try different combinations!
</div>
<!-- First matching pair: TextBox1 and TextBox2 -->
<div class="game-section">
<h3>Match Pair 1: TextBox1 vs TextBox2</h3>
<div class="input-group">
<label>TextBox1:</label>
<input type="text" id="textbox1" placeholder="Enter value">
<button class="value-btn" onclick="setValue('textbox1', 'Apple')">Apple</button>
<button class="value-btn" onclick="setValue('textbox1', 'Orange')">Orange</button>
<button class="value-btn" onclick="setValue('textbox1', 'Banana')">Banana</button>
</div>
<div class="input-group">
<label>TextBox2:</label>
<input type="text" id="textbox2" placeholder="Enter value">
<button class="value-btn" onclick="setValue('textbox2', 'Apple')">Apple</button>
<button class="value-btn" onclick="setValue('textbox2', 'Orange')">Orange</button>
<button class="value-btn" onclick="setValue('textbox2', 'Banana')">Banana</button>
</div>
<button class="check-btn" onclick="checkMatch('textbox1', 'textbox2', 'result1')">Check Match</button>
<div id="result1" class="result" style="display: none;"></div>
</div>
<!-- Second matching pair: TextBox3 and 4 Buttons -->
<div class="game-section">
<h3>Match Pair 2: TextBox3 vs 4 Buttons</h3>
<div class="input-group">
<label>TextBox3:</label>
<input type="text" id="textbox3" placeholder="Enter value">
<button class="value-btn" onclick="setValue('textbox3', 'Red')">Red</button>
<button class="value-btn" onclick="setValue('textbox3', 'Blue')">Blue</button>
<button class="value-btn" onclick="setValue('textbox3', 'Green')">Green</button>
<button class="value-btn" onclick="setValue('textbox3', 'Yellow')">Yellow</button>
</div>
<div class="input-group">
<label>Select Button:</label>
<button class="value-btn" onclick="setButtonValue('Red')" id="btn1">Red</button>
<button class="value-btn" onclick="setButtonValue('Blue')" id="btn2">Blue</button>
<button class="value-btn" onclick="setButtonValue('Green')" id="btn3">Green</button>
<button class="value-btn" onclick="setButtonValue('Yellow')" id="btn4">Yellow</button>
</div>
<div class="input-group">
<label>Selected Button Value:</label>
<input type="text" id="selectedValue" placeholder="Click a button above" readonly>
</div>
<button class="check-btn" onclick="checkMatch('textbox3', 'selectedValue', 'result2')">Check Match</button>
<div id="result2" class="result" style="display: none;"></div>
</div>
<button class="clear-btn" onclick="clearAll()">Clear All</button>
</div>
<script>
// Set value in text box
function setValue(textboxId, value) {
document.getElementById(textboxId).value = value;
}
// Set button value (for TextBox3 vs 4 Buttons)
function setButtonValue(value) {
document.getElementById('selectedValue').value = value;
// Visual feedback - highlight selected button
const buttons = ['btn1', 'btn2', 'btn3', 'btn4'];
buttons.forEach(btnId => {
const btn = document.getElementById(btnId);
if (btn.textContent === value) {
btn.style.backgroundColor = '#FF9800'; // Orange for selected
} else {
btn.style.backgroundColor = '#2196F3'; // Blue for normal
}
});
}
// Check if two values match
function checkMatch(input1Id, input2Id, resultId) {
const value1 = document.getElementById(input1Id).value.trim();
const value2 = document.getElementById(input2Id).value.trim();
const resultDiv = document.getElementById(resultId);
// Show result div
resultDiv.style.display = 'block';
if (value1 === '' || value2 === '') {
resultDiv.textContent = 'Please enter values in both fields';
resultDiv.className = 'result no-match';
return;
}
if (value1 === value2) {
resultDiv.textContent = `✓ MATCH! Both values are: "${value1}"`;
resultDiv.className = 'result match';
} else {
resultDiv.textContent = `✗ NO MATCH! "${value1}" ≠ "${value2}"`;
resultDiv.className = 'result no-match';
}
}
// Clear all inputs and results
function clearAll() {
// Clear all text boxes
document.getElementById('textbox1').value = '';
document.getElementById('textbox2').value = '';
document.getElementById('textbox3').value = '';
document.getElementById('selectedValue').value = '';
// Hide all results
document.getElementById('result1').style.display = 'none';
document.getElementById('result2').style.display = 'none';
// Reset button colors
const buttons = ['btn1', 'btn2', 'btn3', 'btn4'];
buttons.forEach(btnId => {
document.getElementById(btnId).style.backgroundColor = '#2196F3';
});
}
// Allow Enter key to trigger match check
document.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
// Check which section has focus and trigger appropriate match check
const activeElement = document.activeElement;
if (activeElement.id === 'textbox1' || activeElement.id === 'textbox2') {
checkMatch('textbox1', 'textbox2', 'result1');
} else if (activeElement.id === 'textbox3') {
checkMatch('textbox3', 'selectedValue', 'result2');
}
}
});
</script>
</body>
</html>
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alphabet Quiz Cards</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #74b9ff, #0984e3);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.quiz-header {
text-align: center;
color: white;
margin-bottom: 30px;
}
.quiz-header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.score {
font-size: 1.3rem;
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 25px;
}
.card {
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
text-align: center;
max-width: 500px;
width: 100%;
margin-bottom: 30px;
}
.question {
font-size: 3rem;
color: #2d3436;
margin-bottom: 30px;
font-weight: bold;
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 30px;
}
.option {
background: #f8f9fa;
border: 3px solid #ddd;
border-radius: 12px;
padding: 20px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
background: #e9ecef;
transform: translateY(-3px);
}
.option.correct {
background: #00b894;
color: white;
border-color: #00a085;
}
.option.wrong {
background: #e17055;
color: white;
border-color: #d63031;
}
.next-btn {
background: #6c5ce7;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
border-radius: 25px;
cursor: pointer;
display: none;
margin-top: 20px;
}
.next-btn:hover {
background: #5f3dc4;
}
.finish-screen {
display: none;
text-align: center;
color: white;
}
.finish-screen h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.restart-btn {
background: #00b894;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
border-radius: 25px;
cursor: pointer;
margin-top: 20px;
}
.restart-btn:hover {
background: #00a085;
}
</style>
</head>
<body>
<div class="quiz-header">
<h1>🔤 Alphabet Quiz</h1>
<div class="score">Score: <span id="score">0</span> / <span id="total">26</span></div>
</div>
<div class="card" id="quizCard">
<div class="question" id="question">A is for ?</div>
<div class="options" id="options">
<div class="option" onclick="selectAnswer(this, true)">Apple</div>
<div class="option" onclick="selectAnswer(this, false)">Ball</div>
<div class="option" onclick="selectAnswer(this, false)">Cat</div>
<div class="option" onclick="selectAnswer(this, false)">Dog</div>
</div>
<button class="next-btn" id="nextBtn" onclick="nextQuestion()">Next Question</button>
</div>
<div class="finish-screen" id="finishScreen">
<h2>🎉 Quiz Complete!</h2>
<p>Your final score: <span id="finalScore">0</span> out of 26</p>
<button class="restart-btn" onclick="restartQuiz()">Play Again</button>
</div>
<script>
const quizData = [
{letter: 'A', answer: 'Apple', options: ['Apple', 'Ball', 'Cat', 'Dog']},
{letter: 'B', answer: 'Ball', options: ['Apple', 'Ball', 'Cat', 'Dog']},
{letter: 'C', answer: 'Cat', options: ['Apple', 'Ball', 'Cat', 'Dog']},
{letter: 'D', answer: 'Dog', options: ['Apple', 'Ball', 'Cat', 'Dog']},
{letter: 'E', answer: 'Elephant', options: ['Elephant', 'Fish', 'Goat', 'Hat']},
{letter: 'F', answer: 'Fish', options: ['Elephant', 'Fish', 'Goat', 'Hat']},
{letter: 'G', answer: 'Goat', options: ['Elephant', 'Fish', 'Goat', 'Hat']},
{letter: 'H', answer: 'Hat', options: ['Elephant', 'Fish', 'Goat', 'Hat']},
{letter: 'I', answer: 'Ice cream', options: ['Ice cream', 'Jam', 'Kite', 'Lion']},
{letter: 'J', answer: 'Jam', options: ['Ice cream', 'Jam', 'Kite', 'Lion']},
{letter: 'K', answer: 'Kite', options: ['Ice cream', 'Jam', 'Kite', 'Lion']},
{letter: 'L', answer: 'Lion', options: ['Ice cream', 'Jam', 'Kite', 'Lion']},
{letter: 'M', answer: 'Moon', options: ['Moon', 'Nest', 'Orange', 'Pen']},
{letter: 'N', answer: 'Nest', options: ['Moon', 'Nest', 'Orange', 'Pen']},
{letter: 'O', answer: 'Orange', options: ['Moon', 'Nest', 'Orange', 'Pen']},
{letter: 'P', answer: 'Pen', options: ['Moon', 'Nest', 'Orange', 'Pen']},
{letter: 'Q', answer: 'Queen', options: ['Queen', 'Rabbit', 'Sun', 'Tree']},
{letter: 'R', answer: 'Rabbit', options: ['Queen', 'Rabbit', 'Sun', 'Tree']},
{letter: 'S', answer: 'Sun', options: ['Queen', 'Rabbit', 'Sun', 'Tree']},
{letter: 'T', answer: 'Tree', options: ['Queen', 'Rabbit', 'Sun', 'Tree']},
{letter: 'U', answer: 'Umbrella', options: ['Umbrella', 'Van', 'Water', 'Xylophone']},
{letter: 'V', answer: 'Van', options: ['Umbrella', 'Van', 'Water', 'Xylophone']},
{letter: 'W', answer: 'Water', options: ['Umbrella', 'Van', 'Water', 'Xylophone']},
{letter: 'X', answer: 'Xylophone', options: ['Umbrella', 'Van', 'Water', 'Xylophone']},
{letter: 'Y', answer: 'Yak', options: ['Yak', 'Zebra', 'Apple', 'Ball']},
{letter: 'Z', answer: 'Zebra', options: ['Yak', 'Zebra', 'Apple', 'Ball']}
];
let currentQuestion = 0;
let score = 0;
let answered = false;
function loadQuestion() {
const q = quizData[currentQuestion];
document.getElementById('question').textContent = q.letter + ' is for ?';
const optionsDiv = document.getElementById('options');
optionsDiv.innerHTML = '';
// Shuffle options
const shuffled = [...q.options].sort(() => Math.random() - 0.5);
shuffled.forEach(option => {
const optionDiv = document.createElement('div');
optionDiv.className = 'option';
optionDiv.textContent = option;
optionDiv.onclick = () => selectAnswer(optionDiv, option === q.answer);
optionsDiv.appendChild(optionDiv);
});
answered = false;
document.getElementById('nextBtn').style.display = 'none';
}
function selectAnswer(element, isCorrect) {
if (answered) return;
answered = true;
const options = document.querySelectorAll('.option');
const correctAnswer = quizData[currentQuestion].answer;
options.forEach(option => {
if (option.textContent === correctAnswer) {
option.classList.add('correct');
} else if (option === element && !isCorrect) {
option.classList.add('wrong');
}
option.onclick = null; // Disable clicking
});
if (isCorrect) {
score++;
document.getElementById('score').textContent = score;
}
document.getElementById('nextBtn').style.display = 'inline-block';
}
function nextQuestion() {
currentQuestion++;
if (currentQuestion >= quizData.length) {
showFinishScreen();
} else {
loadQuestion();
}
}
function showFinishScreen() {
document.getElementById('quizCard').style.display = 'none';
document.getElementById('finishScreen').style.display = 'block';
document.getElementById('finalScore').textContent = score;
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
document.getElementById('score').textContent = score;
document.getElementById('quizCard').style.display = 'block';
document.getElementById('finishScreen').style.display = 'none';
loadQuestion();
}
// Start the quiz
loadQuestion();
</script>
</body>
</html>
Comments
Post a Comment