# Tartalom feloldása a haladás alapján

> Leckék feloldása a Dinamikus láthatósággal és egy kérdéses űrlappal: metaboxmező, JetEngine- vagy JetFormBuilder-űrlap, felugró ablak, átirányítás, Elementorban és a blokkszerkesztőben.

A JetEngine-nel tagsági oldalt is építhetsz. Ebben a példában a leckéket a felhasználó haladása szerint oldod fel: a következő lecke akkor nyílik meg, ha a felhasználó a JetEngine- vagy a JetFormBuilder-űrlapban jól válaszol. A megoldás a **Dinamikus láthatóságot** köti az űrlap válaszához.

Példa: egy oldal az összes leckét mutatja. Minden zárt lakatot ábrázoló képhez felugró ablak tartozik egy űrlappal, és a kép láthatósága az űrlap lehetőségeihez kötött. Ha a felhasználó az „Igen” lehetőséget választja, feloldja a következő leckét. Az űrlapmező **feltételes láthatósága** miatt a felhasználó csak akkor látja a következő kérdést, ha az előzőre helyesen válaszolt.

## Feloldás Elementorban

Szükséges: az Elementor, a JetEngine, a bekapcsolt Dinamikus láthatóság modul és (a felugró ablakhoz) a JetPopup. Az űrlapot JetEngine vagy JetFormBuilder bővítménnyel is készítheted.

### 1. Bejegyzések vagy új bejegyzéstípus a leckékhez

Hozz létre bejegyzéseket a tananyaggal, vagy külön [egyedi bejegyzéstípust](https://hub.hellowp.io/hu/plugins/jet-engine/bejegyzestipusok-bejegyzestipus-letrehozasa/) a leckebejegyzésekhez.

### 2. Metamező a metaboxban

Hogy az űrlap és a Dinamikus láthatóság együtt működjön, kell egy metamező. Mivel az űrlapot az oldalon jeleníted meg, az **Oldalak** számára hozz létre [metaboxot](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-metaboxok/).

1. Nyisd meg a **JetEngine → Metaboxok** oldalt, és kattints az **Új hozzáadása** gombra.
2. Add meg a **Meta doboz címe** értékét, és a **Meta doboz célja** mezőben válaszd a **Bejegyzés** lehetőséget.
3. A **Láthatósági feltételek** részben a **Bekapcsolás bejegyzéstípusoknál** mezőben válaszd az **Oldalak** bejegyzéstípust.

![Az új metabox űrlapja: általános beállítások, láthatósági feltételek és a metamezők](./kepek/dinamikus-tartalom-5-metabox-uj.webp)

*Az új metabox űrlapja: általános beállítások, láthatósági feltételek és a metamezők* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-meta&cpt_meta_action=add)

A képen a metabox címe, célja és a láthatósági feltétel mezői látszanak, alul az **Új metamező** gombbal.

4. Kattints az oldal alján az **Új metamező** gombra. Mivel a Dinamikus láthatósági feltételt a felhasználó „Igen” vagy „Nem” választásához kötöd, hozz létre **Rádió** típusú metamezőt ezekkel a lehetőségekkel. (Más mezőt is létrehozhatsz az igényeid szerint.)
5. A rádió lehetőségeit kézzel is felveheted az **Új mezőlehetőség** gombbal, vagy a [szójegyzékből](https://hub.hellowp.io/hu/plugins/jet-engine/meta-mezok-szojegyzekek/) is kitöltheted a **Lehetőségek lekérése a szójegyzékből** kapcsolóval.
6. Mentsd a metaboxot (**Metabox hozzáadása**, szerkesztésnél a frissítés gombbal).

### 3. JetEngine-űrlap

1. Nyisd meg a **JetEngine → Űrlapok** oldalt, és kattints az **Új hozzáadása** gombra. Adj címet az új űrlapnak.
2. A **Hidden** (rejtett) mező beállításait hagyd alapértelmezetten. Az **Add Field** gombbal vegyél fel egy új mezőt a rejtett mező és a küldés gomb közé.
3. Az új mező beállításainál a **Type** legyen ugyanaz, mint a létrehozott metamezőé: **Radio**. Add meg a **Name** és a **Label** értékét. A **Name** az űrlap beállításaiban szerepel, a **Label** a látogatók számára megjelenő felirat, ide írhatod a kérdést.
4. A **Fill Options From** mezőben válaszd a **Manual Input** lehetőséget, és add hozzá ugyanazokat a lehetőségeket, mint a metamezőnél („Yes”, „No”). Ha a metamezőnél szójegyzéket használtál, itt is választhatod a **Glossary** lehetőséget.
5. Kattints az **Apply Changes** gombra.
6. Jelöld be a **Pre-set form field values** jelölőnégyzetet. A **Source** legyen **Post**, a **Get post ID from** mezőben pedig **Current post**.
7. A **Fields Map** táblázatban a rejtett mező (a példában `post_id`) mellett válaszd a **Post ID** lehetőséget; a rádió- (vagy más, a láthatósághoz használt) mező mellett pedig a **Post Meta** lehetőséget, és a mellette lévő mezőbe írd be az imént létrehozott metamező nevét.
8. A **Post-submit Actions / Notifications Settings** fülön kattints a ceruza ikonra a művelet szerkesztéséhez. A **Type** legyen **Insert/Update Post**, a **Post Type** az **Oldalak**, a **Post Status** pedig **Published**.
9. A **Fields Map** táblázatban a rejtett mezőnél válaszd a **Post ID (will update post)** lehetőséget, a rádiómezőnél pedig a **Post Meta** lehetőséget a metamező nevével.
10. Kattints az **Apply Changes** gombra.

**Fontos:** az űrlapon belül minden mezőnév egyedi legyen, és csak kisbetűs latin betűt tartalmazzon, szóköz nélkül. A szavakat „-” vagy „_” jellel választhatod el.

Több kérdést is felvehetsz az űrlapba, hogy ellenőrizd a tanulók tudását, és **feltételes szabályokat** állíthatsz rájuk. A példában három rádiómező van (az „Igen”/„Nem” mezővel együtt), és az utolsó kettőre alkalmaztunk szabályokat:

1. Kattints a **Set up conditional rules** gombra, majd a **+ New Rule** gombra.
2. Az **Edit conditional logic for** ablakban a **Type** legyen **Show this field if…**, válaszd ki az előző kérdés mezőjét, az **Operator** legyen **Equal**, a **Value to compare** mezőbe pedig a helyes lehetőség értékét írd.
3. Például az előző kérdés: „Melyik bővítmény kell az egyedi bejegyzéstípus létrehozásához?”, két manuálisan megadott lehetőséggel, „jetengine” és „jetelements” értékkel. A helyes válasz „JetEngine”, ezért a **Value to compare** mezőbe `jetengine` kerül. A felhasználó csak akkor látja a következő kérdést, ha helyesen válaszolt.
4. Kattints az **Apply Changes** gombra, és szükség szerint állíts be feltételt a többi mezőhöz.

A kérdések válaszait nem akarjuk menteni, ezért ezeknél a **Fields Map** beállításai a **Pre-set** és a **Post-submit Action** műveletnél változatlanok maradnak. Végül kattints a **Közzététel** vagy a **Frissítés** gombra.

### 4. JetFormBuilder-űrlap

Ha az űrlapot a JetFormBuilder bővítménnyel készíted:

1. Nyisd meg a **JetFormBuilder → Add New** oldalt, és adj címet az űrlapnak.
2. A **Hidden Field** beállításait hagyd alapértelmezetten, a **Text Field** mezőt töröld, ha nincs rá szükséged.
3. A **Toggle block inserter** gombbal helyezz el egy **Radio Field** mezőt a **Hidden Field** és az **Action Button** közé.
4. A mező **Block General** fülén add meg a **Field Label** és a **Form field name** értékét. A **Field Label** a látogatóknak megjelenő felirat (a kérdés), a **Form field name** az űrlap beállításaiban szerepel. A mezőnevekre ugyanaz a szabály vonatkozik, mint fent.
5. A **Fill Options From** mezőben válaszd a **Manual Input** lehetőséget, és a **Manage Items** gombbal vedd fel ugyanazokat a lehetőségeket, mint a metamezőnél. Szójegyzéknél a **Glossary** választható. Kattints az **Update** gombra.
6. A **JetForm settings** fül **Preset Settings** részén kapcsold be a kapcsolót, a **Source** legyen **Post**, a **Get post ID from** pedig **Current post**. A rejtett mező mellett válaszd a **Post ID** értéket, a rádió (vagy más, a láthatósághoz használt) mező mellett pedig a **Post Meta** értéket, és írd be az imént létrehozott metamező nevét.
7. A **Post Submit Actions** fülön válaszd az **Insert/Update Post** típust, és kattints a ceruza ikonra. A felugró ablakban válaszd a **Post Type** értékét (**Pages**) és a **Published** állapotot. A **Fields Map** táblázatban a rejtett mezőnél válaszd a **Post ID (will update post)** lehetőséget, a rádiómezőnél a **Post Meta** értéket a metamező nevével. Kattints az **Update** gombra.
8. Több kérdéshez a további mezőket **Conditional Block** blokkká alakíthatod: jelöld ki a mezőblokkot, kattints az ikonjára az eszköztáron, és válaszd a **Conditional Block** elemet az átalakítási listából. A beállítóablakot a felső eszköztáron, az **Options** gombtól balra lévő, keresztbe nyilas ikonnal nyithatod meg.
9. A **Conditional Logic** ablakban a **Type** legyen **Show this field if…**, válaszd ki az előző kérdés mezőjét, az **Operator** legyen **Equal**, a **Value to compare** mezőbe pedig a helyes lehetőség értékét írd (például `jetengine`). Kattints az **Update** gombra.
10. A kérdések válaszait itt sem mented, ezért a **Pre-set** és a **Post-submit Action** beállításai változatlanok maradnak. Végül kattints a **Publish** vagy az **Update** gombra.

### 5. Felugró ablak

A felugró ablakhoz a JetPopup bővítmény kell. Ha nem akarsz felugró ablakot, az űrlapot közvetlenül az oldalra is teheted, és ezt a lépést kihagyhatod.

1. Nyisd meg a **JetPopup → Create New Popup** oldalt. A JetPopup előbeállítási könyvtárából is telepíthetsz sablont, de itt a nulláról készítünk egyet.
2. Adj címet a felugró ablaknak, kattints a **Publish**, majd az **Edit with Elementor** gombra.
3. Húzd be a **Form** widgetet (JetEngine és JetFormBuilder űrlaphoz), vagy a **JetForm** widgetet (JetFormBuilder űrlaphoz).
4. A **Content** beállításoknál válaszd ki a **Provider** bővítményt, amellyel az űrlapot készítetted, majd az űrlap nevét.
5. **Fontos:** hogy a Dinamikus láthatóság működjön az űrlappal, a **Submit type** legyen **Reload**: így az oldal újrarenderelése után lép életbe a láthatóság.
6. Kattints az **Update** gombra.

### 6. Oldal a tartalommal

1. Nyisd meg a **Oldalak → Új oldal** menüpontot, adj címet, és kattints az **Edit with Elementor** gombra.
2. Mivel minden bejegyzéshez más űrlap és láthatósági feltétel tartozik, ezen az oldalon nem használható a **Listing Grid**.
3. Az első lecke anyagát (**Title** és **Video** widget) tedd ki kézzel, Dinamikus láthatóság nélkül, hogy minden tanuló lássa.
4. Minden további leckéhez vegyél fel egy **Title**, egy zárt lakatot ábrázoló **Image**, egy **Video** és egy **Button** widgetet.
5. A zárt lakat **Image** widgetjénél nyisd meg az **Advanced** részt. A **JetPopup** fülön az **Attached Popup** mezőben válaszd ki a felugró ablakot, a **Trigger Type** maradjon **Click on Widget**.
6. A **Dynamic Visibility** fülön kapcsold be az **Enable** kapcsolót. A lakatnak el kell tűnnie, amikor a felhasználó az „Igen” választ adja („Szeretnél továbblépni a 2. leckére?”), ezért a **Visibility condition type** legyen **Hide element if condition met**, a **Condition** pedig **Equal**.
7. A **Field** mezőnél kattints a **Dynamic Tag** gombra, és válaszd a **Custom Field** lehetőséget. A beállításaiban válaszd ki az **Oldalak** metaboxban létrehozott mezőt.
8. A **Value** mezőbe írd be a rádió „Yes” lehetőségének értékét: `yes`.
9. A feloldás után megjelenő widget (a bejegyzés kiemelt képe, nyitott lakat vagy videó) láthatósága hasonló, de a **Visibility condition type** itt **Show element if condition met** legyen. Ugyanezt a felugró ablakot ehhez a widgethez is csatolhatod, hogy a felhasználó a „Nem” választásával visszazárhassa a leckét. Ez nem kötelező.

### 7. Átirányítás a leckére

Ha azt szeretnéd, hogy a felhasználó a videó vagy a kép megnyitása után a lecke bejegyzésére lépjen:

- **Gomb widget:** tedd az oldalra a JetElements **Button** (vagy az alap Elementor **Button**) widgetet, és a **Button Link** (vagy **Link**) mezőbe írd a lecke bejegyzésének linkjét.
- **Redirect to Page utóművelet az űrlapon:** nyisd meg a láthatósághoz készült űrlapot, és a **Post-submit Actions / Notification Settings** részen kattints az **Add Notification** gombra. A **Type** legyen **Redirect to Page**, a **Redirect to** mezőben **Custom URL**, az **Redirect URL** mezőbe pedig írd a linket. Kattints az **Apply Changes**, majd az **Update** gombra. JetFormBuilder-űrlapnál a **+ New Action** gombbal vedd fel a **Redirect to Page** műveletet, szerkeszd a ceruza ikonnal, válaszd a **Custom URL** értéket, és add meg az **Redirect URL** címet; majd kattints az **Update** gombra.

## Feloldás a blokkszerkesztőben

A Dinamikus láthatóság a blokkszerkesztő blokkjaira is alkalmazható. Előbb végezd el az Elementoros leírás első lépéseit (bejegyzések vagy bejegyzéstípus, metaboxmező és űrlap).

1. Nyisd meg az oldalt a blokkszerkesztőben. A videó mellett egy rövid JetFormBuilder-űrlap áll, a kért tartalom a „Proceed” gombra kattintás után oldódik fel.
2. Döntsd el, mit akarsz feloldani (szöveg, videó vagy egy egész szakasz), és add hozzá a szükséges blokkot. A példában ez egy gomb a következő videós lecke linkjével.
3. Jelöld ki a blokkot, és kattints a blokk feletti eszköztár szem alakú ikonjára.
4. A felugró ablakban kapcsold be az **Enable** kapcsolót, de előbb ellenőrizd, hogy a **Visibility condition type** értéke **Show element if condition met**.
5. Kattints az **Add new item** gombra, és a **Condition** listában válaszd az **Equal** értéket.
6. A **Field** mezőnél kattints a **Dynamic Tags** gombra, és válaszd a **Custom data** forrást. A **Select data to show** listában válaszd a **JetEngine meta field** lehetőséget, alatta a **Field** listában pedig a korábban létrehozott metabox mezőjét.
7. A **Return** beállítás legyen **Field value**. Ne felejtsd el alkalmazni a beállításokat.
8. A **Value** mezőbe írd be: `yes`.
9. A **Button** blokkban add meg a lecke bejegyzésének linkjét.
10. Hozzáadhatsz további elemeket is ugyanazokkal vagy más feltételekkel. A példában egy lakattal ellátott kép is van a következő lecke indexképével, amely a gombbal együtt jelenik meg.
11. Frissítsd az oldalt, és nézd meg a frontenden: a kép és a második gomb rejtve van. Ha a felhasználó az „Igen” lehetőséget választja, és a „Proceed” gombra kattint, a rejtett elemek láthatóvá válnak.

Ezek a lépések a második lecke eléréséhez valók. A következő leckékhez ismételd meg őket: hozz létre új metamezőt az oldalak metaboxában, űrlapot a további kérdésekkel, felugró ablakot, és csatold a Dinamikus láthatóságot a következő képhez vagy videóhoz, valamint az oldalon az űrlap lehetőségeihez. Így minden leckéhez külön láthatóságot állíthatsz be.

Az általános láthatósági beállításokat a [Dinamikus láthatóság](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-lathatosag/) fejezet írja le.