From 431503dbca5751495f3005f18e334197625b4967 Mon Sep 17 00:00:00 2001
From: Mirjan Hoffmann <mirjan.hoffmann@tib.eu>
Date: Mon, 7 Mar 2022 14:24:58 +0100
Subject: [PATCH] first draft (based on
 https://gitlab.com/TIBHannover/oer/course-metadata-gitlab-form)

---
 .gitignore              |   1 +
 .gitlab-ci.yml          |  11 +
 README.md               |   7 +
 i18n/de.json            |  19 ++
 i18n/en.json            |   6 +
 i18n/hcrt-de.json       |  27 ++
 i18n/hcrt-en.json       |  27 ++
 metadata-generator.html | 547 ++++++++++++++++++++++++++++++++++++++++
 8 files changed, 645 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .gitlab-ci.yml
 create mode 100644 README.md
 create mode 100644 i18n/de.json
 create mode 100644 i18n/en.json
 create mode 100644 i18n/hcrt-de.json
 create mode 100644 i18n/hcrt-en.json
 create mode 100644 metadata-generator.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..723ef36
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..b42b171
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,11 @@
+pages:
+  stage: deploy
+  script:
+    - mkdir .public
+    - cp -r * .public
+    - mv .public public
+  artifacts:
+    paths:
+      - public
+  only:
+    - master
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a9bf408
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# Metadata GitLab Form
+
+Simple user interface to collect standard metadata and create a yml file.
+
+* simple HTML/JS file, that form entries into a yml format
+
+[Form](https://oersi.gitlab.io/metadata-gitlab-form/metadata-generator.html)
diff --git a/i18n/de.json b/i18n/de.json
new file mode 100644
index 0000000..c47800b
--- /dev/null
+++ b/i18n/de.json
@@ -0,0 +1,19 @@
+{
+  "FORM_HEADING": "OER Metadaten Formular",
+  "LABEL_CREATOR_ADD": " weiteren Autor hinzufügen",
+  "LABEL_CREATOR_GIVEN_NAME": "Vorname",
+  "LABEL_CREATOR_ID": "(Optional) Persönliche ID (wie ORCID, GND, ...)",
+  "LABEL_CREATOR_LAST_NAME": "Nachname",
+  "LABEL_CREATOR_REMOVE": " Autor entfernen",
+  "LABEL_DESCRIPTION": "Zusammenfassung",
+  "LABEL_KEYWORDS": "Schlagworte",
+  "LABEL_KEYWORDS_PLACEHOLDER": "Komma getrennte Liste von Schlagworten",
+  "LABEL_LEARNINGRESOURCETYPE": "Materialart",
+  "LABEL_LEARNINGRESOURCETYPE_CHOOSE": "Wähle eine Materialart ...",
+  "LABEL_MANDATORY_FIELD": "Pflichtfeld",
+  "LABEL_STATUS": "Status",
+  "LABEL_STATUS_DRAFT": "Entwurf",
+  "LABEL_STATUS_INCOMPLETE": "Unvollständig",
+  "LABEL_STATUS_PUBLISHED": "Veröffentlicht",
+  "LABEL_TITLE": "Titel"
+}
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
new file mode 100644
index 0000000..7baae7d
--- /dev/null
+++ b/i18n/en.json
@@ -0,0 +1,6 @@
+{
+  "FORM_HEADING": "OER Metadata Form",
+  "LABEL_DESCRIPTION": "Abstract",
+  "LABEL_MANDATORY_FIELD": "Mandatory field",
+  "LABEL_TITLE": "Title"
+}
\ No newline at end of file
diff --git a/i18n/hcrt-de.json b/i18n/hcrt-de.json
new file mode 100644
index 0000000..676da55
--- /dev/null
+++ b/i18n/hcrt-de.json
@@ -0,0 +1,27 @@
+{
+  "https://w3id.org/kim/hcrt/image": "Abbildung",
+  "https://w3id.org/kim/hcrt/worksheet": "Arbeitsmaterial",
+  "https://w3id.org/kim/hcrt/data": "Daten",
+  "https://w3id.org/kim/hcrt/diagram": "Diagramm",
+  "https://w3id.org/kim/hcrt/experiment": "Experiment",
+  "https://w3id.org/kim/hcrt/case_study": "Fallstudie",
+  "https://w3id.org/kim/hcrt/questionnaire": "Fragebogen",
+  "https://w3id.org/kim/hcrt/map": "Karte",
+  "https://w3id.org/kim/hcrt/course": "Kurs",
+  "https://w3id.org/kim/hcrt/textbook": "Lehrbuch",
+  "https://w3id.org/kim/hcrt/assessment": "Lernkontrolle",
+  "https://w3id.org/kim/hcrt/educational_game": "Lernspiel",
+  "https://w3id.org/kim/hcrt/index": "Nachschlagewerk",
+  "https://w3id.org/kim/hcrt/portal": "Portal",
+  "https://w3id.org/kim/hcrt/slide": "Präsentation",
+  "https://w3id.org/kim/hcrt/simulation": "Simulation",
+  "https://w3id.org/kim/hcrt/script": "Skript",
+  "https://w3id.org/kim/hcrt/application": "Softwareanwendung",
+  "https://w3id.org/kim/hcrt/other": "Sonstiges",
+  "https://w3id.org/kim/hcrt/text": "Textdokument",
+  "https://w3id.org/kim/hcrt/audio": "Tonaufnahme",
+  "https://w3id.org/kim/hcrt/lesson_plan": "Unterrichtsplanung",
+  "https://w3id.org/kim/hcrt/drill_and_practice": "Übung",
+  "https://w3id.org/kim/hcrt/video": "Video",
+  "https://w3id.org/kim/hcrt/web_page": "Webseite"
+}
\ No newline at end of file
diff --git a/i18n/hcrt-en.json b/i18n/hcrt-en.json
new file mode 100644
index 0000000..adbf055
--- /dev/null
+++ b/i18n/hcrt-en.json
@@ -0,0 +1,27 @@
+{
+  "https://w3id.org/kim/hcrt/simulation": "Simulation",
+  "https://w3id.org/kim/hcrt/portal": "Web Portal",
+  "https://w3id.org/kim/hcrt/case_study": "Case Study",
+  "https://w3id.org/kim/hcrt/slide": "Presentation",
+  "https://w3id.org/kim/hcrt/lesson_plan": "Lesson Plan",
+  "https://w3id.org/kim/hcrt/educational_game": "Game",
+  "https://w3id.org/kim/hcrt/experiment": "Experiment",
+  "https://w3id.org/kim/hcrt/data": "Data",
+  "https://w3id.org/kim/hcrt/other": "Other",
+  "https://w3id.org/kim/hcrt/script": "Script",
+  "https://w3id.org/kim/hcrt/assessment": "Assessment",
+  "https://w3id.org/kim/hcrt/video": "Video",
+  "https://w3id.org/kim/hcrt/diagram": "Diagram",
+  "https://w3id.org/kim/hcrt/questionnaire": "Questionnaire",
+  "https://w3id.org/kim/hcrt/course": "Course",
+  "https://w3id.org/kim/hcrt/audio": "Audio Recording",
+  "https://w3id.org/kim/hcrt/textbook": "Textbook",
+  "https://w3id.org/kim/hcrt/text": "Text",
+  "https://w3id.org/kim/hcrt/map": "Map",
+  "https://w3id.org/kim/hcrt/web_page": "Web Page",
+  "https://w3id.org/kim/hcrt/image": "Image",
+  "https://w3id.org/kim/hcrt/worksheet": "Worksheet",
+  "https://w3id.org/kim/hcrt/application": "Software Application",
+  "https://w3id.org/kim/hcrt/index": "Reference Work",
+  "https://w3id.org/kim/hcrt/drill_and_practice": "Drill and Practice"
+}
\ No newline at end of file
diff --git a/metadata-generator.html b/metadata-generator.html
new file mode 100644
index 0000000..23059e4
--- /dev/null
+++ b/metadata-generator.html
@@ -0,0 +1,547 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <title>OER-Portal Niedersachsen - Material einreichen</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> -->
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"/>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
+
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
+
+  <!-- (Optional) Latest compiled and minified JavaScript translation files -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-de_DE.min.js"></script>
+  <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
+  <style>
+      .btn-primary {
+          background-color: #0A1F40;
+          border: 0;
+      }
+
+      .menu {
+          background-color: #ffffff;
+          float: left;
+          width: 20%;
+          padding: 15px;
+          margin-top: 7px;
+          text-align: center;
+      }
+
+      .menu a {
+          background-color: #e5e5e5;
+          padding: 8px;
+          margin-top: 7px;
+          display: block;
+          width: 100%;
+          color: black;
+      }
+
+      .main {
+          margin-top: 40px;
+          float: left;
+          width: 60%;
+          padding: 0 20px;
+          margin-bottom: 120px;
+      }
+
+      .right {
+          background-color: #ffffff;
+          float: left;
+          width: 20%;
+          padding: 15px;
+          margin-top: 7px;
+          text-align: center;
+      }
+  </style>
+
+</head>
+<body>
+
+<div style="overflow:auto">
+  <div class="menu"></div>
+
+  <div class="main">
+
+    <div class="container">
+      <div>
+        <select id="languageSelector" name="lang">
+          <option value="en">English</option>
+          <option value="de" selected>Deutsch</option>
+        </select>
+      </div>
+      <h2 style="margin-bottom:40px;" data-i18n="FORM_HEADING">OER Metadaten Formular</h2>
+      <form class="was-validated">
+        <div class="form-group row">
+          <label for="inputStatus" class="col-sm-2 col-form-label" data-i18n="LABEL_STATUS">Status</label>
+          <div class="col-sm-10">
+            <select class="custom-select" id="inputStatus" required>
+              <option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
+              <option value="Draft" data-i18n="LABEL_STATUS_DRAFT">Entwurf</option>
+              <option value="Incomplete" data-i18n="LABEL_STATUS_INCOMPLETE">Unvollständig</option>
+            </select>
+            <div class="valid-feedback"></div>
+            <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputTitle" class="col-sm-2 col-form-label" data-i18n="LABEL_TITLE">Titel</label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control" id="inputTitle" placeholder="Titel"
+                   data-i18n-placeholder="LABEL_TITLE" value="" required>
+            <div class="valid-feedback"></div>
+            <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputDescription" class="col-sm-2 col-form-label"
+                 data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
+          <div class="col-sm-10">
+            <textarea class="form-control" id="inputDescription" placeholder="Beschreibung"
+                      data-i18n-placeholder="LABEL_DESCRIPTION" value=""></textarea>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputTags" class="col-sm-2 col-form-label" data-i18n="LABEL_KEYWORDS">Schlagworte</label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control" id="inputTags" placeholder="Komma getrennte Liste von Schlagworten"
+                   data-i18n-placeholder="LABEL_KEYWORDS_PLACEHOLDER" value="">
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputResourceType" class="col-sm-2 col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
+          <div class="col-sm-10">
+            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="inputResourceType" required>
+              <option value="" data-i18n="LABEL_LEARNINGRESOURCETYPE_CHOOSE" selected>Wähle eine Materialart ...
+              </option>
+            </select>
+            <div class="valid-feedback"></div>
+            <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="creator-list" class="col-sm-2 col-form-label">Autor</label>
+          <div class="col-sm-10 form-row">
+            <ul class="list-group col" id="creator-list">
+              <li class="list-group-item">
+                <button type="button" onclick="addCreator()" class="btn btn-primary"><i class="fa fa-plus"></i><span
+                        data-i18n="LABEL_CREATOR_ADD"> Autor entfernen</span></button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputLanguage" class="col-sm-2 col-form-label">Sprache</label>
+          <div class="col-sm-10">
+            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="inputLanguage" required>
+              <!-- <option selected>Wähle ...</option> -->
+              <option value="de">Deutsch</option>
+              <option value="en">Englisch</option>
+              <option value="fr">Französisch</option>
+              <option value="es">Spanisch</option>
+            </select>
+            <div class="valid-feedback"></div>
+            <div class="invalid-feedback">Pflichtfeld</div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputLicense" class="col-sm-2 col-form-label">Lizenz</label>
+          <div class="col-sm-7">
+            <div class="form-check">
+              <label class="form-check-label">
+                <input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseBY" value="BY"
+                       checked="true">darf ohne Namensnennung verwendet werden
+              </label>
+            </div>
+            <div class="form-check">
+              <label class="form-check-label">
+                <input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseSA" value="SA"
+                       checked="true">darf unter anderer Lizenz veröffentlicht werden
+              </label>
+            </div>
+            <div class="form-check">
+              <label class="form-check-label">
+                <input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseND" value="ND"
+                       checked="true">darf verändert werden
+              </label>
+            </div>
+            <div class="form-check">
+              <label class="form-check-label">
+                <input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseNC" value="NC"
+                       checked="true">darf kommerziell genutzt werden
+                <input type="hidden" id="licenseUrl"
+                       value="https://creativecommons.org/share-your-work/public-domain/cc0/">
+              </label>
+            </div>
+          </div>
+          <div class="col-sm-3">
+            <label for="inputLicense" id="choosenLicense" class="col-sm-10 col-form-label">CC-0</label>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputFunder" class="col-sm-2 col-form-label">Institution</label>
+          <div class="col-sm-10">
+            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="inputFunder">
+              <option selected>Wähle ...</option>
+              <option value="TUBS">Braunschweig - Technische Universität</option>
+              <option value="HSBS">Braunschweig - Hochschule für Bildende Künste</option>
+              <option value="TUCZ">Clausthal-Zellerfeld - Technische Universität</option>
+              <option value="JHEF">Elsfleth - Jade Hochschule</option>
+              <option value="HSELE">Emden - Hochschule Emden/Leer</option>
+              <option value="GAUG">Göttingen - Georg August Universität</option>
+              <option value="HSG">Göttingen - Hochschule für angewandte Wissenschaft und Kust</option>
+              <option value="LUH">Hannover - Leibniz Universität</option>
+              <option value="HSH">Hannover - Hochschule</option>
+              <option value="MHH">Hannover - Medizinische Hochschule</option>
+              <option value="TIB">Hannover - Technische Informationsbibliothek (TIB)</option>
+              <option value="THH">Hannover - Tierärztliche Hochschule</option>
+              <option value="HSMTMH">Hannover - Hochschule für Musik, Theater und Medien</option>
+              <option value="SUHI">Hildesheim - Stiftung Universität</option>
+              <option value="AWKHI">Hildesheim - Hochschule für angewandte Wissenschaft und Kust</option>
+              <option value="NHRHI">Hildesheim - Norddeutsche Hochschule für Rechtspflege</option>
+              <option value="AWKHO">Holzminden - Hochschule für angewandte Wissenschaft und Kust</option>
+              <option value="HSELL">Leer - Hochschule Emden/Leer</option>
+              <option value="HSOSLI">Lingen - Hochschule Osnabrück</option>
+              <option value="LULU">Lüneburg - Leuphana Universität</option>
+              <option value="COUOL">Oldenburg - Carl von Ossietzky Universität</option>
+              <option value="JHOL">Oldenburg - Jade Hochschule</option>
+              <option value="UOS">Osnabrück - Universität Osnabrück</option>
+              <option value="HSOS">Osnabrück - Hochschule Osnabrück</option>
+              <option value="OHAWSZ">Salzgitter - Ostfalia Hochschule für angewandte Wissenschaften</option>
+              <option value="OHAWSU">Suderburg - Ostfalia Hochschule für angewandte Wissenschaften</option>
+              <option value="UVE">Vechta - Universität Vechta</option>
+              <option value="JHWH">Wilhelmshaven - Jade Hochschule</option>
+              <option value="OHAWWF">Wolfenbüttel - Ostfalia Hochschule für angewandte Wissenschaften</option>
+              <option value="OHAWWO">Wolfsburg - Ostfalia Hochschule für angewandte Wissenschaften</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputDescrition" class="col-sm-2 col-form-label">Schulart</label>
+          <div class="col-sm-10">
+            <select style="background: #F1F6DF; color: #0A1F40;" class="custom-select" id="schooltype">
+              <option selected>Wähle ...</option>
+              <option value="HS">Hochschule</option>
+              <option value="GS">Grundschule</option>
+              <option value="GY">Gymnasium</option>
+            </select>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputSubjectOf" class="col-sm-2 col-form-label">Fach</label>
+          <div class="col-sm-10">
+            <select style="background-color: #F1F6DF; color: #0A1F40;" class="selectpicker" id="inputSubjectOf"
+                    data-live-search="true">
+              <option selected>Wähle ...</option>
+              <optgroup label="Hochschule">
+                <option data-tokens="ba">Bauingenieurwesen</option>
+                <option data-tokens="ma">Medizin</option>
+                <option data-tokens="ph">Betriebswirtschaft</option>
+              </optgroup>
+              <optgroup label="Gymnasium">
+                <option data-tokens="ma">Mathematik</option>
+                <option data-tokens="ph">Physik</option>
+                <option data-tokens="ba">Erdkunde</option>
+              </optgroup>
+            </select>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputDescrition" class="col-sm-2 col-form-label">Gebiet</label>
+          <div class="col-sm-10">
+            <select style="background-color: #F1F6DF; color: #0A1F40;" class="selectpicker" data-live-search="true">
+              <option selected>Wähle ...</option>
+              <optgroup label="Bauingenieurwesen">
+                <option data-tokens="ek">Verkehr</option>
+                <option data-tokens="ma">Mathematik</option>
+                <option data-tokens="ph">Mechanik</option>
+                <option data-tokens="ek">Statik</option>
+                <option data-tokens="ek">Holzbau</option>
+              </optgroup>
+              <optgroup label="Mathematik">
+                <option data-tokens="ma">Geometrie</option>
+                <option data-tokens="ph">Zahlensysteme</option>
+                <option data-tokens="ek">Gleichungssysteme</option>
+                <option data-tokens="ek">Stochastik</option>
+              </optgroup>
+            </select>
+          </div>
+        </div>
+
+        <button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> Generieren
+        </button>
+        <!-- <button type="button" onclick="read()" class="btn btn-primary"><i class="fa fa-arrow-up"></i>Einlesen</button> -->
+        <div class="form-group">
+          <label for="comment">YAML Metadaten</label>
+          <textarea class="form-control" rows="5" id="comment"></textarea>
+        </div>
+      </form>
+    </div>
+
+  </div>
+
+  <div class="right"></div>
+</div>
+
+<script>
+  loadVocabs()
+  i18nLoader()
+  chooseLicense()
+  addCreator()
+
+  function loadVocabs() {
+    $(document).ready(function () {
+      $.getJSON("vocabs/hcrt.json", function (result) {
+        $.each(result, function (i, item) {
+          $("#inputResourceType").append('<option value="' + item + '" data-i18n="' + item + '"></option>');
+        });
+      });
+    });
+  }
+
+  var licenses = [
+    {
+      shortName: "CC-0",
+      color: "green",
+      name: "Public Domain",
+      url: "https://creativecommons.org/publicdomain/zero/1.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY",
+      color: "green",
+      name: "Namensnennung 4.0 International",
+      url: "https://creativecommons.org/licenses/by/4.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY-SA",
+      color: "yellow",
+      name: "Namensnennung - Weitergabe unter gleichen Bedingungen 4.0 International",
+      url: "https://creativecommons.org/licenses/by-sa/4.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY-ND",
+      color: "orange",
+      name: "Namensnennung - Keine Bearbeitungen 4.0 International",
+      url: "https://creativecommons.org/licenses/by-nd/4.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY-NC",
+      color: "red",
+      name: "Namensnennung-Nicht kommerziell 4.0 International",
+      url: "https://creativecommons.org/licenses/by-nc/4.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY-SA-NC",
+      color: "red",
+      name: "Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International",
+      url: "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.de",
+      icon: ""
+    },
+    {
+      shortName: "CC BY-ND-NC",
+      color: "red",
+      name: "Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0 International",
+      url: "https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de",
+      icon: ""
+    }
+  ];
+
+
+  function chooseLicense() {
+    var by = document.getElementById("inputLicenseBY")
+    var sa = document.getElementById("inputLicenseSA")
+    var nd = document.getElementById("inputLicenseND")
+    var nc = document.getElementById("inputLicenseNC")
+    var licenseShortName = "CC"
+    if (by.checked === false) {
+      licenseShortName += " " + by.value
+    }
+    if (sa.checked == false) {
+      licenseShortName += "-" + sa.value
+    }
+    if (nd.checked == false) {
+      licenseShortName += "-" + nd.value
+    }
+    if (nc.checked == false) {
+      licenseShortName += "-" + nc.value
+    }
+    if (licenseShortName == "CC") {
+      licenseShortName = "CC-0"
+    }
+    document.getElementById("choosenLicense").innerText = licenseShortName
+
+    var color = ""
+    switch (licenseShortName) {
+      case "CC-0":
+        color = "green"
+        break;
+      case "CC BY":
+        color = "green"
+        break;
+      case "CC BY-SA":
+        color = "orange"
+        break;
+      case "CC BY-ND":
+        color = "orange"
+        break;
+      case "CC BY-NC":
+        color = "red"
+        break;
+      case "CC BY-SA-NC":
+        color = "red"
+        break;
+      case "CC BY-ND-NC":
+        color = "red"
+        break;
+      default:
+        color = "grey"
+        document.getElementById("choosenLicense").innerText = "keine gültige Lizenz"
+        document.getElementById("licenseUrl").value = ""
+    }
+    document.getElementById("choosenLicense").style.color = color
+
+    for (x in licenses) {
+      if (licenses[x].shortName === licenseShortName) {
+        document.getElementById("licenseUrl").value = licenses[x].url
+      }
+    }
+  }
+
+  function splitKeywords(keywordString) {
+    var keywords = keywordString.split(",");
+    var listString = "";
+    for (x in keywords) {
+      listString += "  - \"" + keywords[x].trim() + "\"\n";
+    }
+    return listString;
+  }
+
+  function addCreator() {
+    const creatorList = document.getElementById("creator-list");
+    const item = document.createElement("li");
+    item.setAttribute("class", "list-group-item");
+    item.innerHTML = `
+    <div class="form-row">
+      <div class="col">
+        <input type="text" class="form-control inputGivenName" placeholder="Vorname" data-i18n-placeholder="LABEL_CREATOR_GIVEN_NAME" value="" required>
+          <div class="valid-feedback"></div>
+          <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+      </div>
+      <div class="col">
+        <input type="text" class="form-control inputFamilyName" placeholder="Nachname" data-i18n-placeholder="LABEL_CREATOR_LAST_NAME" value="" required>
+          <div class="valid-feedback"></div>
+          <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="col">
+        <input type="text" class="form-control inputAuthorId" placeholder="Persönliche ID (optional, wie ORCID, GND)" data-i18n-placeholder="LABEL_CREATOR_ID" value="">
+      </div>
+    </div>
+    <div class="form-row mt-2">
+      <div class="col">
+        <button type="button" onclick="removeCreator(this.parentNode.parentNode.parentNode)" class="btn btn-primary"><i class="fa fa-minus"></i><span data-i18n="LABEL_CREATOR_REMOVE"> Autor entfernen</span></button>
+      </div>
+    </div>
+    `;
+
+    creatorList.insertBefore(item, creatorList.lastElementChild);
+    updateContent();
+  }
+
+  function removeCreator(creatorListItem) {
+    creatorListItem.parentNode.removeChild(creatorListItem);
+  }
+
+  function getCreators() {
+    const creatorsElement = document.getElementById("creator-list").querySelectorAll(".list-group-item");
+    const creators = [];
+    for (let i = 0; i < creatorsElement.length - 1; i++) {
+      creators.push({
+        name: (creatorsElement[i].getElementsByClassName("inputGivenName")[0].value
+          + " "
+          + creatorsElement[i].getElementsByClassName("inputFamilyName")[0].value).trim(),
+        givenName: creatorsElement[i].getElementsByClassName("inputGivenName")[0].value,
+        familyName: creatorsElement[i].getElementsByClassName("inputFamilyName")[0].value,
+        creatorId: creatorsElement[i].getElementsByClassName("inputAuthorId")[0].value
+      });
+    }
+    return creators;
+  }
+
+  function generate() {
+    var meta = "---\n"
+    meta += "name: \"" + document.getElementById("inputTitle").value + "\"\n"
+    meta += "creator:\n"
+    meta += getCreators().map((c) => "  - name: \"" + c.name + "\"" + (c.creatorId ? "\n    id: \"" + c.creatorId + "\"" : "")).join("\n") + "\n"
+    meta += "keywords:\n"
+    meta += splitKeywords(document.getElementById("inputTags").value)
+    meta += "description: \"" + document.getElementById("inputDescription").value + "\"\n"
+    meta += "inLanguage: \"" + document.getElementById("inputLanguage").value + "\"\n"
+    meta += "funder: \"" + document.getElementById("inputFunder").value + "\"\n"
+    meta += "subjectOf: \"" + document.getElementById("inputSubjectOf").value + "\"\n"
+    meta += "version: 1.0\n"
+    meta += "license: \"" + document.getElementById("licenseUrl").value + "\"\n"
+    meta += "thumbnailUrl: http://placehold.it/100x100\n"
+    meta += "learningResourceType: \"" + document.getElementById("inputResourceType").value + "\"\n"
+    document.getElementById("comment").value = meta;
+  }
+
+  async function i18nLoader() {
+    const langs = ["en", "de"];
+    const jsons = await Promise.all(
+      langs.map((l) => fetch("i18n/" + l + ".json").then((r) => r.json()))
+    );
+    const hcrt = await Promise.all(
+      langs.map((l) => fetch("i18n/hcrt-" + l + ".json").then((r) => r.json()))
+    );
+    const res = langs.reduce((acc, l, idx) => {
+      acc[l] = {translation: {...jsons[idx], ...hcrt[idx]}};
+      return acc;
+    }, {});
+    await i18next.init({
+      lng: "de",
+      debug: false,
+      nsSeparator: "#",
+      resources: res
+    });
+    updateContent();
+    i18next.on("languageChanged", () => {
+      updateContent();
+    });
+    const langSelector = document.getElementById("languageSelector");
+    langSelector.addEventListener("change", (e) => {
+      i18next.changeLanguage(e.target.value);
+    });
+  }
+
+  function updateContent() {
+    let elements = document.querySelectorAll('[data-i18n]');
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      const k = element.getAttribute("data-i18n");
+      element.innerHTML = i18next.t(k);
+    }
+    elements = document.querySelectorAll('[data-i18n-placeholder]');
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      const k = element.getAttribute("data-i18n-placeholder");
+      element.setAttribute("placeholder", i18next.t(k));
+    }
+  }
+</script>
+
+</body>
+</html>