Changes to example content.

Example content is now a working board game sans Images.
It can be uploaded using the H5P module too. It will work. (At least with the next commit)

css/questionset.css

@@ -0,0 +1,27 @@
+.dots-container {
+  text-align: center;
+}
+.progress-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.progress-dot.unanswered {
+  background: darkred;
+}
+.progress-dot.answered {
+  background: darkgreen;
+}
+.progress-dot.current {
+  box-shadow: 0px 0px 6px firebrick;
+}
+.intro-page {
+  background: white;
+  position: absolute;
+  z-index: 20;
+  height: 100%;
+  width: 100%;
+  left: 0px;
+  top: 0px;
+}

js/questionset.js

@@ -19,35 +19,6 @@ H5P.QuestionSet = function (options) {
   var $ = H5P.jQuery;
 
   var texttemplate = '' +
-'<style type="text/css">' +
-'.dots-container {' +
-'  text-align: center;' +
-'}' +
-'.progress-dot {' +
-'  display: inline-block;' +
-'  width: 10px;' +
-'  height: 10px;' +
-'  border-radius: 50%;' +
-'}' +
-'.progress-dot.unanswered {' +
-'  background: darkred;' +
-'}' +
-'.progress-dot.answered {' +
-'  background: darkgreen;' +
-'}' +
-'.progress-dot.current {' +
-'  box-shadow: 0px 0px 6px firebrick;' +
-'}' +
-'.intro-page {' +
-'  background: white;' +
-'  position: absolute;' +
-'  z-index: 20;' +
-'  height: 100%;' +
-'  width: 100%;' +
-'  left: 0px;' +
-'  top: 0px;' +
-'}' +
-'</style>' +
 '<div class="questionset">' +
 '  <% if (introPage.showIntroPage) { %>' +
 '  <div class="intro-page">' +
@@ -197,10 +168,17 @@ H5P.QuestionSet = function (options) {
 
   // Function for attaching the multichoice to a DOM element.
   var attach = function (targetId) {
+    if (typeof(target) == "string") {
+      target = $("#" + target);
+    } else {
+      target = $(target);
+    }
+
     // Render own DOM into target.
-    template.update(targetId, params);
+    $myDom = target;
-    $myDom = $('#' + targetId);
+    $myDom.html(template.render(params)).css({
-    $myDom.css({backgroundImage: 'url(' + params.backgroundImage + ')'});
+      backgroundImage: 'url(' + params.backgroundImage + ')'
+    });
 
     // Attach questions
     for (var i=0; i<questionInstances.length; i++) {

library.json

@@ -0,0 +1,16 @@
+{
+  "title": "Question set",
+  "contentType": "question",
+  "majorVersion": 1,
+  "minorVersion": 0,
+  "patchVersion": 0,
+  "machineName": "H5P.QuestionSet",
+  "author": "Amendor AS",
+  "license": "cc-by-sa",
+  "preloadedJs": [
+    {"path": "js/questionset.js"}
+  ],
+  "preloadedCss": [
+    {"path": "css/questionset.css"}
+  ]
+}

views/questionset.ejs

@@ -1,32 +1,3 @@
-<style type="text/css">
-.dots-container {
-  text-align: center;
-}
-.progress-dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.progress-dot.unanswered {
-  background: darkred;
-}
-.progress-dot.answered {
-  background: darkgreen;
-}
-.progress-dot.current {
-  box-shadow: 0px 0px 6px firebrick;
-}
-.intro-page {
-  background: white;
-  position: absolute;
-  z-index: 20;
-  height: 100%;
-  width: 100%;
-  left: 0px;
-  top: 0px;
-}
-</style>
 <div class="questionset">
   <% if (introPage.showIntroPage) { %>
   <div class="intro-page">