Kerala PSC Fill-in-the-Blanks Stories<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n color: #2c3e50;\n }\n\n .game-container {\n max-width: 900px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .title {\n font-size: 2.5em;\n color: #2c3e50;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .subtitle {\n font-size: 1.2em;\n color: #7f8c8d;\n margin-bottom: 20px;\n }\n\n .instructions {\n background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n border-left: 5px solid #48cae4;\n }\n\n .instructions h3 {\n color: #2980b9;\n margin-bottom: 10px;\n }\n\n .instructions ul {\n margin-left: 20px;\n }\n\n .progress-bar {\n background: #ecf0f1;\n height: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n overflow: hidden;\n position: relative;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 10px;\n transition: width 0.5s ease;\n position: relative;\n }\n\n .progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #2c3e50;\n font-weight: bold;\n font-size: 0.9em;\n }\n\n .story-container {\n background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);\n padding: 25px;\n border-radius: 15px;\n margin-bottom: 20px;\n box-shadow: 0 8px 25px rgba(255, 171, 160, 0.3);\n position: relative;\n }\n\n .story-title {\n font-size: 1.5em;\n color: #d63031;\n margin-bottom: 15px;\n text-align: center;\n font-weight: bold;\n }\n\n .story-level {\n position: absolute;\n top: 10px;\n right: 15px;\n background: rgba(255, 255, 255, 0.8);\n padding: 5px 12px;\n border-radius: 15px;\n font-size: 0.9em;\n font-weight: bold;\n color: #2c3e50;\n }\n\n .story-text {\n font-size: 1.1em;\n line-height: 1.8;\n margin-bottom: 20px;\n color: #2d3436;\n }\n\n .blank-input {\n display: inline-block;\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid #ddd;\n border-radius: 8px;\n padding: 5px 10px;\n font-size: 1em;\n font-weight: bold;\n min-width: 100px;\n text-align: center;\n transition: all 0.3s ease;\n margin: 0 3px;\n }\n\n .blank-input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);\n background: white;\n }\n\n .blank-input.correct {\n background: #d5f4e6;\n border-color: #27ae60;\n color: #27ae60;\n }\n\n .blank-input.incorrect {\n background: #fadbd8;\n border-color: #e74c3c;\n color: #e74c3c;\n animation: shake 0.5s ease-in-out;\n }\n\n .hint-button {\n background: linear-gradient(45deg, #fdcb6e, #e17055);\n color: white;\n border: none;\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 0.8em;\n cursor: pointer;\n margin-left: 5px;\n transition: all 0.3s ease;\n }\n\n .hint-button:hover {\n transform: scale(1.1);\n box-shadow: 0 3px 10px rgba(225, 112, 85, 0.4);\n }\n\n .hint-text {\n display: inline-block;\n background: rgba(253, 203, 110, 0.3);\n padding: 2px 8px;\n border-radius: 8px;\n font-size: 0.9em;\n margin-left: 5px;\n font-style: italic;\n color: #d63031;\n }\n\n .story-controls {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 10px 20px;\n border: none;\n border-radius: 20px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .btn-primary {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);\n }\n\n .btn-secondary {\n background: linear-gradient(45deg, #ff9a9e, #fecfef);\n color: #2c3e50;\n box-shadow: 0 5px 15px rgba(255, 154, 158, 0.3);\n }\n\n .btn-success {\n background: linear-gradient(45deg, #00b894, #00cec9);\n color: white;\n box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n }\n\n .btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .stats-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .stat-item {\n background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n padding: 15px;\n border-radius: 12px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(168, 237, 234, 0.3);\n }\n\n .stat-number {\n font-size: 1.8em;\n font-weight: bold;\n color: #2980b9;\n display: block;\n }\n\n .stat-label {\n font-size: 0.9em;\n color: #7f8c8d;\n margin-top: 5px;\n }\n\n .feedback-message {\n background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);\n color: white;\n padding: 15px;\n border-radius: 12px;\n margin-top: 15px;\n text-align: center;\n font-weight: bold;\n display: none;\n animation: fadeIn 0.5s ease;\n }\n\n .feedback-message.success {\n background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);\n }\n\n .story-navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 20px;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .story-selector {\n background: rgba(255, 255, 255, 0.8);\n border: 2px solid #667eea;\n border-radius: 20px;\n padding: 8px 15px;\n font-size: 1em;\n color: #2c3e50;\n cursor: pointer;\n }\n\n .story-selector:focus {\n outline: none;\n border-color: #764ba2;\n box-shadow: 0 0 10px rgba(118, 75, 162, 0.3);\n }\n\n .completion-celebration {\n background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);\n color: white;\n padding: 25px;\n border-radius: 15px;\n text-align: center;\n margin-top: 20px;\n display: none;\n animation: celebration 1s ease-in-out;\n }\n\n .completion-celebration h3 {\n font-size: 1.8em;\n margin-bottom: 10px;\n }\n\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 75% { transform: translateX(5px); }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes celebration {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n @media (max-width: 768px) {\n .title {\n font-size: 2em;\n }\n \n .game-container {\n padding: 20px;\n margin: 10px;\n }\n \n .story-text {\n font-size: 1em;\n line-height: 2;\n }\n \n .blank-input {\n min-width: 90px;\n font-size: 1em;\n padding: 8px 12px;\n margin: 5px 2px;\n display: inline-block;\n }\n \n .hint-button {\n padding: 8px 10px;\n margin-left: 8px;\n font-size: 1em;\n min-height: 44px;\n min-width: 44px;\n }\n \n .story-controls {\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n \n .btn {\n width: 250px;\n padding: 15px 20px;\n font-size: 1.1em;\n min-height: 50px;\n }\n \n .story-navigation {\n flex-direction: column;\n gap: 15px;\n align-items: center;\n }\n \n .story-selector {\n width: 100%;\n max-width: 300px;\n padding: 12px 15px;\n font-size: 1em;\n }\n \n .stats-container {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .stat-item {\n padding: 12px;\n }\n \n .stat-number {\n font-size: 1.5em;\n }\n \n .instructions {\n padding: 15px;\n }\n \n .instructions ul {\n margin-left: 15px;\n }\n \n .hint-text {\n display: block;\n margin-top: 5px;\n margin-left: 0;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n .title {\n font-size: 1.8em;\n }\n \n .subtitle {\n font-size: 1em;\n }\n \n .game-container {\n padding: 15px;\n margin: 5px;\n }\n \n .story-text {\n font-size: 0.95em;\n line-height: 2.2;\n }\n \n .blank-input {\n min-width: 100px;\n width: auto;\n max-width: 120px;\n font-size: 1em;\n padding: 10px;\n margin: 8px 2px;\n display: block;\n text-align: center;\n }\n \n .hint-button {\n margin-left: 0;\n margin-top: 5px;\n margin-bottom: 10px;\n display: inline-block;\n padding: 10px 15px;\n min-height: 48px;\n min-width: 48px;\n font-size: 1.1em;\n }\n \n .hint-text {\n display: block;\n margin-top: 8px;\n margin-bottom: 15px;\n padding: 8px;\n background: rgba(253, 203, 110, 0.5);\n border-radius: 8px;\n text-align: center;\n }\n \n .stats-container {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n \n .btn {\n width: 100%;\n max-width: 280px;\n padding: 18px 20px;\n font-size: 1.2em;\n min-height: 55px;\n }\n \n .story-selector {\n width: 100%;\n padding: 15px;\n font-size: 1.1em;\n min-height: 50px;\n }\n \n .story-container {\n padding: 20px 15px;\n }\n \n .story-title {\n font-size: 1.3em;\n }\n \n .story-level {\n position: static;\n display: block;\n text-align: center;\n margin-bottom: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 8px 15px;\n border-radius: 20px;\n font-size: 0.9em;\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n }\n \n .instructions h3 {\n font-size: 1.2em;\n }\n \n .instructions ul {\n margin-left: 10px;\n }\n \n .instructions li {\n margin-bottom: 8px;\n font-size: 0.95em;\n }\n }\n\n \/* Landscape phone optimization *\/\n @media (max-width: 768px) and (orientation: landscape) {\n .game-container {\n padding: 15px;\n }\n \n .title {\n font-size: 1.8em;\n margin-bottom: 5px;\n }\n \n .subtitle {\n margin-bottom: 15px;\n }\n \n .instructions {\n padding: 12px;\n margin-bottom: 15px;\n }\n \n .stats-container {\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n margin-bottom: 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <div class=\"header\">\n <h1 class=\"title\">\ud83d\udcda Kerala PSC Story Blanks<\/h1>\n <p class=\"subtitle\">Fill in the Collective Nouns to Complete the Stories<\/p>\n \n <div class=\"instructions\">\n <h3>\ud83d\udcd6 How to Play:<\/h3>\n <ul>\n <li>Read each story carefully and fill in the blanks with correct collective nouns<\/li>\n <li>Use hint buttons (\ud83d\udca1) to get the first letter of the answer<\/li>\n <li>Click “Check Story” to verify your answers<\/li>\n <li>Complete all stories to master Kerala PSC collective nouns!<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"stats-container\">\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"storiesCompleted\">0<\/span>\n <div class=\"stat-label\">Stories Completed<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"correctAnswers\">0<\/span>\n <div class=\"stat-label\">Correct Answers<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"accuracy\">100%<\/span>\n <div class=\"stat-label\">Accuracy<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"hintsUsed\">0<\/span>\n <div class=\"stat-label\">Hints Used<\/div>\n <\/div>\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\" style=\"width: 0%\"><\/div>\n <div class=\"progress-text\" id=\"progressText\">Story 1 of 6<\/div>\n <\/div>\n\n <div class=\"story-container\" id=\"storyContainer\">\n \n <\/div>\n\n <div class=\"story-controls\">\n <button class=\"btn btn-primary\" onclick=\"checkStory()\">\u2705 Check Story<\/button>\n <button class=\"btn btn-secondary\" onclick=\"clearAnswers()\">\ud83d\udd04 Clear All<\/button>\n <button class=\"btn btn-success\" onclick=\"nextStory()\" id=\"nextBtn\" disabled>\u27a1\ufe0f Next Story<\/button>\n <\/div>\n\n <div class=\"story-navigation\">\n <select class=\"story-selector\" id=\"storySelector\" onchange=\"selectStory()\">\n <option value=\"0\">Story 1: Safari Adventure<\/option>\n <option value=\"1\">Story 2: Village Morning<\/option>\n <option value=\"2\">Story 3: Ocean Explorer<\/option>\n <option value=\"3\">Story 4: Forest Mystery<\/option>\n <option value=\"4\">Story 5: Farm Life<\/option>\n <option value=\"5\">Story 6: Kerala Wildlife<\/option>\n <\/select>\n \n <div>\n <button class=\"btn btn-secondary\" onclick=\"previousStory()\">\u2b05\ufe0f Previous<\/button>\n <button class=\"btn btn-secondary\" onclick=\"showAllHints()\">\ud83d\udca1 Show All Hints<\/button>\n <\/div>\n <\/div>\n\n <div class=\"feedback-message\" id=\"feedbackMessage\"><\/div>\n\n <div class=\"completion-celebration\" id=\"completionCelebration\">\n <h3>\ud83c\udf89 Congratulations!<\/h3>\n <p>You’ve mastered all Kerala PSC Animal Collective Noun stories!<\/p>\n <p>Your accuracy: <span id=\"finalAccuracy\"><\/span><\/p>\n <\/div>\n <\/div>\n\n <script>\n const stories = [\n {\n title: \"Safari Adventure\",\n level: \"Beginner\",\n text: \"During our African safari, we first spotted a _____ of lions resting under the acacia tree. Suddenly, a _____ of crows appeared overhead, cawing loudly. In the distance, a massive _____ of elephants walked slowly towards the waterhole. Our guide whispered that a _____ of leopards might be prowling nearby, hunting for their evening meal.\",\n answers: [\"pride\", \"murder\", \"herd\", \"leap\"],\n hints: [\"p\", \"m\", \"h\", \"l\"]\n },\n {\n title: \"Village Morning\",\n level: \"Beginner\", \n text: \"As dawn broke over the Kerala village, a _____ of crows gathered on the old banyan tree. A _____ of cats wandered through the narrow streets, searching for food. Near the pond, a _____ of bees buzzed around the lotus flowers. The farmer smiled as he watched a _____ of chickens pecking in his yard.\",\n answers: [\"murder\", \"clowder\", \"swarm\", \"brood\"],\n hints: [\"m\", \"c\", \"s\", \"b\"]\n },\n {\n title: \"Ocean Explorer\",\n level: \"Intermediate\",\n text: \"The marine biologist excitedly pointed to a large _____ of fish swimming near the coral reef. Above them, a _____ of seagulls circled, hoping to catch their breakfast. In the deeper waters, a small _____ of whales could be seen breaching the surface. The captain mentioned that a _____ of dolphins often followed their boat.\",\n answers: [\"shoal\", \"flight\", \"pod\", \"school\"],\n hints: [\"s\", \"f\", \"p\", \"s\"]\n },\n {\n title: \"Forest Mystery\",\n level: \"Intermediate\",\n text: \"Deep in the Western Ghats forest, a wise _____ of owls hooted mysteriously from the ancient trees. A _____ of ants marched in perfect formation across the forest floor. Hidden in the shadows, a _____ of bears moved slowly through the undergrowth. The forest ranger explained that a _____ of peacocks often displayed their beautiful feathers near the clearing.\",\n answers: [\"parliament\", \"army\", \"sloth\", \"muster\"],\n hints: [\"p\", \"a\", \"s\", \"m\"]\n },\n {\n title: \"Farm Life\",\n level: \"Advanced\",\n text: \"The old farmer proudly showed us his _____ of cattle grazing in the green pasture. A _____ of sheep huddled together under the shade of a mango tree. In the farmyard, a _____ of piglets played happily near their mother. Overhead, a _____ of geese flew in perfect V-formation, heading south for the winter.\",\n answers: [\"drove\", \"flock\", \"litter\", \"skein\"],\n hints: [\"d\", \"f\", \"l\", \"s\"]\n },\n {\n title: \"Kerala Wildlife Sanctuary\",\n level: \"Expert\",\n text: \"In Kerala's famous Periyar Wildlife Sanctuary, visitors often spot a _____ of monkeys swinging through the trees. A _____ of crocodiles can be seen basking on the riverbank in the morning sun. The sanctuary is also home to a _____ of wild boars that forage in the dense undergrowth. During the monsoon season, a spectacular _____ of butterflies fills the air with their colorful wings.\",\n answers: [\"troop\", \"bask\", \"sounder\", \"flutter\"],\n hints: [\"t\", \"b\", \"s\", \"f\"]\n }\n ];\n\n let currentStoryIndex = 0;\n let totalCorrect = 0;\n let totalAttempts = 0;\n let storiesCompleted = 0;\n let hintsUsed = 0;\n\n function loadStory(index) {\n const story = stories[index];\n const container = document.getElementById('storyContainer');\n \n let storyHTML = `\n <div class=\"story-level\">${story.level}<\/div>\n <h2 class=\"story-title\">${story.title}<\/h2>\n <div class=\"story-text\">\n `;\n \n let storyText = story.text;\n let blankIndex = 0;\n \n \/\/ Replace blanks with input fields\n storyText = storyText.replace(\/_____\/g, () => {\n const answer = story.answers[blankIndex];\n const hint = story.hints[blankIndex];\n const inputHTML = `<input type=\"text\" class=\"blank-input\" data-answer=\"${answer}\" data-hint=\"${hint}\" data-index=\"${blankIndex}\" placeholder=\"?\" oninput=\"checkInput(this)\">\n <button class=\"hint-button\" onclick=\"showHint(${blankIndex})\">\ud83d\udca1<\/button>\n <span class=\"hint-text\" id=\"hint-${blankIndex}\" style=\"display: none;\"><\/span>`;\n blankIndex++;\n return inputHTML;\n });\n \n storyHTML += storyText + '<\/div>';\n container.innerHTML = storyHTML;\n \n \/\/ Update progress\n updateProgress();\n updateStorySelector();\n }\n\n function checkInput(input) {\n const userAnswer = input.value.toLowerCase().trim();\n const correctAnswer = input.dataset.answer.toLowerCase();\n \n if (userAnswer === correctAnswer) {\n input.classList.remove('incorrect');\n input.classList.add('correct');\n } else if (userAnswer.length > 0) {\n input.classList.remove('correct');\n input.classList.add('incorrect');\n } else {\n input.classList.remove('correct', 'incorrect');\n }\n }\n\n function showHint(index) {\n const inputs = document.querySelectorAll('.blank-input');\n const input = inputs[index];\n const hintSpan = document.getElementById(`hint-${index}`);\n \n if (hintSpan.style.display === 'none') {\n hintSpan.textContent = `Starts with: ${input.dataset.hint.toUpperCase()}`;\n hintSpan.style.display = 'inline-block';\n hintsUsed++;\n updateStats();\n }\n }\n\n function showAllHints() {\n const inputs = document.querySelectorAll('.blank-input');\n inputs.forEach((input, index) => {\n showHint(index);\n });\n }\n\n function checkStory() {\n const inputs = document.querySelectorAll('.blank-input');\n let correct = 0;\n let total = inputs.length;\n \n inputs.forEach(input => {\n const userAnswer = input.value.toLowerCase().trim();\n const correctAnswer = input.dataset.answer.toLowerCase();\n \n if (userAnswer === correctAnswer) {\n input.classList.add('correct');\n input.classList.remove('incorrect');\n correct++;\n } else {\n input.classList.add('incorrect');\n input.classList.remove('correct');\n \/\/ Show correct answer after wrong attempt\n setTimeout(() => {\n input.value = input.dataset.answer;\n input.classList.add('correct');\n input.classList.remove('incorrect');\n }, 1500);\n }\n });\n \n totalCorrect += correct;\n totalAttempts += total;\n \n const isComplete = correct === total;\n if (isComplete && !stories[currentStoryIndex].completed) {\n storiesCompleted++;\n stories[currentStoryIndex].completed = true;\n }\n \n updateStats();\n showFeedback(correct, total, isComplete);\n \n if (isComplete) {\n document.getElementById('nextBtn').disabled = false;\n if (storiesCompleted === stories.length) {\n showCompletionCelebration();\n }\n }\n }\n\n function showFeedback(correct, total, isComplete) {\n const feedback = document.getElementById('feedbackMessage');\n \n if (isComplete) {\n feedback.textContent = `\ud83c\udf89 Perfect! You got all ${total} answers correct!`;\n feedback.className = 'feedback-message success';\n } else {\n feedback.textContent = `Good try! You got ${correct} out of ${total} correct. Check the highlighted answers!`;\n feedback.className = 'feedback-message';\n }\n \n feedback.style.display = 'block';\n setTimeout(() => {\n feedback.style.display = 'none';\n }, 4000);\n }\n\n function clearAnswers() {\n const inputs = document.querySelectorAll('.blank-input');\n inputs.forEach(input => {\n input.value = '';\n input.classList.remove('correct', 'incorrect');\n });\n \n \/\/ Hide all hints\n const hints = document.querySelectorAll('.hint-text');\n hints.forEach(hint => {\n hint.style.display = 'none';\n });\n \n document.getElementById('nextBtn').disabled = true;\n }\n\n function nextStory() {\n if (currentStoryIndex < stories.length - 1) {\n currentStoryIndex++;\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = true;\n }\n }\n\n function previousStory() {\n if (currentStoryIndex > 0) {\n currentStoryIndex--;\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = false;\n }\n }\n\n function selectStory() {\n const selector = document.getElementById('storySelector');\n currentStoryIndex = parseInt(selector.value);\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = !stories[currentStoryIndex].completed;\n }\n\n function updateProgress() {\n const progress = ((currentStoryIndex + 1) \/ stories.length) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `Story ${currentStoryIndex + 1} of ${stories.length}`;\n }\n\n function updateStats() {\n document.getElementById('storiesCompleted').textContent = storiesCompleted;\n document.getElementById('correctAnswers').textContent = totalCorrect;\n document.getElementById('hintsUsed').textContent = hintsUsed;\n \n const accuracy = totalAttempts > 0 ? Math.round((totalCorrect \/ totalAttempts) * 100) : 100;\n document.getElementById('accuracy').textContent = accuracy + '%';\n }\n\n function updateStorySelector() {\n const selector = document.getElementById('storySelector');\n selector.value = currentStoryIndex;\n }\n\n function showCompletionCelebration() {\n const celebration = document.getElementById('completionCelebration');\n const accuracy = totalAttempts > 0 ? Math.round((totalCorrect \/ totalAttempts) * 100) : 100;\n document.getElementById('finalAccuracy').textContent = accuracy + '%';\n celebration.style.display = 'block';\n }\n\n \/\/ Initialize the first story when page loads\n document.addEventListener('DOMContentLoaded', () => {\n loadStory(0);\n updateStats();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kerala PSC Fill-in-the-Blanks Stories \ud83d\udcda Kerala PSC Story Blanks Fill in the Collective Nouns to Complete the Stories \ud83d\udcd6 How to Play: Read each story carefully and fill in the blanks with correct collective nouns Use hint buttons (\ud83d\udca1) to get the first letter of the answer Click “Check Story” to verify your answers Complete […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2440","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"raghumadambath","author_link":"https:\/\/windowedu.in\/blog\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Kerala PSC Fill-in-the-Blanks Stories \ud83d\udcda Kerala PSC Story Blanks Fill in the Collective Nouns to Complete the Stories \ud83d\udcd6 How to Play: Read each story carefully and fill in the blanks with correct collective nouns Use hint buttons (\ud83d\udca1) to get the first letter of the answer Click “Check Story” to verify your answers Complete…","_links":{"self":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2440"}],"version-history":[{"count":2,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions"}],"predecessor-version":[{"id":2442,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions\/2442"}],"wp:attachment":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2440,"date":"2025-07-15T01:05:29","date_gmt":"2025-07-14T21:05:29","guid":{"rendered":"https:\/\/windowedu.in\/blog\/?p=2440"},"modified":"2025-07-15T01:06:10","modified_gmt":"2025-07-14T21:06:10","slug":"eng-voacabulary-part-1-collective-nouns","status":"publish","type":"post","link":"https:\/\/windowedu.in\/blog\/?p=2440","title":{"rendered":"Eng Voacabulary part 1- collective nouns"},"content":{"rendered":"\n\n\n\n \n \n Kerala PSC Fill-in-the-Blanks Stories<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n color: #2c3e50;\n }\n\n .game-container {\n max-width: 900px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .title {\n font-size: 2.5em;\n color: #2c3e50;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n }\n\n .subtitle {\n font-size: 1.2em;\n color: #7f8c8d;\n margin-bottom: 20px;\n }\n\n .instructions {\n background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n border-left: 5px solid #48cae4;\n }\n\n .instructions h3 {\n color: #2980b9;\n margin-bottom: 10px;\n }\n\n .instructions ul {\n margin-left: 20px;\n }\n\n .progress-bar {\n background: #ecf0f1;\n height: 20px;\n border-radius: 10px;\n margin-bottom: 20px;\n overflow: hidden;\n position: relative;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #667eea, #764ba2);\n border-radius: 10px;\n transition: width 0.5s ease;\n position: relative;\n }\n\n .progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #2c3e50;\n font-weight: bold;\n font-size: 0.9em;\n }\n\n .story-container {\n background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);\n padding: 25px;\n border-radius: 15px;\n margin-bottom: 20px;\n box-shadow: 0 8px 25px rgba(255, 171, 160, 0.3);\n position: relative;\n }\n\n .story-title {\n font-size: 1.5em;\n color: #d63031;\n margin-bottom: 15px;\n text-align: center;\n font-weight: bold;\n }\n\n .story-level {\n position: absolute;\n top: 10px;\n right: 15px;\n background: rgba(255, 255, 255, 0.8);\n padding: 5px 12px;\n border-radius: 15px;\n font-size: 0.9em;\n font-weight: bold;\n color: #2c3e50;\n }\n\n .story-text {\n font-size: 1.1em;\n line-height: 1.8;\n margin-bottom: 20px;\n color: #2d3436;\n }\n\n .blank-input {\n display: inline-block;\n background: rgba(255, 255, 255, 0.9);\n border: 2px solid #ddd;\n border-radius: 8px;\n padding: 5px 10px;\n font-size: 1em;\n font-weight: bold;\n min-width: 100px;\n text-align: center;\n transition: all 0.3s ease;\n margin: 0 3px;\n }\n\n .blank-input:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);\n background: white;\n }\n\n .blank-input.correct {\n background: #d5f4e6;\n border-color: #27ae60;\n color: #27ae60;\n }\n\n .blank-input.incorrect {\n background: #fadbd8;\n border-color: #e74c3c;\n color: #e74c3c;\n animation: shake 0.5s ease-in-out;\n }\n\n .hint-button {\n background: linear-gradient(45deg, #fdcb6e, #e17055);\n color: white;\n border: none;\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 0.8em;\n cursor: pointer;\n margin-left: 5px;\n transition: all 0.3s ease;\n }\n\n .hint-button:hover {\n transform: scale(1.1);\n box-shadow: 0 3px 10px rgba(225, 112, 85, 0.4);\n }\n\n .hint-text {\n display: inline-block;\n background: rgba(253, 203, 110, 0.3);\n padding: 2px 8px;\n border-radius: 8px;\n font-size: 0.9em;\n margin-left: 5px;\n font-style: italic;\n color: #d63031;\n }\n\n .story-controls {\n display: flex;\n justify-content: center;\n gap: 15px;\n margin-top: 20px;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 10px 20px;\n border: none;\n border-radius: 20px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .btn-primary {\n background: linear-gradient(45deg, #667eea, #764ba2);\n color: white;\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);\n }\n\n .btn-secondary {\n background: linear-gradient(45deg, #ff9a9e, #fecfef);\n color: #2c3e50;\n box-shadow: 0 5px 15px rgba(255, 154, 158, 0.3);\n }\n\n .btn-success {\n background: linear-gradient(45deg, #00b894, #00cec9);\n color: white;\n box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n }\n\n .btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .stats-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .stat-item {\n background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n padding: 15px;\n border-radius: 12px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(168, 237, 234, 0.3);\n }\n\n .stat-number {\n font-size: 1.8em;\n font-weight: bold;\n color: #2980b9;\n display: block;\n }\n\n .stat-label {\n font-size: 0.9em;\n color: #7f8c8d;\n margin-top: 5px;\n }\n\n .feedback-message {\n background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);\n color: white;\n padding: 15px;\n border-radius: 12px;\n margin-top: 15px;\n text-align: center;\n font-weight: bold;\n display: none;\n animation: fadeIn 0.5s ease;\n }\n\n .feedback-message.success {\n background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);\n }\n\n .story-navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 20px;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .story-selector {\n background: rgba(255, 255, 255, 0.8);\n border: 2px solid #667eea;\n border-radius: 20px;\n padding: 8px 15px;\n font-size: 1em;\n color: #2c3e50;\n cursor: pointer;\n }\n\n .story-selector:focus {\n outline: none;\n border-color: #764ba2;\n box-shadow: 0 0 10px rgba(118, 75, 162, 0.3);\n }\n\n .completion-celebration {\n background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);\n color: white;\n padding: 25px;\n border-radius: 15px;\n text-align: center;\n margin-top: 20px;\n display: none;\n animation: celebration 1s ease-in-out;\n }\n\n .completion-celebration h3 {\n font-size: 1.8em;\n margin-bottom: 10px;\n }\n\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 75% { transform: translateX(5px); }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes celebration {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n @media (max-width: 768px) {\n .title {\n font-size: 2em;\n }\n \n .game-container {\n padding: 20px;\n margin: 10px;\n }\n \n .story-text {\n font-size: 1em;\n line-height: 2;\n }\n \n .blank-input {\n min-width: 90px;\n font-size: 1em;\n padding: 8px 12px;\n margin: 5px 2px;\n display: inline-block;\n }\n \n .hint-button {\n padding: 8px 10px;\n margin-left: 8px;\n font-size: 1em;\n min-height: 44px;\n min-width: 44px;\n }\n \n .story-controls {\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n \n .btn {\n width: 250px;\n padding: 15px 20px;\n font-size: 1.1em;\n min-height: 50px;\n }\n \n .story-navigation {\n flex-direction: column;\n gap: 15px;\n align-items: center;\n }\n \n .story-selector {\n width: 100%;\n max-width: 300px;\n padding: 12px 15px;\n font-size: 1em;\n }\n \n .stats-container {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n \n .stat-item {\n padding: 12px;\n }\n \n .stat-number {\n font-size: 1.5em;\n }\n \n .instructions {\n padding: 15px;\n }\n \n .instructions ul {\n margin-left: 15px;\n }\n \n .hint-text {\n display: block;\n margin-top: 5px;\n margin-left: 0;\n }\n }\n\n @media (max-width: 480px) {\n body {\n padding: 10px;\n }\n \n .title {\n font-size: 1.8em;\n }\n \n .subtitle {\n font-size: 1em;\n }\n \n .game-container {\n padding: 15px;\n margin: 5px;\n }\n \n .story-text {\n font-size: 0.95em;\n line-height: 2.2;\n }\n \n .blank-input {\n min-width: 100px;\n width: auto;\n max-width: 120px;\n font-size: 1em;\n padding: 10px;\n margin: 8px 2px;\n display: block;\n text-align: center;\n }\n \n .hint-button {\n margin-left: 0;\n margin-top: 5px;\n margin-bottom: 10px;\n display: inline-block;\n padding: 10px 15px;\n min-height: 48px;\n min-width: 48px;\n font-size: 1.1em;\n }\n \n .hint-text {\n display: block;\n margin-top: 8px;\n margin-bottom: 15px;\n padding: 8px;\n background: rgba(253, 203, 110, 0.5);\n border-radius: 8px;\n text-align: center;\n }\n \n .stats-container {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n \n .btn {\n width: 100%;\n max-width: 280px;\n padding: 18px 20px;\n font-size: 1.2em;\n min-height: 55px;\n }\n \n .story-selector {\n width: 100%;\n padding: 15px;\n font-size: 1.1em;\n min-height: 50px;\n }\n \n .story-container {\n padding: 20px 15px;\n }\n \n .story-title {\n font-size: 1.3em;\n }\n \n .story-level {\n position: static;\n display: block;\n text-align: center;\n margin-bottom: 10px;\n background: rgba(255, 255, 255, 0.9);\n padding: 8px 15px;\n border-radius: 20px;\n font-size: 0.9em;\n width: fit-content;\n margin-left: auto;\n margin-right: auto;\n }\n \n .instructions h3 {\n font-size: 1.2em;\n }\n \n .instructions ul {\n margin-left: 10px;\n }\n \n .instructions li {\n margin-bottom: 8px;\n font-size: 0.95em;\n }\n }\n\n \/* Landscape phone optimization *\/\n @media (max-width: 768px) and (orientation: landscape) {\n .game-container {\n padding: 15px;\n }\n \n .title {\n font-size: 1.8em;\n margin-bottom: 5px;\n }\n \n .subtitle {\n margin-bottom: 15px;\n }\n \n .instructions {\n padding: 12px;\n margin-bottom: 15px;\n }\n \n .stats-container {\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n margin-bottom: 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"game-container\">\n <div class=\"header\">\n <h1 class=\"title\">\ud83d\udcda Kerala PSC Story Blanks<\/h1>\n <p class=\"subtitle\">Fill in the Collective Nouns to Complete the Stories<\/p>\n \n <div class=\"instructions\">\n <h3>\ud83d\udcd6 How to Play:<\/h3>\n <ul>\n <li>Read each story carefully and fill in the blanks with correct collective nouns<\/li>\n <li>Use hint buttons (\ud83d\udca1) to get the first letter of the answer<\/li>\n <li>Click “Check Story” to verify your answers<\/li>\n <li>Complete all stories to master Kerala PSC collective nouns!<\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"stats-container\">\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"storiesCompleted\">0<\/span>\n <div class=\"stat-label\">Stories Completed<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"correctAnswers\">0<\/span>\n <div class=\"stat-label\">Correct Answers<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"accuracy\">100%<\/span>\n <div class=\"stat-label\">Accuracy<\/div>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"hintsUsed\">0<\/span>\n <div class=\"stat-label\">Hints Used<\/div>\n <\/div>\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\" style=\"width: 0%\"><\/div>\n <div class=\"progress-text\" id=\"progressText\">Story 1 of 6<\/div>\n <\/div>\n\n <div class=\"story-container\" id=\"storyContainer\">\n \n <\/div>\n\n <div class=\"story-controls\">\n <button class=\"btn btn-primary\" onclick=\"checkStory()\">\u2705 Check Story<\/button>\n <button class=\"btn btn-secondary\" onclick=\"clearAnswers()\">\ud83d\udd04 Clear All<\/button>\n <button class=\"btn btn-success\" onclick=\"nextStory()\" id=\"nextBtn\" disabled>\u27a1\ufe0f Next Story<\/button>\n <\/div>\n\n <div class=\"story-navigation\">\n <select class=\"story-selector\" id=\"storySelector\" onchange=\"selectStory()\">\n <option value=\"0\">Story 1: Safari Adventure<\/option>\n <option value=\"1\">Story 2: Village Morning<\/option>\n <option value=\"2\">Story 3: Ocean Explorer<\/option>\n <option value=\"3\">Story 4: Forest Mystery<\/option>\n <option value=\"4\">Story 5: Farm Life<\/option>\n <option value=\"5\">Story 6: Kerala Wildlife<\/option>\n <\/select>\n \n <div>\n <button class=\"btn btn-secondary\" onclick=\"previousStory()\">\u2b05\ufe0f Previous<\/button>\n <button class=\"btn btn-secondary\" onclick=\"showAllHints()\">\ud83d\udca1 Show All Hints<\/button>\n <\/div>\n <\/div>\n\n <div class=\"feedback-message\" id=\"feedbackMessage\"><\/div>\n\n <div class=\"completion-celebration\" id=\"completionCelebration\">\n <h3>\ud83c\udf89 Congratulations!<\/h3>\n <p>You’ve mastered all Kerala PSC Animal Collective Noun stories!<\/p>\n <p>Your accuracy: <span id=\"finalAccuracy\"><\/span><\/p>\n <\/div>\n <\/div>\n\n <script>\n const stories = [\n {\n title: \"Safari Adventure\",\n level: \"Beginner\",\n text: \"During our African safari, we first spotted a _____ of lions resting under the acacia tree. Suddenly, a _____ of crows appeared overhead, cawing loudly. In the distance, a massive _____ of elephants walked slowly towards the waterhole. Our guide whispered that a _____ of leopards might be prowling nearby, hunting for their evening meal.\",\n answers: [\"pride\", \"murder\", \"herd\", \"leap\"],\n hints: [\"p\", \"m\", \"h\", \"l\"]\n },\n {\n title: \"Village Morning\",\n level: \"Beginner\", \n text: \"As dawn broke over the Kerala village, a _____ of crows gathered on the old banyan tree. A _____ of cats wandered through the narrow streets, searching for food. Near the pond, a _____ of bees buzzed around the lotus flowers. The farmer smiled as he watched a _____ of chickens pecking in his yard.\",\n answers: [\"murder\", \"clowder\", \"swarm\", \"brood\"],\n hints: [\"m\", \"c\", \"s\", \"b\"]\n },\n {\n title: \"Ocean Explorer\",\n level: \"Intermediate\",\n text: \"The marine biologist excitedly pointed to a large _____ of fish swimming near the coral reef. Above them, a _____ of seagulls circled, hoping to catch their breakfast. In the deeper waters, a small _____ of whales could be seen breaching the surface. The captain mentioned that a _____ of dolphins often followed their boat.\",\n answers: [\"shoal\", \"flight\", \"pod\", \"school\"],\n hints: [\"s\", \"f\", \"p\", \"s\"]\n },\n {\n title: \"Forest Mystery\",\n level: \"Intermediate\",\n text: \"Deep in the Western Ghats forest, a wise _____ of owls hooted mysteriously from the ancient trees. A _____ of ants marched in perfect formation across the forest floor. Hidden in the shadows, a _____ of bears moved slowly through the undergrowth. The forest ranger explained that a _____ of peacocks often displayed their beautiful feathers near the clearing.\",\n answers: [\"parliament\", \"army\", \"sloth\", \"muster\"],\n hints: [\"p\", \"a\", \"s\", \"m\"]\n },\n {\n title: \"Farm Life\",\n level: \"Advanced\",\n text: \"The old farmer proudly showed us his _____ of cattle grazing in the green pasture. A _____ of sheep huddled together under the shade of a mango tree. In the farmyard, a _____ of piglets played happily near their mother. Overhead, a _____ of geese flew in perfect V-formation, heading south for the winter.\",\n answers: [\"drove\", \"flock\", \"litter\", \"skein\"],\n hints: [\"d\", \"f\", \"l\", \"s\"]\n },\n {\n title: \"Kerala Wildlife Sanctuary\",\n level: \"Expert\",\n text: \"In Kerala's famous Periyar Wildlife Sanctuary, visitors often spot a _____ of monkeys swinging through the trees. A _____ of crocodiles can be seen basking on the riverbank in the morning sun. The sanctuary is also home to a _____ of wild boars that forage in the dense undergrowth. During the monsoon season, a spectacular _____ of butterflies fills the air with their colorful wings.\",\n answers: [\"troop\", \"bask\", \"sounder\", \"flutter\"],\n hints: [\"t\", \"b\", \"s\", \"f\"]\n }\n ];\n\n let currentStoryIndex = 0;\n let totalCorrect = 0;\n let totalAttempts = 0;\n let storiesCompleted = 0;\n let hintsUsed = 0;\n\n function loadStory(index) {\n const story = stories[index];\n const container = document.getElementById('storyContainer');\n \n let storyHTML = `\n <div class=\"story-level\">${story.level}<\/div>\n <h2 class=\"story-title\">${story.title}<\/h2>\n <div class=\"story-text\">\n `;\n \n let storyText = story.text;\n let blankIndex = 0;\n \n \/\/ Replace blanks with input fields\n storyText = storyText.replace(\/_____\/g, () => {\n const answer = story.answers[blankIndex];\n const hint = story.hints[blankIndex];\n const inputHTML = `<input type=\"text\" class=\"blank-input\" data-answer=\"${answer}\" data-hint=\"${hint}\" data-index=\"${blankIndex}\" placeholder=\"?\" oninput=\"checkInput(this)\">\n <button class=\"hint-button\" onclick=\"showHint(${blankIndex})\">\ud83d\udca1<\/button>\n <span class=\"hint-text\" id=\"hint-${blankIndex}\" style=\"display: none;\"><\/span>`;\n blankIndex++;\n return inputHTML;\n });\n \n storyHTML += storyText + '<\/div>';\n container.innerHTML = storyHTML;\n \n \/\/ Update progress\n updateProgress();\n updateStorySelector();\n }\n\n function checkInput(input) {\n const userAnswer = input.value.toLowerCase().trim();\n const correctAnswer = input.dataset.answer.toLowerCase();\n \n if (userAnswer === correctAnswer) {\n input.classList.remove('incorrect');\n input.classList.add('correct');\n } else if (userAnswer.length > 0) {\n input.classList.remove('correct');\n input.classList.add('incorrect');\n } else {\n input.classList.remove('correct', 'incorrect');\n }\n }\n\n function showHint(index) {\n const inputs = document.querySelectorAll('.blank-input');\n const input = inputs[index];\n const hintSpan = document.getElementById(`hint-${index}`);\n \n if (hintSpan.style.display === 'none') {\n hintSpan.textContent = `Starts with: ${input.dataset.hint.toUpperCase()}`;\n hintSpan.style.display = 'inline-block';\n hintsUsed++;\n updateStats();\n }\n }\n\n function showAllHints() {\n const inputs = document.querySelectorAll('.blank-input');\n inputs.forEach((input, index) => {\n showHint(index);\n });\n }\n\n function checkStory() {\n const inputs = document.querySelectorAll('.blank-input');\n let correct = 0;\n let total = inputs.length;\n \n inputs.forEach(input => {\n const userAnswer = input.value.toLowerCase().trim();\n const correctAnswer = input.dataset.answer.toLowerCase();\n \n if (userAnswer === correctAnswer) {\n input.classList.add('correct');\n input.classList.remove('incorrect');\n correct++;\n } else {\n input.classList.add('incorrect');\n input.classList.remove('correct');\n \/\/ Show correct answer after wrong attempt\n setTimeout(() => {\n input.value = input.dataset.answer;\n input.classList.add('correct');\n input.classList.remove('incorrect');\n }, 1500);\n }\n });\n \n totalCorrect += correct;\n totalAttempts += total;\n \n const isComplete = correct === total;\n if (isComplete && !stories[currentStoryIndex].completed) {\n storiesCompleted++;\n stories[currentStoryIndex].completed = true;\n }\n \n updateStats();\n showFeedback(correct, total, isComplete);\n \n if (isComplete) {\n document.getElementById('nextBtn').disabled = false;\n if (storiesCompleted === stories.length) {\n showCompletionCelebration();\n }\n }\n }\n\n function showFeedback(correct, total, isComplete) {\n const feedback = document.getElementById('feedbackMessage');\n \n if (isComplete) {\n feedback.textContent = `\ud83c\udf89 Perfect! You got all ${total} answers correct!`;\n feedback.className = 'feedback-message success';\n } else {\n feedback.textContent = `Good try! You got ${correct} out of ${total} correct. Check the highlighted answers!`;\n feedback.className = 'feedback-message';\n }\n \n feedback.style.display = 'block';\n setTimeout(() => {\n feedback.style.display = 'none';\n }, 4000);\n }\n\n function clearAnswers() {\n const inputs = document.querySelectorAll('.blank-input');\n inputs.forEach(input => {\n input.value = '';\n input.classList.remove('correct', 'incorrect');\n });\n \n \/\/ Hide all hints\n const hints = document.querySelectorAll('.hint-text');\n hints.forEach(hint => {\n hint.style.display = 'none';\n });\n \n document.getElementById('nextBtn').disabled = true;\n }\n\n function nextStory() {\n if (currentStoryIndex < stories.length - 1) {\n currentStoryIndex++;\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = true;\n }\n }\n\n function previousStory() {\n if (currentStoryIndex > 0) {\n currentStoryIndex--;\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = false;\n }\n }\n\n function selectStory() {\n const selector = document.getElementById('storySelector');\n currentStoryIndex = parseInt(selector.value);\n loadStory(currentStoryIndex);\n document.getElementById('nextBtn').disabled = !stories[currentStoryIndex].completed;\n }\n\n function updateProgress() {\n const progress = ((currentStoryIndex + 1) \/ stories.length) * 100;\n document.getElementById('progressFill').style.width = progress + '%';\n document.getElementById('progressText').textContent = `Story ${currentStoryIndex + 1} of ${stories.length}`;\n }\n\n function updateStats() {\n document.getElementById('storiesCompleted').textContent = storiesCompleted;\n document.getElementById('correctAnswers').textContent = totalCorrect;\n document.getElementById('hintsUsed').textContent = hintsUsed;\n \n const accuracy = totalAttempts > 0 ? Math.round((totalCorrect \/ totalAttempts) * 100) : 100;\n document.getElementById('accuracy').textContent = accuracy + '%';\n }\n\n function updateStorySelector() {\n const selector = document.getElementById('storySelector');\n selector.value = currentStoryIndex;\n }\n\n function showCompletionCelebration() {\n const celebration = document.getElementById('completionCelebration');\n const accuracy = totalAttempts > 0 ? Math.round((totalCorrect \/ totalAttempts) * 100) : 100;\n document.getElementById('finalAccuracy').textContent = accuracy + '%';\n celebration.style.display = 'block';\n }\n\n \/\/ Initialize the first story when page loads\n document.addEventListener('DOMContentLoaded', () => {\n loadStory(0);\n updateStats();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Kerala PSC Fill-in-the-Blanks Stories \ud83d\udcda Kerala PSC Story Blanks Fill in the Collective Nouns to Complete the Stories \ud83d\udcd6 How to Play: Read each story carefully and fill in the blanks with correct collective nouns Use hint buttons (\ud83d\udca1) to get the first letter of the answer Click “Check Story” to verify your answers Complete […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2440","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"ocean-thumb-m":false,"ocean-thumb-ml":false,"ocean-thumb-l":false},"uagb_author_info":{"display_name":"raghumadambath","author_link":"https:\/\/windowedu.in\/blog\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Kerala PSC Fill-in-the-Blanks Stories \ud83d\udcda Kerala PSC Story Blanks Fill in the Collective Nouns to Complete the Stories \ud83d\udcd6 How to Play: Read each story carefully and fill in the blanks with correct collective nouns Use hint buttons (\ud83d\udca1) to get the first letter of the answer Click “Check Story” to verify your answers Complete…","_links":{"self":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2440"}],"version-history":[{"count":2,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions"}],"predecessor-version":[{"id":2442,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2440\/revisions\/2442"}],"wp:attachment":[{"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/windowedu.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}