to where game

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+img-gen/
+

App.css

@@ -0,0 +1,148 @@
+.colorful-semantics {
+  max-width: 1100px;
+  margin: 0 0 0 auto;
+  padding: 2rem;
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.media-container {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  height: 55vh;
+  max-height: 500px;
+  margin: 0 auto 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
+  background-color: #f0f0f0;
+}
+
+.game-media {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.semantic-boxes {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: nowrap;
+  margin-bottom: 2rem;
+}
+
+.semantic-box {
+  /* Let width grow/shrink based on content so long phrases stay on one line */
+  width: auto;
+  min-width: 140px;
+  padding: 1.4rem 1.6rem;
+  border-radius: 10px;
+  border: 3px solid #000;
+  font-size: 1.6rem;
+  font-weight: bold;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 90px;
+  text-align: center;
+  white-space: nowrap; /* prevent text from wrapping to a new line */
+}
+
+.options-container {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+.option {
+  background-color: #d3d3d3;
+  border: 3px solid #000;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  font-size: 1.3rem;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+  min-width: 140px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.option:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.flying-option {
+  padding: 0.8rem 1.2rem;
+  border: 2px solid #000;
+  border-radius: 6px;
+  font-size: 1.1rem;
+  pointer-events: none;
+  z-index: 100;
+  min-width: 120px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.feedback-message {
+  color: #ff3c3c;
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-top: 1.5rem;
+  min-height: 28px;
+}
+
+.big-question {
+  position: fixed;
+  right: 220px;
+  top: 30%;
+  font-size: 6rem;
+  font-weight: bold;
+  color: #FF69B4;
+  text-align: left;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+  z-index: 10;
+}
+
+@media (max-width: 768px) {
+  .semantic-boxes {
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .semantic-box {
+    width: 80%;
+  }
+  
+  .options-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .option {
+    width: 80%;
+  }
+}

App.tsx

@@ -0,0 +1,299 @@
+import { useState, useEffect, useRef } from 'react'
+import './App.css'
+
+// Question interface
+interface Question {
+  file: string;
+  who: string;
+  doing: string;
+  what: string;
+  to_where: string;
+  distractors: string[];
+}
+
+// State for one round
+interface GameState {
+  frames: string[];
+  frameIndex: number;
+  who: string;
+  doing: string;
+  what: string;
+  answer: string;
+  choices: string[];
+}
+
+function App() {
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [gameState, setGameState] = useState<GameState | null>(null);
+  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+  const [feedbackMsg, setFeedbackMsg] = useState('');
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [animationElement, setAnimationElement] = useState<{ content: string, position: { x: number, y: number } } | null>(null);
+  const [isFilled, setIsFilled] = useState(false);
+  
+  const wrongMessages = ["Wrong, try again", "Not correct, try again", "Error, come again"];
+  const animationRef = useRef<HTMLDivElement>(null);
+  const destinationRef = useRef<HTMLDivElement>(null);
+  
+  // Colors
+  const ORANGE = "#FF8C00";
+  const YELLOW = "#F0E61E";
+  const GREEN = "#00B900";
+  const _UNUSED_PINK_ORIGINAL = "#FF69B4"; // Keeping original for context, effectively replaced
+  const _UNUSED_BLUE_ORIGINAL = "#007BFF"; // Keeping original for context, effectively replaced
+  const LIGHT_BLUE = "#87CEEB"; // New light blue color
+  const PINK = LIGHT_BLUE;      // PINK is now LIGHT_BLUE for animation
+  const BLUE = LIGHT_BLUE;      // BLUE is now LIGHT_BLUE for the target box
+  
+  // Load questions on mount
+  useEffect(() => {
+    const loadQuestions = async () => {
+      try {
+        const response = await fetch('/to-where.json');
+        if (!response.ok) {
+          throw new Error('Failed to load questions');
+        }
+        const data: Question[] = await response.json();
+        // Shuffle questions
+        const shuffled = [...data].sort(() => Math.random() - 0.5);
+        setQuestions(shuffled);
+      } catch (error) {
+        console.error('Error loading questions:', error);
+      }
+    };
+    
+    loadQuestions();
+    
+    // Set up window resize handler
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  
+  // Prepare game state when questions load or change
+  useEffect(() => {
+    if (questions.length > 0) {
+      prepareRound(questions[currentQuestionIndex]);
+    }
+  }, [questions, currentQuestionIndex]);
+  
+  // Handle video/image frame updates
+  useEffect(() => {
+    if (!gameState || !gameState.frames.length) return;
+    
+    const frameInterval = setInterval(() => {
+      if (!isAnimating && !isFilled) {
+        setGameState(prev => {
+          if (!prev) return prev;
+          const nextIndex = (prev.frameIndex + 1) % prev.frames.length;
+          return { ...prev, frameIndex: nextIndex };
+        });
+      }
+    }, 100); // Adjust frame rate as needed
+    
+    return () => clearInterval(frameInterval);
+  }, [gameState, isAnimating, isFilled]);
+  
+  // Process animation completion and next question timing
+  useEffect(() => {
+    if (isFilled) {
+      const timer = setTimeout(() => {
+        // Move to next question
+        setCurrentQuestionIndex(prev => (prev + 1) % questions.length);
+        setIsFilled(false);
+        setFeedbackMsg('');
+        setAnimationElement(null);
+      }, 1000);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [isFilled, questions.length]);
+  
+  // Animation effect
+  useEffect(() => {
+    if (isAnimating && animationElement && animationRef.current && destinationRef.current) {
+      const destRect = destinationRef.current.getBoundingClientRect();
+      const targetPosition = {
+        x: destRect.left + destRect.width / 2,
+        y: destRect.top + destRect.height / 2
+      };
+      
+      const anim = animationRef.current;
+      anim.style.transition = 'transform 500ms linear';
+      anim.style.transform = `translate(${targetPosition.x - animationElement.position.x}px, ${targetPosition.y - animationElement.position.y}px)`;
+      
+      const handleAnimationEnd = () => {
+        setIsAnimating(false);
+        setIsFilled(true);
+      };
+      
+      anim.addEventListener('transitionend', handleAnimationEnd);
+      return () => anim.removeEventListener('transitionend', handleAnimationEnd);
+    }
+  }, [isAnimating, animationElement]);
+  
+  // Prepare a new game round
+  const prepareRound = (question: Question) => {
+    // Shuffle the distractors first, then take two
+    const shuffledDistractors = [...question.distractors].sort(() => Math.random() - 0.5);
+    const selectedDistractors = shuffledDistractors.slice(0, 2);
+    const choices = [question.to_where, ...selectedDistractors];
+    // Shuffle the final 3 choices
+    const shuffledChoices = [...choices].sort(() => Math.random() - 0.5);
+    
+    // Determine if media is image or video
+    const isVideo = question.file.endsWith('.mp4');
+    const frames = isVideo 
+      ? [question.file] // For simplicity, we'll just use the path for videos
+      : [question.file]; // Same for images
+    
+    setGameState({
+      frames,
+      frameIndex: 0,
+      who: question.who,
+      doing: question.doing,
+      what: question.what,
+      answer: question.to_where,
+      choices: shuffledChoices
+    });
+    
+    setFeedbackMsg('');
+    setIsAnimating(false);
+    setAnimationElement(null);
+    setIsFilled(false);
+  };
+  
+  // Handle option selection
+  const handleOptionClick = (option: string, event: React.MouseEvent<HTMLDivElement>) => {
+    if (isAnimating || isFilled || !gameState) return;
+    
+    const rect = event.currentTarget.getBoundingClientRect();
+    const position = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2
+    };
+    
+    if (option === gameState.answer) {
+      // Correct answer
+      setAnimationElement({
+        content: option,
+        position
+      });
+      setIsAnimating(true);
+      setFeedbackMsg('');
+    } else {
+      // Wrong answer
+      setFeedbackMsg(wrongMessages[Math.floor(Math.random() * wrongMessages.length)]);
+    }
+  };
+  
+  // Render current media (image or video)
+  const renderMedia = () => {
+    if (!gameState || !gameState.frames.length) return null;
+    
+    const currentFrame = gameState.frames[gameState.frameIndex];
+    const isVideo = currentFrame.endsWith('.mp4');
+    
+    if (isVideo) {
+      return (
+        <video
+          className="game-media"
+          src={currentFrame}
+          autoPlay
+          loop
+          muted
+        />
+      );
+    } else {
+      return (
+        <img
+          className="game-media"
+          src={currentFrame}
+          alt="Game visual"
+        />
+      );
+    }
+  };
+  
+  if (!gameState) {
+    return <div className="loading">Loading questions...</div>;
+  }
+  
+  return (
+    <div className="colorful-semantics">
+      <div className="big-question" style={{ color: LIGHT_BLUE }}>To where? →</div>
+      <div className="media-container">
+        {renderMedia()}
+      </div>
+      
+      <div className="semantic-boxes">
+        {/* Who - Orange */}
+        <div className="semantic-box" style={{ backgroundColor: ORANGE }}>
+          {gameState.who}
+        </div>
+        
+        {/* Doing - Yellow */}
+        <div className="semantic-box" style={{ backgroundColor: YELLOW }}>
+          {gameState.doing}
+        </div>
+        
+        {/* What - Green */}
+        {gameState.what && (
+          <div className="semantic-box" style={{ backgroundColor: GREEN }}>
+            {gameState.what}
+          </div>
+        )}
+        
+        {/* To Where - Blue (now Light Blue) */}
+        <div 
+          className="semantic-box" 
+          style={{ backgroundColor: LIGHT_BLUE }}
+          ref={destinationRef}
+        >
+          {isFilled ? gameState.answer : "to where? →"}
+        </div>
+      </div>
+      
+      <div className="options-container">
+        {!isFilled && gameState.choices.map((option, index) => (
+          <div
+            key={index}
+            className="option"
+            onClick={(e) => handleOptionClick(option, e)}
+          >
+            {option}
+          </div>
+        ))}
+      </div>
+      
+      {feedbackMsg && (
+        <div className="feedback-message">{feedbackMsg}</div>
+      )}
+      
+      {isAnimating && animationElement && (
+        <div 
+          className="flying-option"
+          ref={animationRef}
+          style={{ 
+            backgroundColor: LIGHT_BLUE,
+            position: 'fixed',
+            left: animationElement.position.x,
+            top: animationElement.position.y,
+            transform: 'translate(-50%, -50%)'
+          }}
+        >
+          {animationElement.content}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default App;

Dockerfile

@@ -1,16 +1,27 @@
-# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
-# you will also find guides on how best to write your Dockerfile
+# Build stage
+FROM node:20-alpine as build
 
-FROM python:3.9
+WORKDIR /app
+
+# Copy package files and install dependencies
+COPY package.json package-lock.json ./
+RUN npm ci
 
-RUN useradd -m -u 1000 user
-USER user
-ENV PATH="/home/user/.local/bin:$PATH"
+# Copy all files and build the project
+COPY . .
+RUN npm run build
+
+# Serve stage
+FROM node:20-alpine as serve
 
 WORKDIR /app
 
-COPY --chown=user ./requirements.txt requirements.txt
-RUN pip install --no-cache-dir --upgrade -r requirements.txt
+# Install serve globally
+RUN npm install -g serve
+
+# Copy built files from previous stage
+COPY --from=build /app/dist ./dist
 
-COPY --chown=user . /app
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+# Expose port and start server
+EXPOSE 3000
+CMD ["serve", "-s", "dist", "-l", "3000"] 

README.md

@@ -6,5 +6,182 @@ colorTo: pink
 sdk: docker
 pinned: false
 ---
+# Colorful Semantics - To where? Game
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+A learning game that teaches sentence structure through colorful semantic components.
+
+## Features
+
+- Interactive game for learning "to whom" sentence components
+- Visual and animated feedback for correct answers
+- Support for both images and videos
+- Customizable questions and answers
+
+## How to Play
+
+1. Look at the image/video and read the colored sentence parts
+2. Choose the correct "to whom" option from the choices below
+3. The game will animate the correct answer to the pink box
+4. Continue to the next question automatically
+
+## Adding New Questions
+
+1. Add your image or video to the `public/media` folder
+2. Edit the `public/questions.json` file to add a new question:
+
+```json
+{
+  "file": "media/your_image.jpg",
+  "who": "The boy",
+  "doing": "is giving",
+  "what": "a book",
+  "to_whom": "to the teacher",
+  "distractors": ["to Mom", "to the dog", "to Grandma"]
+}
+```
+
+3. Each question needs the following fields:
+   - `file`: Path to the media file (jpg, png, or mp4)
+   - `who`: The subject of the sentence
+   - `doing`: The verb phrase
+   - `what`: The object
+   - `to_whom`: The correct answer (recipient)
+   - `distractors`: Array of incorrect options
+
+4. Restart the application to see your new questions
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+
+## Making sentences
+
+The words used for subject and to whome:
+## subjects and to whom
+Blippi
+Zaki
+Harun
+Rashid
+Kazwa
+Bilal
+honeybee
+dinasaour
+boy
+girl
+man
+woman
+lady
+children
+kids
+cat
+dog
+mouse 
+tiger
+witch
+elephent
+Mustafo
+Muhammad
+Hidoyat
+Sardor
+Ulugbek
+Policeman
+Nurse
+Pilot
+Florist
+Builder
+Teacher
+Doctor
+Dentist
+Binman
+Postman
+Firefighter
+Lollypop lady
+Gardner
+Mechanic
+Painter
+Lifeguard
+librarian
+bus driver
+cook / chef
+barber
+Farmer
+Astronaut
+Paramedic
+
+
+### verbs
+read
+drink
+case
+sit
+buy
+jump
+hold
+cry
+ride
+wash
+fly
+eat
+dry
+play
+climb
+scratch
+cut
+brush
+bounce
+argue
+work
+fight
+practice
+throw
+take
+bring
+take
+wipe
+drink
+
+
+## what
+flower
+icecream
+pen
+pencil
+socks
+underwear
+coat
+wellies
+shoes
+spoon
+fork
+food
+bread
+butter
+salt
+chilly
+bathroom
+towel
+coffee
+tea
+milk
+almond
+monkey nuts
+upstairs
+downstairs
+
+
+
+
+
+## License
+
+MIT

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Colorful Semantics - To Whom?</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "colorful-semantics-game",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "An educational game for teaching sentence structure using colorful semantics",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.3.1"
+  }
+}

public/admin-guide.md

@@ -0,0 +1,95 @@
+# Colorful Semantics - "To Whom?" Game - Administrator Guide
+
+This guide explains how to customize and manage the Colorful Semantics "To Whom?" educational game.
+
+## Table of Contents
+1. [Game Overview](#game-overview)
+2. [Adding New Questions](#adding-new-questions)
+3. [Media Requirements](#media-requirements)
+4. [Question JSON Structure](#question-json-structure)
+5. [Troubleshooting](#troubleshooting)
+
+## Game Overview
+
+The "To Whom?" game teaches sentence structure using four colorful semantic components:
+- **Orange**: Who (the subject)
+- **Yellow**: Doing (the verb phrase)
+- **Green**: What (the object)
+- **Pink**: To Whom (the recipient)
+
+Players are presented with an image or video and must select the correct recipient ("to whom") from multiple choices.
+
+## Adding New Questions
+
+### Step 1: Prepare Media File
+1. Create or select an image (JPG/PNG) or short video (MP4) that clearly shows someone giving something to someone else
+2. Name your file without spaces (e.g., `teacher_book.jpg` or `dad_gift.mp4`)
+3. Place the file in the `/public/media/` directory
+
+### Step 2: Add Question to JSON
+1. Open the file `/public/questions.json`
+2. Add a new JSON object to the array, following this structure:
+
+```json
+{
+  "file": "/media/your_file_name.jpg",
+  "who": "The person giving",
+  "doing": "is passing/giving/handing",
+  "what": "the object being given",
+  "to_whom": "to the recipient",
+  "distractors": ["wrong option 1", "wrong option 2", "wrong option 3"]
+}
+```
+
+3. Save the file
+4. Refresh the application to see your new question appear in the rotation
+
+## Media Requirements
+
+### Images
+- **Formats**: JPG, PNG
+- **Recommended size**: 800-1200px wide
+- **File size**: Keep under 500KB for optimal performance
+
+### Videos
+- **Format**: MP4
+- **Duration**: Keep under 5 seconds to minimize load time
+- **Resolution**: 720p or lower recommended
+- **File size**: Keep under 2MB
+
+## Question JSON Structure
+
+Each question in the `questions.json` file must include these fields:
+
+| Field | Description | Example |
+|-------|-------------|---------|
+| `file` | Path to media file, starting with "/media/" | "/media/teacher_book.jpg" |
+| `who` | The subject (person giving) | "The teacher" |
+| `doing` | The verb phrase | "is giving" |
+| `what` | The object being given | "a book" |
+| `to_whom` | The correct recipient | "to the student" |
+| `distractors` | Array of incorrect options | ["to Mom", "to the principal"] |
+
+Notes:
+- You can include 1-5 distractors
+- The "to_whom" value should start with "to " 
+- Keep text short so it fits in the colored boxes
+
+## Troubleshooting
+
+### Media Not Displaying
+- Ensure the path in the JSON matches the actual file location
+- Check that the file has no spaces in its name
+- Verify the file format is supported (JPG, PNG, or MP4)
+
+### Game Not Loading New Questions
+- Check JSON file for syntax errors (missing commas, brackets, etc.)
+- Ensure the JSON file is properly formatted with square brackets `[]` enclosing all questions
+- Refresh the page completely (Ctrl+F5 or Cmd+Shift+R)
+
+### Video Playback Issues
+- Make sure the video is in MP4 format
+- Try reducing video file size or resolution
+- Check if the video codec is widely supported (H.264 recommended)
+
+For additional support, please contact the development team.