Identify object in the Picture

LND Class 3: Identify Objects (Picture Test) :root { --primary: #5E35B1; /* Deep Purple */ --bg: #F3E5F5; --text: #212121; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); } .app-container { max-width: 700px; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; } .view-section { display: none; padding: 20px; } .view-section.active { display: block; } /* HEADER */ .app-header { background: var(--primary); color: white; padding: 25px 20px; text-align: center; border-radius: 0 0 20px 20px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .app-header h1 { margin: 0; font-size: 1.5rem; } .app-header p { margin: 5px 0 0; opacity: 0.9; font-size: 0.9rem; } /* MENU */ .menu-item { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 18px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.1s; } .menu-item:active { background-color: #f5f5f5; transform: scale(0.98); } .menu-icon { font-size: 1.5rem; margin-right: 15px; } /* QUIZ AREA */ .sticky-bar { position: sticky; top: 0; background: #fff; z-index: 100; padding: 10px 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .img-display { font-size: 6rem; /* Large Emoji as Image */ text-align: center; margin: 20px 0; animation: popIn 0.5s ease; line-height: 1.2; } .q-text { font-size: 1.2rem; font-weight: bold; color: #555; text-align: center; margin-bottom: 20px; } .opts-container { display: grid; gap: 12px; } .opt-btn { background: #fff; border: 2px solid #e0e0e0; padding: 15px; border-radius: 12px; text-align: left; cursor: pointer; font-size: 1.1rem; color: #444; font-weight: 500; } .opt-btn.correct { background: #E8F5E9; border-color: #4CAF50; color: #1B5E20; } .opt-btn.wrong { background: #FFEBEE; border-color: #F44336; color: #B71C1C; } /* RESULT TABLE */ .res-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; } .res-table th { background: var(--primary); color: white; padding: 12px; text-align: left; } .res-table td { padding: 12px; border-bottom: 1px solid #eee; vertical-align: top; } .res-row-correct { background-color: #E8F5E9; } .res-row-wrong { background-color: #FFEBEE; } .btn-main { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } /* SOCIAL SHARE */ .share-container { display: flex; gap: 10px; margin-top: 20px; } .btn-share { flex: 1; padding: 12px; border: none; border-radius: 10px; color: white; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; } .btn-wa { background: #25D366; } .btn-fb { background: #1877F2; } /* REWARD ANIMATION */ .reward-box { text-align: center; margin-bottom: 20px; padding: 20px; background: #fff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 2px solid #eee; } .reward-icon { font-size: 5rem; display: block; margin-bottom: 10px; animation: bounce 1s infinite alternate; } .reward-title { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 5px; } .reward-msg { color: #666; font-size: 1rem; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } LND Class 3: Objects Identify the Picture | 300 Questions 🖼️ Practice Sets Category wise (Fruits, Animals, etc) ▶ 🎲 Grand Mock Test 50 Random Pictures ▶ Select Set ✕ Q: 1 ⏱ 00:00 ✓ 0 ✕ Next ➜ Result Card Score & Analysis ❓ ... ... 0 Obtained Marks / Total Marks Time: 00:00 💬 WhatsApp f Facebook QObject Name✓/✕ Home // --- DATA: 300 VERIFIED PICTURE QUESTIONS (Using Emojis) --- const qBank = []; // Helper to add questions (Image is Emoji) function addQ(setID, image, answer, distractors) { qBank.push({ s: setID, img: image, q: "Identify the object:", correctTxt: answer, d: distractors }); } // SET 1: Fruits & Vegetables const s1 = [ ["🍎","Apple",["Orange","Banana","Grapes"]], ["🍌","Banana",["Carrot","Mango","Apple"]], ["🍇","Grapes",["Cherry","Melon","Berry"]], ["🍊","Orange",["Apple","Lemon","Peach"]], ["🍋","Lemon",["Pear","Orange","Lime"]], ["🍉","Watermelon",["Melon","Apple","Berry"]], ["🍓","Strawberry",["Cherry","Grapes","Berry"]], ["🍒","Cherries",["Grapes","Berry","Apple"]], ["🍑","Peach",["Orange","Mango","Plum"]], ["🍐","Pear",["Lemon","Apple","Mango"]], ["🍍","Pineapple",["Apple","Melon","Banana"]], ["🥭","Mango",["Pear","Peach","Lemon"]], ["🥥","Coconut",["Kiwi","Melon","Nut"]], ["🥝","Kiwi",["Potato","Lime","Berry"]], ["🥕","Carrot",["Corn","Pepper","Potato"]], ["🌽","Corn",["Carrot","Onion","Peas"]], ["🥦","Broccoli",["Tree","Leaf","Peas"]], ["🥒","Cucumber",["Chilli","Banana","Corn"]], ["🌶️","Chilli",["Carrot","Pepper","Tomato"]], ["🍅","Tomato",["Apple","Peach","Berry"]], ["🍆","Brinjal",["Grapes","Plum","Berry"]], ["🥔","Potato",["Kiwi","Lemon","Egg"]], ["🧅","Onion",["Garlic","Turnip","Fig"]], ["🍄","Mushroom",["Umbrella","Tree","Flower"]], ["🍈","Melon",["Lemon","Ball","Pear"]], ["🥑","Avocado",["Pear","Mango","Nut"]], ["🥜","Peanut",["Bean","Peas","Corn"]], ["🥬","Leafy Green",["Grass","Tree","Mint"]], ["🌰","Chestnut",["Seed","Nut","Ball"]], ["🧄","Garlic",["Onion","Ginger","Root"]] ]; s1.forEach(i => addQ(1, i[0], i[1], i[2])); // SET 2: Animals const s2 = [ ["🐕","Dog",["Cat","Fox","Wolf"]], ["🐈","Cat",["Dog","Tiger","Lion"]], ["🐀","Rat",["Mouse","Cat","Bat"]], ["🐄","Cow",["Buffalo","Goat","Sheep"]], ["🐅","Tiger",["Lion","Cat","Leopard"]], ["🐆","Leopard",["Tiger","Cheetah","Cat"]], ["🐎","Horse",["Donkey","Zebra","Camel"]], ["🦓","Zebra",["Horse","Tiger","Donkey"]], ["🐐","Goat",["Sheep","Cow","Deer"]], ["🐑","Sheep",["Goat","Cow","Cloud"]], ["🐫","Camel",["Horse","Llama","Deer"]], ["🐘","Elephant",["Hippo","Rhino","Bear"]], ["🦒","Giraffe",["Camel","Horse","Deer"]], ["🐒","Monkey",["Man","Bear","Lion"]], ["🦍","Gorilla",["Monkey","Bear","Man"]], ["🐻","Bear",["Panda","Dog","Lion"]], ["🐼","Panda",["Bear","Cat","Dog"]], ["🦘","Kangaroo",["Rabbit","Rat","Deer"]], ["🐇","Rabbit",["Rat","Cat","Dog"]], ["🐿️","Squirrel",["Rat","Mouse","Fox"]], ["🦔","Hedgehog",["Rat","Mouse","Ball"]], ["🦇","Bat",["Bird","Rat","Fly"]], ["🐺","Wolf",["Dog","Fox","Cat"]], ["🦊","Fox",["Wolf","Dog","Cat"]], ["🐗","Boar",["Pig","Cow","Bear"]], ["🐖","Pig",["Boar","Cow","Sheep"]], ["🐍","Snake",["Worm","Eel","Rope"]], ["🐸","Frog",["Toad","Lizard","Turtle"]], ["🐢","Turtle",["Frog","Snail","Crab"]], ["🦎","Lizard",["Snake","Frog","Worm"]] ]; s2.forEach(i => addQ(2, i[0], i[1], i[2])); // SET 3: Transport & Vehicles const s3 = [ ["🚗","Car",["Bus","Van","Taxi"]], ["🚕","Taxi",["Car","Bus","Police"]], ["🚙","Jeep",["Car","Truck","Van"]], ["🚌","Bus",["Train","Truck","Van"]], ["🚎","Trolleybus",["Tram","Bus","Train"]], ["🏎️","Race Car",["Car","Bike","Jeep"]], ["🚓","Police Car",["Taxi","Ambulance","Van"]], ["🚑","Ambulance",["Police","Fire","Truck"]], ["🚒","Fire Engine",["Truck","Bus","Van"]], ["🚐","Van",["Car","Bus","Jeep"]], ["🚚","Truck",["Bus","Van","Car"]], ["🚜","Tractor",["Jeep","Car","Truck"]], ["🚲","Bicycle",["Bike","Scooter","Car"]], ["🛵","Scooter",["Bike","Cycle","Car"]], ["🏍️","Motorcycle",["Cycle","Scooter","Car"]], ["🚂","Train",["Bus","Tram","Metro"]], ["🚄","Bullet Train",["Metro","Bus","Car"]], ["✈️","Airplane",["Jet","Bird","Kite"]], ["🚁","Helicopter",["Plane","Drone","Fan"]], ["🚀","Rocket",["Jet","Plane","Star"]], ["🚢","Ship",["Boat","Yacht","Ferry"]], ["⛵","Boat",["Ship","Canoe","Sea"]], ["🚤","Speedboat",["Ship","Ferry","Jet"]], ["🛶","Canoe",["Boat","Ship","Log"]], ["🚠","Cable Car",["Lift","Bus","Tram"]], ["🚟","Monorail",["Train","Bus","Tram"]], ["🛸","UFO",["Disc","Plane","Hat"]], ["🛹","Skateboard",["Board","Bike","Shoe"]], ["🛴","Kick Scooter",["Bike","Cycle","Rod"]], ["🚧","Barrier",["Gate","Fence","Sign"]] ]; s3.forEach(i => addQ(3, i[0], i[1], i[2])); // SET 4: Classroom & Stationery const s4 = [ ["📖","Book",["Note","Paper","Card"]], ["📚","Books",["Library","Shelf","Stack"]], ["✏️","Pencil",["Pen","Brush","Stick"]], ["🖊️","Pen",["Pencil","Pin","Stick"]], ["🖍️","Crayon",["Pen","Chalk","Brush"]], ["📝","Memo",["Paper","Book","List"]], ["📏","Ruler",["Scale","Stick","Tape"]], ["📐","Triangle",["Ruler","Shape","Math"]], ["✂️","Scissors",["Cutter","Knife","Tool"]], ["📌","Pin",["Nail","Needle","Clip"]], ["📎","Paperclip",["Pin","Hook","Wire"]], ["🎒","School Bag",["Purse","Box","Sack"]], ["🏫","School",["House","Bank","Shop"]], ["🎓","Cap",["Hat","Top","Helm"]], ["🎨","Palette",["Paint","Color","Dish"]], ["🖌️","Brush",["Pen","Stick","Tool"]], ["🔬","Microscope",["Glass","Lens","Tool"]], ["🔭","Telescope",["Glass","Tube","Eye"]], ["💻","Laptop",["TV","Screen","Book"]], ["🖥️","Computer",["TV","Box","Screen"]], ["🖨️","Printer",["Fax","Box","Machine"]], ["🖱️","Mouse",["Rat","Click","Pad"]], ["📁","Folder",["File","Book","Bag"]], ["📅","Calendar",["Chart","Date","Map"]], ["🗑️","Bin",["Basket","Box","Bucket"]], ["📋","Clipboard",["Pad","Board","File"]], ["📧","Email",["Letter","Post","Note"]], ["✉️","Envelope",["Card","Paper","Bag"]], ["📦","Box",["Cube","Pack","Case"]], ["🔔","Bell",["Ring","Alarm","Clock"]] ]; s4.forEach(i => addQ(4, i[0], i[1], i[2])); // SET 5: Home & Objects const s5 = [ ["🏠","House",["School","Shop","Shed"]], ["🛏️","Bed",["Sofa","Chair","Table"]], ["🪑","Chair",["Seat","Stool","Table"]], ["🛋️","Sofa",["Bed","Chair","Bench"]], ["🚪","Door",["Gate","Wall","Window"]], ["🪟","Window",["Glass","Door","Frame"]], ["🛁","Bathtub",["Pool","Basin","Sink"]], ["🚿","Shower",["Rain","Tap","Water"]], ["🚽","Toilet",["Seat","Pot","Bowl"]], ["🧻","Paper",["Roll","Tissue","Cloth"]], ["🧼","Soap",["Bar","Brick","Ice"]], ["🧽","Sponge",["Foam","Soap","Brick"]], ["🧹","Broom",["Mop","Brush","Stick"]], ["🧺","Basket",["Bin","Box","Bucket"]], ["🪣","Bucket",["Mug","Cup","Pot"]], ["🔑","Key",["Lock","Pin","Tool"]], ["🔒","Lock",["Key","Box","Safe"]], ["🔨","Hammer",["Axe","Tool","Stick"]], ["🪛","Screwdriver",["Pen","Nail","Tool"]], ["🔧","Wrench",["Tool","Key","Bar"]], ["🪜","Ladder",["Stair","Step","Pole"]], ["🕰️","Clock",["Watch","Time","Dial"]], ["💡","Bulb",["Light","Lamp","Sun"]], ["🔦","Torch",["Light","Lamp","Stick"]], ["🕯️","Candle",["Stick","Fire","Lamp"]], ["📷","Camera",["Phone","Lens","Box"]], ["📺","Television",["Screen","Monitor","Box"]], ["📻","Radio",["Box","Speaker","Sound"]], ["🔋","Battery",["Cell","Power","Can"]], ["🧯","Extinguisher",["Can","Gas","Pump"]] ]; s5.forEach(i => addQ(5, i[0], i[1], i[2])); // SET 6: Body Parts (Visual) const s6 = [ ["👂","Ear",["Eye","Nose","Lip"]], ["👃","Nose",["Ear","Eye","Mouth"]], ["👁️","Eye",["Ear","Lip","Face"]], ["👄","Mouth",["Lip","Tongue","Teeth"]], ["🦷","Tooth",["Bone","Nail","White"]], ["👅","Tongue",["Lip","Mouth","Pink"]], ["🧠","Brain",["Heart","Mind","Nut"]], ["💪","Arm",["Leg","Hand","Foot"]], ["🦵","Leg",["Arm","Foot","Knee"]], ["🦶","Foot",["Hand","Leg","Toe"]], ["👋","Hand",["Foot","Arm","Five"]], ["👍","Thumb",["Finger","Toe","Hand"]], ["👆","Finger",["Toe","Stick","Hand"]], ["👊","Fist",["Hand","Box","Rock"]], ["🦴","Bone",["Stick","Tooth","White"]], ["❤️","Heart",["Love","Red","Blood"]], ["🫁","Lungs",["Heart","Bag","Red"]], ["🩸","Drop",["Blood","Water","Red"]], ["👶","Baby",["Boy","Girl","Man"]], ["👦","Boy",["Girl","Man","Baby"]], ["👧","Girl",["Boy","Lady","Baby"]], ["👨","Man",["Boy","Dad","Sir"]], ["👩","Woman",["Girl","Mom","Lady"]], ["👴","Old Man",["Man","Dad","Sir"]], ["👵","Old Woman",["Lady","Mom","Aunt"]], ["👮","Police",["Guard","Man","Sir"]], ["👷","Worker",["Man","Hat","Builder"]], ["🤴","Prince",["King","Boy","Man"]], ["👸","Princess",["Queen","Girl","Lady"]], ["🎅","Santa",["Man","Dad","Clown"]] ]; s6.forEach(i => addQ(6, i[0], i[1], i[2])); // SET 7: Birds & Insects const s7 = [ ["🐦","Bird",["Fly","Bat","Plane"]], ["🦅","Eagle",["Hawk","Crow","Owl"]], ["🦆","Duck",["Swan","Goose","Bird"]], ["🦢","Swan",["Duck","Goose","Crane"]], ["🦉","Owl",["Bird","Eagle","Bat"]], ["🦩","Flamingo",["Crane","Stork","Pink"]], ["🦚","Peacock",["Bird","Hen","Turkey"]], ["🦜","Parrot",["Bird","Crow","Eagle"]], ["🐔","Chicken",["Duck","Bird","Cock"]], ["🐓","Rooster",["Hen","Duck","Crow"]], ["🐣","Chick",["Bird","Egg","Duck"]], ["🐧","Penguin",["Bird","Owl","Duck"]], ["🕊️","Dove",["Bird","Crow","Kite"]], ["🦅","Hawk",["Eagle","Crow","Bat"]], ["🐝","Bee",["Fly","Ant","Bug"]], ["🐛","Caterpillar",["Worm","Snake","Eel"]], ["🦋","Butterfly",["Moth","Fly","Bee"]], ["🐌","Snail",["Slug","Worm","Shell"]], ["🐞","Ladybug",["Beetle","Bug","Fly"]], ["🐜","Ant",["Fly","Bee","Bug"]], ["🦟","Mosquito",["Fly","Bee","Bug"]], ["🦗","Cricket",["Fly","Ant","Grasshopper"]], ["🕷️","Spider",["Ant","Fly","Crab"]], ["🦂","Scorpion",["Crab","Spider","Bug"]], ["🐢","Turtle",["Frog","Crab","Snail"]], ["🦀","Crab",["Spider","Lobster","Bug"]], ["🦞","Lobster",["Crab","Shrimp","Fish"]], ["🦐","Shrimp",["Fish","Crab","Worm"]], ["🦑","Squid",["Octopus","Fish","Jelly"]], ["🐙","Octopus",["Squid","Fish","Star"]] ]; s7.forEach(i => addQ(7, i[0], i[1], i[2])); // SET 8: Clothing & Accessories const s8 = [ ["👕","T-Shirt",["Shirt","Top","Vest"]], ["👖","Jeans",["Pant","Trouser","Legs"]], ["👗","Dress",["Skirt","Frock","Gown"]], ["👘","Kimono",["Robe","Coat","Dress"]], ["👙","Bikini",["Bra","Wear","Suit"]], ["👚","Blouse",["Shirt","Top","Dress"]], ["👛","Purse",["Bag","Wallet","Sack"]], ["👜","Handbag",["Purse","Bag","Sack"]], ["👝","Pouch",["Bag","Purse","Case"]], ["👞","Shoe",["Boot","Sock","Foot"]], ["👟","Sneaker",["Shoe","Boot","Run"]], ["🥾","Boot",["Shoe","Sock","Foot"]], ["🧦","Socks",["Shoe","Boot","Foot"]], ["🧤","Gloves",["Hand","Sock","Mitt"]], ["🧣","Scarf",["Tie","Cloth","Rope"]], ["🎩","Top Hat",["Cap","Hat","Helm"]], ["🧢","Cap",["Hat","Helm","Top"]], ["👒","Hat",["Cap","Helm","Top"]], ["⛑️","Helmet",["Hat","Cap","Top"]], ["👑","Crown",["Hat","Cap","Gold"]], ["💍","Ring",["Band","Gold","Gem"]], ["💎","Gem",["Stone","Rock","Ice"]], ["🕶️","Glasses",["Eye","Lens","Spec"]], ["👓","Spectacles",["Glass","Eye","Lens"]], ["🥼","Coat",["Shirt","Robe","Vest"]], ["🦺","Vest",["Jacket","Shirt","Top"]], ["👔","Tie",["Scarf","Rope","Cloth"]], ["🎒","Backpack",["Bag","Sack","Pack"]], ["☂️","Umbrella",["Stick","Rain","Shade"]], ["🧵","Thread",["Rope","String","Wire"]] ]; s8.forEach(i => addQ(8, i[0], i[1], i[2])); // SET 9: Nature & Weather const s9 = [ ["☀️","Sun",["Star","Moon","Ball"]], ["🌙","Moon",["Sun","Star","Dish"]], ["⭐","Star",["Sun","Moon","Dot"]], ["☁️","Cloud",["Sky","Smoke","Rain"]], ["🌧️","Rain",["Water","Cloud","Drop"]], ["⛈️","Storm",["Rain","Cloud","Wind"]], ["❄️","Snow",["Ice","Rain","Cold"]], ["🔥","Fire",["Hot","Red","Light"]], ["💧","Water",["Drop","Rain","Blue"]], ["🌊","Wave",["Sea","Water","Surf"]], ["🌍","Earth",["Ball","Map","World"]], ["🏔️","Mountain",["Hill","Rock","Stone"]], ["🌋","Volcano",["Hill","Fire","Rock"]], ["🏜️","Desert",["Sand","Land","Hot"]], ["🏝️","Island",["Land","Sea","Rock"]], ["🏖️","Beach",["Sand","Sea","Land"]], ["🌲","Tree",["Bush","Plant","Leaf"]], ["🌳","Tree",["Plant","Bush","Leaf"]], ["🌴","Palm Tree",["Tree","Bush","Leaf"]], ["🌵","Cactus",["Plant","Thorn","Tree"]], ["🌾","Wheat",["Grass","Rice","Corn"]], ["🌿","Herb",["Leaf","Plant","Weed"]], ["☘️","Clover",["Leaf","Plant","Green"]], ["🍁","Maple",["Leaf","Tree","Red"]], ["🍄","Mushroom",["Fungi","Plant","Food"]], ["🌹","Rose",["Flower","Red","Plant"]], ["🌻","Sunflower",["Flower","Sun","Yellow"]], ["🌼","Blossom",["Flower","Plant","Weed"]], ["🌷","Tulip",["Flower","Plant","Rose"]], ["🌱","Seedling",["Plant","Leaf","Grass"]] ]; s9.forEach(i => addQ(9, i[0], i[1], i[2])); // SET 10: Food & Drink const s10 = [ ["🍞","Bread",["Cake","Bun","Toast"]], ["🥐","Croissant",["Bread","Roll","Bun"]], ["🥖","Baguette",["Bread","Stick","Roll"]], ["🥨","Pretzel",["Bread","Knot","Salt"]], ["🥯","Bagel",["Donut","Ring","Bread"]], ["🥞","Pancakes",["Cake","Bread","Flat"]], ["🧀","Cheese",["Cake","Butter","Brick"]], ["🍖","Meat",["Bone","Food","Beef"]], ["🍗","Chicken",["Leg","Meat","Food"]], ["🥩","Steak",["Meat","Beef","Food"]], ["🥓","Bacon",["Meat","Pork","Strip"]], ["🍔","Burger",["Sandwich","Bun","Meat"]], ["🍟","Fries",["Potato","Chips","Stick"]], ["🍕","Pizza",["Pie","Bread","Cheese"]], ["🌭","Hotdog",["Bun","Meat","Roll"]], ["🥪","Sandwich",["Bread","Toast","Meal"]], ["🌮","Taco",["Wrap","Food","Shell"]], ["🌯","Burrito",["Wrap","Roll","Food"]], ["🥚","Egg",["Ball","White","Oval"]], ["🍳","Fried Egg",["Egg","Food","Pan"]], ["🥘","Pan",["Pot","Dish","Bowl"]], ["🍲","Pot",["Bowl","Dish","Soup"]], ["🥣","Bowl",["Cup","Dish","Pot"]], ["🥗","Salad",["Leaf","Food","Mix"]], ["🍿","Popcorn",["Corn","Food","Snack"]], ["🧈","Butter",["Cheese","Oil","Fat"]], ["🧂","Salt",["Sugar","Sand","Spice"]], ["🥫","Can",["Tin","Jar","Box"]], ["🍱","Bento",["Box","Meal","Tray"]], ["🍘","Cracker",["Biscuit","Cookie","Disk"]] ]; s10.forEach(i => addQ(10, i[0], i[1], i[2])); // --- APP LOGIC --- const sets = [ {id:1, t:"Set 1: Fruits & Veg"}, {id:2, t:"Set 2: Animals"}, {id:3, t:"Set 3: Transport"}, {id:4, t:"Set 4: Classroom"}, {id:5, t:"Set 5: Home Objects"}, {id:6, t:"Set 6: Body Parts"}, {id:7, t:"Set 7: Birds & Bugs"}, {id:8, t:"Set 8: Clothing"}, {id:9, t:"Set 9: Nature"}, {id:10, t:"Set 10: Food"} ]; let currQ = 0, score = 0, qList = []; let userAnswers = []; let timerInterval, seconds = 0; window.onload = function() { const sList = document.getElementById("sets-list"); sets.forEach(s => { const div = document.createElement("div"); div.className = "menu-item"; div.innerHTML = `${s.t}▶`; div.onclick = () => startQuiz(s.id); sList.appendChild(div); }); }; function show(id) { document.querySelectorAll(".view-section").forEach(e => e.classList.remove("active")); document.getElementById(id).classList.add("active"); window.scrollTo(0,0); } function startTimer() { seconds = 0; document.getElementById("timer-display").innerText = "00:00"; clearInterval(timerInterval); timerInterval = setInterval(() => { seconds++; const m = Math.floor(seconds / 60).toString().padStart(2, '0'); const s = (seconds % 60).toString().padStart(2, '0'); document.getElementById("timer-display").innerText = `${m}:${s}`; }, 1000); } function startQuiz(sid) { let pool = []; if (sid === 99) { pool = [...qBank].sort(() => Math.random() - 0.5).slice(0, 50); } else { pool = qBank.filter(q => q.s === sid).sort(() => Math.random() - 0.5); } if(pool.length === 0) return alert("Please wait, data loading..."); qList = pool; currQ = 0; score = 0; userAnswers = []; document.getElementById("score").innerText = "0"; show("view-quiz"); startTimer(); renderQ(); } function renderQ() { const q = qList[currQ]; document.getElementById("q-curr").innerText = `${currQ+1}/${qList.length}`; const area = document.getElementById("quiz-area"); // CHANGED: Added img-display div for the "Picture" area.innerHTML = ` Q${currQ+1}. ${q.q} ${q.img} `; const optsDiv = document.getElementById("opts"); // --- SAFE 4-OPTION LOGIC --- let distractors = [...q.d]; distractors.sort(() => Math.random() - 0.5); let finalOpts = distractors.slice(0, 3); finalOpts.push(q.correctTxt); // Remove duplicates just in case finalOpts = [...new Set(finalOpts)]; // Ensure we have 4 options if possible, fill with generic if not while(finalOpts.length Math.random() - 0.5); finalOpts.forEach((optText, i) => { const btn = document.createElement("div"); btn.className = "opt-btn"; btn.innerHTML = `${String.fromCharCode(65+i)}) ${optText}`; btn.onclick = () => check(btn, optText, q.correctTxt); optsDiv.appendChild(btn); }); document.getElementById("next-btn").style.display = "none"; } function check(btn, selected, correct) { const all = document.querySelectorAll(".opt-btn"); all.forEach(b => b.style.pointerEvents = "none"); const isCorrect = selected === correct; userAnswers.push({ qNum: currQ + 1, q: qList[currQ].img + " (" + qList[currQ].correctTxt + ")", sel: selected, cor: correct, isCor: isCorrect }); if(isCorrect) { btn.classList.add("correct"); score++; document.getElementById("score").innerText = score; } else { btn.classList.add("wrong"); all.forEach(b => { if(b.innerText.includes(correct)) b.classList.add("correct"); }); if ('speechSynthesis' in window) { const u = new SpeechSynthesisUtterance("Wrong"); u.rate = 1.5; window.speechSynthesis.speak(u); } } document.getElementById("next-btn").style.display = "block"; } function nextQ() { currQ++; if(currQ < qList.length) renderQ(); else finish(); } function finish() { clearInterval(timerInterval); show("view-res"); document.getElementById("res-score").innerText = `${score} / ${qList.length}`; document.getElementById("res-time").innerText = document.getElementById("timer-display").innerText; // --- REWARD LOGIC --- const percentage = (score / qList.length) * 100; const rIcon = document.getElementById("r-icon"); const rTitle = document.getElementById("r-title"); const rMsg = document.getElementById("r-msg"); const rContainer = document.getElementById("reward-container"); if (percentage >= 85) { rIcon.innerText = "🏆"; rTitle.innerText = "Champion!"; rMsg.innerText = "Outstanding performance! You identified almost everything correctly."; rContainer.style.borderColor = "#FFD700"; // Gold } else if (percentage >= 50) { rIcon.innerText = "🌺"; rTitle.innerText = "Good Job!"; rMsg.innerText = "Nice effort. Keep practicing to recognize more objects!"; rContainer.style.borderColor = "#4CAF50"; // Green } else { rIcon.innerText = "🐍"; rTitle.innerText = "Oh No! Snake!"; rMsg.innerText = "Danger zone! You need to look closer at the pictures."; rContainer.style.borderColor = "#F44336"; // Red } const tbody = document.getElementById("summary-body"); tbody.innerHTML = ""; userAnswers.forEach(i => { const tr = document.createElement("tr"); tr.className = i.isCor ? "res-row-correct" : "res-row-wrong"; tr.innerHTML = ` ${i.qNum} ${i.q.split('(')[0]} You: ${i.sel} Correct: ${i.cor} ${i.isCor ? "✓" : "✕"} `; tbody.appendChild(tr); }); } function share(platform) { const url = encodeURIComponent(window.location.href); const text = encodeURIComponent(`I scored ${score}/${qList.length} in this Picture Quiz! Try it out: `); if(platform === 'wa') { window.open(`https://api.whatsapp.com/send?text=${text}${url}`, '_blank'); } else if(platform === 'fb') { window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank'); } } function exitQuiz() { if(confirm("Exit Quiz?")) { clearInterval(timerInterval); show("view-pattern"); } }

Identify object in the Picture

LND Class 3: Objects

Result Card

Majid Farooq

Leave a Reply Cancel reply

LND Class 3: Objects

Result Card

Majid Farooq

Related Articles

Prepositions

Proper and Common Noun

Equivalent Fractions

Math Fraction

Math Even and Odd

Use of Singular and Plural

Leave a Reply Cancel reply