Ugrás a tartalomhoz
DESIGNAIR

← Munkáim /Esettanulmány · Weboldal

Virtuális Akadémia

Egyedi WordPress plugin, amely egy LearnDash tananyagot 3D panorámás „mini-metaverzummá" alakít: központi Átrium, négy tanszék-szoba, 24 lecke, EU Útlevél pecsétekkel és Mester Oklevéllel.

Nézd meg élőben ↗ Hasonlót szeretnék
Görgess tovább Hogyan készült?
Virtuális Akadémia – a felület
Típus
Weboldal
Kontextus
A HÖOK a Hallgatókért Alapítvány és a Marosvásárhelyi Magyar Diákszövetség közös, Erasmus+ támogatású projektje.
Szerepem
Tervezés és fejlesztés – egyedi WordPress plugin
Technológia
WordPress · LearnDash · 3D panoráma · Ultimate Member

  • 4

    tanszék-szoba (LearnDash kurzus)

  • 24

    lecke

  • 1

    központi Átrium

  • 16+

    korhatár-kapu

A kiindulás

Miről volt szó?

A tananyag – demokrácia, érdekérvényesítés, az Európai Unió és a civil szektor – szerkezetét a LearnDash adja: kurzusok, leckék, kvízek. A feladat az volt, hogy ez a megszokott, száraz tanfolyam-felület helyett egy bejárható térben jelenjen meg, ahová az ember szívesen belép.

Ugyanakkor egy támogatott projektről van szó, ezért a játékosság mellett komoly követelmények is voltak: a teljes élmény csak bejelentkezve érhető el, a résztvevőktől a projekthez kötött adatot kell bekérni, és a rendszernek követnie kell a haladást, a pecséteket és az okleveleket.

Amit tudnia kellett

  • Egy központi Átrium, onnan nyíló négy tanszék-szoba – mindegyik egy LearnDash kurzus
  • Pulzáló hotspotok a 3D panorámán, amelyek a leckékhez vezetnek
  • Szobánkénti háttérhang, némítási lehetőséggel
  • „EU Útlevél": pecsétek a teljesített tanszékekért, Mester Oklevél a négy után
  • HUD: minimap, onboarding, némítás, teljes képernyő
  • Nyilvános kezdőlap és regisztráció, a teljes élmény csak bejelentkezve
  • Bővített résztvevői adatbekérés és korhatár-kapu (16+)
  • Magyar nyelvű felület (LearnDash és Ultimate Member)

A megoldás

Amit építettem

A megoldás egy egyedi WordPress plugin, amely a LearnDash fölé épít egy 3D panoráma alapú „mini-metaverzumot". A látogató egy központi Átriumban indul, onnan nyílik a négy tanszék-szoba; mindegyik egy-egy LearnDash kurzus, a leckékhez pulzáló hotspotok vezetnek. Szobánként más háttérhang szól, a HUD pedig – minimap, onboarding, némítás, teljes képernyő – segít eligazodni.

A haladást az „EU Útlevél" gyűjti: a teljesített tanszékekért pecsét jár, mind a négy után Mester Oklevél. A LearnDash lecke-oldalait külön réteg igazítja a közös dizájnrendszerhez (mély EU-kék, arany és cián tónus, üvegpanelek), így a térben és a leckékben ugyanaz a hang és megjelenés fogadja a látogatót.

A hozzáférést az Ultimate Member kezeli: a kezdőlap (rövid ismertetővel, beágyazott belépéssel és regisztrációval) nyilvános, a Metaverzum oldal csak bejelentkezve érhető el. A regisztráció a projekthez kötött, bővített résztvevői űrlap korhatár-kapuval; az adminban a résztvevők CSV-be exportálhatók.

  • 01

    Átrium és négy tanszék-szoba

    A központi Átriumból nyílik a négy tanszék: Demokrácia, Érdekérvényesítés, Európai Unió és Civil szektor – mindegyik egy-egy LearnDash kurzus.

  • 02

    3D panorámák és hotspotok

    Pannellum.js alapú, bejárható panorámák; a leckékhez pulzáló hotspotok vezetnek.

  • 03

    Szobánkénti hang

    Minden szobának saját háttérhangja van, amely a HUD-on némítható.

  • 04

    HUD

    Minimap, onboarding, némítás és teljes képernyő – hogy a térben senki ne vesszen el.

  • 05

    EU Útlevél

    Pecsétek a teljesített tanszékekért, Mester Oklevél a négy teljesítése után: a haladás látható és gyűjthető.

  • 06

    Hozzáférés-kezelés

    Nyilvános kezdőlap és regisztráció; a teljes élmény csak bejelentkezve. Ultimate Member alapú tartalomzár, site-szintű kapuval megerősítve.

  • 07

    Bővített regisztráció

    A projekthez kötött résztvevői adatbekérő űrlap korhatár-kapuval (16+), az adatok adminból CSV-ben exportálhatók.

  • 08

    LearnDash-integráció

    Haladáskövetés, a lecke befejezése utáni átirányítás, tanúsítvány és magyar fordítások, a kvíz-felületek a közös dizájnban.

  • 09

    Egységes dizájnrendszer

    A metaverzum és a lecke-oldalak ugyanazt a vizuális nyelvet beszélik.

  • 10

    Telefonon is

    A platform számítógépen és mobilon is használható.

Technológia

Mi fut a háttérben?

  • WordPress

    Az egyedi plugin alapja: PHP 8.1+, PSR-4 szerkezet, explicit hook-regisztráció.

  • LearnDash

    Kurzusok, leckék, kvízek, tanúsítvány – kiegészítőkkel (integritás, jutalmak, tanúsítvány-szerkesztő, értesítések).

  • Ultimate Member

    Belépés, regisztráció és tartalomzár.

  • Pannellum.js

    A 3D panorámák; a repóban vendorolva, a bundleren kívül.

  • Vite 5 és SCSS

    Két belépési pont (metaverzum, lecke-oldalak), közös dizájnrendszer.

  • bbPress

    A fórum a közösségi réteghez.

  • Duplicator Pro

    A teljes telepítés exportja migrációhoz és átadáshoz.

Hogyan közelítem

Amire az ilyen projekteknél figyelek

01

Az LMS fölé építek, nem helyette

A LearnDash adja a tartalmat és a haladást, az egyedi réteg erre épül. Ezért az integrációt külön, jól körülhatárolt modulokba szerveztem (LearnDash, Ultimate Member).

02

Átlátható szerkezet

A hook-feliratkozásokat explicit regisztrálom, a függőségeket induláskor ellenőrzöm, a telepítő lépések idempotensek: egy új környezet felhúzása nem kockázat.

03

Kétszeres zár

A Metaverzum oldalt az Ultimate Member tartalomzára védi, emellett site-szintű kapu is van: ha az egyik elmarad, a másik tart.

04

Gyors betöltés

A frontend két belépési pontra bontva épül, a Pannellum a bundleren kívül van: a lecke-oldalak nem töltik le a metaverzum kódját.

05

Átadhatóság

Teljes telepítés exportja Duplicator Pro-val; az architektúra, a fázisterv és az aktuális állapot dokumentálva van a kódbázisban.

Eredmény

Mi lett belőle?

A platform él: a látogató a nyilvános kezdőlapról regisztrálhat, majd belépve bejárhatja az Átriumot és a négy tanszéket, végigmehet a 24 leckén, pecséteket gyűjthet az EU Útlevélbe, és Mester Oklevelet kaphat.

A projekt dokumentációja – architektúra, fázisterv, állapotjegyzék – a kódbázissal együtt él, a plugin verziózott, ezért egy későbbi átadás vagy továbbfejlesztés nem a nulláról indul.

Nézd meg élőben ↗

További esettanulmányok

Kapcsolat

Hasonlót szeretnél?

Írd meg két mondatban, mit szeretnél építeni vagy rendbe tenni. Megnézem, és őszintén megmondom, hogyan látom.

[email protected] +36 30 731 6893

Kíváncsi vagy, mit építettem? Nézd meg a munkáimat →

Nincs kötelezettség. Az adataidat bizalmasan kezelem.

Hívás