Spaces:

ParulPandey
/

Fraction_Pizza_Party

Running

App Files Files Community

Pp commited on Mar 27

Commit

28a75da

verified ·

1 Parent(s): 6862916

Upload 3 files

Browse files

Files changed (3) hide show

index.html +45 -19
script.js +221 -0
style.css +142 -17

index.html CHANGED Viewed

@@ -1,19 +1,45 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fraction Pizza Party! 🍕</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div id="game-wrapper">
+        <h1>Fraction Pizza Party!</h1>
+        <div id="score-area">
+            Score: <span id="score">0</span>
+        </div>
+        <div id="order-area">
+            <h2>Order Up!</h2>
+            <p>A customer wants:</p>
+            <div id="fraction-order" class="fraction-display">
+                <span class="numerator">?</span>
+                <span class="denominator">?</span>
+            </div>
+        </div>
+        <div id="feedback-area">
+            <!-- Feedback messages appear here -->
+            Click the pizza that matches the order!
+        </div>
+        <div id="pizza-options-area">
+            <h2>Choose the Pizza:</h2>
+            <div id="pizza-choices">
+                <!-- Pizza options will be dynamically added here by JS -->
+            </div>
+        </div>
+    </div> <!-- End of game-wrapper -->
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,221 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const scoreDisplay = document.getElementById('score');
+    const numeratorDisplay = document.querySelector('#fraction-order .numerator');
+    const denominatorDisplay = document.querySelector('#fraction-order .denominator');
+    const feedbackArea = document.getElementById('feedback-area');
+    const pizzaChoicesContainer = document.getElementById('pizza-choices');
+    const PIZZA_SIZE = 140; // Diameter of the pizza canvas
+    const OPTIONS_COUNT = 3; // Number of pizza choices to show (1 correct, 2 incorrect)
+    // --- Define Possible Fractions ---
+    // Start simple, can add more complex ones later
+    const possibleFractions = [
+        // Denominator 2
+        { num: 1, den: 2 },
+        // Denominator 3
+        { num: 1, den: 3 }, { num: 2, den: 3 },
+        // Denominator 4
+        { num: 1, den: 4 }, { num: 2, den: 4 }, { num: 3, den: 4 },
+        // Denominator 6
+        { num: 1, den: 6 }, { num: 2, den: 6 }, { num: 3, den: 6 }, { num: 4, den: 6 }, { num: 5, den: 6 },
+        // Denominator 8
+        { num: 1, den: 8 }, { num: 2, den: 8 }, { num: 3, den: 8 }, { num: 4, den: 8 },
+        { num: 5, den: 8 }, { num: 6, den: 8 }, { num: 7, den: 8 },
+    ];
+    // --- Game State ---
+    let score = 0;
+    let currentOrder = null; // Will hold {num, den} of the target fraction
+    let waitingForNext = false; // Flag to prevent clicks during feedback/delay
+    // --- Utility: Get Random Int ---
+    function getRandomInt(max) {
+        return Math.floor(Math.random() * max);
+    }
+    // --- Utility: Shuffle Array ---
+    function shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = getRandomInt(i + 1);
+            [array[i], array[j]] = [array[j], array[i]]; // Swap elements
+        }
+    }
+    // --- Canvas Drawing Function ---
+    function drawPizza(canvas, num, den) {
+        const ctx = canvas.getContext('2d');
+        const radius = canvas.width / 2;
+        const centerX = radius;
+        const centerY = radius;
+        const sliceAngle = (Math.PI * 2) / den;
+        // Colors
+        const crustColor = '#f4a460'; // Sandy brown
+        const sauceColor = '#ff6347'; // Tomato red
+        const cheeseColor = '#fffacd'; // Lemon chiffon (looks like cheese)
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Draw base crust slightly larger
+        ctx.fillStyle = crustColor;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        ctx.fill();
+        // Draw cheese base smaller than crust
+        ctx.fillStyle = cheeseColor;
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius * 0.95, 0, Math.PI * 2);
+        ctx.fill();
+        // Draw highlighted slices (sauce/toppings)
+        ctx.fillStyle = sauceColor;
+        for (let i = 0; i < num; i++) {
+            const startAngle = i * sliceAngle - Math.PI / 2; // Start from top
+            const endAngle = (i + 1) * sliceAngle - Math.PI / 2;
+            ctx.beginPath();
+            ctx.moveTo(centerX, centerY);
+            ctx.arc(centerX, centerY, radius * 0.95, startAngle, endAngle); // Fill up to cheese edge
+            ctx.closePath();
+            ctx.fill();
+        }
+        // Draw slice lines on top
+        ctx.strokeStyle = crustColor; // Darker lines for contrast
+        ctx.lineWidth = 2;
+        for (let i = 0; i < den; i++) {
+            const angle = i * sliceAngle - Math.PI / 2;
+            ctx.beginPath();
+            ctx.moveTo(centerX, centerY);
+            ctx.lineTo(centerX + radius * 0.95 * Math.cos(angle), centerY + radius * 0.95 * Math.sin(angle));
+            ctx.stroke();
+        }
+    }
+    // --- Setup a New Round ---
+    function setupNewRound() {
+        waitingForNext = false;
+        pizzaChoicesContainer.innerHTML = ''; // Clear previous pizzas
+        feedbackArea.textContent = "Click the pizza that matches the order!";
+        feedbackArea.className = ''; // Reset feedback style
+        // 1. Choose a target fraction
+        currentOrder = possibleFractions[getRandomInt(possibleFractions.length)];
+        numeratorDisplay.textContent = currentOrder.num;
+        denominatorDisplay.textContent = currentOrder.den;
+        // 2. Create options array, starting with the correct one
+        const options = [{ num: currentOrder.num, den: currentOrder.den }];
+        // 3. Generate incorrect options
+        while (options.length < OPTIONS_COUNT) {
+            const randomFraction = possibleFractions[getRandomInt(possibleFractions.length)];
+            // Make sure it's not the same as the target OR already in the options
+            const isDuplicate = options.some(opt => opt.num === randomFraction.num && opt.den === randomFraction.den);
+            if (!isDuplicate) {
+                options.push(randomFraction);
+            }
+            // Basic protection against infinite loop if somehow options are very limited
+            if(options.length < OPTIONS_COUNT && possibleFractions.length <= options.length){
+                 console.warn("Not enough unique fractions to generate distractors. Reusing.");
+                 // Add a non-duplicate if possible, otherwise just add another random one
+                 let foundNew = false;
+                 for(let frac of possibleFractions){
+                     if(!options.some(opt => opt.num === frac.num && opt.den === frac.den)){
+                         options.push(frac);
+                         foundNew = true;
+                         break;
+                     }
+                 }
+                 if(!foundNew && options.length < OPTIONS_COUNT) options.push(randomFraction); // Add duplicate if absolutely needed
+            }
+        }
+        // 4. Shuffle options
+        shuffleArray(options);
+        // 5. Create and display pizza elements
+        options.forEach(fraction => {
+            const optionDiv = document.createElement('div');
+            optionDiv.classList.add('pizza-option');
+            optionDiv.dataset.num = fraction.num;
+            optionDiv.dataset.den = fraction.den;
+            const canvas = document.createElement('canvas');
+            canvas.classList.add('pizza-canvas');
+            canvas.width = PIZZA_SIZE;
+            canvas.height = PIZZA_SIZE;
+            optionDiv.appendChild(canvas);
+            pizzaChoicesContainer.appendChild(optionDiv);
+            drawPizza(canvas, fraction.num, fraction.den);
+            optionDiv.addEventListener('click', handleChoiceClick);
+        });
+        console.log("New round setup. Target:", currentOrder);
+    }
+    // --- Handle Pizza Choice Click ---
+    function handleChoiceClick(event) {
+        if (waitingForNext) return; // Don't process clicks during delay
+        const clickedPizza = event.currentTarget; // The div element
+        const clickedNum = parseInt(clickedPizza.dataset.num);
+        const clickedDen = parseInt(clickedPizza.dataset.den);
+        waitingForNext = true; // Prevent further clicks until next round
+        // Remove event listeners from all options to prevent multiple clicks
+        document.querySelectorAll('.pizza-option').forEach(opt => {
+             // Clone and replace to remove listeners easily, or store listeners and remove them
+             const clone = opt.cloneNode(true);
+             opt.parentNode.replaceChild(clone, opt);
+        });
+        // Check if correct
+        if (clickedNum === currentOrder.num && clickedDen === currentOrder.den) {
+            // Correct!
+            score++;
+            scoreDisplay.textContent = score;
+            feedbackArea.textContent = `Yummy! That's ${currentOrder.num}/${currentOrder.den}! 🎉`;
+            feedbackArea.className = 'correct-feedback';
+            clickedPizza.classList.add('correct-choice'); // Add animation class to the actual clicked element
+            // Find the *new* clone in the DOM to add the class (since we replaced it)
+             const newClickedElement = pizzaChoicesContainer.querySelector(`.pizza-option[data-num="${clickedNum}"][data-den="${clickedDen}"]`);
+             if (newClickedElement) newClickedElement.classList.add('correct-choice');
+        } else {
+            // Incorrect!
+            feedbackArea.textContent = `Oops! That shows ${clickedNum}/${clickedDen}. Try the next one! 🤔`;
+            feedbackArea.className = 'incorrect-feedback';
+            // Highlight the incorrect choice and the correct one (optional)
+            const newClickedElement = pizzaChoicesContainer.querySelector(`.pizza-option[data-num="${clickedNum}"][data-den="${clickedDen}"]`);
+             if (newClickedElement) newClickedElement.classList.add('incorrect-choice');
+             // Highlight the correct answer after a small delay
+             setTimeout(() => {
+                 const correctElement = pizzaChoicesContainer.querySelector(`.pizza-option[data-num="${currentOrder.num}"][data-den="${currentOrder.den}"]`);
+                 if (correctElement) correctElement.classList.add('correct-choice'); // Use correct style to show answer
+             }, 300);
+        }
+        // Load next round after a delay
+        setTimeout(setupNewRound, 2000); // Wait 2 seconds before next round
+    }
+    // --- Initial Game Start ---
+    setupNewRound();
+}); // End DOMContentLoaded

style.css CHANGED Viewed

@@ -1,28 +1,153 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

 body {
+    font-family: 'Lilita One', cursive;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Align to top */
+    background-color: #f0e4d7; /* Light beige like dough */
+    color: #6b4f4f; /* Brownish text */
+    padding: 20px;
+    margin: 0;
+    min-height: 100vh;
+}
+#game-wrapper {
+    background-color: #fffaf0; /* Floral white */
+    padding: 20px 30px;
+    border-radius: 20px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    border: 5px solid #a0522d; /* Sienna border */
+    max-width: 650px;
+    width: 90%;
+    text-align: center;
 }
 h1 {
+    color: #d9534f; /* Tomato red */
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+    margin-bottom: 15px;
+}
+#score-area {
+    font-size: 1.3em;
+    font-weight: bold;
+    color: #4682b4; /* Steel blue */
+    background-color: #e6f7ff;
+    padding: 5px 15px;
+    border-radius: 10px;
+    display: inline-block; /* Fit content */
+    margin-bottom: 20px;
+    border: 2px solid #add8e6; /* Light blue border */
+}
+#order-area {
+    background-color: #fff8dc; /* Cornsilk */
+    border: 3px dashed #a0522d; /* Sienna dashed border */
+    padding: 15px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+}
+#order-area h2 {
+    margin-top: 0;
+    margin-bottom: 5px;
+    color: #8b4513; /* Saddle brown */
+}
+/* Fraction Display Styling */
+.fraction-display {
+    display: inline-flex; /* Allows vertical alignment */
+    flex-direction: column;
+    align-items: center;
+    font-size: 2.5em; /* Large fraction */
+    font-weight: bold;
+    color: #c62828; /* Dark red */
+    margin-top: 5px;
+}
+.fraction-display .numerator {
+    line-height: 1;
+}
+.fraction-display .denominator {
+    line-height: 1;
+    border-top: 3px solid #c62828; /* Fraction line */
+    padding-top: 3px;
+    margin-top: 3px;
+    align-self: stretch; /* Make line stretch */
+}
+#feedback-area {
+    margin-bottom: 25px;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #00695c; /* Dark teal */
+    min-height: 30px; /* Prevent layout jumps */
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #e0f2f1; /* Very light teal */
+}
+#feedback-area.correct-feedback {
+    color: #2e7d32; /* Dark Green */
+    background-color: #c8e6c9; /* Light Green */
+}
+#feedback-area.incorrect-feedback {
+    color: #c62828; /* Dark Red */
+    background-color: #ffcdd2; /* Light Red */
+}
+#pizza-options-area h2 {
+    color: #8b4513;
+    margin-bottom: 15px;
+}
+#pizza-choices {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 20px; /* Space between pizza options */
+}
+.pizza-option {
+    cursor: pointer;
+    border: 3px solid transparent; /* Reserve space for border */
+    border-radius: 50%; /* Make border circular */
+    transition: border-color 0.2s ease, transform 0.2s ease;
+    padding: 3px; /* Padding around canvas */
+    background-color: #fff; /* White background behind canvas */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+.pizza-option:hover {
+    border-color: #f5a623; /* Orange hover border */
+    transform: scale(1.05);
+}
+.pizza-canvas {
+    display: block; /* Prevent extra space below canvas */
+    border-radius: 50%; /* Clip canvas drawing to circle */
 }
+/* Feedback Animations */
+.pizza-option.correct-choice {
+    border-color: #4caf50 !important; /* Green border */
+    animation: pulse 0.6s;
 }
+.pizza-option.incorrect-choice {
+    border-color: #f44336 !important; /* Red border */
+    animation: shake 0.5s;
 }
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-6px); }
+  75% { transform: translateX(6px); }
 }
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}