Spaces:

ParulPandey
/

Multiplication_Farm_Fun

Running

App Files Files Community

Pp commited on Mar 27

Commit

dbdfa02

verified ·

1 Parent(s): 1029d6c

Upload 3 files

Browse files

Files changed (3) hide show

index.html +51 -19
script.js +213 -0
style.css +139 -17

index.html CHANGED Viewed

@@ -1,19 +1,51 @@
-<!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>Multiplication Farm! 🧑‍🌾</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>Multiplication Farm!</h1>
+        <div id="score-area">
+            Score: <span id="score">0</span> / <span id="total-questions">10</span>
+        </div>
+        <div id="problem-area">
+            <h2>Time to Plant/Gather!</h2>
+            <p>Show me this multiplication:</p>
+            <div id="multiplication-problem">
+                <span id="num1">?</span> x <span id="num2">?</span> = ?
+            </div>
+        </div>
+        <div id="feedback-area">
+            Click the farm plot that matches the problem!
+        </div>
+        <div id="farm-options-area">
+            <h2>Choose the Correct Farm Plot:</h2>
+            <div id="field-choices">
+                <!-- Farm plot options will be dynamically added here by JS -->
+                <!-- Example of one plot option structure (repeated by JS) -->
+                <!--
+                <div class="field-option" data-rows="3" data-cols="4">
+                    <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
+                    <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
+                    <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div> <div class="item">🍎</div>
+                </div>
+                 -->
+            </div>
+        </div>
+    </div> <!-- End of game-wrapper -->
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,213 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const scoreDisplay = document.getElementById('score');
+    const totalQuestionsDisplay = document.getElementById('total-questions');
+    const num1Display = document.getElementById('num1');
+    const num2Display = document.getElementById('num2');
+    const feedbackArea = document.getElementById('feedback-area');
+    const fieldChoicesContainer = document.getElementById('field-choices');
+    const OPTIONS_COUNT = 3; // Number of plot choices (1 correct, 2 incorrect)
+    const MAX_FACTOR = 6; // Maximum number for factors (e.g., up to 6x6)
+    const TOTAL_ROUNDS = 10; // Number of questions in a game
+    // --- Items for the Farm ---
+    const farmItems = ['🍎', '🥕', '🐔', '🐑', '🌻', '🌽'];
+    // --- Generate Multiplication Problems ---
+    let possibleProblems = [];
+    function generateProblems() {
+        possibleProblems = [];
+        for (let i = 1; i <= MAX_FACTOR; i++) {
+            // Start j from 1 to include squares and both orders (e.g., 2x3 and 3x2 are distinct visual arrays)
+            for (let j = 1; j <= MAX_FACTOR; j++) {
+                possibleProblems.push({ num1: i, num2: j, answer: i * j });
+            }
+        }
+        // Remove duplicates might be needed if we consider A*B same as B*A later
+    }
+    // --- Game State ---
+    let score = 0;
+    let currentProblem = null;
+    let currentRound = 0;
+    let waitingForNext = false;
+    // --- 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]];
+        }
+    }
+    // --- Setup a New Round ---
+    function setupNewRound() {
+        if (currentRound >= TOTAL_ROUNDS) {
+            endGame();
+            return;
+        }
+        waitingForNext = false;
+        fieldChoicesContainer.innerHTML = '';
+        feedbackArea.textContent = "Click the farm plot that matches the problem!";
+        feedbackArea.className = '';
+        currentRound++;
+        // 1. Choose a target problem
+        if (!possibleProblems || possibleProblems.length === 0) generateProblems(); // Regenerate if empty
+        const problemIndex = getRandomInt(possibleProblems.length);
+        currentProblem = possibleProblems.splice(problemIndex, 1)[0]; // Pick and remove
+        num1Display.textContent = currentProblem.num1;
+        num2Display.textContent = currentProblem.num2;
+        // 2. Create options array (as {rows, cols})
+        // Allow commutative property visually (3x4 can be 3 rows of 4 OR 4 rows of 3)
+        const correctOption = { rows: currentProblem.num1, cols: currentProblem.num2 };
+        const options = [correctOption];
+        // 3. Generate incorrect options
+        while (options.length < OPTIONS_COUNT) {
+            let wrongRows, wrongCols;
+            let isDuplicate = true;
+            let attempts = 0; // Prevent infinite loop
+            while(isDuplicate && attempts < 20) {
+                // Generate wrong dimensions, make sure at least one is different
+                const changeRows = Math.random() > 0.5;
+                 wrongRows = changeRows ? getRandomInt(MAX_FACTOR) + 1 : correctOption.rows;
+                 wrongCols = !changeRows ? getRandomInt(MAX_FACTOR) + 1 : correctOption.cols;
+                 // Ensure it's actually wrong AND not zero product AND different from target
+                 if((wrongRows !== correctOption.rows || wrongCols !== correctOption.cols) &&
+                    (wrongRows * wrongCols > 0) ) {
+                     // Check if this combination (or its commutative pair) is already in options
+                     isDuplicate = options.some(opt =>
+                         (opt.rows === wrongRows && opt.cols === wrongCols) ||
+                         (opt.rows === wrongCols && opt.cols === wrongRows)
+                     );
+                 } else {
+                      isDuplicate = true; // Force retry if generated same as correct or zero product
+                 }
+                 attempts++;
+            }
+             // If stuck finding unique, just create a simple wrong one
+             if (attempts >= 20) {
+                 wrongRows = correctOption.rows === 1 ? 2 : correctOption.rows -1;
+                 wrongCols = correctOption.cols;
+                 isDuplicate = options.some(opt =>
+                     (opt.rows === wrongRows && opt.cols === wrongCols) ||
+                     (opt.rows === wrongCols && opt.cols === wrongRows)
+                 ); // Final check
+             }
+            if (!isDuplicate) {
+                options.push({ rows: wrongRows, cols: wrongCols });
+            }
+        }
+        // 4. Shuffle options
+        shuffleArray(options);
+        // 5. Create and display field elements
+        options.forEach(plot => {
+            const fieldDiv = document.createElement('div');
+            fieldDiv.classList.add('field-option');
+            fieldDiv.dataset.rows = plot.rows;
+            fieldDiv.dataset.cols = plot.cols;
+            // Style the grid layout for items *inside* this field
+            fieldDiv.style.gridTemplateColumns = `repeat(${plot.cols}, auto)`; // auto size columns
+            fieldDiv.style.gridTemplateRows = `repeat(${plot.rows}, auto)`; // auto size rows
+             // Set a max-width to prevent huge single rows/columns
+             fieldDiv.style.maxWidth = `${plot.cols * 35}px`; // Approx item size + gap
+            // Add items (emoji)
+            const itemEmoji = farmItems[getRandomInt(farmItems.length)];
+            for (let i = 0; i < plot.rows * plot.cols; i++) {
+                const itemSpan = document.createElement('span');
+                itemSpan.classList.add('item');
+                itemSpan.textContent = itemEmoji;
+                fieldDiv.appendChild(itemSpan);
+            }
+            fieldDiv.addEventListener('click', handleChoiceClick);
+            fieldChoicesContainer.appendChild(fieldDiv);
+        });
+        console.log("New round setup. Target:", currentProblem);
+    }
+    // --- Handle Field Choice Click ---
+    function handleChoiceClick(event) {
+        if (waitingForNext) return;
+        const clickedField = event.currentTarget;
+        const clickedRows = parseInt(clickedField.dataset.rows);
+        const clickedCols = parseInt(clickedField.dataset.cols);
+        waitingForNext = true;
+        // Remove listeners
+        document.querySelectorAll('.field-option').forEach(opt => {
+             const clone = opt.cloneNode(true);
+             opt.parentNode.replaceChild(clone, opt);
+        });
+        // Check if correct (allow commutative: A x B or B x A)
+        const isCorrect = (clickedRows === currentProblem.num1 && clickedCols === currentProblem.num2) ||
+                          (clickedRows === currentProblem.num2 && clickedCols === currentProblem.num1);
+        if (isCorrect) {
+            score++;
+            scoreDisplay.textContent = score;
+            feedbackArea.textContent = `Yes! ${currentProblem.num1} x ${currentProblem.num2} = ${currentProblem.answer}! 🎉`;
+            feedbackArea.className = 'correct-feedback';
+            const newClickedElement = fieldChoicesContainer.querySelector(`.field-option[data-rows="${clickedRows}"][data-cols="${clickedCols}"]`);
+            if (newClickedElement) newClickedElement.classList.add('correct-choice');
+        } else {
+            feedbackArea.textContent = `Oops! That shows ${clickedRows} x ${clickedCols}. The answer was ${currentProblem.answer}. 🤔`;
+            feedbackArea.className = 'incorrect-feedback';
+             const newClickedElement = fieldChoicesContainer.querySelector(`.field-option[data-rows="${clickedRows}"][data-cols="${clickedCols}"]`);
+             if (newClickedElement) newClickedElement.classList.add('incorrect-choice');
+             // Highlight the correct answer(s)
+             setTimeout(() => {
+                 const correctElement1 = fieldChoicesContainer.querySelector(`.field-option[data-rows="${currentProblem.num1}"][data-cols="${currentProblem.num2}"]`);
+                 if (correctElement1) correctElement1.classList.add('correct-choice');
+                 // Also highlight commutative pair if it exists and is different
+                 const correctElement2 = fieldChoicesContainer.querySelector(`.field-option[data-rows="${currentProblem.num2}"][data-cols="${currentProblem.num1}"]`);
+                 if (correctElement2 && correctElement1 !== correctElement2) correctElement2.classList.add('correct-choice');
+             }, 300);
+        }
+        // Load next round
+        setTimeout(setupNewRound, 2500); // Longer delay to see feedback/answer
+    }
+     // --- End Game ---
+     function endGame() {
+        feedbackArea.textContent = `Game Over! Your final score: ${score} / ${TOTAL_ROUNDS}! Great work! 🥳`;
+        feedbackArea.className = 'correct-feedback'; // Use correct style for positive end
+        fieldChoicesContainer.innerHTML = '<p style="font-size:1.2em; color: #795548;">Refresh the page to play again!</p>'; // Clear options
+        // Optionally disable further interaction if needed
+    }
+    // --- Initial Game Start ---
+    totalQuestionsDisplay.textContent = TOTAL_ROUNDS; // Set total rounds display
+    generateProblems(); // Create the initial list of problems
+    setupNewRound();
+}); // End DOMContentLoaded

style.css CHANGED Viewed

@@ -1,28 +1,150 @@
 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;
+    background-color: #c8e6c9; /* Light green background */
+    color: #388e3c; /* Darker green */
+    padding: 20px;
+    margin: 0;
+    min-height: 100vh;
+}
+#game-wrapper {
+    background-color: #fffde7; /* Light yellow */
+    padding: 20px 30px;
+    border-radius: 20px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    border: 5px solid #795548; /* Brown border */
+    max-width: 700px;
+    width: 95%;
+    text-align: center;
 }
 h1 {
+    color: #fb8c00; /* Orange */
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+    margin-bottom: 15px;
+}
+#score-area {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #1e88e5; /* Blue */
+    background-color: #e3f2fd; /* Light blue */
+    padding: 5px 15px;
+    border-radius: 10px;
+    display: inline-block;
+    margin-bottom: 20px;
+    border: 2px solid #90caf9; /* Lighter blue border */
+}
+#problem-area {
+    background-color: #ffecb3; /* Light amber */
+    border: 3px dashed #ff8f00; /* Amber dashed border */
+    padding: 15px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+}
+#problem-area h2 {
+    margin-top: 0;
+    margin-bottom: 5px;
+    color: #795548; /* Brown */
+}
+#problem-area p {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+}
+#multiplication-problem {
+    font-size: 2.8em; /* Large problem display */
+    font-weight: bold;
+    color: #e53935; /* Red */
+}
+#feedback-area {
+    margin-bottom: 25px;
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #5d4037; /* Brown */
+    min-height: 30px;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #efebe9; /* Light brown/grey */
+}
+#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 */
+}
+#farm-options-area h2 {
+    color: #795548; /* Brown */
+    margin-bottom: 15px;
+}
+#field-choices {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start; /* Align tops of potentially diff height grids */
+    flex-wrap: wrap;
+    gap: 25px; /* Space between plot options */
+}
+.field-option {
+    cursor: pointer;
+    border: 4px solid #a1887f; /* Brownish border */
+    background-color: #d7ccc8; /* Light background for field */
+    padding: 10px;
+    border-radius: 8px;
+    transition: border-color 0.2s ease, transform 0.2s ease;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    /* CSS Grid for items inside */
+    display: grid;
+    gap: 4px; /* Space between items */
+    /* grid-template-columns/rows set by JS */
+}
+.field-option:hover {
+    border-color: #fb8c00; /* Orange hover border */
+    transform: translateY(-3px);
+}
+.field-option .item {
+    font-size: 1.8em; /* Size of the emoji/item */
+    line-height: 1; /* Prevent extra vertical space */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
+/* Feedback Animations */
+.field-option.correct-choice {
+    border-color: #4caf50 !important; /* Green border */
+    animation: pulse 0.6s;
 }
+.field-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.05); }
+  100% { transform: scale(1); }
+}