<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.quiz-container {
font-family: 'Arial', sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
line-height: 1.8;
position: relative;
}
.quiz-title {
color: #2c3e50;
text-align: center;
border-bottom: 2px solid #34495e;
padding-bottom: 10px;
}
.section-title {
color: #c0392b;
font-weight: bold;
margin-top: 20px;
font-size: 1.1em;
}
.question-block {
margin-bottom: 15px;
padding: 10px;
background: #fff;
border-radius: 4px;
border-left: 4px solid #3498db;
}
.options {
margin-top: 5px;
}
.btn {
padding: 5px 15px;
margin-right: 10px;
border: 1px solid #bdc3c7;
background-color: #fff;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
font-size: 0.95em;
}
.btn:hover {
background-color: #ecf0f1;
}
.correct {
background-color: #2ecc71 !important;
color: white;
border-color: #27ae60;
}
.wrong {
background-color: #e74c3c !important;
color: white;
border-color: #c0392b;
}
/* பரிசுக்கான பாப்அப் விண்டோ */
.reward-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 0 25px rgba(0,0,0,0.3);
text-align: center;
z-index: 1000;
animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 4px solid #f1c40f;
max-width: 90%;
width: 350px;
}
@keyframes popUp {
0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.reward-modal h3 {
color: #27ae60;
margin-top: 10px;
}
.reward-icon {
font-size: 60px;
animation: bounce 1s infinite alternate;
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
.close-btn {
background: #e67e22;
color: white;
border: none;
padding: 8px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
font-weight: bold;
}
.overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
</style>
<!-- பட்டாசு அனிமேஷனுக்கான ஸ்கிரிப்ட் -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
</head>
<body>
<div class="quiz-container">
<h2 class="quiz-title">மதிப்பீடு (மயங்கொலிப் பயிற்சி)</h2>
<div class="section-title">சரியான விடையைத் தேர்ந்தெடுத்து எழுதுக.</div>
<hr>
<!-- கேள்விகள் தொடக்கம் -->
<div class="question-block">
1. சிரம் என்பது ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">தலை</button>
<button class="btn" onclick="checkAnswer(this, false)">தளை</button>
</div>
</div>
<div class="question-block">
2. இலைக்கு வேறு பெயர் ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, false)">தளை</button>
<button class="btn" onclick="checkAnswer(this, true)">தழை</button>
</div>
</div>
<div class="question-block">
3. வண்டி இழுப்பது ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, false)">காலை</button>
<button class="btn" onclick="checkAnswer(this, true)">காளை</button>
</div>
</div>
<div class="question-block">
4. கடலுக்கு வேறு பெயர் ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, false)">பரவை</button>
<button class="btn" onclick="checkAnswer(this, true)">பறவை</button>
</div>
</div>
<div class="question-block">
5. பறவை வானில் ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">பறந்தது</button>
<button class="btn" onclick="checkAnswer(this, false)">பரந்தது</button>
</div>
</div>
<div class="question-block">
6. கதவை மெல்லத் ______________ <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">திறந்தான்</button>
<button class="btn" onclick="checkAnswer(this, false)">திரந்தான்</button>
</div>
</div>
<div class="question-block">
7. பூ ______________ வீசும். <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">மனம்</button>
<button class="btn" onclick="checkAnswer(this, false)">மணம்</button>
</div>
</div>
<div class="question-block">
8. புலியின் ______________ சிவந்து காணப்படும். <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, false)">கன்</button>
<button class="btn" onclick="checkAnswer(this, true)">கண்</button>
</div>
</div>
<div class="question-block">
9. குழந்தைகள் ______________ விளையாடினர். <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">பந்து</button>
<button class="btn" onclick="checkAnswer(this, false)">பன்து</button>
</div>
</div>
<div class="question-block">
10. வீட்டு வாசலில் ______________ இட்டனர். <br>
<div class="options">
<button class="btn" onclick="checkAnswer(this, true)">கோலம்</button>
<button class="btn" onclick="checkAnswer(this, false)">கோளம்</button>
</div>
</div>
<div class="section-title">தொடர்களில் உள்ள மயங்கொலிப் பிழைகளைத் திருத்தி எழுதுக.</div>
<hr>
<div class="question-block">
1. எண் வீட்டுத் தோட்டத்தில் மலர்கள் மனம் வீசின.<br>
<strong>திருத்தம்:</strong> என் வீட்டுத் தோட்டத்தில் மலர்கள் மணம் வீசின.
</div>
<div class="question-block">
2. தேர்த் திருவிலாவிற்குச் சென்றனர்.<br>
<strong>திருத்தம்:</strong> தேர்த் திருவிழாவிற்குச் சென்றனர்.
</div>
<div class="question-block">
3. வாழைப்பழம் உடலுக்கு மிகவும் நல்லது.<br>
<strong>திருத்தம்:</strong> வாழைப்பழம் உடலுக்கு மிகவும் நல்லது.
</div>
<div class="section-title">குறுவினாக்கள்</div>
<hr>
<div class="question-block">
1. மயங்கொலி எழுத்துகள் யாவை?<br>
<strong>விடை:</strong> ந, ண, ன மற்றும் ல, ள, ழ மற்றும் ர, ற ஆகிய எட்டும் மயங்கொலி எழுத்துகள் ஆகும்.
</div>
</div>
<!-- பரிசுப் பெட்டி பாப்-அப் மற்றும் ஆடியோக்கள் -->
<div class="overlay" id="overlay"></div>
<div class="reward-modal" id="rewardModal">
<div class="reward-icon">🎁🏆🎉</div>
<h3>அற்புதம்! அனைத்து வினாக்களுக்கும் சரியான விடை!</h3>
<p>உங்களுக்கு எங்கள் பாராட்டுகள் மற்றும் டிஜிட்டல் பரிசு!</p>
<button class="close-btn" onclick="closeReward()">நன்றி</button>
</div>
<!-- கைதட்டல் ஒலி (Clap Sound) -->
<audio id="clapSound" src="https://assets.mixkit.co/active_storage/sfx/2018/2018-84.wav" preload="auto"></audio>
<!-- தவறான விடைக்கான லேசான ஒலி -->
<audio id="wrongSound" src="https://assets.mixkit.co/active_storage/sfx/2869/2869-84.wav" preload="auto"></audio>
<script>
let correctCount = 0;
const totalQuestions = 10;
function checkAnswer(button, isCorrect) {
let optionsDiv = button.parentElement;
let buttons = optionsDiv.getElementsByClassName('btn');
for (let btn of buttons) {
btn.disabled = true;
}
if (isCorrect) {
button.classList.add('correct');
correctCount++;
// கைதட்டல் ஒலியை ஒலிக்கச் செய்தல்
let clap = document.getElementById('clapSound');
clap.currentTime = 0;
clap.play().catch(e => console.log("Audio play blocked by browser"));
// தற்காலிகமாக பட்டாசு தூவுதல்
confetti({
particleCount: 40,
angle: 60,
spread: 55,
origin: { x: 0 }
});
confetti({
particleCount: 40,
angle: 120,
spread: 55,
origin: { x: 1 }
});
} else {
button.classList.add('wrong');
let wrongSnd = document.getElementById('wrongSound');
wrongSnd.currentTime = 0;
wrongSnd.play().catch(e => console.log("Audio play blocked"));
for (let btn of buttons) {
if(btn !== button) {
btn.classList.add('correct');
}
}
}
// அனைத்து கேள்விகளுக்கும் சரியாக விடையளித்தால் மெகா பரிசு
if (correctCount === totalQuestions) {
setTimeout(showReward, 800);
}
}
function showReward() {
document.getElementById('rewardModal').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
// தொடர்ச்சியான பெரிய பட்டாசு அனிமேஷன்
var duration = 3 * 1000;
var end = Date.now() + duration;
(function frame() {
confetti({
particleCount: 5,
angle: 60,
spread: 55,
origin: { x: 0 }
});
confetti({
particleCount: 5,
angle: 120,
spread: 55,
origin: { x: 1 }
});
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());
}
function closeReward() {
document.getElementById('rewardModal').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
</script>
</body>
</html>
No comments:
Post a Comment