Remove backend dependency

Signed-off-by: András Schmelczer <andras@schmelczer.dev>

js/fizika.js

@@ -9,13 +9,12 @@ var reviewMode = 0;
 function aspect() {
   if ($(window).width() > $(window).height()) {
     $("#cim").html("Fizika gyakorlás");
-  }
+  } else {
-  else{
     $("#cim").html("Fizika");
   }
 }
 
-function ajaxLoad(type) {
+async function ajaxLoad(type) {
   reviewMode = 0;
   totalPoints = 0;
   currentPoints = 0;
@@ -24,77 +23,87 @@ function ajaxLoad(type) {
   $("#percentage").html("");
   $("#megoldas").hide();
   $("#loadingGif").show();
+
+  let result = "";
   if (type == 1) {
-    var source = $("#evszam").val() + $("#honap").val() + $("#feladat").val();
+    var source =
+      "^" + $("#evszam").val() + $("#honap").val() + $("#feladat").val() + "$";
     for (var i = 0; i <= 3; i++) {
-     source = source.replace("all", "%");
+      source = source.replace("all", ".*");
-    };
+      console.log(source);
-    data = {
-      'source' : source,
-      'isSearch' : true
-    };
     }
-  else if(type == 2) {
+    result = await loadQuestions(true, undefined, source, 1000000);
-    data = {
+  } else if (type == 2) {
-      'mk': 1,
+    result = await loadQuestions(
-      'md': 1,
+      false,
-      'me': 1,
+      [
-      'mf': 1,
+        "mk",
-      'mr': 1,
+        "md",
-      'h': 1,
+        "me",
-      'es': 1,
+        "mf",
-      'ee': 1,
+        "mr",
-      'ev': 1,
+        "h",
-      'm': 1,
+        "es",
-      'o': 1,
+        "ee",
-      'ah': 1,
+        "ev",
-      'am': 1,
+        "m",
-      'cs': 1,
+        "o",
-      'v': 1,
+        "ah",
-      'NOQ': 15
+        "am",
-    };
+        "cs",
-  }
+        "v",
-  else {
+      ],
+      undefined,
+      15
+    );
+  } else {
     var NOQ = $("#numberof").val() ? $("#numberof").val() : 15;
-    data = {
+    categories = [
-      'mk':  $("#mk").prop("checked") ? "1" : "0",
+      $("#mk").prop("checked") ? "mk" : "",
-      'md':  $("#md").prop("checked") ? "1" : "0",
+      $("#md").prop("checked") ? "md" : "",
-      'me':  $("#me").prop("checked") ? "1" : "0",
+      $("#me").prop("checked") ? "me" : "",
-      'mf':  $("#mf").prop("checked") ? "1" : "0",
+      $("#mf").prop("checked") ? "mf" : "",
-      'mr':  $("#mr").prop("checked") ? "1" : "0",
+      $("#mr").prop("checked") ? "mr" : "",
-      'h':   $("#h").prop("checked") ? "1" : "0",
+      $("#h").prop("checked") ? "h" : "",
-      'es':  $("#es").prop("checked") ? "1" : "0",
+      $("#es").prop("checked") ? "es" : "",
-      'ee':  $("#ee").prop("checked") ? "1" : "0",
+      $("#ee").prop("checked") ? "ee" : "",
-      'ev':  $("#ev").prop("checked") ? "1" : "0",
+      $("#ev").prop("checked") ? "ev" : "",
-      'm':   $("#m").prop("checked") ? "1" : "0",
+      $("#m").prop("checked") ? "m" : "",
-      'o':   $("#o").prop("checked") ? "1" : "0",
+      $("#o").prop("checked") ? "o" : "",
-      'ah':  $("#ah").prop("checked") ? "1" : "0",
+      $("#ah").prop("checked") ? "ah" : "",
-      'am':  $("#am").prop("checked") ? "1" : "0",
+      $("#am").prop("checked") ? "am" : "",
-      'cs':  $("#cs").prop("checked") ? "1" : "0",
+      $("#cs").prop("checked") ? "cs" : "",
-      'v':   $("#v").prop("checked") ? "1" : "0",
+      $("#v").prop("checked") ? "v" : "",
-      'NOQ': NOQ
+    ];
-    };
+    result = await loadQuestions(false, categories, undefined, NOQ);
   }
-  $.ajax({
+
-    url: 'load.php',
-    type: 'POST',
-    data: data,
-    success: function(data){
   $("#loadingGif").hide();
-      $("#content").html(data);
+  $("#content").html(result);
   $("#state2").hide();
-      if(data != '<div class="buttonwrapper"><b style="font-size: 2rem;">Nem található a keresésnek megfelelő feladat!</b></div>'){
+  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!");
   }
 }
-  });
+
-}
 function showCorrect(id, correctAns) {
   teszt(id, correctAns);
-  eval("$('" + "#label" + id + ".rad" + correctAns + "').css('background-color', '#C6FF8C');");
+  eval(
+    "$('" +
+      "#label" +
+      id +
+      ".rad" +
+      correctAns +
+      "').css('background-color', '#C6FF8C');"
+  );
   $("#state").html("Helyes válaszok bejelölve!");
-  $("#state2").html("(Ellenőrző mód, az itteni eredményeid nem kerülnek elmentésre, a módból való kilépéshez tölts be egy új tesztsort!)");
+  $("#state2").html(
+    "(Ellenőrző mód, az itteni eredményeid nem kerülnek elmentésre, a módból való kilépéshez tölts be egy új tesztsort!)"
+  );
 }
 
 function teszt(id, correctAns) {
@@ -105,28 +114,45 @@ function teszt(id, correctAns){
   if (isCorrect) {
     $(div).animate({ backgroundColor: "#C6FF8C" }, 1100);
     correctAnswersGiven++;
-  }
+  } else {
-  else{
     $(div).animate({ backgroundColor: "#FF808C" }, 1100);
   }
   console.log(currentPoints, totalPoints, correctAnswersGiven);
   if (currentPoints >= totalPoints) {
-    var percentage = correctAnswersGiven/totalPoints*100;
+    var percentage = (correctAnswersGiven / totalPoints) * 100;
-    percentage = Math.round(percentage * 100) / 100
+    percentage = Math.round(percentage * 100) / 100;
     percentage = percentage.toFixed(2);
     $("#percentage").html("Eredmény: " + percentage + "%");
     $("#state").html("Válaszok leellenőrizve!");
     if (isLocal && !reviewMode) {
       var datum = new Date();
-      var ido = Math.round(timer/60)
+      var ido = Math.round(timer / 60);
-      eval("localStorage.teszt" + numberOfPreviousTests + " = '" + percentage + "'");
+      eval(
-      eval("localStorage.teszt" + numberOfPreviousTests + "date = '" + datum.toLocaleDateString() + "'");
+        "localStorage.teszt" + numberOfPreviousTests + " = '" + percentage + "'"
-      eval("localStorage.teszt" + numberOfPreviousTests + "time = '" + ido + "'");
+      );
-      eval("localStorage.teszt" + numberOfPreviousTests + "total = '" + totalPoints +"'");
+      eval(
+        "localStorage.teszt" +
+          numberOfPreviousTests +
+          "date = '" +
+          datum.toLocaleDateString() +
+          "'"
+      );
+      eval(
+        "localStorage.teszt" + numberOfPreviousTests + "time = '" + ido + "'"
+      );
+      eval(
+        "localStorage.teszt" +
+          numberOfPreviousTests +
+          "total = '" +
+          totalPoints +
+          "'"
+      );
       startTimer = 0;
       timer = 0;
       $("#state2").show();
-      $("#state2").html("Eredményed mentésre került! Ellenőrző módba belépve az eredményeid nem kerülnek tárolásra. A módból való kilépéshez tölts be egy új tesztsort!");
+      $("#state2").html(
+        "Eredményed mentésre került! Ellenőrző módba belépve az eredményeid nem kerülnek tárolásra. A módból való kilépéshez tölts be egy új tesztsort!"
+      );
       eredmeny();
       reviewMode = 1;
     }
@@ -136,16 +162,19 @@ function teszt(id, correctAns){
 }
 
 function scrollTo(where) {
-  $('html, body').animate({
+  $("html, body").animate(
-      scrollTop: $(where).offset().top - 100
+    {
-  }, 1000);
+      scrollTop: $(where).offset().top - 100,
+    },
+    1000
+  );
 }
 
 function howMany() {
   var localString = "localStorage.teszt";
   numberOfPreviousTests = 1; //number of previous tests+1
   localString += numberOfPreviousTests;
-  while(typeof(eval(localString)) !== "undefined"){
+  while (typeof eval(localString) !== "undefined") {
     numberOfPreviousTests++;
     localString = "localStorage.teszt" + numberOfPreviousTests;
   }
@@ -154,42 +183,56 @@ function howMany(){
 function eredmeny() {
   howMany();
   if (isLocal) {
-    if(typeof(localStorage.teszt1) !== "undefined"){
+    if (typeof localStorage.teszt1 !== "undefined") {
-      $("#tablazat").html('<table id="ered"><tr><th></th><th>Dátum</th><th>Időtartam</th><th>Eredmény</th><th>Pontszám</th></tr></table>'); 
+      $("#tablazat").html(
+        '<table id="ered"><tr><th></th><th>Dátum</th><th>Időtartam</th><th>Eredmény</th><th>Pontszám</th></tr></table>'
+      );
       for (var i = 1; i < numberOfPreviousTests; i++) {
         var localString = "localStorage.teszt" + i;
         var datumString = localString + "date";
         var timeString = localString + "time";
         var totalString = localString + "total";
         var isGood = eval(localString);
-        $('#ered tr:last').after(
+        $("#ered tr:last").after(
-          "<tr><td>" + i + ".</td><td>"
+          "<tr><td>" +
-          + eval(datumString) + "</td><td>"
+            i +
-          + eval(timeString) + " perc</td>"
+            ".</td><td>" +
-          + "<td style='color: hsl(" + isGood + ",100%,50%);''> <b>" + eval(localString) + "%</b></td><td>"
+            eval(datumString) +
-          + Math.round(eval(localString)*eval(totalString)/100) + "/" + eval(totalString) + " pont</td></tr>"
+            "</td><td>" +
+            eval(timeString) +
+            " perc</td>" +
+            "<td style='color: hsl(" +
+            isGood +
+            ",100%,50%);''> <b>" +
+            eval(localString) +
+            "%</b></td><td>" +
+            Math.round((eval(localString) * eval(totalString)) / 100) +
+            "/" +
+            eval(totalString) +
+            " pont</td></tr>"
         );
       }
+    } else {
+      $("#info").html("Még nincsenek elmentett eredményeid.");
     }
-    else {
+  } else {
-      $("#info").html("Még nincsenek elmentett eredményeid.")
+    $("#tablazat").html(
-    }
+      "<h2>Sajnos a böngésződ nem támogatja ezt a funkciót, tölts le egy modernebbet vagy jelentkezz be!</h2>"
-  }    
+    );
-  else {
-      $("#tablazat").html("<h2>Sajnos a böngésződ nem támogatja ezt a funkciót, tölts le egy modernebbet vagy jelentkezz be!</h2>")
   }
 }
 
 //starting up
-if (typeof(Storage) !== "undefined") {
+if (typeof Storage !== "undefined") {
   var isLocal = 1;
   howMany();
-}
+} else {
-else{
   var isLocal = 0;
 }
 
-setInterval(function(){if(startTimer) timer++; }, 1000);
+setInterval(function () {
+  if (startTimer) timer++;
+}, 1000);
 
 $(document).ready(function () {
   eredmeny();
@@ -208,26 +251,26 @@ $(document).ready(function(){
   aspect();
 
   $("#bfooldal").click(function () {
-      $("#bfooldal").css('font-weight', '700');
+    $("#bfooldal").css("font-weight", "700");
-      $("#bteszt").css('font-weight', '400');
+    $("#bteszt").css("font-weight", "400");
-      $("#beredmenyek").css('font-weight', '400');                    
+    $("#beredmenyek").css("font-weight", "400");
     $("#eredmenyek").hide();
     $("#teszt").hide();
     $("#fooldal").show();
   });
   $("#bteszt").click(function () {
-      $("#bfooldal").css('font-weight', '400');
+    $("#bfooldal").css("font-weight", "400");
-      $("#bteszt").css('font-weight', '700');
+    $("#bteszt").css("font-weight", "700");
-      $("#beredmenyek").css('font-weight', '400');                    
+    $("#beredmenyek").css("font-weight", "400");
     $("#eredmenyek").hide();
     $("#teszt").show();
     $("#fooldal").hide();
   });
   $("#beredmenyek").click(function () {
     //eredmeny();
-      $("#bfooldal").css('font-weight', '400');
+    $("#bfooldal").css("font-weight", "400");
-      $("#bteszt").css('font-weight', '400');
+    $("#bteszt").css("font-weight", "400");
-      $("#beredmenyek").css('font-weight', '700');                    
+    $("#beredmenyek").css("font-weight", "700");
     $("#eredmenyek").show();
     $("#teszt").hide();
     $("#fooldal").hide();
@@ -256,26 +299,23 @@ $(document).ready(function(){
       $(".f2016").hide();
       $(".f").hide();
       $(".fnem17").hide();
-      }
+    } else if ($("#evszam").val() == "2016/") {
-      else if($("#evszam").val() == "2016/"){
       $(".f2006").hide();
       $(".f2016").show();
       $(".f").show();
       $(".fnem17").show();
-      }
+    } else if ($("#evszam").val() == "2017/") {
-      else if($("#evszam").val() == "2017/"){
       $(".f2006").hide();
       $(".f2016").hide();
       $(".f").show();
       $(".fnem17").hide();
-      }
+    } else {
-      else{
       $(".f2006").hide();
       $(".f2016").hide();
       $(".f").show();
       $(".fnem17").show();
     }
-      $("#honap").val('all');
+    $("#honap").val("all");
   });
 
   $("#mec").change(function () {
@@ -304,56 +344,110 @@ $(document).ready(function(){
     ajaxLoad(isSearch ? 1 : 3);
   });
   $(".scroll").click(function () {
-    $("body").animate({
+    $("body").animate(
-      scrollTop: $("#teszt").offset().top
+      {
-    }, 3000);
+        scrollTop: $("#teszt").offset().top,
+      },
+      3000
+    );
   });
 });
 
 (function (d) {
-  d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
+  d.each(
+    [
+      "backgroundColor",
+      "borderBottomColor",
+      "borderLeftColor",
+      "borderRightColor",
+      "borderTopColor",
+      "color",
+      "outlineColor",
+    ],
+    function (f, e) {
       d.fx.step[e] = function (g) {
         if (!g.colorInit) {
           g.start = c(g.elem, e);
           g.end = b(g.end);
-              g.colorInit = true
+          g.colorInit = true;
         }
-          g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
+        g.elem.style[e] =
+          "rgb(" +
+          [
+            Math.max(
+              Math.min(
+                parseInt(g.pos * (g.end[0] - g.start[0]) + g.start[0]),
+                255
+              ),
+              0
+            ),
+            Math.max(
+              Math.min(
+                parseInt(g.pos * (g.end[1] - g.start[1]) + g.start[1]),
+                255
+              ),
+              0
+            ),
+            Math.max(
+              Math.min(
+                parseInt(g.pos * (g.end[2] - g.start[2]) + g.start[2]),
+                255
+              ),
+              0
+            ),
+          ].join(",") +
+          ")";
+      };
     }
-  });
+  );
   function b(f) {
     var e;
     if (f && f.constructor == Array && f.length == 3) {
-        return f
+      return f;
     }
-    if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
+    if (
-        return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
+      (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(
+        f
+      ))
+    ) {
+      return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])];
     }
-    if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
+    if (
-        return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
+      (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(
+        f
+      ))
+    ) {
+      return [
+        parseFloat(e[1]) * 2.55,
+        parseFloat(e[2]) * 2.55,
+        parseFloat(e[3]) * 2.55,
+      ];
     }
-    if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
+    if ((e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f))) {
-        return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
+      return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)];
     }
-    if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
+    if ((e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f))) {
-        return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
+      return [
+        parseInt(e[1] + e[1], 16),
+        parseInt(e[2] + e[2], 16),
+        parseInt(e[3] + e[3], 16),
+      ];
     }
-    if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
+    if ((e = /rgba\(0, 0, 0, 0\)/.exec(f))) {
-        return a.transparent
+      return a.transparent;
     }
-    return a[d.trim(f).toLowerCase()]
+    return a[d.trim(f).toLowerCase()];
   }
   function c(g, e) {
     var f;
     do {
       f = d.css(g, e);
-        if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
+      if ((f != "" && f != "transparent") || d.nodeName(g, "body")) {
-            break
+        break;
       }
-        e = "backgroundColor"
+      e = "backgroundColor";
-    } while (g = g.parentNode);
+    } while ((g = g.parentNode));
-    return b(f)
+    return b(f);
-  }
-  var a = {
   }
+  var a = {};
 })(jQuery);

js/load.js

@@ -0,0 +1,88 @@
+let questions = null;
+const loadQuestions = async (
+  isSearch,
+  categories,
+  sourceScheme,
+  questionCount
+) => {
+  if (questions === null) {
+    questions = await (await fetch("fizika.json")).json();
+  }
+
+  let currentQuestions = questions.slice();
+
+  if (isSearch) {
+    currentQuestions = currentQuestions.filter((q) =>
+      q.source.match(sourceScheme)
+    );
+  } else {
+    shuffleArray(currentQuestions);
+    currentQuestions = currentQuestions.filter((q) =>
+      categories.includes(q.type)
+    );
+  }
+
+  resultHtml = "";
+
+  currentQuestions = currentQuestions.slice(0, questionCount);
+  currentQuestions.forEach(
+    ({ id, source, description, a, b, c, d, correct, image }, i) => {
+      resultHtml += `
+      <div class="feladat card" id="feladat${id}"> 
+        <h2 style="float: left;">${i + 1}.</h2><h2>${source}</h2>
+        <pre>${description}</pre>
+        ${image ? `<img src="pics/${image}"><br>` : ""}
+        <form id="form${id}"">
+          <input type="radio" id="rad1" name="group">
+          <label id="label${id}" class="rad1">${a}</label>
+          <br>
+          <input type="radio" id="rad2" name="group">
+          <label id="label${id}" class="rad2">${b}</label>
+          <br>
+          <input type="radio" id="rad3" name="group">
+          <label id="label${id}" class="rad3">${c}</label>
+          <br>
+          ${
+            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(){
+              totalPoints++;
+              $("#ans").click(function(event){
+                  event.preventDefault();
+                  teszt(${id}, ${correct});    
+              });
+              $("#cAns").click(function(event){
+                  event.preventDefault();
+                  showCorrect(${id}, ${correct});
+              });
+          });
+        </script>
+      </div>
+      `;
+    }
+  );
+
+  resultHtml +=
+    currentQuestions.length === 0
+      ? '<div class="buttonwrapper"><b style="font-size: 2rem;">Nem található a keresésnek megfelelő feladat!</b></div>'
+      : `<script type="text/javascript">
+            startTimer = 1;
+            timer = 0;
+          </script>`;
+
+  return resultHtml;
+};
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}