Web-aplikacija za ponovnu uporabu interaktivnog sadržaja u obliku H5P

undergraduate thesis

• Title (english): Web Application for H5P Interactive Content Reuse
• Author: Luka Dumančić
• Mentor: Ivana Bosnić (mentor)
• Committee member: Ivana Bosnić (predsjednik povjerenstva)
• Committee member: Branimir Pervan (član povjerenstva)
• Committee member: Emanuel Guberović (član povjerenstva)
• Granter: University of Zagreb; Faculty of Electrical Engineering and Computing; Zagreb
• Defense date and country: 2020-07-14, Croatia
• Scientific / art field, discipline and subdiscipline: TECHNICAL SCIENCES; Computing

Abstract

Ovaj završni rad proučava radni okvir otvorenoga kôda H5P, namijenjen kreiranju, dijeljenju i ponovnom korištenju sadržaja za web-stranice. Njegova integracija sa sustavom Moodle je zanimljiva, jer otvara puno mogućnosti za profesore u Hrvatskoj i svijetu za korištenje i izmjenu sadržaja unutar iste zajednice.
Postoje različite vrste sadržaja u obliku H5P, no u ovom radu je opisana prezentacija u obliku H5P koja u sebi sadrži različite direktorije (H5P.paket, content i content.json, h5p.json i Javascript dokumente). Ono što ovaj projekt najviše promatra jest content i content.json. Izmjenom dokumenta content.json, postiže se da prezentacija drugačije izgleda u web-pregledniku.
Rad opisuje izvedbu web-aplikacije za prikaz, uređivanje i spajanje prezentacija napisanih u obliku H5P. Web-aplikacija je kreirana koristeći tri odvojena programa koja međusobno komuniciraju. Ono što korisnici vide u web-pregledniku, klijentska aplikacija, kreirana je koristeći React i Redux. Uz pomoć Redux persist paketa, nakon korištenja web-aplikacije, korisnikov rad ostaje spremljen u memoriji web-preglednika.
Klijentska aplikacija, kao “Single page application” komunicira s pozadinskim poslužiteljem prilikom unosa i izmjene sadržaja prezentacije. Pozadinski poslužitelj je kreiran uz pomoć NodeJS-a koji kreira ExpressJS poslužitelj. Na zahtjev klijentske strane aplikacije, pozadinski poslužitelj kreira slike prikaznica pozivajući H5P-poslužitelj uz pomoć Puppeteer preglednika bez sučelja. H5P poslužitelj služi kao pomoćni program i on nije dio vlastite implementacija već se koristi nadograđeno rješenje.
Korisnik web-aplikacije može unositi nove prezentacije, nadograđivati ih, uređivati, mijenjati poredak prikaznica, brisati prikaznice i dohvaćati novokreirane prezentacije. Kombinirajući kreiranu web-aplikaciju s drugim aplikacijama za obradu prezentacija u obliku H5P, korisnik može dobiti zadovoljavajuće rezultate obrade prezentacija.

Abstract (english)

This final paper examined the H5P open-source framework, designed to create, share, and reuse content for web pages. Its integration with the Moodle system is interesting because it opens up a lot of opportunities for professors in Croatia and the world to use and modify content within the same community.
There are different types of content in the form of H5P. In this paper is described the presentation in the form of H5P which contains different directories (H5P.package, content and content.json, h5p.json and Javascript documents). What this project looks at the most is content.json. By modifying the content.json document, the presentation looks different in a web browser.
The paper described web applications for viewing, editing, and merging presentations written in H5P format. The web application is created using three separate programs that communicate with each other. What users see in a web browser, a client application, is created through React and Redux. With the help of Redux, persistent packages are used after using web applications, and user work remains stored in memory web browsers.
The client application, as a “single-page application,” communicates with the background server when changes and changes to the content of presentations. The background server is created using NodeJS which creates the ExpressJS server. At the request of clients with other applications, the background server creates images of the displayed H5P server calls with the help of Puppeteer preview. The H5P server serves as a utility and is not part of its own implementation but uses an upgraded solution.
The user of the web application can enter new presentations, upgrade them, edit, change the display order, delete the display, and retrieve the newly created presentations. By combining the created web application with other H5P presentation processing applications, the user can get satisfactory presentation processing results.

• Keywords: h5p; h5ml5; javascript; web; ponovna; upotreba; interaktivnog; sadržaja
• Keywords (english): h5p; h5ml5; javascript; web; reuse; interactive; content
• Language: croatian
• URN:NBN: urn:nbn:hr:168:564052
• Study programme: Title: Computing; Study programme type: university; Study level: undergraduate; Academic / professional title: sveučilišni/a prvostupnik/ prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka računarstva (sveučilišni/a prvostupnik/ prvostupnica (baccalaureus/baccalaurea) inženjer/inženjerka računarstva)
• Type of resource: Text
• File origin: Born digital
• Access conditions: Closed access
• Created on: 2023-01-14 08:43:00