Flashcard Frenzy

{"name":"Fake FAKES","description":"What's a tabloid? What's AI-generated? Try to survive. \n\nCLICK INTO WINDOW TO BEGIN","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/hsnfe3zwzs45pnpr8uub","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-04-02T22:45:09.808335Z","updated_at":"2025-04-02T22:45:09.808337Z","user_id":70,"status":"PRIVATE","parent_id":6486,"id":7056,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"let isFlipped = false;\n\nlet back;\n\nlet frontImages = [];\n\nlet headlines = [];\n\n// Array to hold headlines\nlet currentCardIndex = 0;\n\nlet timer;\n\nlet timeLimit = 15;\n\nlet timeRemaining;\n\nlet displayedCards = [];\n\nlet isBlackScreenVisible = false;\n\nlet isEndingScreenVisible = false;\n\nlet tabloidCount = 0;\n\nlet aiCount = 0;\n\nlet playerGuesses = [];\n\nlet tabloidSound;\n\n// Declare at the top\nlet aiSound;\n\nlet isCardCategorized = false;\n\nlet timerPaused = false;\n\nconst categories = [\n 'Tabloid', // 1\n 'Tabloid', // 2\n 'Tabloid', // 3\n 'Tabloid', // 4\n 'Tabloid', // 5\n 'Tabloid', // 6\n 'AI', // 7\n 'Tabloid', // 8\n 'AI', // 9\n 'Tabloid', // 10\n 'Tabloid', // 11\n 'AI', // 12\n 'Tabloid', // 13\n 'AI', // 14\n 'Tabloid', // 15\n 'AI' // 16\n];\n\nfunction preload() {\n frontImages[0] = loadImage(\"@asset('0front')\");\n frontImages[1] = loadImage(\"@asset('1front')\");\n // Replace the image \"2front\" with \"blake\"\n frontImages[2] = loadImage(\"@asset('blake')\");\n frontImages[3] = loadImage(\"@asset('3front')\");\n frontImages[4] = loadImage(\"@asset('4front')\");\n frontImages[5] = loadImage(\"@asset('5front')\");\n frontImages[6] = loadImage(\"@asset('6front')\");\n frontImages[7] = loadImage(\"@asset('7front')\");\n frontImages[8] = loadImage(\"@asset('8front')\");\n frontImages[9] = loadImage(\"@asset('9front')\");\n frontImages[10] = loadImage(\"@asset('10front')\");\n frontImages[11] = loadImage(\"@asset('11front')\");\n frontImages[12] = loadImage(\"@asset('12front')\");\n frontImages[13] = loadImage(\"@asset('13front')\");\n frontImages[14] = loadImage(\"@asset('14front')\");\n frontImages[15] = loadImage(\"@asset('15front')\");\n\n // Initialize the headlines for each card\n headlines = [\n \"Bat Boy Sighted in NYC Subway\",\n \"Kanye West could 'face legal action' from Beyonce and Jay-Z after shocking social media posts about their twins\",\n \"Blake Lively I DONUT Care About the Drama Right Now!!!\", // Updated headline\n \"Donald Trump Asked Son Barron 'How'd You Do That?' When He Turned on a Laptop: 'Unbelievable Aptitude in Technology'\",\n \"How AI-Powered Learning is Transforming Classrooms At Alpha Schools\",\n \"Tired Justin Timberlake older than his years with gray beard while on 'trainwreck' world tour\",\n \"Robot Tutors Secretly Controlling College Admissions--Parents Outraged\",\n \"Elon Musk's daughter Vivian Jenna Wilson calls him a 'pathetic man-child,' says she wants nothing to do with him\",\n \"Astronauts Reveal We Were Contacted by Alien Civilization During 286-Day Space Ordeal\",\n \"Computer Virus Spreads to Humans\",\n \"Mexican artist leaves a Tesla to crumble under the weight of an Olmec head\",\n \"Draymond Green Launches Meditation Retreat After On-Court Blowups: 'Zen and Technical Fouls Can Coexist!'\",\n \"Doctors reveal why Gen-Z women like Sabrina Carpenter are aging SO badly, but men look younger than ever... and it's for VERY different reasons\",\n \"Quinta Brunson Secretly Running for President--Campaign Slogan: 'Abbott Elementary, America's Principal!'\",\n \"You Can Buy Sexy Dog Halloween Costumes on Fashion Nova\",\n \"Janelle Monáe Unveils Clothing Line Made Entirely of Recycled Superhero Capes\"\n ];\n\n back = loadImage(\"@asset('back')\"); // Load the back image\n\n // Load sounds\n tabloidSound = loadSound(\"@asset('gimmie3')\"); // Load Tabloid sound\n aiSound = loadSound(\"@asset('push3')\"); // Load AI sound\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n displayCard();\n\n const tabloidButton = select('#category1');\n tabloidButton.mousePressed(() => categorizeCard('Tabloid'));\n\n const aiButton = select('#category2');\n aiButton.mousePressed(() => categorizeCard('AI'));\n\n startTimer();\n}\n\nfunction draw() {\n if (isBlackScreenVisible) {\n displayBlackScreen(); // Show the black screen\n } else if (isEndingScreenVisible) {\n clearInterval(timer); // Stop the timer immediately when entering the ending screen\n noLoop(); // Stop the draw loop for the ending screen\n displayEndingScreen(); // Show the ending screen first\n displayResults(); // Show results on the ending screen\n } else {\n background(0);\n displayCard();\n updateTimerDisplay(); // Update timer display while categorizing cards\n displayProgressBar(); // Display progress bar\n }\n}\n\nfunction updateTimerDisplay() {\n // Clear the previous timer display\n fill(0); // Set background color to clear previous text\n rect(0, height - 80, width, 80); // Draw a rectangle to cover the previous text\n\n // Check if time is running low and display a warning message when time is low\n if (timeRemaining <= 5 && timeRemaining > 0) {\n fill(255); // Set text color to white\n textSize(24); // Set smaller text size for visibility\n textAlign(CENTER, CENTER); // Center the text\n\n // Flashing effect: toggle text visibility every 500ms\n if (frameCount % 30 < 15) { // Flashing every 30 frames (~0.5 seconds at 60 FPS)\n text(\"Time's Running Out!\", width / 2, height - 50); // Display warning message when time is low\n }\n\n // Countdown for the last 5 seconds (without \"Countdown\" label)\n if (timeRemaining <= 5) {\n text(`${timeRemaining}`, width / 2, height - 10); // Display just the countdown number\n }\n }\n\n // Check if time is running out\n if (timeRemaining <= 0) {\n fill(255, 0, 0); // Set text color to red for warning\n textSize(48); // Set a slightly larger size for the warning\n textAlign(CENTER, CENTER); // Center the text\n text(\"Time's up!\", width / 2, height - 50); // Display warning when time is up\n }\n}\n\nfunction displayBlackScreen() {\n background(0); // Set background to black\n fill(255); // Set text color to white\n textSize(48); // Set text size\n textAlign(CENTER, CENTER); // Center the text\n text(\"Feeling confident?...\", width / 2, height / 2); // Display the message\n\n // Hide the button container when the black screen is visible\n select('.button-container').hide();\n}\n\nfunction mousePressed() {\n // This function is now empty to prevent any actions on image clicks\n}\n\nfunction keyPressed() {\n if (keyCode === 32) { // Check if the space bar is pressed\n isFlipped = !isFlipped; // Toggle the flip state\n }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n const tabloidSound = document.getElementById('tabloid-sound');\n const aiSound = document.getElementById('ai-sound');\n\n document.getElementById('category1').addEventListener('click', () => {\n tabloidSound.currentTime = 0; // Reset sound to start\n tabloidSound.play(); // Play sound for Tabloid button\n });\n\n document.getElementById('category2').addEventListener('click', () => {\n aiSound.currentTime = 0; // Reset sound to start\n aiSound.play(); // Play sound for AI button\n });\n});\n\n// For testing purposes, try playing the sound directly\n// tabloidSound.play(); // This should play the Tabloid sound\n// aiSound.play();\n\nfunction nextCard() {\n // Check if all cards have been displayed\n if (currentCardIndex >= frontImages.length - 1) {\n console.log(\"All cards have been displayed.\");\n isEndingScreenVisible = true; // Show the ending screen\n select('.button-container').hide(); // Hide button container\n return;\n }\n\n // Check if the current card is the last one before the black screen\n if (currentCardIndex === 3) { // Display black screen after the 3rd card\n isBlackScreenVisible = true; // Show the black screen\n setTimeout(() => {\n currentCardIndex++; // Move to the next card after a delay\n isBlackScreenVisible = false; // Hide the black screen\n displayCard(); // Display the current card\n startTimer(); // Start the timer for categorization\n\n // Show the button container again when the new card is displayed\n select('.button-container').show();\n }, 4000); // Changed to 4 seconds delay\n } else {\n // Move to the next card\n currentCardIndex++;\n displayCard(); // Display the current card\n startTimer(); // Start the timer for categorization\n\n // Show the button container again when the new card is displayed\n select('.button-container').show();\n }\n}\n\nfunction displayProgressBar() {\n const progressBarWidth = width * 0.8; // 80% of the canvas width\n const progressBarHeight = 20; // Height of the progress bar\n const progress = currentCardIndex / frontImages.length; // Calculate progress\n\n // Position the progress bar at the bottom center\n const xPos = (width - progressBarWidth) / 2;\n const yPos = height - 30;\n\n // Draw the background of the progress bar\n fill(255, 255, 255, 50); // Light gray\n rect(xPos, yPos, progressBarWidth, progressBarHeight);\n\n // Draw the foreground of the progress bar\n fill(255); // White\n rect(xPos, yPos, progressBarWidth * progress, progressBarHeight);\n}\n\nfunction displayCard() {\n if (currentCardIndex < frontImages.length) {\n let cardImage = frontImages[currentCardIndex];\n\n // Draw the back image as the background\n image(back, 0, 0, width, height);\n\n if (!isFlipped) {\n // Define the dimensions of the card\n const flashcardWidth = 300;\n const flashcardHeight = 400;\n\n // Calculate the scale factor to ensure the image fits inside the card dimensions\n let scaleFactor = min(flashcardWidth / cardImage.width, flashcardHeight / cardImage.height);\n\n // Calculate the scaled width and height\n let scaledWidth = cardImage.width * scaleFactor;\n let scaledHeight = cardImage.height * scaleFactor;\n\n // Calculate position to center the image on the canvas\n let xPos = (width - scaledWidth) / 2;\n let yPos = (height - scaledHeight) / 2;\n\n // Draw the front image at the calculated position\n image(cardImage, xPos, yPos, scaledWidth, scaledHeight);\n }\n }\n}\n\nfunction displayEndingScreen() {\n background(0); // Set background to black\n // Here you do not display any text, just prepare for results to show up\n}\n\nfunction startTimer() {\n clearInterval(timer); // Clear any existing timer to prevent overlap\n timeRemaining = timeLimit; // Reset time remaining to the time limit\n updateTimerDisplay(); // Immediate update of the timer display\n isCardCategorized = false; // Reset the flag when starting a new card timer\n\n // Update the timer every second\n timer = setInterval(() => {\n timeRemaining--;\n updateTimerDisplay();\n\n if (timeRemaining <= 0) {\n clearInterval(timer); // Stop the timer\n console.log(`Time's up! Card ${currentCardIndex} is unclassified.`);\n categorizeCard('Uncategorized'); // Automatically categorize as 'Uncategorized'\n }\n }, 1000);\n}\n\nfunction categorizeCard(category) {\n if (isCardCategorized) return; // Prevent multiple categorizations\n\n isCardCategorized = true;\n\n // Check if a guess has already been made for the current card\n if (playerGuesses[currentCardIndex] === undefined) {\n playerGuesses[currentCardIndex] = category; // Save the guess for the current card\n }\n\n const correctCategory = categories[currentCardIndex];\n const selectedButton = category === 'Tabloid' ? select('#category1') : select('#category2');\n\n // Add console logs to check the values being compared\n console.log(`Player Guess: ${category}, Correct Category: ${correctCategory}`);\n\n // Comparison logic to apply glow effects\n if (category === correctCategory) {\n selectedButton.addClass('glow-correct'); // Add correct glow effect\n } else {\n selectedButton.addClass('glow-incorrect'); // Add incorrect glow effect\n\n // Show pop-up after a slight delay to allow the glow effect to be visible\n setTimeout(() => {\n if (category === 'Tabloid' && correctCategory === 'AI') {\n showPopup(); // Show pop-up if incorrect guess is AI as Tabloid\n }\n }, 500); // Delay before showing the pop-up\n }\n\n // Temporarily disable hover effects\n selectedButton.addClass('no-hover');\n\n // Clear timer and move to the next card after a delay\n clearInterval(timer); // Ensure the timer is stopped once categorized\n setTimeout(() => {\n selectedButton.removeClass('glow-correct'); // Remove correct glow effect\n selectedButton.removeClass('glow-incorrect'); // Remove incorrect glow effect\n selectedButton.removeClass('no-hover'); // Re-enable hover effects\n isCardCategorized = false; // Allow new categorization\n if (!timerPaused) nextCard(); // Transition to the next card if the timer isn't paused\n }, 1000); // Adjust the delay as needed\n}\n\nfunction showPopup() {\n const popup = select('#popup');\n const popupText = select('#popup-text');\n\n // Define specific messages for each headline\n const messages = {\n \"Bat Boy Sighted in NYC Subway\": \"Some sensational headlines are simply too wild to be believed!\",\n \"Kanye West could 'face legal action' from Beyonce and Jay-Z after shocking social media posts about their twins\": \"Celebrity gossip often exaggerates for dramatic effect.\",\n \"Blake Lively I DONUT Care About the Drama Right Now!!!\": \"Headlines about personal lives of celebrities are often speculative.\",\n \"Donald Trump Asked Son Barron 'How'd You Do That?' When He Turned on a Laptop: 'Unbelievable Aptitude in Technology'\": \"Humorous headlines can capture attention by twisting everyday events.\",\n \"How AI-Powered Learning is Transforming Classrooms At Alpha Schools\": \"AI in education is a trending topic, often overhyped.\",\n \"Tired Justin Timberlake older than his years with gray beard while on 'trainwreck' world tour\": \"Headlines can exaggerate physical appearances to create buzz.\",\n \"Robot Tutors Secretly Controlling College Admissions--Parents Outraged\":\n \"📢 Why AI Might Generate This:
- 🤖 Fear of AI replacing human roles is a common trope. AI is often trained on fear-driven narratives about automation replacing human roles. Phrases like 'secretly controlling' add a conspiracy angle, while 'parents outraged' is designed to trigger emotional reactions. This type of headline is common in debates about AI’s role in decision-making and society’s anxiety over automation.

\" +\n \"📂 Data Sources: Tech fear-mongering, education debates, AI skepticism.

\" +\n \"📊 Bias Meter: High Bias – Sensational, fear-driven framing.

\" +\n \"🧠 Think About This:
Does AI’s focus on fear of automation push narratives that distrust technology? How might these headlines influence how we feel about AI’s role in education and other aspects of life?\",\n \"Astronauts Reveal We Were Contacted by Alien Civilization During 286-Day Space Ordeal\":\n \"📢 Why AI Might Generate This:
- 👽 Alien contact stories have been media gold for decades! AI often pulls from sensational space narratives, where extraterrestrial speculation is exaggerated for engagement. Words like 'reveal' and 'alien civilization' add mystery, while 'ordeal' injects drama—common tactics in viral UFO and science-fiction headlines. Mystery and fear drive engagement.

\" +\n \"📂 Data Sources: UFO theories, speculative science, viral space hoaxes.

\" +\n \"📊 Bias Meter: High Bias – Relies on speculative, sensational language.

\" +\n \"🧠 Think About This:
How does AI play into our fear of the unknown? What happens when AI blurs science with speculation for clicks?\",\n \"Draymond Green Launches Meditation Retreat After On-Court Blowups: 'Zen and Technical Fouls Can Coexist!'\":\n \"📢 Why AI Might Generate This:
- 🏀 Sports media loves a redemption story! AI recognizes that juxtaposing opposites makes headlines more intriguing. The contrast between 'Zen' and 'Blowups' grabs attention, playing into sports drama and celebrity redemption arcs. AI likely pulled from sports media and athlete controversies, where personal transformations are often exaggerated for engagement.

\" +\n \"📂 Data Sources: Sports media, athlete controversies, mental health trends.

\" +\n \"📊 Bias Meter: Moderate Bias – Plays on public perception for dramatic effect.

\" +\n \"🧠 Think About This:
Does AI exploit celebrity redemption stories to create simplified narratives of personal growth? Are we missing the deeper issues behind the headlines by focusing on celebrity solutions?\",\n \"Quinta Brunson Secretly Running for President--Campaign Slogan: 'Abbott Elementary, America's Principal!'\":\n \"📢 Why AI Might Generate This:
- 📺 AI thrives on celebrity-political speculation, which often goes viral. Phrases like 'secretly running' and 'campaign slogan' make it sound like an exclusive scoop, even when it's just playful speculation. AI likely pulled from celebrity gossip and political tabloid stories, which frequently blur reality with entertainment.

\" +\n \"📂 Data Sources: Celebrity gossip, political tabloid stories, viral political rumors.

\" +\n \"📊 Bias Meter: Moderate Bias – Speculative, but common in entertainment media.

\" +\n \"🧠 Think About This:
How does AI fuel the entertainment-driven politics of today?\",\n \"Janelle Monáe Unveils Clothing Line Made Entirely of Recycled Superhero Capes\":\n \"📢 Why AI Might Generate This:
- ♻️ AI recognizes that eco-conscious fashion mixed with celebrity branding makes for a shareable story. 'Recycled Superhero Capes' adds a quirky, fun twist, making it more likely to go viral. AI likely pulled from celebrity-driven sustainability efforts and stylized fashion announcements that blend environmental activism with high-profile creativity.

\" +\n \"📂 Data Sources: Celebrity activism, sustainable fashion trends, viral pop culture.

\" +\n \"📊 Bias Meter: Moderate Bias – Playful exaggeration, but rooted in real trends.

\" +\n \"🧠 Think About This:
Is AI making sustainability a trend instead of a real conversation? How does it blur eco-consciousness with celebrity culture to create shallow narratives instead of impactful change?\",\n \"Elon Musk's daughter Vivian Jenna Wilson calls him a 'pathetic man-child,' says she wants nothing to do with him\": \"Family drama with public figures often makes for catchy headlines.\",\n \"Computer Virus Spreads to Humans\": \"Merging concepts of technology and biology creates sensational news.\",\n \"Mexican artist leaves a Tesla to crumble under the weight of an Olmec head\": \"Artistic statements often use shock value.\",\n \"Doctors reveal why Gen-Z women like Sabrina Carpenter are aging SO badly, but men look younger than ever... and it's for VERY different reasons\": \"Headlines that pit genders against each other can be misleading.\",\n \"You Can Buy Sexy Dog Halloween Costumes on Fashion Nova\": \"Fashion headlines often border on the absurd to capture interest.\"\n };\n\n // Retrieve the message for the current headline\n const currentMessage = messages[headlines[currentCardIndex]] || \"This headline is unique and doesn't fit the usual patterns.\";\n\n popupText.html(currentMessage);\n\n popup.style('display', 'flex');\n timerPaused = true; // Pause the timer\n clearInterval(timer); // Stop the timer\n\n select('#close-popup').mousePressed(() => {\n popup.style('display', 'none');\n timerPaused = false; // Resume the timer\n startTimer(); // Restart the timer\n });\n}\n\nfunction displayResults() {\n background(0); // Set background to black for the results screen\n fill(255); // White text color\n\n // Set dynamic text size based on canvas height\n const baseSize = height / 40; // Adjust this divisor to change the text size proportionally\n textSize(baseSize); // Set dynamic text size\n textAlign(LEFT); // Align left for better readability\n\n // Display results for each card\n let correctCount = 0; // Variable to count correct answers\n const spacing = baseSize * 1.5; // Space between each line based on text size\n const startY = height * 0.1; // Starting Y position as 10% of the height\n const maxLines = Math.floor((height * 0.8) / spacing); // Calculate maximum lines that can fit\n\n for (let i = 0; i < frontImages.length; i++) {\n if (i >= maxLines) break; // Don't display more than can fit on the screen\n\n let headline = headlines[i];\n let playerGuess = playerGuesses[i] || \"Uncategorized\"; // Get the player's guess from the array\n let correctCategory = categories[i]; // Get the correct category from the categories array\n let isCorrect = (playerGuess === correctCategory); // Check if the player's guess matches the correct category\n\n // Increment correctCount if the guess is correct\n if (isCorrect) {\n correctCount++;\n }\n\n // Display the results in a cleaner format\n text(`“${headline}”`, 20, startY + (i * spacing)); // Headline with spacing\n text(`🎯 You guessed: ${playerGuess} ${isCorrect ? '✅' : '❌'}`, 20, startY + (i * spacing) + (baseSize * 1.5)); // Player's guess\n }\n\n // Display the score at the end, ensure it fits well\n textSize(baseSize * 1.5); // Make the score a bit larger in proportion to text size\n textAlign(RIGHT); // Align right for the score display\n text(`Score: ${correctCount}/${frontImages.length}`, width - 30, height - 50); // Display score\n}\n\n","style.css":"/* Style for button container */\n.button-container {\n position: absolute;\n bottom: 50%;\n left: calc(50% + 200px);\n transform: translateY(50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* style.css */\nbody {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}\n\n.button-container {\n position: absolute;\n bottom: 50%;\n left: calc(50% + 200px);\n transform: translateY(50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.arcade-button {\n background: linear-gradient(to bottom, #ff4d4d, #b30000);\n border: none;\n border-radius: 10px;\n padding: 0;\n height: 100px;\n width: 120px;\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5), inset 0 -3px 5px rgba(255, 255, 255, 0.2);\n transition: transform 0.1s ease, box-shadow 0.1s ease;\n cursor: pointer;\n outline: none;\n color: white;\n font-family: 'League Spartan', sans-serif;\n font-weight: bold;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n.arcade-button:hover {\n transform: scale(1.05);\n box-shadow: none;\n}\n\n.arcade-button:active {\n transform: translateY(4px);\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);\n}\n\n.arcade-button::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: rgba(255, 255, 255, 0.1);\n pointer-events: none;\n transition: opacity 0.2s;\n}\n\n.arcade-button:hover::before {\n opacity: 0.5;\n}\n\n.glow-correct {\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.5);\n transition: box-shadow 0.3s ease-in-out;\n}\n\n.glow-incorrect {\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.5);\n transition: box-shadow 0.3s ease-in-out;\n}\n\n.no-hover .arcade-button:hover {\n transform: none;\n box-shadow: none;\n}\n\n.arcade-button.glow-correct:hover {\n transform: none;\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.5);\n}\n\n.arcade-button.glow-incorrect:hover {\n transform: none;\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.5);\n}\n\n/* style.css */\n/* Style for button container */\n.button-container {\n position: absolute;\n bottom: 50%;\n left: calc(50% + 200px);\n transform: translateY(50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Style for arcade buttons */\n.arcade-button {\n background: linear-gradient(to bottom, #ff4d4d, #b30000);\n border: none;\n border-radius: 10px;\n padding: 0;\n height: 100px;\n width: 120px;\n box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5), inset 0 -3px 5px rgba(255, 255, 255, 0.2);\n transition: transform 0.1s ease, box-shadow 0.1s ease;\n cursor: pointer;\n outline: none;\n color: white;\n font-family: 'League Spartan', sans-serif;\n font-weight: bold;\n text-align: center;\n position: relative;\n overflow: hidden;\n}\n\n/* Hover effect for realism */\n.arcade-button:hover {\n transform: scale(1.05);\n /* Slightly increase size on hover */\n box-shadow: none;\n /* Remove box-shadow to prevent it from interfering when feedback is active */\n}\n\n/* Active state for press animation */\n.arcade-button:active {\n transform: translateY(4px);\n /* Move button down when pressed */\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);\n /* Reduced shadow when pressed */\n}\n\n/* Correct and incorrect feedback effects */\n.glow-correct {\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.5);\n /* Green glow effect */\n transition: box-shadow 0.3s ease-in-out;\n}\n\n/* Disable hover effect when no-hover class is added to body */\n.no-hover .arcade-button:hover {\n transform: none;\n /* Disable scaling */\n box-shadow: none;\n /* Disable glow effect */\n}\n\n/* Prevent hover from overriding feedback effects */\n.arcade-button.glow-correct:hover {\n transform: none;\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.5);\n}\n\n.arcade-button.glow-incorrect:hover {\n transform: none;\n box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.5);\n}\n\n/* Pop-up styling */\n.popup {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.popup-content {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n max-width: 500px;\n text-align: center;\n}\n\n/* Smaller close button style */\n.popup .arcade-button {\n height: 50px;\n width: 60px;\n background: linear-gradient(to bottom, #efd520, #b3a300);\n /* Change to yellow */\n color: black;\n /* Change text color for contrast */\n}","index.html":"\n\n\n\n\n \n \n Flashcard Frenzy\n \n \n \n \n\n\n\n

\n \n \n

\n\n \n \n\n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"tcnxgwcdjyomogkzylei","name":"0front","deleted":false,"id":67028,"created_at":"2025-04-02T22:45:09.839476Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"vfyrd5pqmzdazzvwdxvn","name":"1front","deleted":false,"id":67027,"created_at":"2025-04-02T22:45:09.838275Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"bdxpqumityefkiyudrgy","name":"2front","deleted":false,"id":67026,"created_at":"2025-04-02T22:45:09.837135Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"cmezqlvrbcobicn2wwvv","name":"3front","deleted":false,"id":67025,"created_at":"2025-04-02T22:45:09.835945Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"fvfjwzrgtzzckizt0x7b","name":"4front","deleted":false,"id":67024,"created_at":"2025-04-02T22:45:09.834755Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"oyvmwchm3krepzbqnvqe","name":"5front","deleted":false,"id":67023,"created_at":"2025-04-02T22:45:09.833583Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"xrdog7igtqhphwtkxo0q","name":"6front","deleted":false,"id":67022,"created_at":"2025-04-02T22:45:09.832393Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"hgfixlvplmsvtyiwzeo3","name":"7front","deleted":false,"id":67021,"created_at":"2025-04-02T22:45:09.831309Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"deftxqtapaj3klhmqrjg","name":"8front","deleted":false,"id":67020,"created_at":"2025-04-02T22:45:09.829879Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"uoasy24ccpv26zrp6crp","name":"9front","deleted":false,"id":67019,"created_at":"2025-04-02T22:45:09.828647Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"hsnfe3zwzs45pnpr8uub","name":"back","deleted":false,"id":67018,"created_at":"2025-04-02T22:45:09.827080Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"fl3wdfdjq9ujs61zdn5n","name":"10front","deleted":false,"id":67017,"created_at":"2025-04-02T22:45:09.825976Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"uzr60bb0gntsnxiykqrz","name":"13front","deleted":false,"id":67016,"created_at":"2025-04-02T22:45:09.824836Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"illzni9lvmopvnrwsv00","name":"14front","deleted":false,"id":67015,"created_at":"2025-04-02T22:45:09.823608Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"ulo4ddxuiyw1gzlkhnph","name":"11front","deleted":false,"id":67014,"created_at":"2025-04-02T22:45:09.822408Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"szhqmfo1asfweceud65o","name":"12front","deleted":false,"id":67013,"created_at":"2025-04-02T22:45:09.821178Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"ypl3yycg4y3hvitbpuq5","name":"15front","deleted":false,"id":67012,"created_at":"2025-04-02T22:45:09.819932Z","project_id":7056,"resource_type":"image"},{"cloudinary_id":"cctrhumye7s7vaoywzsm","name":"gimmie3","deleted":false,"id":67011,"created_at":"2025-04-02T22:45:09.818718Z","project_id":7056,"resource_type":"video"},{"cloudinary_id":"xcm7tixnh3mlppyxmeoo","name":"push3","deleted":false,"id":67010,"created_at":"2025-04-02T22:45:09.817436Z","project_id":7056,"resource_type":"video"},{"cloudinary_id":"rspwpgjxfbnn1nyw9iri","name":"blake","deleted":false,"id":67009,"created_at":"2025-04-02T22:45:09.815920Z","project_id":7056,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}

Behind the Algorithm