Use API

README.md

@@ -58,7 +58,7 @@ fizika/
 
 3. **Access the applications:**
    - **Student Quiz**: http://localhost (or your domain)
-   - **Admin Panel**: http://localhost:3001/admin.html
+   - **Admin Panel**: http://localhost:3001/
 
 ### Option 2: Local Development
 
@@ -87,15 +87,20 @@ NODE_ENV=production
 
 # Frontend integration
 FRONTEND_URL=*
+
+# File paths (relative to backend directory)
+DATA_PATH=../fizika.json
+PICS_PATH=../pics
 ```
 
 ## 🔌 API Integration
 
-The frontend automatically detects the backend:
-- **Local Development**: `http://localhost:3001`
-- **Production**: Configure `API_BASE` in `js/load.js`
+The frontend **prioritizes backend API** with local fallback:
+- **Primary**: Auto-detects backend (`localhost:3001` for dev, same origin for production)
+- **Fallback**: Local `fizika.json` and `pics/` directory when backend unavailable
+- **Images**: Try backend API first, fallback to local `pics/` directory
 
-If the backend is unavailable, the frontend falls back to loading `fizika.json` directly.
+**Graceful degradation** - Quiz works even when backend is down, using local files.
 
 ## 📊 API Endpoints
 

backend/.env.example

@@ -3,4 +3,8 @@ PORT=3001
 NODE_ENV=development
 
 # CORS Configuration
-FRONTEND_URL=*
+FRONTEND_URL=*
+
+# File Paths
+DATA_PATH=../fizika.json
+PICS_PATH=../pics

backend/README.md

@@ -56,8 +56,8 @@ A secure Node.js/Express backend for managing physics quiz questions and images
    ```
 
 4. **Access the admin interface:**
-   - Open http://localhost:3001/admin.html
-   - Default password: `admin123` (change this!)
+   - Open http://localhost:3001/
+   - No authentication required
 
 ### Local Development
 
@@ -169,7 +169,7 @@ The project includes a GitHub Actions workflow that:
 
 ## Admin Interface
 
-Access the admin interface at `/admin.html`:
+Access the admin interface at `/`:
 - **Questions Tab**: Add, edit, delete quiz questions
 - **Images Tab**: Upload and manage image files
 - **Responsive Design**: Works on desktop and mobile

backend/docker-compose.yml

@@ -11,6 +11,8 @@ services:
       - NODE_ENV=production
       - PORT=3001
       - FRONTEND_URL=${FRONTEND_URL:-*}
+      - DATA_PATH=${DATA_PATH:-/usr/src/app/fizika.json}
+      - PICS_PATH=${PICS_PATH:-/usr/src/app/pics}
     volumes:
       # Mount data files
       - ./fizika.json:/usr/src/app/fizika.json:ro
@@ -37,6 +39,8 @@ services:
       - NODE_ENV=development
       - PORT=3001
       - FRONTEND_URL=*
+      - DATA_PATH=/usr/src/app/fizika.json
+      - PICS_PATH=/usr/src/app/pics
     volumes:
       - ./backend:/usr/src/app
       - ./fizika.json:/usr/src/app/fizika.json

backend/server.js

@@ -15,16 +15,25 @@ app.use(cors({
   credentials: true
 }));
 
-app.use(express.json({ limit: '10mb' }));
+app.use(express.json({ limit: '100mb' }));
 app.use(express.static('public'));
 
 // File paths
-const DATA_PATH = path.join(__dirname, '../frontend/fizika.json');
-const PICS_PATH = path.join(__dirname, '../frontend/pics');
+const DATA_PATH = process.env.DATA_PATH || path.join(__dirname, '../fizika.json');
+const PICS_PATH = process.env.PICS_PATH || path.join(__dirname, '../pics');
 
 // Multer configuration for image uploads
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, PICS_PATH);
+  },
+  filename: (req, file, cb) => {
+    cb(null, file.originalname);
+  }
+});
+
 const upload = multer({
-  dest: PICS_PATH,
+  storage: storage,
   limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
   fileFilter: (req, file, cb) => {
     if (file.mimetype.startsWith('image/')) {
@@ -32,9 +41,6 @@ const upload = multer({
     } else {
       cb(new Error('Only images allowed'));
     }
-  },
-  filename: (req, file, cb) => {
-    cb(null, file.originalname);
   }
 });
 

frontend/js/fizika.js

@@ -25,68 +25,91 @@ async function ajaxLoad(type) {
   $("#loadingGif").show();
 
   let result = "";
-  if (type == 1) {
-    var source =
-      "^" + $("#evszam").val() + $("#honap").val() + $("#feladat").val() + "$";
-    for (var i = 0; i <= 3; i++) {
-      source = source.replace("all", ".*");
-      console.log(source);
+  
+  try {
+    if (type == 1) {
+      var source =
+        "^" + $("#evszam").val() + $("#honap").val() + $("#feladat").val() + "$";
+      for (var i = 0; i <= 3; i++) {
+        source = source.replace("all", ".*");
+        console.log(source);
+      }
+      result = await loadQuestions(true, undefined, source, 1000000);
+    } else if (type == 2) {
+      result = await loadQuestions(
+        false,
+        [
+          "mk",
+          "md",
+          "me",
+          "mf",
+          "mr",
+          "h",
+          "es",
+          "ee",
+          "ev",
+          "m",
+          "o",
+          "ah",
+          "am",
+          "cs",
+          "v",
+        ],
+        undefined,
+        15
+      );
+    } else {
+      var NOQ = $("#numberof").val() ? $("#numberof").val() : 15;
+      categories = [
+        $("#mk").prop("checked") ? "mk" : "",
+        $("#md").prop("checked") ? "md" : "",
+        $("#me").prop("checked") ? "me" : "",
+        $("#mf").prop("checked") ? "mf" : "",
+        $("#mr").prop("checked") ? "mr" : "",
+        $("#h").prop("checked") ? "h" : "",
+        $("#es").prop("checked") ? "es" : "",
+        $("#ee").prop("checked") ? "ee" : "",
+        $("#ev").prop("checked") ? "ev" : "",
+        $("#m").prop("checked") ? "m" : "",
+        $("#o").prop("checked") ? "o" : "",
+        $("#ah").prop("checked") ? "ah" : "",
+        $("#am").prop("checked") ? "am" : "",
+        $("#cs").prop("checked") ? "cs" : "",
+        $("#v").prop("checked") ? "v" : "",
+      ];
+      result = await loadQuestions(false, categories, undefined, NOQ);
     }
-    result = await loadQuestions(true, undefined, source, 1000000);
-  } else if (type == 2) {
-    result = await loadQuestions(
-      false,
-      [
-        "mk",
-        "md",
-        "me",
-        "mf",
-        "mr",
-        "h",
-        "es",
-        "ee",
-        "ev",
-        "m",
-        "o",
-        "ah",
-        "am",
-        "cs",
-        "v",
-      ],
-      undefined,
-      15
-    );
-  } else {
-    var NOQ = $("#numberof").val() ? $("#numberof").val() : 15;
-    categories = [
-      $("#mk").prop("checked") ? "mk" : "",
-      $("#md").prop("checked") ? "md" : "",
-      $("#me").prop("checked") ? "me" : "",
-      $("#mf").prop("checked") ? "mf" : "",
-      $("#mr").prop("checked") ? "mr" : "",
-      $("#h").prop("checked") ? "h" : "",
-      $("#es").prop("checked") ? "es" : "",
-      $("#ee").prop("checked") ? "ee" : "",
-      $("#ev").prop("checked") ? "ev" : "",
-      $("#m").prop("checked") ? "m" : "",
-      $("#o").prop("checked") ? "o" : "",
-      $("#ah").prop("checked") ? "ah" : "",
-      $("#am").prop("checked") ? "am" : "",
-      $("#cs").prop("checked") ? "cs" : "",
-      $("#v").prop("checked") ? "v" : "",
-    ];
-    result = await loadQuestions(false, categories, undefined, NOQ);
-  }
 
-  $("#loadingGif").hide();
-  $("#content").html(result);
-  $("#state2").hide();
-  if (
-    result !=
-    '<div class="buttonwrapper"><b style="font-size: 2rem;">Nem található a keresésnek megfelelő feladat!</b></div>'
-  ) {
-    $("#megoldas").show();
-    $("#state").html("Feladatok sikeresen letöltve!");
+    $("#loadingGif").hide();
+    $("#content").html(result);
+    $("#state2").hide();
+    if (
+      result !=
+      '<div class="buttonwrapper"><b style="font-size: 2rem;">Nem található a keresésnek megfelelő feladat!</b></div>'
+    ) {
+      $("#megoldas").show();
+      $("#state").html("Feladatok sikeresen letöltve!");
+    }
+  } catch (error) {
+    $("#loadingGif").hide();
+    $("#content").html(`
+      <div class="buttonwrapper">
+        <b style="font-size: 1.5rem; color: #dc3545;">
+          Nem sikerült betölteni a feladatokat
+        </b>
+        <p style="margin-top: 1rem; color: #666;">
+          ${error.message}
+        </p>
+        <p style="margin-top: 0.5rem; color: #666;">
+          Ellenőrizd az internetkapcsolatot vagy próbáld újra.
+        </p>
+        <button class="button" onclick="location.reload()" style="margin-top: 1rem;">
+          Újrapróbálás
+        </button>
+      </div>
+    `);
+    $("#state").html("Hiba a feladatok betöltésekor");
+    console.error('Quiz loading error:', error);
   }
 }
 

frontend/js/load.js

@@ -1,5 +1,20 @@
 let questions = null;
-const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:3001' : 'https://your-backend-domain.com';
+
+// Auto-detect API base URL
+const getApiBase = () => {
+  const protocol = window.location.protocol;
+  const hostname = window.location.hostname;
+
+  // If running on localhost, assume backend is on port 3001
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return `${protocol}//${hostname}:3001`;
+  }
+
+  // For production, assume backend is on same origin
+  return "https://fizika-backend.schmelczer.dev"
+};
+
+const API_BASE = getApiBase();
 
 const loadQuestions = async (
   isSearch,
@@ -9,10 +24,25 @@ const loadQuestions = async (
 ) => {
   if (questions === null) {
     try {
-      questions = await (await fetch(`${API_BASE}/api/fizika`)).json();
+      const response = await fetch(`${API_BASE}/api/fizika`);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      questions = await response.json();
+      console.log('Questions loaded from backend API');
     } catch (error) {
-      console.error('Failed to load questions from API, falling back to local file:', error);
-      questions = await (await fetch("fizika.json")).json();
+      console.warn('Failed to load questions from API, falling back to local file:', error);
+      try {
+        const fallbackResponse = await fetch("fizika.json");
+        if (!fallbackResponse.ok) {
+          throw new Error(`Local file not available: ${fallbackResponse.status}`);
+        }
+        questions = await fallbackResponse.json();
+        console.log('Questions loaded from local fallback file');
+      } catch (fallbackError) {
+        console.error('Both API and local file failed:', fallbackError);
+        throw new Error('Unable to load quiz data from either backend API or local file');
+      }
     }
   }
 
@@ -38,7 +68,7 @@ const loadQuestions = async (
       <div class="feladat card" id="feladat${id}"> 
         <h2 style="float: left;">${i + 1}.</h2><h2>${source}</h2>
         <pre>${description}</pre>
-        ${image ? `<img src="${API_BASE}/api/pics/${image}"><br>` : ""}
+        ${image ? `<img src="${API_BASE}/api/pics/${image}" onerror="this.src='pics/${image}'"><br>` : ""}
         <form id="form${id}"">
           <input type="radio" id="rad1" name="group">
           <label id="label${id}" class="rad1">${a}</label>
@@ -49,14 +79,13 @@ const loadQuestions = async (
           <input type="radio" id="rad3" name="group">
           <label id="label${id}" class="rad3">${c}</label>
           <br>
-          ${
-            d
-              ? `
+          ${d
+          ? `
           <input type="radio" id="rad4" name="group">
           <label id="label${id}" class="rad4">${d}</label>
           <br>`
-              : ""
-          }
+          : ""
+        }
         </form>
         <script type="text/javascript">
           $(document).ready(function(){