Simple Javascript as H5P-package

Submitted by mc3330 on Thu, 07/22/2021 - 09:02

Forums:

Hello,

a while ago I asked some questions about h5p at stackoverflow. I found this forum and it seems to be a better place, to ask questions about h5p.

After Oliver Tackes answer on stackoverflow, I watched a lot of videos to understand the dynamics of h5p, but I'm still struggeling to create simple things on my own.

Is it possible to create simple small own apps in H5P? I created a very simple app with java script, css and html.

Is there a way, to create the same thing as a H5P-Package, so that pupils can use it in Moodle? Is H5P the proper software to create something like that?

This is an example programm, I would like to create in H5P.

Are there any turorials about devolping H5P-packeages except the tutorials on h5p.com and the videos from Oliver Tacke on Youtube?

This is a simple example, that I would like to create in H5P:

<!DOCTYPE html><html lang="de">
<head>
<meta charset="utf-8">
<title>Klick auf Schaltfläche</title>
<link rel="stylesheet" href="style.css">
<style>
    input[type=text] {
        border-radius: 5px;
        background: #d0d0d0;
        padding: 0px; 
        width: 10mm;
        height: 6mm;
        border: solid #ccc;
        border-width: 0.3mm;
        border-color: black;
        text-align: center;
        font-size: 17px;
    }
</style>
<script>
    function geklickt()
        {   
            const eingabefeld = document.getElementById("idEingabe");
            const ausgabefeld = document.getElementById("idAusgabe");
            let fehler = 0
            if (eingabefeld.value != zahl-1){
            fehler += 1;
        }
        if (ausgabefeld.value != zahl+1){
            fehler += 1;
        }
        alert(fehler + " Fehler");
        zahl=Math.floor(Math.random() * 99);;
        eingabefeld.value ="";
        ausgabefeld.value ="";
        Zahlfeld.value = zahl;
        falsche = falsche +fehler;
        richtige = richtige +(2-fehler);
        Fehlerfeld.value = falsche;
        Richtigfeld.value = richtige;
    }
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td colspan="3" style="font-weight:bold;">Nachbarzahlen</td>
        </tr>
        <tr>
            <td><input type="text" id="idEingabe"></td>
            <td><input type="text" id="idZahl" disabled></td>
            <td><input type="text" id="idAusgabe"></td>
        </tr>       
        <tr>
            <td colspan="3" style="font-weight:bold;"><input id="idButton" type="button" value="Klicken"></td>
        </tr>
        <tr>
            <td colspan="3" style="font-weight:bold;">Fehler: <input type="text" id="idFehler" disabled></td>
        </tr>
        <tr>
            <td colspan="3" style="font-weight:bold;">Richtig: <input type="text" id="idRichtig" disabled></td>
        </tr>
    <table>
</form>
<script>
    const bu = document.getElementById("idButton");
    const fehler = document.getElementById("idFehler");
    const richtig = document.getElementById("idRichtig");
    bu.addEventListener("click", geklickt);
    let zahl=Math.floor(Math.random() * 99);
    let falsche=0;
    let richtige=0;
    const Zahlfeld = document.getElementById("idZahl");
    const Fehlerfeld = document.getElementById("idFehler");
    const Richtigfeld = document.getElementById("idRichtig");
    Zahlfeld.value = zahl;
    Fehlerfeld.value = falsche;
    Richtigfeld.value = richtige;
</script>
</body>
</html>

otacke

Thu, 07/22/2021 - 20:16

Permalink

Hi!StackOverflow is a site

Hi!

StackOverflow is a site that's mostly for specific questions with a precise scope addressing a particular problem that you have already tried to solve yourself - not for "I need a tutorial about something". So yes, this forum is probably a better place for you.

H5P is just wrapping normal JavaScript into a package so it can be used within the H5P ecosystem.

No, H5P content types do not run on their own per se. But you can use Lumi to run them locally on your computer or convert them into standalone HTML files.

Yes, since H5P is merely wrapping JavaScript, you can do "anything" including your example. Have you had a look at the boilerplate template yet? There's one Hello-World-example for simple content types (https://github.com/h5p/h5p-boilerplate), and in the question-type branch (https://github.com/h5p/h5p-boilerplate/tree/question-type) there's a little more complex example for quiz-like content types.

Best,

Oliver

mc3330

Fri, 07/23/2021 - 09:07

Permalink