From 9d71b64e9238c89db3be7858b6ea7627e688faa2 Mon Sep 17 00:00:00 2001
From: mrfry <mr.fry@tutanota.com>
Date: Sat, 15 May 2021 17:00:46 +0200
Subject: [PATCH] Added new imgs to faq and script

---
 src/defaultStyles.css |  2 +-
 src/pages/faq.js      | 63 +++++++++++++++++++++++++++++++++++++++++--
 src/pages/script.js   |  5 ++++
 3 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 4c6a1d8..df20f7e 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -271,7 +271,7 @@ input:focus {
 }
 
 .manual_img {
-  padding: 20px 2px;
+  padding: 2px 2px;
   max-width: 90%;
 }
 
diff --git a/src/pages/faq.js b/src/pages/faq.js
index 0633a2c..239b61c 100644
--- a/src/pages/faq.js
+++ b/src/pages/faq.js
@@ -140,8 +140,67 @@ function FAQSection() {
             középső gombbal.
           </li>
           <li>
-            <b>Gombok, %-ok, számok</b>
-            <img className={'manual_img'} src="img/6.png" alt="img" />
+            <b>Script felugró ablakon szereplő adatok és gombok értelmezése</b>
+            <img className={'manual_img'} src="img/script-3.png" alt="img" />
+            <ul>
+              <li>
+                Felső középső szöveg:
+                <br />
+                [Talált kérdés tárgya] - [Talált kérdés adatbázisának neve]
+              </li>
+              <li>
+                Jobb oldalt nyilak:
+                <br />
+                Ha több kérdés van egy oldalon, akkor azzal lehet váltogatni
+              </li>
+              <li>
+                Bal oldalt felső szám (3./1.)
+                <br />
+                Azt jelöli, hogy éppen hanyadik kérdés válasza van megjelenítve.
+                Itt a 3./1. azt jelenti, hogy a tesztben a 3. kérdés 1. talált
+                válasza.
+              </li>
+              <li>
+                Bal oldalt %
+                <br />A szerver szerint hány százalékban egyezik a talált válasz
+                azzal, amit tényleg keresni kell
+              </li>
+              <li>
+                Középen
+                <br />
+                Első sorban kérdés, másodikban válasz (ha a sor hosszú, akkor
+                megtörhet)
+              </li>
+            </ul>
+            <img className={'manual_img'} src="img/script-1.png" alt="img" />
+            <ul>
+              <li>
+                Alul nyilak:
+                <br />
+                Itt egy kérdésre több találat van, így közöttük neked kell
+                eldönteni, hogy mi a helyes válasz. Ez akkor van, ha a kérdés
+                szövege ugyan az, de más válasz is lehet. A nyilak segítségével
+                válogathatsz a válaszok között.
+              </li>
+              <li>
+                Bal oldalt felső szám (1./3.)
+                <br />
+                Itt az 1. azt jelenti hogy az oldalon az első kérdéshez van
+                megjelenítve a válasz, a 3. pedig azt, hogy a sok talált
+                válaszok közül a 3.
+              </li>
+              <li>
+                A kérdés mellett lévő [0]
+                <br />A teszt kérdésben itt épp egy kép van, és azt jelenti a
+                szögletes zárójelben lévő szám. A tesztben lévő képnél is
+                megjelenik ez a [0] azonosító, hogy könnyen párosítani lehessen.
+                <br />
+                Ez akkor hasznos, ha képekhez tartozik a válasz. Ekkor figyelni
+                kell, mert a képek nem biztos hogy jó sorrendben vannak a
+                tesztben a talált válaszhoz képest, de a []-ben lévő azonosítók
+                segítenek.
+              </li>
+            </ul>
           </li>
         </ul>
       </div>
diff --git a/src/pages/script.js b/src/pages/script.js
index be0baa8..ed0e0f3 100644
--- a/src/pages/script.js
+++ b/src/pages/script.js
@@ -158,6 +158,11 @@ export default function Script() {
             ha esetleg nem lenne elérhető a szerver, vagy bármi hiba történne
           </li>
         </ul>
+        <b>Példa felugró ablakokra:</b>
+        <br />
+        <img className={'manual_img'} src="img/script-3.png" alt="img" />
+        <br />
+        <img className={'manual_img'} src="img/script-2.png" alt="img" />
       </div>
     </div>
   )