<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning Resource Metadata Editor</title>
    <meta name="author" content="Bruno Wenk (based on https://cssdeck.com/labs/forms-validation-styling-semantics)">
    <meta name="date" content="2020-11-02">
    
    <script type="application/ld+json">
        {
        "@context" : "http://schema.org/",
        "@type" : "LearningResource",
        "name" : "Learning Resource Metadata Editor",
        "learningResourceType" : "web_page",
        "description" : "The Learning Resource Metadata Editor is an interactive web page intended to support creators of OER in the set up of appropriate metadata.
        The Learning Resource Metadata Editor provides a practical subset of the LRMI (Learning Resource Metadata Initiative) standard metadata elements and is simple to use.
        The generated metadata block is based on the schema.org vocabulary and formulated in JSON-LD syntax. The block can be transferred into the corresponding webpage or e-book by copy&paste.",
        "author" : {
            "@type": "Person",
            "name": "Bruno Wenk"
            },
        "inLanguage" : "en",
        "license" : "https://creativecommons.org/publicdomain/zero/1.0/",
        "url" : "http://purl.org/bwe/metadataeditor",
        "url" :  https://doi.org/10.5281/zenodo.4266377",
        "audience" : "teachers, librarians",
        "interactivityType" : "active",
        "keywords" : "open educational resources, metadata, semantic web, schema.org, web app",
        "dateCreated" : "2020-11-02"
        }
    </script>
    
	<style>
        html, body { height:100%; }

        /* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
        body{ min-width:960px; color:#444; background-color:#F1F1F1; font-size:12px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; }

        html, body, div, span, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
        small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section, summary,
        time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline; }

        small { font-size:0.9em; }

        section { display:block; }
        
        svg { width: 100%; height: auto; }

        h1 { font-size:2em; margin:0 0 10px 0; }
        button { cursor:pointer; }
        p { padding:5px 0; }
        
        #wrap { padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
        
        .grd2columns { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; align-items: center; }
        .grdcolumn1 { grid-column-start: 0; grid-column-end: 1; }
        .grdcolumn2 { grid-column-start: 1; grid-column-end: 2; }
        
        .grid3columns { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 20px; align-items: center; }
        .gridcolumn1 { grid-column-start: 0; grid-column-end: 1; }
        .gridcolumn2 { grid-column-start: 1; grid-column-end: 2; }
        .gridcolumn3 { grid-column-start: 2; grid-column-end: 3; }
        
        input { border:1px solid #D1D1D1; padding:3px 4px; width:420px; }
        textarea { border:1px solid #D1D1D1; padding:3px 4px; width:420px; min-height:40px;}
        input:focus, textarea:focus { border-color:#AAA; }
        
        .tooltip { position: relative; display: inline-block; height:16px; width:16px; line-height:16px; 
                   font-size:0.9em; font-weight:bold; text-align:center; color: white; cursor:help;
                   background-color:#0000bb; border-radius:10px; }
        .tooltip .tooltiptext { visibility: hidden; width: 280px; background-color: #0000bb; color: #fff;
                                text-align: center; border-radius: 6px; padding: 5px 0;
                                /* Position the tooltip */
                                position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; }
        .tooltip:hover .tooltiptext { visibility: visible; }
        
        .btn { margin:5px; font-size:1.1em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; }
        .btn:hover{ background:#0068BA; }
        
        .result {margin-top: 2em; border-width:2px; border-style:inset; padding: 10px;}

	</style>
    
    <script>
        var contribCounter = 1;
        var contribLimit = 3;
        var keywordCounter = 1;
        var keywordLimit = 20;
        
        function addContributor () {
            if (contribCounter < contribLimit) {
                var parentNode = document.getElementById("section2-grid3");
                var contribID = "contributor-" + contribCounter;
                var refNode = document.getElementById(contribID);
                contribCounter++;
                var newContribInputID = "contribInput-" + contribCounter;
                var contribID = "contributor-" + contribCounter;
                var contributorID = "contributor" + contribCounter;
                var newInputEle = document.createElement('div');
                newInputEle.setAttribute('class','gridcolumn2');
                newInputEle.setAttribute('id',newContribInputID);
                newInputEle.innerHTML = '<input name="contributor" id="' + contributorID + '" type="text" />';
                parentNode.insertBefore(newInputEle,refNode);
                var refNode = document.getElementById(newContribInputID);
                var newContributor = document.createElement('div');
                newContributor.setAttribute("class", "gridcolumn1");
                newContributor.setAttribute("id", contribID);
                newContributor.innerHTML = 'Contributor';
                parentNode.insertBefore(newContributor,refNode);
            }
            else alert('Sorry, maximal ' + contribLimit + ' contributors allowed ;-(');
        }
        
        function generateMetadata () {
            var missingRequiredCounter = 0;
            var parentNode = document.getElementById("resultOutput");
            var refNode = document.getElementById("beginMetadata");
            
            /*name (title)*/
            var nextItem = document.getElementById("Title");
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "name" : "' + nextItem.value + '",';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*learningResorceType*/
            nextItem = document.getElementById("learningResourceType");
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "learningResourceType" : "' + nextItem.value + '",';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*description*/
            nextItem = document.getElementById("description");
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "description" : "' + nextItem.value + '",';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*author -> text only (not type Person)*/
            nextItem = document.getElementById("author");
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "author" : { "@type": "Person", "name": "' + nextItem.value + '" },';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*language*/
            nextItem = document.getElementById("inLanguage");
            var language = nextItem.value;
            if (language.includes("German")) {language = "de"}
                else if (language.includes("French")) {language = "fr"}
                else if (language.includes("Italian")) {language = "it"}
                else if (language.includes("Romansh")) {language = "rm"}
                else if (language.includes("English")) {language = "en"};
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "inLanguage" : "' + language + '",';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*license*/
            nextItem = document.getElementById("license");
            var license = nextItem.value;
            if (license.includes("(CC0)")) {license = "https://creativecommons.org/publicdomain/zero/1.0/"}
                else if (license.includes("(CC BY)")) {license = "https://creativecommons.org/licenses/by/4.0/"}
                else if (license.includes("(CC BY-NC)")) {license = "https://creativecommons.org/licenses/by-nc/4.0/"};
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "license" : "' + license + '",';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            if (nextItem.value == "") missingRequiredCounter++;
            refNode = newDataEle;
            
            /*url*/
            nextItem = document.getElementById("URL");
            urlString = nextItem.value;
            var res = urlString.match(/((http|https)\:\/\/)?[a-zA-Z0-9\.\/\?\:@\-_=#]+\.([a-zA-Z0-9\&\.\/\?\:@\-_=#])*/g);
            if (res === null) {
                urlString = ""; alert ("Error: Invalid resource URL!");
                missingRequiredCounter++;
            }
            var newDataEle = document.createElement('pre');
            newDataEle.innerHTML = '  "url" : "' + urlString + '"';
            parentNode.insertBefore(newDataEle, refNode.nextSibling);
            refNode = newDataEle;
            
            /*are any required fields empty?*/
            if (missingRequiredCounter > 0) alert("Warning: " + missingRequiredCounter + " mandatory field(s) empty!");
            
            /*----------------*/
            
            /*audience*/
            nextItem = document.getElementById("audience");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "audience" : "' + nextItem.value + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
            
            /*interactivityType*/
            nextItem = document.getElementById("interactivityType");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "interactivityType" : "' + nextItem.value + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
            
            /*keyword(s)*/
            nextItem = document.getElementById("keywords");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "keywords" : "' + nextItem.value + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
            
            /*contributor(s) -> text only (not type Person)*/
            var allContributors = document.getElementsByName("contributor");
            if (allContributors[0].value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
            }
            var i;
            for (i = allContributors.length-1; i >= 0; i--) {
                if (allContributors[i].value !== "") {
                    var newDataEle = document.createElement('pre');
                    newDataEle.innerHTML = '  "contributor" : "' + allContributors[i].value + '"';
                    parentNode.insertBefore(newDataEle, refNode.nextSibling);
                    refNode = newDataEle;
                }
            }
            
            /*reference*/
            nextItem = document.getElementById("reference");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var urlString = nextItem.value;
                var res = urlString.match(/((http|https)\:\/\/)?[a-zA-Z0-9\.\/\?\:@\-_=#]+\.([a-zA-Z0-9\&\.\/\?\:@\-_=#])*/g);
                if (res === null) {
                    urlString = ""; alert ("Error: Invalid Reference URL!");
                }
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "reference" : "' + urlString + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
            
            /*dateCreated*/
            nextItem = document.getElementById("dateCreated");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var dateString = nextItem.value;
                var res = dateString.match(/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/g);
                if (res === null) {
                    dateString = ""; alert ("Error: Invalid Creation Date!");
                }
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "dateCreated" : "' + dateString + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
            
            /*dateModified*/
            nextItem = document.getElementById("dateModified");
            if (nextItem.value !== "") {
                refNode.innerHTML = refNode.innerHTML + ",";
                var dateString = nextItem.value;
                var res = dateString.match(/(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/g);
                if (res === null) {
                    dateString = ""; alert ("Error: Invalid Modification Date!");
                }
                var newDataEle = document.createElement('pre');
                newDataEle.innerHTML = '  "dateModified" : "' + dateString + '"';
                parentNode.insertBefore(newDataEle, refNode.nextSibling);
                refNode = newDataEle;
            }
        }
    </script>
    
</head>
<body>
    
	<div id='wrap'>
        
        <section>
            <div class="grd2columns">
                <div class="grdcolumn1">
                    <h1>&nbsp;</h1>
                    <h1>Learning Resource Metadata Editor</h1>
                    <small>Version 1</small>
                </div>
                <div class="grdcolumn2">
                    <!-- OER Logo, Quelle: https://commons.wikimedia.org/wiki/File:OER_Logo.svg -->
                    <svg viewBox="0 0 1211 371"
                        xmlns:dc="http://purl.org/dc/elements/1.1/"
                        xmlns:cc="http://creativecommons.org/ns#"
                        xmlns:svg="http://www.w3.org/2000/svg"
                        xmlns="http://www.w3.org/2000/svg"
                        id="svg3137" version="1.1">
                        <defs id="defs3141" />
                        <path
                            style="fill:#227c3a;fill-opacity:1"
                            d="M 9.9338852,368.88056 C 0.83012518,364.06488 0.02779518,360.99065 7.8518215e-4,330.82092 -0.02361482,303.51756 0.48324518,300.90311 6.8381052,295.55585 c 9.4000898,-7.90965 26.3412798,-5.1521 31.7765998,5.17235 2.24894,4.27189 2.32023,5.18128 2.32023,29.60078 0,16.14585 -0.408,26.41424 -1.13607,28.59272 -1.45321,4.34815 -5.4757,8.76549 -9.58182,10.52238 -4.71064,2.01555 -16.00054,1.70188 -20.2831598,-0.56352 z M 25.734935,357.62092 c 0.86995,-0.86995 1.2,-8.14295 1.2,-26.4433 0,-24.95208 -0.0256,-25.26125 -2.22251,-26.8 -3.03146,-2.12332 -6.37999,-1.9542 -8.77749,0.4433 -1.89084,1.89084 -2,3.33333 -2,26.42857 0,20.87446 0.22862,24.6572 1.57142,26 1.85221,1.85221 8.50617,2.09383 10.22858,0.37143 z m 318.699995,11.78264 c -3.93831,-1.7579 -7.94856,-6.24692 -9.36394,-10.48186 -0.75332,-2.25404 -1.13606,-14.14898 -1.13606,-35.3075 l 0,-31.90828 4.25,0.3075 4.25,0.3075 0.5,32.5 c 0.35074,22.79837 0.86173,33.13071 1.71178,34.61285 2.64082,4.6045 12.14607,5.63574 16.40664,1.77998 3.35322,-3.03462 3.87031,-8.26426 3.876,-39.20033 l 0.006,-30.3075 4.25,0.3075 4.25,0.3075 0,32 0,32 -2.5,5 c -3.40192,6.80384 -8.21019,9.47509 -17,9.44441 -3.575,-0.0125 -7.85,-0.62528 -9.5,-1.36177 z m 54,0.006 c -9.76585,-4.34047 -14.01519,-17.67829 -13.30237,-41.75344 0.5027,-16.97824 2.31628,-23.86506 7.97871,-30.29791 6.21795,-7.06397 16.82953,-8.46116 24.60059,-3.23908 3.94244,2.64929 8.27487,10.98199 8.98484,17.28085 l 0.51281,4.54963 -4.36468,-0.3142 c -4.27366,-0.30766 -4.37943,-0.40124 -5.0721,-4.48781 -1.46615,-8.65012 -4.788,-12.32668 -11.1372,-12.32668 -4.29165,0 -8.26844,3.03289 -10.28313,7.84239 -3.90811,9.3295 -3.62129,40.38709 0.45814,49.60932 3.00352,6.78994 9.72096,9.35963 15.99109,6.11722 3.18931,-1.64925 5.72701,-6.95209 6.63901,-13.87304 l 0.63306,-4.8041 4.16593,0.3041 4.16594,0.30411 -0.32005,4.36443 c -0.68133,9.29103 -5.32244,17.56564 -11.49527,20.49484 -4.17514,1.98124 -13.93595,2.1044 -18.15532,0.22909 z m 162,0.24955 c -10.35868,-5.70386 -15.53762,-21.88959 -14.16374,-44.26595 1.29306,-21.06009 7.34735,-31.95469 18.95367,-34.10678 9.39058,-1.74124 18.67909,4.94823 22.1374,15.94308 2.52899,8.04034 3.5621,22.06514 2.4758,33.61011 -1.48008,15.73009 -6.11464,25.50075 -13.57432,28.6176 -3.89811,1.62874 -13.02614,1.74519 -15.82881,0.20194 z m 13.74907,-7.81919 c 1.38533,-1.0897 3.24469,-3.79548 4.1319,-6.01283 2.30445,-5.75939 3.90945,-22.06196 3.151,-32.00589 -1.31035,-17.17979 -5.47655,-25 -13.31868,-25 -5.17776,0 -8.68489,3.48499 -10.97213,10.90287 -2.47257,8.01897 -2.46045,35.21299 0.0193,43.26057 2.97096,9.64176 10.80048,13.72288 16.98863,8.85528 z m 303.75144,7.85783 c -5.62,-2.241 -10.1719,-8.84018 -11.4686,-16.62655 l -0.7077,-4.25 3.9692,0 c 3.8799,0 3.9951,0.10296 5.1224,4.58 1.9418,7.71172 7.2483,11.36221 14.5305,9.99605 5.02,-0.94203 8.5537,-5.57001 8.5537,-11.20272 0,-7.6136 -2.8935,-11.2654 -17.183,-21.68599 -9.09,-6.62885 -12.9811,-12.39065 -13.5621,-20.08213 -0.9818,-12.99762 11.087,-22.28952 24.1869,-18.62178 7.2387,2.0267 13.5582,10.43734 13.5582,18.04454 0,2.94866 -0.1698,3.07805 -3.6512,2.78212 -3.4085,-0.28974 -3.7416,-0.62188 -5.0118,-4.99707 -1.7641,-6.07638 -5.1952,-8.8133 -11.0488,-8.8133 -3.5763,0 -5.0118,0.5697 -7.3651,2.92308 -6.0929,6.09284 -2.8891,14.63471 8.3468,22.25442 8.8473,5.99986 15.7259,12.67343 17.8546,17.3225 4.5579,9.95423 1.2087,22.81171 -7.0845,27.19726 -4.7193,2.4956 -14.2569,3.08635 -19.0395,1.17929 z m 49.2797,-0.8472 c -8.8368,-5.38835 -12.739,-17.0696 -12.7038,-38.02963 0.046,-27.10327 6.9387,-39.47965 21.9969,-39.49415 12.9899,-0.0125 19.1496,8.73497 21.53,30.57514 2.4743,22.70184 -3.4784,43.25301 -13.7745,47.55498 -4.8598,2.03055 -13.2108,1.7334 -17.0486,-0.60662 z m 15.7091,-7.86483 c 1.5595,-1.55951 3.5304,-5.17552 4.3798,-8.03558 3.4202,-11.5172 2.9464,-37.34277 -0.8518,-46.43331 -2.0105,-4.81191 -5.9513,-7.69591 -10.5158,-7.69591 -7.9503,0 -11.7136,8.02739 -12.6577,27 -0.9363,18.81337 1.9773,32.30982 7.8653,36.43392 3.599,2.52083 8.5203,1.99053 11.7802,-1.2694 z m 35.5107,7.56875 c -2.7929,-1.55954 -4.7544,-3.74239 -6.5,-7.23355 l -2.5,-5 0,-32 0,-32 4.25,-0.3075 4.25,-0.3075 0.01,30.3075 c 0.01,30.93607 0.5228,36.16571 3.876,39.20033 2.5957,2.34908 8.46704,3.11964 12.14904,1.59448 6.16902,-2.55527 6.43592,-4.09951 6.78292,-39.23731 l 0.3135,-31.75 3.9365,0 3.9365,0 -0.076,32.25 c -0.077,32.7578 -0.344,35.43078 -4.0489,40.57978 -4.5045,6.26017 -18.45672,8.32523 -26.37506,3.90377 z m 108.00006,1.10436 c -4.3087,-2.3725 -8.5937,-7.47249 -10.4524,-12.44016 -2.8517,-7.62204 -4.4107,-21.37608 -3.6721,-32.39775 1.4664,-21.88406 7.6611,-32.15108 20.3017,-33.64817 9.8101,-1.16187 17.5066,4.62339 20.7265,15.57967 2.487,8.46235 2.3063,9.0685 -2.7036,9.0685 l -4.2999,0 -1.2118,-5.86653 c -1.6334,-7.90846 -4.6563,-11.1409 -10.3907,-11.11123 -7.4549,0.0386 -10.9491,4.67847 -12.9014,17.13176 -1.3202,8.42075 -0.6101,31.18262 1.1636,37.29908 1.6249,5.60374 6.8342,10.55091 11.0901,10.53218 1.8425,-0.008 4.475,-0.57214 5.85,-1.2534 3.3831,-1.67622 7,-9.13923 7,-14.44375 l 0,-4.28811 4.5,0 c 4.4293,0 4.5,0.0521 4.5,3.3185 0,9.10447 -5.9087,19.49193 -12.7023,22.33046 -3.8708,1.61732 -13.9968,1.73123 -16.7977,0.18895 z m 95.5005,0.0386 c -5.62,-2.241 -10.1719,-8.84018 -11.4686,-16.62655 l -0.7077,-4.25 3.9692,0 c 3.8799,0 3.9951,0.10296 5.1224,4.58 1.9419,7.71172 7.2483,11.36221 14.5305,9.99605 5.02,-0.94175 8.5537,-5.56973 8.5537,-11.20244 0,-7.6136 -2.8935,-11.2654 -17.183,-21.68599 -9.09,-6.62885 -12.9811,-12.39065 -13.5621,-20.08213 -0.9818,-12.99762 11.087,-22.28952 24.1869,-18.62178 7.2387,2.0267 13.5582,10.43734 13.5582,18.04454 0,2.94866 -0.1698,3.07805 -3.6512,2.78212 -3.4085,-0.28974 -3.7416,-0.62188 -5.0118,-4.99707 -1.764,-6.07638 -5.1952,-8.8133 -11.0488,-8.8133 -3.5763,0 -5.0117,0.5697 -7.3651,2.92308 -6.0929,6.09284 -2.8891,14.63471 8.3468,22.25442 8.8474,5.99986 15.7259,12.67343 17.8547,17.3225 4.5578,9.95423 1.2086,22.81171 -7.0846,27.19726 -4.7193,2.4956 -14.2569,3.08635 -19.0395,1.17929 z M 53.173185,331.07092 l 0.26175,-38.75 13.5,0.012 c 8.60447,0.008 14.86908,0.4921 17.2754,1.33594 9.229028,3.23638 13.322708,10.93421 12.513748,23.5311 -0.90731,14.12832 -5.71701,18.98665 -20.664388,20.87336 l -9.12476,1.15176 0,15.29792 0,15.29792 -7.01175,0 -7.01174,0 0.26174,-38.75 z m 27.3072,-6.70455 c 2.10951,-2.1095 2.45455,-3.38103 2.45455,-9.04545 0,-5.66442 -0.34504,-6.93595 -2.45455,-9.04545 -2.0159,-2.0159 -3.44557,-2.45455 -8,-2.45455 l -5.54545,0 0,11.5 0,11.5 5.54545,0 c 4.55443,0 5.9841,-0.43865 8,-2.45455 z m 27.454545,6.45455 0,-39 18,0 18,0 0,6 0,6 -11,0 -11,0 0,10 0,10 8.5,0 8.5,0 0,6 0,6 -8.5,0 -8.5,0 0,10.96826 0,10.96827 11.75,0.28173 11.75,0.28174 0.2999,5.75 0.29991,5.75 -19.04991,0 -19.0499,0 0,-39 z m 48,0 0,-39 6.39492,0 6.39491,0 5.78172,15.75 c 3.17995,8.6625 6.80524,18.45 8.05621,21.75 l 2.27448,6 0.0489,-21.79772 0.0489,-21.79771 6.25,0.29771 6.25,0.29772 0.26174,38.75 0.26175,38.75 -6.2689,0 -6.26889,0 -8.18649,-23.25 -8.18649,-23.25 -0.0564,23.25 -0.0564,23.25 -6.5,0 -6.5,0 0,-39 z m 79,-0.0231 0,-39.02308 17.75,0.27308 17.75,0.27307 0,3.5 0,3.5 -13.75,0.27822 -13.75,0.27822 0,12.97178 0,12.97178 10,0 10,0 0,3.5 0,3.5 -10,0 -10,0 0,15 0,15 14.5,0 14.5,0 0,3.5 0,3.5 -18.5,0 -18.5,0 0,-39.02307 z m 46,0.0231 0,-39 8.45078,0 c 13.29493,0 18.22537,1.43237 23.70128,6.88561 6.91738,6.88874 8.34794,12.47775 8.34794,32.61439 0,18.11336 -1.39421,24.48962 -6.78473,31.02926 -4.89862,5.94287 -9.36325,7.4232 -22.46527,7.44878 l -11.25,0.022 0,-39 z m 23.9031,29.24236 c 1.4283,-1.05574 3.7219,-3.90466 5.0969,-6.33094 2.41107,-4.25449 2.5,-5.05268 2.5,-22.43811 0,-17.26706 -0.10535,-18.2313 -2.5,-22.88202 -3.11658,-6.05279 -7.47021,-8.59129 -14.7344,-8.59129 l -5.2656,0 0,31.63889 0,31.63889 6.1531,-0.55795 c 3.7595,-0.3409 7.16331,-1.30465 8.75,-2.47747 z m 129.0969,9.06435 c 0,-0.8921 15.89645,-73.23596 16.60242,-75.55671 0.42701,-1.40368 1.67734,-1.75 6.31818,-1.75 l 5.78582,0 8.28528,37.75 c 4.5569,20.7625 8.4961,38.3125 8.75378,39 0.33175,0.88514 -0.85552,1.25 -4.06759,1.25 l -4.53609,0 -1.15882,-5.75 c -0.63734,-3.1625 -1.69114,-8.225 -2.34176,-11.25 l -1.18294,-5.5 -9.63875,-0.28512 -9.63874,-0.28512 -1.02285,4.78512 c -0.56256,2.63182 -1.58103,7.82262 -2.26324,11.53512 l -1.2404,6.75 -4.32715,0 c -2.37993,0 -4.32715,-0.31198 -4.32715,-0.69329 z m 31,-30.16322 c 0,-1.42331 -7.78579,-38.26261 -8.16721,-38.64403 -0.19482,-0.19482 -2.19913,8.6131 -4.45402,19.57316 l -4.0998,19.92738 8.36052,0 c 4.59828,0 8.36051,-0.38543 8.36051,-0.85651 z m 28,-4.14349 0,-35 -8,0 -8,0 0,-4.02071 0,-4.0207 20.25,0.2707 20.25,0.27071 0,3.5 0,3.5 -7.75,0.29206 -7.75,0.29207 0,34.95793 0,34.95794 -4.5,0 -4.5,0 0,-35 z m 33,-4 0,-39 4.5,0 4.5,0 0,39 0,39 -4.5,0 -4.5,0 0,-39 z m 75,0 0,-39 6.75,0.006 6.75,0.006 9.5,27.38998 9.5,27.38999 0.5,-27.14569 0.5,-27.14568 4.25,-0.3075 4.25,-0.3075 0,39.11229 0,39.11229 -4.70063,-0.30479 -4.70063,-0.30539 -11.54937,-32.36802 -11.54937,-32.36803 -0.26366,32.61803 -0.26367,32.61802 -4.48633,0 -4.48634,0 0,-39 z m 50,38.64661 c 0,-0.34356 15.44773,-70.89827 16.50785,-75.39661 0.47686,-2.02343 1.13252,-2.25 6.51116,-2.25 3.2896,0 5.981,0.20672 5.981,0.45938 0,0.397 15.0763,69.13796 16.5128,75.29062 0.4836,2.07137 0.1768,2.25 -3.8638,2.25 l -4.389,0 -2.26,-11.5 -2.26,-11.5 -9.74,0 -9.74002,0 -2.25999,11.5 -2.25999,11.5 -4.37,0 c -2.40351,0 -4.37001,-0.15903 -4.37001,-0.35339 z m 31.01691,-30.39661 c 0.045,-2.0067 -7.5709,-38.25 -8.0378,-38.25 -0.5318,0 -8.0108,35.33616 -7.98992,37.75 0.008,0.89493 2.28324,1.25 8.01082,1.25 4.4,0 8.0076,-0.3375 8.0169,-0.75 z m 22.9831,-8.25 0,-39 4.5,0 4.5,0 0,35.5 0,35.5 12.5,0 12.5,0 0,3.5 0,3.5 -17,0 -17,0 0,-39 z m 66,0 0,-39 10.8185,0 c 13.1006,0 19.5032,1.66715 23.8974,6.2226 4.0792,4.22886 5.2892,7.58434 5.2621,14.5925 -0.03,7.63654 -2.7228,13.32586 -7.9442,16.7812 -2.9014,1.9201 -3.9362,3.19897 -3.4921,4.31614 0.3471,0.87316 3.2774,9.37412 6.512,18.89102 l 5.8809,17.30345 -4.6617,-0.30345 -4.6618,-0.30346 -6.0555,-17.74038 -6.0556,-17.74038 -5.25,-0.01 -5.25,-0.01 0,18 0,18 -4.5,0 -4.5,0 0,-39 z m 25.4603,-6.54819 c 4.0137,-1.90465 5.5397,-5.05912 5.5397,-11.45181 0,-9.65525 -3.9625,-13 -15.4011,-13 l -6.5989,0 0,13 0,13 6.5989,0 c 3.8853,0 7.9404,-0.63662 9.8614,-1.54819 z m 26.5397,6.52512 0,-39.02308 17.75,0.27308 17.75,0.27307 0,3.5 0,3.5 -13.75,0.27822 -13.75,0.27822 0,12.97178 0,12.97178 10,0 10,0 0,3.5 0,3.5 -10,0 -10,0 0,15 0,15 14.5,0 14.5,0 0,3.5 0,3.5 -18.5,0 -18.5,0 0,-39.02307 z m 199.23836,0.27307 0.2617,-38.75 13,0.0436 c 11.3748,0.0382 13.5208,0.3166 17.1658,2.22736 11.5331,6.04583 13.8757,22.95776 4.4744,32.30209 -2.0021,1.98998 -4.3152,3.85041 -5.1402,4.13429 -1.2324,0.42409 -0.3851,3.80419 4.75,18.94855 3.4375,10.13782 6.25,18.75003 6.25,19.13826 0,0.38822 -1.9875,0.70586 -4.4167,0.70586 l -4.4166,0 -5.9124,-17.75 -5.9123,-17.75 -5.671,-0.2999 -5.671,-0.29991 0,18.04991 0,18.0499 -4.5117,0 -4.5118,0 0.2618,-38.75 z m 26.5366,-7.2542 c 3.7513,-2.28715 5.2251,-5.42104 5.2251,-11.11056 0,-8.93364 -5.0503,-12.88524 -16.4679,-12.88524 l -6.5321,0 0,13 0,13 7.25,-0.004 c 5.4811,-0.003 8.049,-0.4909 10.5249,-2.00046 z m 78.2251,6.98113 0,-39.02308 17.75,0.27308 17.75,0.27307 0,3.5 0,3.5 -13.75,0.27822 -13.75,0.27822 0,12.97178 0,12.97178 10,0 10,0 0,3.5 0,3.5 -10,0 -10,0 0,15 0,15 14.5,0 14.5,0 0,3.5 0,3.5 -18.5,0 -18.5,0 0,-39.02307 z M 352.54371,257.82751 c -56.98007,-7.18259 -100.78049,-47.29455 -112.76929,-103.27292 -2.84801,-13.29797 -3.04192,-37.08067 -0.40142,-49.23367 5.96737,-27.465077 16.14884,-46.804397 34.82321,-66.145337 18.48838,-19.14831 40.30169,-31.0415203 67.7913,-36.9616703 11.75887,-2.53237997 37.13597,-2.53237997 48.89484,0 26.42244,5.69032 46.48849,16.2589603 65.13007,34.3035403 10.90172,10.55259 19.20454,21.55597 25.50576,33.80174 l 4.3435,8.44114 3.10576,-6.50753 c 7.90486,-16.56315 23.79001,-35.56368 39.42971,-47.16263 26.32855,-19.5261803 62.21635,-28.5760403 94.53778,-23.8396603 41.61806,6.0987 77.21031,31.3037403 96.93391,68.6448803 l 4.6799,8.8601 2.679,-5.83629 c 7.4483,-16.22702 23.5613,-35.59674 39.6739,-47.69271 22.504,-16.8941303 53.8567,-26.4846603 82.0333,-25.09334026 86.5426,4.27336996 144.19564,88.34537026 117.0503,170.68776726 -3.4857,10.57353 -11.5501,25.89306 -18.4638,35.07452 -19.6934,26.15333 -46.574,43.21995 -78.8528,50.06414 -14.3617,3.04514 -36.1058,3.04514 -50.4674,0 -39.1263,-8.29608 -70.5994,-31.99762 -89.1663,-67.14883 l -4.8582,-9.1977 -2.6709,5.83387 c -4.6621,10.1834 -15.4465,25.19851 -24.9331,34.71449 -32.63151,32.7323 -79.39487,45.68924 -123.29339,34.16147 -36.63789,-9.62112 -65.8591,-32.72011 -82.74023,-65.4051 l -4.76833,-9.23236 -3.68111,7.31775 c -6.21679,12.35848 -13.18104,21.85357 -24.14783,32.92324 -18.83043,19.00709 -40.1759,30.63048 -65.8641,35.8654 -11.46026,2.33546 -29.70375,3.27486 -39.53404,2.0357 z m 29.15105,-66.10862 c 21.26358,-5.05046 40.28994,-23.48342 46.85946,-45.39797 2.46885,-8.23559 2.47106,-25.77128 0.004,-33.94772 -8.23726,-27.303337 -30.83207,-45.536917 -58.52197,-47.226107 -31.53326,-1.92365 -60.7328,20.87319 -66.61978,52.011797 -1.81877,9.62024 -1.81648,13.89177 0.0129,24.16096 3.36142,18.86884 17.2077,36.99723 34.61416,45.31897 7.35985,3.51863 11.97131,4.9105 21.89108,6.60734 3.73906,0.63959 16.36911,-0.24688 21.75983,-1.52727 z M 354.21749,165.5444 c -12.46291,-4.45698 -20.60901,-12.82358 -24.41124,-25.07198 -5.61029,-18.07282 2.80801,-37.44533 19.93596,-45.877387 6.17498,-3.03993 7.36891,-3.27411 16.69272,-3.27411 9.3031,0 10.52655,0.23851 16.62603,3.24128 31.18302,15.351347 28.00219,60.850417 -4.98137,71.254117 -8.26175,2.60592 -16.06349,2.51702 -23.8621,-0.27192 z m 271.33519,24.38547 c 10.00794,-3.42672 20.71286,-10.41542 27.33572,-17.8461 6.29928,-7.06764 12.53354,-18.95094 14.63029,-27.88719 2.24684,-9.57599 1.52338,-26.50274 -1.51199,-35.37566 -5.07318,-14.829837 -17.28176,-29.197267 -30.84391,-36.298077 -10.94011,-5.72797 -17.09325,-7.15147 -30.72786,-7.10873 -10.3426,0.0324 -13.01303,0.39862 -19.3346,2.65142 -20.25162,7.21702 -34.77113,22.07401 -41.78419,42.755387 -2.82761,8.33856 -2.65042,28.07228 0.33671,37.5 5.26012,16.60155 16.97596,30.28244 32.55646,38.017 16.26337,8.07355 32.74959,9.27367 49.34337,3.59195 z m -50.61775,-60.60895 0,-38.499997 29.5,0 29.5,0 0,8 0,7.999997 -19.5,0 -19.5,0 0,6.97254 0,6.97255 14.25,0.27745 14.25,0.27746 0.29206,7.75 0.29207,7.75 -14.54207,0 -14.54206,0 0,7.5 0,7.5 19.5,0 19.5,0 0,8 0,8 -29.5,0 -29.5,0 0,-38.5 z m 285.33371,61.92049 c 16.5584,-4.27197 33.1963,-17.9922 40.6384,-33.51191 6.825,-14.23278 8.4808,-26.91003 5.4467,-41.70074 -7.0755,-34.492497 -41.3586,-56.939597 -75.9188,-49.708487 -18.4704,3.86459 -36.3166,17.77613 -44.2588,34.500647 -5.1298,10.80219 -6.6301,17.25122 -6.6301,28.5 0,11.36927 1.5167,17.8138 6.7074,28.5 7.0526,14.51946 21.7094,27.32907 37.1544,32.47179 11.2174,3.73508 24.7143,4.08245 36.8608,0.9487 z m -50.3337,-61.98809 0,-38.567597 22.8254,0.3176 22.8254,0.3176 5.8913,3.01532 c 9.7502,4.99043 14.3957,15.599947 11.5119,26.291347 -1.2308,4.5632 -6.9137,11.69662 -10.1318,12.71802 -1.0572,0.33555 -1.9222,1.06151 -1.9222,1.61326 0,0.55174 3.825,7.87614 8.5,16.27643 4.675,8.4003 8.5,15.56854 8.5,15.92944 0,0.3609 -5.0625,0.65073 -11.25,0.64408 l -11.25,-0.0121 -7.5,-14.47579 -7.5,-14.47579 -4.75,-0.0121 -4.75,-0.0121 0,14.5 0,14.5 -10.5,0 -10.5,0 0,-38.5676 z m 41.5816,-9.87353 c 2.1125,-2.89113 1.7726,-7.92809 -0.6852,-10.15388 -1.6582,-1.5017 -3.9869,-1.97898 -11,-2.25449 l -8.8964,-0.3495 0,7.69603 0,7.69603 9.5816,-0.34653 c 8.0882,-0.29252 9.8028,-0.6491 11,-2.28766 z"
                            id="path3999" 
                        />
                    </svg>
                </div>
            </div>
        </section>
        
        <section>
            <h2 style="margin-top: 40px; margin-bottom: 40px;">LearningResource (<a href="https://schema.org/LearningResource" target="_blank">schema.org</a>)</h2>
        </section>
        
        <section>
            <div class="grid3columns" id="section1-grid3">

                <div class="gridcolumn1">Name (Title)</div>
                <div class="gridcolumn2"><input type="text" name="title" id="Title" required='required'/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">Keep the title short. Use 'Description' for a detailed characterization of your resource.</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
				</div>

                <div class="gridcolumn1">LearningResourceType</div>
                <div class="gridcolumn2"><input type="text" name="learningResourceType" id="learningResourceType" list="LRtypes" required='required'/></div>
                    <datalist id="LRtypes">
                        <option value="assessment">
                        <option value="audio">
                        <option value="case_study">
                        <option value="data">
                        <option value="diagram">
                        <option value="drill_and_practice">
                        <option value="educational_game">
                        <option value="experiment">
                        <option value="image">
                        <option value="index">
                        <option value="lesson_plan">
                        <option value="map">
                        <option value="questionnaire">
                        <option value="script">
                        <option value="simulation">
                        <option value="slide">
                        <option value="text">
                        <option value="video">
                        <option value="web_page">
                        <option value="worksheet">
                        <option value="other ...">
                    </datalist>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">Select the predominant type or kind characterizing the learning resource (e.g. 'worksheet', 'experiment', 'lesson plan).</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div>

                <div class="gridcolumn1">Description</div>
                <div class="gridcolumn2"><textarea name="description" id="description"></textarea></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">Describe the topic and the intention of the resource.<br/>Note: Do not use quotation marks (") in the description, use apostrophe (') instead!</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div>

                <div class="gridcolumn1">Author</div>
                <div class="gridcolumn2"><input name="author" id="author" required="required" type="text" /></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The author's name.</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div>
                
                <div class="gridcolumn1">Language</div>
                <div class="gridcolumn2"><input name="inLanguage" id="inLanguage" list="lang" required="required" type="text" /></div>
                    <datalist id="lang">
                        <option value="German">
                        <option value="French">
                        <option value="Italian">
                        <option value="Romansh">
                        <option value="English">
                        <option value="other ...">
                    </datalist>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The predominant language of the resource.</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div>
                
                <div class="gridcolumn1">License</div>
                <div class="gridcolumn2"><input name="license" id="license" list="CC" required="required" type="text" /></div>
                    <datalist id="CC">
                        <option value="Public Domain (CC0)">
                        <option value="Attribution (CC BY)">
                        <option value="Attribution-NonCommercial (CC BY-NC)">
                        <option value="other ...">
                    </datalist>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">Select the appropriate Creative Commons license.</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div>
        
                <div class="gridcolumn1">URL</div>
                <div class="gridcolumn2"><input type="url" name="URL" id="URL" pattern="/((http|https)\:\/\/)?[a-zA-Z0-9\.\/\?\:@\-_=#]+\.([a-zA-Z0-9\&\.\/\?\:@\-_=#])*" required="required" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The Web address where the resource can be found (e.g. https://www.oercommons.org/courses/6-3-weather-climate-water-cycling).</span>
                    </div>
                    &nbsp;(mandatory)&nbsp;
                </div> 
                
            </div>
        </section>
        
        <br><hr style="border-top: 1px dotted"><br>
        
        <section>
            <div class="grid3columns" id="section2-grid3">
                
                <div class="gridcolumn1">Audience</div>
                <div class="gridcolumn2"><input  type="text" name="audience" id="audience" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">For whom is the resource suitable? Teachers? Learners? Experts?</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>
                
                <div class="gridcolumn1">InteractivityType</div>
                <div class="gridcolumn2"><input  type="text" name="interactivityType" id="interactivityType" list="interactivityTypes" value=""/></div>
                    <datalist id="interactivityTypes">
                        <option value="active">
                        <option value="expositive">
                        <option value="mixed">
                    </datalist>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">Does the resource expose content, activate the learners or both?</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>
                
                <div class="gridcolumn1">Keyword(s)</div>
                <div class="gridcolumn2"><input name="keywords" id="keywords" type="text" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The keyword(s) associated with the resource (not necessarily bound to a standard vocabulary).<br/>Use the comma (,) as separator!</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>
                
                <div class="gridcolumn1" id="contributor-1">Contributor</div>
                <div class="gridcolumn2" id="contribInput-1"><input name="contributor" id="contributor1" type="text" /></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The name of a contributor (if applicable).<br/>Klick the 'plus' sign for additional fields (max. 2).</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                    <span style="cursor:pointer;" onclick="addContributor();">&nbsp;&#10133;</span>
                </div>
                
                <div class="gridcolumn1">Reference &nbsp;(URL)&nbsp;</div>
                <div class="gridcolumn2"><input  type="url" name="reference" id="reference" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The URL of the resource this resource is based on (e.g. https://www.merlot.org/merlot/viewMaterial.htm?id=773401860).</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>

                <div class="gridcolumn1">Creation Date</div>
                <div class="gridcolumn2"><input  type="date" name="dateCreated" id="dateCreated" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The date the resource has been created (format: yyyy-mm-dd).</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>
                
                <div class="gridcolumn1">Modification Date</div>
                <div class="gridcolumn2"><input  type="date" name="dateModified" id="dateModified" value=""/></div>
                <div class="gridcolumn3">
                    <div class="tooltip">?
                        <span class="tooltiptext">The date of the last modification of the resource (format: yyyy-mm-dd).</span>
                    </div>
                    &nbsp;(optional)&nbsp;
                </div>
                
            </div>
        </section>
        
        <br><hr style="border-top: 1px solid;"><br>
        
        <section>
            <button class="btn" onclick = "generateMetadata ();">Generate Metadata</button>
            <div class="result" id="resultOutput">
                <pre>&lt;script type="application/ld+json"&gt;</pre>
                <pre>{</pre>
                <pre>  "@context" : "http://schema.org/",</pre>
                <pre id="beginMetadata">  "@type" : "LearningResource",</pre>
                <pre>}</pre>
                <pre>&lt;/script&gt;</pre>
            </div>
        </section>

	</div>
</body>
</html>