onload = () => { const insideDish = document.getElementById("insideDish"); const guessMysteryButton = document.getElementById("guessMysteryButton"); const guessDishButton = document.getElementById("guessDishButton"); const mcqSection = document.getElementById("mcqSection"); const instructions = document.getElementById("instructions"); let ingredientsAdded = 0; let selectedDish = {}; let mysteryIngredient = null; swal("🤔 Can you guess the delicious dish? \n", "A dish 🍲 is coming to life—follow the steps carefully and uncover the delicious surprise!🤗🥰", "success"); const music = document.getElementById("music"); music.load(); music.volume = 0.5; document.addEventListener("click", () => { music.play(); }); const correctSound = new Audio("https://www.dropbox.com/scl/fi/ym5qedeohdvka0o9uqcrk/Correct-ans.mp3?rlkey=n891f2nyg3p2h4iuvmo5vq44t&st=op5vwxw4&raw=1"); const wrongSound = new Audio("https://www.dropbox.com/scl/fi/bibmx91tpu80tl9js7k4b/Wronganswer.mp3?rlkey=c6kut5u3dhryl4s09kq5cc3pv&st=gexhiqoo&raw=1"); const celebrationSound = new Audio("https://www.dropbox.com/scl/fi/h80yvtauzwskrhrdxowqs/Celebration.mp3?rlkey=zjfsxp5o346suk3vytieo6vjc&st=s208obas&raw=1"); const ingredientNames = { "🍅": "Tomato", "🧄": "Garlic", "🍝": "Pasta", "🧀": "Cheese", "🥕": "Carrot", "🧅": "Onion", "🌶️": "Chili", "🧂": "Salt", "🍞": "Flour", "🥚": "Egg", "🍚": "Sugar", "🧈": "Butter", "🍫": "Chocolate" }; const dishes = [ { name: "Pasta", ingredients: ["🍅", "🧄", "🍝", "🧀"] }, { name: "Soup", ingredients: ["🥕", "🧅", "🌶️", "🧂"] }, { name: "Cake", ingredients: ["🍞", "🥚", "🍚", "🧈"] }, { name: "Cookies", ingredients: ["🍞", "🍚", "🧈", "🍫"] } ]; function shuffleArray(array) { return array.sort(() => Math.random() - 0.5); } function setupIngredients() { if (!insideDish || !guessMysteryButton || !guessDishButton || !mcqSection || !instructions) { console.error("Error: One or more elements not found."); return; } insideDish.innerHTML = ""; instructions.innerText = "Step 1: Click on the question mark(❓) cards below to uncover ingredients!"; mcqSection.innerHTML = ""; mcqSection.style.display = "none"; guessMysteryButton.disabled = true; guessDishButton.disabled = true; guessMysteryButton.classList.add("disabled"); guessDishButton.classList.add("disabled"); ingredientsAdded = 0; selectedDish = dishes[Math.floor(Math.random() * dishes.length)]; mysteryIngredient = selectedDish.ingredients[Math.floor(Math.random() * selectedDish.ingredients.length)]; selectedDish.ingredients.forEach(ing => { let btn = document.createElement("button"); btn.innerText = "❔"; btn.onclick = () => addIngredient(ing, btn); mcqSection.appendChild(btn); }); mcqSection.style.display = "block"; } function addIngredient(ingredient, btn) { if (ingredientsAdded >= 4) return; let ingElement = document.createElement("div"); ingElement.classList.add("ingredient"); ingElement.innerText = ingredient === mysteryIngredient ? "❔" : ingredient; insideDish.appendChild(ingElement); ingredientsAdded++; btn.remove(); if (ingredientsAdded === 4) { guessMysteryButton.disabled = false; guessMysteryButton.classList.remove("disabled"); instructions.innerText = "Step 2: Click find the hidden ingredient❓button below!"; mcqSection.innerHTML = ""; mcqSection.style.display = "none"; } } function guessMysteryIngredient() { instructions.innerText = "Step 3: Which ingredient was hidden?"; mcqSection.innerHTML = "

Step 3: Choose the hidden ingredient among the 4 options below:

"; mcqSection.style.display = "block"; let shuffledIngredients = shuffleArray([...selectedDish.ingredients]); shuffledIngredients.forEach(ing => { let btn = document.createElement("button"); btn.innerText = ingredientNames[ing]; btn.onclick = () => { if (ing === mysteryIngredient) { btn.style.background = "green"; music.pause(); correctSound.play(); alert(`✅ Correct! The hidden ingredient was ${ing} (${ingredientNames[ing]})!`); revealMysteryIngredient(); guessDishButton.disabled = false; guessDishButton.classList.remove("disabled"); instructions.innerText = "Step 4: Click guess the dish 🍛 button below!"; mcqSection.innerHTML = ""; mcqSection.style.display = "none"; } else { btn.style.background = "red"; music.pause(); wrongSound.play(); alert("❌ Wrong! Try again."); } }; mcqSection.appendChild(btn); }); guessMysteryButton.disabled = true; guessMysteryButton.classList.add("disabled"); } function revealMysteryIngredient() { document.querySelectorAll(".ingredient").forEach(ing => { if (ing.innerText === "❓") { ing.innerText = mysteryIngredient; } }); } function guessDish() { instructions.innerText = "Final Step: What dish did you make?"; mcqSection.innerHTML = "

Final Step: Choose the correct dish from the following options:

"; mcqSection.style.display = "block"; let shuffledDishes = shuffleArray([...dishes]); shuffledDishes.forEach(dish => { let btn = document.createElement("button"); btn.innerText = dish.name; btn.onclick = () => { if (dish.name === selectedDish.name) { btn.style.background = "green"; music.pause(); correctSound.play(); alert(`✅ Amazing! You made ${dish.name}!`); celebrationSound.play(); showCelebration(`🎉 Congratulations! You won by guessing it as ${dish.name}! 🎉`); disableAllOptions(mcqSection); } else { btn.style.background = "red"; music.pause(); wrongSound.play(); alert("❌ Wrong! Try again."); btn.disabled = true; } }; mcqSection.appendChild(btn); }); guessDishButton.disabled = true; guessDishButton.classList.add("disabled"); } function disableAllOptions(section) { section.querySelectorAll("button").forEach(btn => { btn.disabled = true; btn.classList.add("disabled"); }); mcqSection.innerHTML = ""; mcqSection.style.display = "none"; } function showCelebration(message) { instructions.innerHTML = `${message}`; } function restartGame() { setupIngredients(); } guessMysteryButton.onclick = guessMysteryIngredient; guessDishButton.onclick = guessDish; document.querySelector("button[onclick='restartGame()']").onclick = restartGame; setupIngredients(); }; alert("🤗🥰Hello, everyone! 🤩✨\n\nWelcome you all to my very FIRST GAME! 🎉🔥\n\nDive in & have good fun! 😆🚀🎊");

🎮𝗔 𝗧𝗮𝘀𝘁𝘆 𝗥𝗶𝗱𝗱𝗹𝗲 𝗚𝗮𝗺𝗲 🤩🍜 𝗚𝘂𝗲𝘀𝘀 𝘁𝗵𝗲 𝗗𝗶𝘀𝗵❓🎮