Widget-a malperê
Ev rûpel ji Îngilîzî hatiye wergerandin. Heke her du ji hev cuda bin, rûpela Îngilîzî rast e. Rûpela Îngilîzî bixwîne
Li ser malperekê, Lingara wek hêmaneke taybet, <lingara-embed>, dixebite. Hêman temrîna Lingara di çarçoveyeke ku Lingara pêşkêş dike de dikişîne, ji ber vê yekê rûpela te qet daneyên xwendekar nabîne û rûpela Lingara qet yên te nabîne.
Hêmanê bicih bike
@lingara/embed ji npm saz bike, an heke malpera te bundler tune be avakirina wê ya modulê ji CDN-ekê bar bike. Paşê <lingara-embed> têxe ser rûpelê û wê pênase bike. Hêman van digire:
plan-id, plana dersê ya ku were temrînkirin, yeke ku lîstikvan xwedî wê ye;surface, çi nîşan bide:practice, ya pêşdanasîn û tekane rûyê ku heye;theme, yek jilight,darkanauto;locale, zimanê peyvên çarçoveyê bi xwe, ku wekî din li dû xwendekar diçe;title, navê gihîştbar ê çarçoveyê.
Şêwekirin li temayê disekine. Rûpela te nikare bigihîje hundirê çarçoveyê, û tema tekane mîhenga ku ew pêşkêş dike ye.
Tokenan bide wê
tokenProvider-a hêmanê bike fonksiyoneke ku ji servera te bi xwe tokenekê dixwaze. Servera te wê bi origin-a rûpelê çêdike, bi kîta serverê, û bi token û dema qedandina wê bersiv dide. Hêman tokenê bi peyamekê radestî çarçoveyê dike, û ew qet di URL-ê de naçe.
Her origin-a ku widget li ser dixebite berî ku tu ji bo wê tokenê çêkî tomar bike, di mîhengên klientê xwe de di konsolê de. Rûpela kîtên serverê dibêje çawa. API tokeneke ku ji bo origin-eke din hatiye çêkirin red dike, û çarçove li şûna temrînê xeletiyekê nîşan dide.
Kîteke serverê dikare tevahiya parçeyê kodê jî ji te re binivîse, hêman û peydakerê tokenê bi hev re, bi nonce-a skrîpta rûpela te heke siyaseta ewlehiya naveroka te yekê hewce bike. Nimûneya dawî ya li jêr wê nîşan dide.
Guh bide tiştê ku çarçove dibêje
Çarçove bi hêmanê re bi protokoleke peyaman a guhertoyî diaxive, û hêman tiştên ku rûpela te hewce dike dike bûyerên DOM:
lingara:practice-completeddema ku xwendekar komekê temam dike, biplanId,setNumber,correctûtotal-a wê;lingara:errordema ku çarçove radiweste, bicodeûretryable. Xeletiyeke ku dikare dîsa were ceribandin tê wê wateyê ku bicihkirineke nû dibe ku serkeve; kengê dîsa biceribînî biryara te ye.
Encama temrînê jî digihîje servera te, wek ku di encamên temrînê de hatiye ravekirin.
npm install @lingara/embed@0.1.0-alpha.6
# No bundler? One module script instead:
# <script type="module" src="https://cdn.jsdelivr.net/npm/@lingara/embed@0.1.0-alpha.6/dist/lingara-embed.min.js"></script><!-- plan-id is a lesson plan your server made for this player. -->
<lingara-embed surface="practice" plan-id="0b9d4f2e-3c1a-4e8b-9f6d-2a7c5e1b8d40" theme="auto" title="Practice"></lingara-embed>
<script type="module">
import { defineLingaraEmbed } from '@lingara/embed'
defineLingaraEmbed()
</script>// Your own endpoint, on your own server. It mints with this page's origin and
// returns exactly { token, expires_at }: the token (lgr_et_…) never touches a URL.
widget.tokenProvider = async () => {
const response = await fetch('/lingara/token', { method: 'POST', credentials: 'same-origin' })
if (!response.ok) throw new Error(`token endpoint answered ${response.status}`)
return response.json()
}widget.addEventListener('lingara:practice-completed', (event) => {
const { planId, setNumber, correct, total } = (event as CustomEvent).detail
console.log(`set ${setNumber} of ${planId}: ${correct}/${total}`)
})
widget.addEventListener('lingara:error', (event) => {
const { code, retryable } = (event as CustomEvent).detail
// `retryable` means a remount may succeed; when to try is yours to decide.
if (retryable) setTimeout(() => widget.reload(), 30_000)
else console.warn('Lingara practice stopped:', code)
})